/* CarZakaz site-wide design tokens (UI v6, R1), plus the gated v6 base layer (R6a, at the end).
   Font faces and custom properties; the only element styles are the base layer's, every one of them under [data-cz-ui="6"], so they do nothing until CZ_UI prints that attribute (R8). The components (cz-car-card.css, homepage-catalog.css, car-detail.css, car-catalog.css) read these tokens
   directly; the scoped token copies they once held were removed in R2. Only the 11 tokens added in R1 (--cz-on-red, --cz-text-max, --cz-photo-bg, --cz-pressed, --cz-skel-1, --cz-skel-2, --cz-chip-fill, --cz-field-line, --cz-chip-line, --cz-dot, --cz-tooltip-bg) are read with today's dark value as the var() fallback; the original tokens (--cz-text, --cz-surface and so on) are read bare, so a page without this file loses its colours. Theme comes from data-brx-theme on <html> (printed by CZ_UI, includes/ui/class-cz-ui.php); color-scheme applies only under [data-cz-ui="6"]. Guarded by tests/frontend/tokens.test.js. */

/* Self-hosted faces (UI v6 R5): variable WOFF2 per family, a thin-space subset for Geologica, metric-matched Arial fallbacks. Unused until a token below names them. */
@font-face {
    font-family: "CZ Geologica";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("../fonts/cz-geologica.woff2") format("woff2");
    unicode-range: U+0020-007E, U+00A0-0148, U+014A-017E, U+02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+20A9, U+20AC, U+20BD, U+2116, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}

@font-face {
    font-family: "CZ Golos";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/cz-golos.woff2") format("woff2");
    unicode-range: U+0020-007E, U+00A0-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0133, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-0161, U+0164-0165, U+016A-017E, U+02BC, U+02C6, U+02DA, U+02DC, U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+0490-0491, U+2009, U+2010-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2039-203A, U+20AC, U+20BD, U+2116, U+2122, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

@font-face {
    font-family: "CZ Geologica";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(data:font/woff2;base64,d09GMgABAAAAAAM0ABAAAAAACEAAAALdAAIBBgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVQuADwRCAoBLgE2AiQDCgsIAAQgBYoyByAXJBgIG0sHCB4FbssDZzKdy8vFPslYQecdD9/vxzr3vY+4NPNIE88QCp1KJjGdksS37obEJq1MZyv/ai4vRVJVnZXFJAVWDwA2cAG6zN0+Klkjq1Ho7xtVoX6KOLj9xZaQ9//fO/4DpHV83doE6Td87zX28dvwrlhjggYURmuD9THeQF/bwFnmmbbRvkZrqiLiRMSJ2eO/gwVq9TshbWXLbbKhgLIEZM5Jp5YG2zvXMCLH4v2gSIfStQrSVeoTYvu5Pk7JjX9SXUVOg0Zxif1/2YDkZ7gGZvK8HEfyu0dAak0fGLYihGqBdhL6LV3YDkqQZKSIuCZ9AwkZ7ZYF2q2YRlQqhIRlMcT1O/8W/35JACHKUhPIoNIQVkDCyS0qn95+ls/2N/9v5PwBv76+5xD+/ZktAFApgSA8xqdTQ0gkQWneW+8lo9ADLWZGFDW4ZQWh3TskjX5AtmoOhfHsQIXeqFBpNEWoch8BVOsuQI3FPkGd2QZQb6830BCj6Q8aLe+Oq8fRJkOC+uIkFX6Nf5jYBOeyORC4obr2DLQ5KJDDBBgBtFFjCNRxjIcyIJAwgBwMJ4BTDoRiwguFwuZCjgGdzMCEW10YxhagLEwEiS7gtivY/czTUZoo20BAw92QqVR3XtUlNCW80sdap6ujethKUuyiIYe4mAhA1omhNofb7AJjpUZ7GwWkAXG6UixxnACNBdRJ0zYRjQfKkEnmFDPkAMVGRJdkAmhGJio0zvmgYS0hKqIhaoPbE2Qlif/rgI8Z0lwCXS6kCUyAkoGpkCsqRWo0FWQxSsVYQRqqSyjdRAUpJSajJdmCXIwCyqoaD16dx04Bl4GKiPRwIGrEAcQxky8KykBNjIoA2stG0mXFAknXbOavrTo+xpRnnHLLhLpAgCOuHwQaHhMaq/7oBSToKxg4l5Agu8GAzHERbIqarLK6Wv1LPfRTuesyUD6YNzxKNJM+v3byB99vIu7ye57nOQ==) format("woff2");
    unicode-range: U+2009, U+202F;
}

/* Arial stand-ins sized to the web fonts so the swap does not shift the layout */
@font-face {
    font-family: "CZ Geologica Fallback";
    font-weight: 500 800;
    src: local("Arial Bold"), local("Arial-BoldMT");
    size-adjust: 104.37%;
    ascent-override: 93.41%;
    descent-override: 26.35%;
    line-gap-override: 0.00%;
}

@font-face {
    font-family: "CZ Golos Fallback";
    font-weight: 400 700;
    src: local("Arial"), local("ArialMT");
    size-adjust: 106.18%;
    ascent-override: 92.29%;
    descent-override: 20.72%;
    line-gap-override: 0.00%;
}

:root {
    --cz-font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cz-display: "Oswald", "Rubik", "Arial Narrow", sans-serif;

    --cz-r-lg: 14px;
    --cz-r-md: 10px;
    --cz-r-sm: 8px;

    --cz-gutter: 16px;
    --cz-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

@media (min-width: 768px) {
    :root {
        --cz-gutter: 15px;
    }
}

@media (max-width: 600px) {
    :root {
        --cz-admin-bar: 0px;
    }
}

/* Light (also the default without data-brx-theme) */
:root,
[data-brx-theme="light"] {
    --cz-page: #F4F5F7;
    --cz-surface: #FFFFFF;
    --cz-raised: #EEF0F3;
    --cz-line: #E2E5EA;
    --cz-line-strong: #C9CED6;
    --cz-text: #15171A;
    --cz-text-2: #4A505A;
    --cz-text-3: #626872;
    --cz-text-max: #0B0C0E;
    --cz-red: #e51515;
    --cz-red-hover: #c81212;
    --cz-red-text: #C81212;
    --cz-on-red: #FFFFFF;
    --cz-ok: #1E8E50;
    --cz-ok-bg: rgba(30, 142, 80, 0.1);
    --cz-ok-text: #146B3B;
    --cz-caution: #B7791F;
    --cz-caution-bg: rgba(227, 162, 26, 0.16);
    --cz-caution-text: #7A4E00;
    --cz-danger: #D93036;
    --cz-danger-bg: rgba(217, 48, 54, 0.1);
    --cz-danger-text: #B42328;
    --cz-photo-bg: #E9ECF0;
    --cz-pressed: #E4E7EB;
    --cz-skel-1: #E9ECF0;
    --cz-skel-2: #DFE3E8;
    --cz-chip-fill: rgba(17, 20, 24, 0.05);
    --cz-field-line: #8A909A;
    --cz-chip-line: #B4BAC4;
    --cz-dot: #B4BAC4;
    --cz-tooltip-bg: #FFFFFF;
    --cz-header-bg: rgba(255, 255, 255, 0.84);
    --cz-backdrop: rgba(15, 17, 20, 0.45);
    --cz-shadow-1: 0 1px 2px rgba(17, 20, 24, 0.06), 0 6px 16px rgba(17, 20, 24, 0.06);
    --cz-shadow-2: 0 2px 6px rgba(17, 20, 24, 0.08), 0 18px 48px rgba(17, 20, 24, 0.14);
    --cz-scrim: linear-gradient(180deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0.06) 30%, rgba(8, 10, 14, 0.12) 52%, rgba(8, 10, 14, 0.86) 100%);
    --cz-focus: 0 0 0 2px var(--cz-page), 0 0 0 4px var(--cz-red);
}

/* Dark */
[data-brx-theme="dark"] {
    --cz-page: #1a1a1a;
    --cz-surface: #222225;
    --cz-raised: #2a2a2e;
    --cz-line: #37373c;
    --cz-line-strong: #4a4a51;
    --cz-text: #f2f2f0;
    --cz-text-2: #a3a6ae;
    --cz-text-3: #8b8e96;
    --cz-text-max: #FFFFFF;
    --cz-red: #e51515;
    --cz-red-hover: #c81212;
    --cz-red-text: #FF5C5C;
    --cz-on-red: #FFFFFF;
    --cz-ok: #2eb06a;
    --cz-ok-bg: rgba(46, 176, 106, 0.12);
    --cz-ok-text: #5FD394;
    --cz-caution: #e3a21a;
    --cz-caution-bg: rgba(227, 162, 26, 0.12);
    --cz-caution-text: #f0c66b;
    --cz-danger: #e5484d;
    --cz-danger-bg: rgba(229, 72, 77, 0.12);
    --cz-danger-text: #ff7b7f;
    --cz-photo-bg: #121214;
    --cz-pressed: #26262a;
    --cz-skel-1: #26262a;
    --cz-skel-2: #303035;
    --cz-chip-fill: rgba(255, 255, 255, 0.07);
    --cz-field-line: #6b6b72;
    --cz-chip-line: #6b6b72;
    --cz-dot: #6b6b72;
    --cz-tooltip-bg: #0f0f11;
    --cz-header-bg: rgba(26, 26, 26, 0.84);
    --cz-backdrop: rgba(8, 8, 9, 0.72);
    --cz-shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --cz-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55);
    --cz-scrim: linear-gradient(180deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.12) 30%, rgba(8, 10, 14, 0.2) 52%, rgba(8, 10, 14, 0.9) 100%);
    --cz-focus: 0 0 0 2px var(--cz-page), 0 0 0 4px var(--cz-red);
}

/* No JS and no data-brx-theme: follow the system */
@media (prefers-color-scheme: dark) {
    :root:not([data-brx-theme]) {
        --cz-page: #1a1a1a;
        --cz-surface: #222225;
        --cz-raised: #2a2a2e;
        --cz-line: #37373c;
        --cz-line-strong: #4a4a51;
        --cz-text: #f2f2f0;
        --cz-text-2: #a3a6ae;
        --cz-text-3: #8b8e96;
        --cz-text-max: #FFFFFF;
        --cz-red: #e51515;
        --cz-red-hover: #c81212;
        --cz-red-text: #FF5C5C;
        --cz-on-red: #FFFFFF;
        --cz-ok: #2eb06a;
        --cz-ok-bg: rgba(46, 176, 106, 0.12);
        --cz-ok-text: #5FD394;
        --cz-caution: #e3a21a;
        --cz-caution-bg: rgba(227, 162, 26, 0.12);
        --cz-caution-text: #f0c66b;
        --cz-danger: #e5484d;
        --cz-danger-bg: rgba(229, 72, 77, 0.12);
        --cz-danger-text: #ff7b7f;
        --cz-photo-bg: #121214;
        --cz-pressed: #26262a;
        --cz-skel-1: #26262a;
        --cz-skel-2: #303035;
        --cz-chip-fill: rgba(255, 255, 255, 0.07);
        --cz-field-line: #6b6b72;
        --cz-chip-line: #6b6b72;
        --cz-dot: #6b6b72;
        --cz-tooltip-bg: #0f0f11;
        --cz-header-bg: rgba(26, 26, 26, 0.84);
        --cz-backdrop: rgba(8, 8, 9, 0.72);
        --cz-shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06);
        --cz-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55);
        --cz-scrim: linear-gradient(180deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.12) 30%, rgba(8, 10, 14, 0.2) 52%, rgba(8, 10, 14, 0.9) 100%);
        --cz-focus: 0 0 0 2px var(--cz-page), 0 0 0 4px var(--cz-red);
    }
}

/* More contrast */
@media (prefers-contrast: more) {
    :root,
    [data-brx-theme="light"] {
        --cz-text-2: #3A3F47;
        --cz-text-3: #4A505A;
        --cz-field-line: #5B616B;
        --cz-chip-line: #6B717B;
        --cz-dot: #6B717B;
    }

    [data-brx-theme="dark"] {
        --cz-text-2: #c9ccd3;
        --cz-text-3: #b6b9c0;
        --cz-field-line: #8b8e96;
        --cz-chip-line: #8b8e96;
        --cz-dot: #9a9aa2;
    }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root:not([data-brx-theme]) {
        --cz-text-2: #c9ccd3;
        --cz-text-3: #b6b9c0;
        --cz-field-line: #8b8e96;
        --cz-chip-line: #8b8e96;
        --cz-dot: #9a9aa2;
    }
}

/* Native controls follow the theme (UI v6 pages only) */
[data-cz-ui="6"],
[data-cz-ui="6"] [data-brx-theme="light"] {
    color-scheme: light;
}

[data-cz-ui="6"][data-brx-theme="dark"],
[data-cz-ui="6"] [data-brx-theme="dark"] {
    color-scheme: dark;
}

/* Type under UI v6: live once CZ_UI prints data-cz-ui="6" (R8) */
[data-cz-ui="6"] {
    --cz-font: "CZ Golos", "CZ Golos Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cz-display: "CZ Geologica", "CZ Geologica Fallback", "CZ Golos", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cz-display-weight: 700;
    --cz-display-track: -0.02em;
    --cz-display-case: none;
}

/* UI v6 base (R6a): live from R8 */
/* Layout, type scale, buttons, chips, reveal and the skip link for the new site elements. Every selector starts with [data-cz-ui="6"], so nothing here applies while CZ_UI prints no such attribute (production). Guarded by tests/frontend/site-base.test.js. */
[data-cz-ui="6"] {
    --cz-r-photo: 28px;
    --cz-r-card: 20px;
    --cz-r-ctl: 12px;
    --cz-r-btn: 14px;
    --cz-r-pill: 999px;

    /* 4px grid */
    --cz-sp-1: 4px;
    --cz-sp-2: 8px;
    --cz-sp-3: 12px;
    --cz-sp-4: 16px;
    --cz-sp-5: 20px;
    --cz-sp-6: 24px;
    --cz-sp-7: 32px;
    --cz-sp-8: 40px;
    --cz-sp-9: 48px;
    --cz-sp-10: 64px;
    --cz-section-y: clamp(56px, 8vw, 112px);
    --cz-container: 1440px; /* one width everywhere: header, footer, sections, catalog, car, stock (owner, 2026-10-24) */
    --cz-gutter-v6: 16px;
    --cz-gutter: var(--cz-gutter-v6); /* the car page (.cz-car) lines up with the header under v6 */

    --cz-dur-1: 150ms;
    --cz-dur-2: 220ms;
    --cz-dur-3: 320ms;
    --cz-ease: cubic-bezier(.2,.8,.2,1);
    --cz-ease-sheet: cubic-bezier(.32,.72,0,1);

    --cz-h1: clamp(34px, 2.2vw + 26px, 56px);
    --cz-h2: clamp(28px, 1.6vw + 22px, 44px);
    --cz-h3: clamp(20px, .4vw + 18px, 24px);

    /* z-index scale: components 1-10, catalog bar 20, pill 30, mobile bar 40, header 900 */
    --cz-z-mobilebar: 40;
    --cz-z-header: 900;
    --cz-z-skip: 99999;
    --cz-hdr-h: 60px;

    /* a sticky header (R6b) sets --cz-hdr-sticky on <html> so anchors do not hide under it */
    scroll-padding-top: var(--cz-hdr-sticky, 0px);
}

/* The site's Bricks custom CSS starts with «html {scroll-behavior: smooth}»; under v6 scrolling is instant (a smooth scroll would animate the menu sheet's scroll-lock restore, and nothing here asks for it) */
[data-cz-ui="6"] {
    scroll-behavior: auto;
}

@media (min-width: 768px) {
    [data-cz-ui="6"] {
        --cz-gutter-v6: 24px;
    }
}

@media (min-width: 1024px) {
    [data-cz-ui="6"] {
        --cz-hdr-h: 72px;
    }
}

@media (min-width: 1280px) {
    [data-cz-ui="6"] {
        --cz-gutter-v6: 32px;
    }
}

[data-cz-ui="6"] body {
    background: var(--cz-page);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 16px;
    line-height: 1.5;
}

/* Plain text links only: classed links (buttons, nav, cards) keep their own colour. :where() keeps the specificity at the gate alone, so any component rule wins */
[data-cz-ui="6"] :where(a:not([class])) {
    color: var(--cz-red-text);
}

[data-cz-ui="6"] :where(:focus-visible) {
    outline: 2px solid var(--cz-red-text);
    outline-offset: 2px;
}

[data-cz-ui="6"] .czv-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--cz-container);
    margin-inline: auto;
    padding-inline: var(--cz-gutter-v6);
}

[data-cz-ui="6"] .czv-section {
    padding-block: var(--cz-section-y);
}

[data-cz-ui="6"] .czv-h1,
[data-cz-ui="6"] .czv-h2,
[data-cz-ui="6"] .czv-h3 {
    margin: 0;
    color: var(--cz-text-max);
    font-family: var(--cz-display);
    font-weight: var(--cz-display-weight);
    letter-spacing: var(--cz-display-track);
    text-wrap: balance;
}

[data-cz-ui="6"] .czv-h1 {
    font-size: var(--cz-h1);
    line-height: 1.08;
}

[data-cz-ui="6"] .czv-h2 {
    font-size: var(--cz-h2);
    line-height: 1.12;
}

[data-cz-ui="6"] .czv-h3 {
    font-size: var(--cz-h3);
    line-height: 1.25;
}

[data-cz-ui="6"] .czv-lead {
    margin: 0;
    color: var(--cz-text-2);
    font-size: 18px;
    line-height: 1.55;
    text-wrap: pretty;
}

[data-cz-ui="6"] .czv-eyebrow {
    margin: 0;
    color: var(--cz-text-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Buttons */
[data-cz-ui="6"] .czv-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cz-sp-2);
    min-height: 48px;
    padding: 0 var(--cz-sp-6);
    border: 1px solid transparent;
    border-radius: var(--cz-r-btn);
    background: transparent;
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--cz-dur-1) var(--cz-ease), border-color var(--cz-dur-1) var(--cz-ease), transform var(--cz-dur-1) var(--cz-ease);
    -webkit-tap-highlight-color: transparent;
}

[data-cz-ui="6"] .czv-btn:active {
    transform: translateY(1px);
}

[data-cz-ui="6"] .czv-btn:focus-visible {
    outline: 2px solid transparent; /* shows in forced-colors mode, where box-shadow is dropped */
    outline-offset: 2px;
    box-shadow: var(--cz-focus);
}

[data-cz-ui="6"] .czv-btn--primary {
    background: var(--cz-red);
    color: var(--cz-on-red);
}

[data-cz-ui="6"] .czv-btn--primary:hover {
    background: var(--cz-red-hover);
}

[data-cz-ui="6"] .czv-btn--secondary {
    background: var(--cz-surface);
    border-color: var(--cz-line-strong);
    color: var(--cz-text);
}

[data-cz-ui="6"] .czv-btn--secondary:hover {
    background: var(--cz-raised);
}

[data-cz-ui="6"] .czv-btn--ghost {
    background: transparent;
    color: var(--cz-text);
}

[data-cz-ui="6"] .czv-btn--ghost:hover {
    background: var(--cz-chip-fill);
}

[data-cz-ui="6"] .czv-btn--icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

[data-cz-ui="6"] .czv-btn--lg {
    min-height: 56px;
    padding: 0 var(--cz-sp-7);
}

[data-cz-ui="6"] .czv-btn--block {
    display: flex;
    width: 100%;
}

/* Disabled: a <button disabled>, or a link that is not live yet (.is-disabled, with aria-disabled="true" and no href) */
[data-cz-ui="6"] .czv-btn[disabled],
[data-cz-ui="6"] .czv-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
    transform: none;
}

@media (forced-colors: active) {
    [data-cz-ui="6"] .czv-btn.is-disabled {
        border-color: GrayText;
        color: GrayText;
    }
}

/* Badge: a small pill for a status next to a title («Скоро») */
[data-cz-ui="6"] .czv-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cz-sp-1);
    padding: var(--cz-sp-1) var(--cz-sp-3);
    border: 1px solid var(--cz-chip-line);
    border-radius: var(--cz-r-pill);
    background: var(--cz-chip-fill);
    color: var(--cz-text-max);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Visually hidden, read by screen readers */
[data-cz-ui="6"] .czv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Chips */
[data-cz-ui="6"] .czv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cz-sp-1);
    padding: var(--cz-sp-1) var(--cz-sp-3);
    border: 1px solid var(--cz-chip-line);
    border-radius: var(--cz-r-pill);
    background: var(--cz-chip-fill);
    color: var(--cz-text);
    font-size: 14px;
    line-height: 1.3;
}

/* Icons (Tabler sprite, stroke set on the symbols) */
[data-cz-ui="6"] .czv-icon {
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Reveal on scroll, a progressive enhancement: content is visible by default. Only a script (cz-home.js, R6d) adds .is-armed when it starts observing an element, and .is-in when it enters view; with no JS, no IntersectionObserver or reduced motion nothing is armed. */
[data-cz-ui="6"] .czv-reveal {
    transition: opacity var(--cz-dur-3) var(--cz-ease), transform var(--cz-dur-3) var(--cz-ease);
}

[data-cz-ui="6"] .czv-reveal.is-armed:not(.is-in) {
    opacity: 0;
    transform: translateY(12px);
}

[data-cz-ui="6"] .czv-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* The skip links Bricks prints (#brx-content, #brx-footer): off-screen until focused */
[data-cz-ui="6"] .skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
}

[data-cz-ui="6"] .skip-link:focus {
    top: calc(8px + var(--cz-admin-bar, 0px));
    left: 8px;
    z-index: var(--cz-z-skip);
    padding: var(--cz-sp-3) var(--cz-sp-4);
    border-radius: var(--cz-r-ctl);
    background: var(--cz-surface);
    color: var(--cz-text);
    box-shadow: var(--cz-focus);
    outline: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
    [data-cz-ui="6"] .czv-reveal,
    [data-cz-ui="6"] .czv-reveal.is-armed:not(.is-in),
    [data-cz-ui="6"] .czv-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-cz-ui="6"] .czv-btn,
    [data-cz-ui="6"] .czv-btn:active {
        transition: none;
        transform: none;
    }

    /* Bricks slides its skip link in with transition: transform .3s */
    [data-cz-ui="6"] .skip-link,
    [data-cz-ui="6"] .skip-link:focus {
        transition: none;
    }
}

/* While CZTheme switches the theme (cz-theme.js puts the class on <html> for two frames, or until the view transition finishes), nothing transitions, so colours change in one step */
[data-cz-ui="6"].czv-theme-switching *,
[data-cz-ui="6"].czv-theme-switching *::before,
[data-cz-ui="6"].czv-theme-switching *::after {
    transition: none !important;
}

/* Theme controls only work when the init script ran (html[data-theme-pref]); until then they stay hidden. */
[data-cz-ui="6"]:not([data-theme-pref]) [data-cz-theme-toggle],
[data-cz-ui="6"]:not([data-theme-pref]) [data-cz-theme-choice] {
    display: none;
}

/* Bricks form 1997 and popup 1465 (R7)
 * Bricks prints these from element settings: per-element id rules (#brxe-015bfa …), the theme style (h5 Oswald, body #90939c)
 * and the Customizer CSS. Every rule below carries the gate plus the same element id, so it out-ranks them with no
 * need for the important flag. Ids: 9a49d2 eyebrow h5, 3383b8 h2, 015bfa the form, 319735 its container (template 1997); popup 1465:
 * 1076cf its section, whhdvq / fcmnxx the close block / icon. */
[data-cz-ui="6"] #brxe-319735 {
    row-gap: var(--cz-sp-6);
}

[data-cz-ui="6"] #brxe-b111ac {
    text-align: center;
}

[data-cz-ui="6"] #brxe-9a49d2 {
    margin: 0;
    padding-bottom: var(--cz-sp-2);
    color: var(--cz-text-2);
    font-family: var(--cz-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
    text-transform: uppercase;
}

[data-cz-ui="6"] #brxe-3383b8 {
    margin: 0;
    padding-bottom: 0;
    color: var(--cz-text-max);
    font-family: var(--cz-display);
    font-size: var(--cz-h2);
    font-weight: var(--cz-display-weight);
    letter-spacing: var(--cz-display-track);
    line-height: 1.12;
    text-transform: var(--cz-display-case);
    text-wrap: balance;
}

/* One column below 640 (the Customizer CSS spans item 3 and the button over two columns) */
[data-cz-ui="6"] #brxe-015bfa {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cz-sp-4);
}

[data-cz-ui="6"] #brxe-015bfa .form-group,
[data-cz-ui="6"] #brxe-015bfa .form-group:nth-child(3),
[data-cz-ui="6"] #brxe-015bfa .submit-button-wrapper {
    grid-column: auto;
    padding: 0;
    text-align: start;
}

[data-cz-ui="6"] #brxe-015bfa label {
    margin-bottom: 6px;
    color: var(--cz-text-2);
    font-family: var(--cz-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

[data-cz-ui="6"] #brxe-015bfa .form-group input,
[data-cz-ui="6"] #brxe-015bfa .form-group textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--cz-field-line); /* 3:1 control edge (WCAG 1.4.11), prefers-contrast values included */
    border-radius: var(--cz-r-ctl);
    background: var(--cz-raised);
    color: var(--cz-text);
    font-family: var(--cz-font);
    font-size: 16px; /* 16 px: iOS Safari does not zoom the page on focus */
    line-height: 1.4;
}

[data-cz-ui="6"] #brxe-015bfa .form-group textarea {
    min-height: 120px;
}

[data-cz-ui="6"] #brxe-015bfa .required:after {
    color: var(--cz-red-text);
}

[data-cz-ui="6"] #brxe-015bfa ::placeholder {
    color: var(--cz-text-3);
    opacity: 1;
}

[data-cz-ui="6"] #brxe-015bfa .form-group input:focus-visible,
[data-cz-ui="6"] #brxe-015bfa .form-group textarea:focus-visible {
    outline: 2px solid transparent; /* shows in forced-colors mode, where box-shadow is dropped */
    outline-offset: 2px;
    border-color: var(--cz-red-text);
    box-shadow: var(--cz-focus);
}

/* The submit looks like czv-btn--primary xl; the label stays as stored («ОТПРАВИТЬ»), no case change */
[data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--cz-sp-6);
    border: 1px solid transparent;
    border-radius: var(--cz-r-btn);
    background: var(--cz-red);
    background-image: none; /* the Customizer CSS paints a #a40e0e hover wipe */
    color: var(--cz-on-red);
    font-family: var(--cz-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    cursor: pointer;
    transition: background-color var(--cz-dur-1) var(--cz-ease), transform var(--cz-dur-1) var(--cz-ease);
}

[data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button:hover {
    background: var(--cz-red-hover);
    background-image: none;
    color: var(--cz-on-red);
}

[data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button:active {
    transform: translateY(1px);
}

[data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--cz-focus);
}

/* Bricks notices: status tokens */
[data-cz-ui="6"] #brxe-015bfa .message {
    box-sizing: border-box;
    align-items: center;
    border: 1px solid var(--cz-line);
    border-radius: var(--cz-r-ctl);
    background: var(--cz-raised);
    color: var(--cz-text);
    font-size: 15px;
    line-height: 1.4;
}

[data-cz-ui="6"] #brxe-015bfa .message.success {
    border-color: var(--cz-ok);
    background: var(--cz-ok-bg);
    color: var(--cz-ok-text);
}

[data-cz-ui="6"] #brxe-015bfa .message.error {
    border-color: var(--cz-danger);
    background: var(--cz-danger-bg);
    color: var(--cz-danger-text);
}

[data-cz-ui="6"] #brxe-015bfa .message .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: inherit;
    cursor: pointer;
}

/* Popup 1465: a surface panel, no photo */
[data-cz-ui="6"] .brx-popup[data-popup-id="1465"] .brx-popup-content {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 640px;
    max-height: calc(100% - 32px);
    padding: 0;
    border-radius: var(--cz-r-card);
    background: var(--cz-surface);
    box-shadow: var(--cz-shadow-2);
    color: var(--cz-text);
}

[data-cz-ui="6"] .brx-popup[data-popup-id="1465"] #brxe-1076cf {
    background-image: none; /* the stock photo of the old dark popup */
    padding: var(--cz-sp-8) var(--cz-sp-5) var(--cz-sp-6);
}

[data-cz-ui="6"] .brx-popup[data-popup-id="1465"] #brxe-whhdvq {
    top: var(--cz-sp-2);
    right: var(--cz-sp-2);
}

[data-cz-ui="6"] .brx-popup[data-popup-id="1465"] #brxe-fcmnxx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--cz-text);
    font-size: 24px;
    cursor: pointer;
}

@media (min-width: 640px) {
    [data-cz-ui="6"] #brxe-015bfa {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-cz-ui="6"] #brxe-015bfa .form-group:nth-child(3),
    [data-cz-ui="6"] #brxe-015bfa .submit-button-wrapper {
        grid-column: span 2;
    }

    [data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button {
        align-self: flex-start;
        width: auto;
        min-width: 240px;
    }

    [data-cz-ui="6"] .brx-popup[data-popup-id="1465"] #brxe-1076cf {
        padding: var(--cz-sp-9) var(--cz-sp-8) var(--cz-sp-8);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-cz-ui="6"] #brxe-015bfa button[type="submit"].bricks-button,
    [data-cz-ui="6"] .brx-popup[data-popup-id="1465"] {
        transition: none;
    }
}