@import url('/destpeka-design-assets/customer-legacy-brand-compat-v1.css');

    /*
     * GLOBAL UIX CUSTOMER / CONTENT BRIDGE
     *
     * Route-scoped compatibility layer for customer account, auth and the
     * remaining public content surfaces. Existing page DOM and business logic
     * stay intact while visual authority moves to DesignRuntime tokens.
     */

    /* ─────────────────────────────────────────────
       CUSTOMER ACCOUNT
       ───────────────────────────────────────────── */
    body[data-global-uix-route^="account."] .customer-account-page {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text);
        font-family: var(--ui-font-body);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        h1, h2, h3, h4,
        .account-title,
        .ek-account-title,
        [class*="account-title"],
        [class*="page-title"]
    ) {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-heading);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .account-sidebar,
        .ek-account-sidebar,
        [class*="account-sidebar"],
        [class*="account-nav"]
    ) {
        background: var(--ui-account-sidebar-bg) !important;
        border-color: var(--ui-border) !important;
        border-radius: var(--ui-card-radius) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .account-sidebar a,
        .ek-account-sidebar a,
        [class*="account-sidebar"] a,
        [class*="account-nav"] a
    ) {
        color: var(--ui-text-muted) !important;
        border-radius: var(--ui-radius-control) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .account-sidebar a.is-active,
        .account-sidebar a.active,
        .account-sidebar a[aria-current="page"],
        .ek-account-sidebar a.is-active,
        .ek-account-sidebar a.active,
        .ek-account-sidebar a[aria-current="page"],
        [class*="account-sidebar"] a.is-active,
        [class*="account-sidebar"] a.active,
        [class*="account-sidebar"] a[aria-current="page"],
        [class*="account-nav"] a.is-active,
        [class*="account-nav"] a.active,
        [class*="account-nav"] a[aria-current="page"]
    ) {
        background: var(--ui-account-sidebar-active-bg) !important;
        color: var(--ui-account-sidebar-active-text) !important;
        border-color: var(--ui-primary-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .account-card,
        .ek-account-card,
        [class*="account-card"],
        [class*="order-card"],
        [class*="address-card"],
        [class*="rfq-card"],
        [class*="photo-request-card"],
        [class*="profile-card"],
        [class*="summary-card"],
        [class*="stat-card"],
        table
    ) {
        background: var(--ui-account-card-bg) !important;
        border-color: var(--ui-account-card-border) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow);
        color: var(--ui-text);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        table th,
        [class*="table-head"],
        [class*="card-head"],
        [class*="card-header"]
    ) {
        background: var(--ui-surface-alt) !important;
        color: var(--ui-text) !important;
        border-color: var(--ui-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        table td,
        table th,
        [class*="account-card"],
        [class*="order-card"],
        [class*="address-card"]
    ) {
        border-color: var(--ui-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        a[href],
        button.link,
        [class*="link"]
    ):not(.ui-button) {
        color: var(--ui-account-link);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        color: var(--ui-input-text-color) !important;
        border-color: var(--ui-input-border-color) !important;
        border-radius: var(--ui-input-radius) !important;
        font-family: var(--ui-font-ui);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        outline: 2px solid var(--ui-primary-soft);
        outline-offset: 1px;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        input[type="checkbox"],
        input[type="radio"]
    ) {
        accent-color: var(--ui-primary);
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        button[type="submit"],
        a[class*="primary"],
        button[class*="primary"],
        .account-primary-action,
        .ek-account-primary-action
    ):not(.ui-button) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        button[type="submit"],
        a[class*="primary"],
        button[class*="primary"]
    ):not(.ui-button):hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .badge,
        .status-badge,
        [class*="badge"],
        [class*="status"]
    ).is-active {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
    }

    /* ─────────────────────────────────────────────
       CUSTOMER AUTH
       ───────────────────────────────────────────── */
    body[data-global-uix-surface="auth"] {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
        font-family: var(--ui-font-body) !important;
    }

    body[data-global-uix-surface="auth"] > header {
        background: var(--ui-surface) !important;
        border-color: var(--ui-border) !important;
        box-shadow: var(--ui-shadow-sm);
    }

    body[data-global-uix-surface="auth"] > header a {
        color: var(--ui-text-muted) !important;
        border-color: var(--ui-border) !important;
        border-radius: var(--ui-radius-control) !important;
    }

    body[data-global-uix-surface="auth"] > header a:hover {
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
        background: var(--ui-primary-soft) !important;
    }

    body[data-global-uix-surface="auth"] > main {
        background: var(--ui-bg-page) !important;
    }

    body[data-global-uix-surface="auth"] :where(
        h1, h2, h3,
        [class*="auth-title"],
        [class*="login-title"],
        [class*="register-title"]
    ) {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-heading);
    }

    body[data-global-uix-surface="auth"] :where(
        [class*="auth-card"],
        [class*="login-card"],
        [class*="register-card"],
        [class*="password-card"],
        form[class*="auth"],
        form[class*="login"],
        form[class*="register"]
    ) {
        background: var(--ui-surface) !important;
        border-color: var(--ui-border) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-shadow-card);
    }

    body[data-global-uix-surface="auth"] :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        color: var(--ui-input-text-color) !important;
        border-color: var(--ui-input-border-color) !important;
        border-radius: var(--ui-input-radius) !important;
        font-family: var(--ui-font-ui);
    }

    body[data-global-uix-surface="auth"] :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        outline: 2px solid var(--ui-primary-soft);
        outline-offset: 1px;
    }

    body[data-global-uix-surface="auth"] input[type="checkbox"] {
        accent-color: var(--ui-primary);
    }

    body[data-global-uix-surface="auth"] :where(
        button[type="submit"],
        .auth-submit,
        .login-submit,
        .register-submit
    ):not(.ui-button) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-surface="auth"] :where(
        a[href*="password"],
        a[href*="register"],
        a[href*="login"]
    ) {
        color: var(--ui-primary) !important;
    }

    /* ─────────────────────────────────────────────
       REMAINING PUBLIC CONTENT / UTILITY PAGES
       ───────────────────────────────────────────── */
    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route="about"],
        body[data-global-uix-route="careers"],
        body[data-global-uix-route="work-with-us"],
        body[data-global-uix-route^="blog."],
        body[data-global-uix-route^="project."],
        body[data-global-uix-route^="projects."],
        body[data-global-uix-route^="pages."],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text);
        font-family: var(--ui-font-body);
    }

    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route="about"],
        body[data-global-uix-route="careers"],
        body[data-global-uix-route="work-with-us"],
        body[data-global-uix-route^="blog."],
        body[data-global-uix-route^="project."],
        body[data-global-uix-route^="projects."],
        body[data-global-uix-route^="pages."],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) :where(
        h1, h2, h3, h4,
        [class*="page-title"],
        [class*="section-title"],
        [class*="hero-title"]
    ) {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-heading);
    }

    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route^="blog."],
        body[data-global-uix-route^="project."],
        body[data-global-uix-route^="projects."],
        body[data-global-uix-route^="pages."],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) :where(
        [class*="card"],
        [class*="panel"],
        [class*="content-box"],
        article
    ) {
        border-color: var(--ui-border) !important;
        border-radius: var(--ui-card-radius) !important;
    }

    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        color: var(--ui-input-text-color) !important;
        border-color: var(--ui-input-border-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) :where(
        button[type="submit"],
        a[class*="primary"],
        button[class*="primary"]
    ):not(.ui-button) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    :where(
        body[data-global-uix-route="contact"],
        body[data-global-uix-route="search"],
        body[data-global-uix-route="about"],
        body[data-global-uix-route="careers"],
        body[data-global-uix-route="work-with-us"],
        body[data-global-uix-route^="blog."],
        body[data-global-uix-route^="project."],
        body[data-global-uix-route^="projects."],
        body[data-global-uix-route^="pages."],
        body[data-global-uix-route^="photo-request"],
        body[data-global-uix-route^="order-tracking"]
    ) :where(
        a[href]:hover,
        .is-active,
        [aria-current="page"]
    )
:not(header *)
:not(nav *) {
        color: var(--ui-primary) !important;
    }

    /* Error pages may render without a resolved named route. */
    :where(
        .error-page,
        .ek-error-page,
        [class*="error-page"],
        [class*="not-found"]
    ) :where(
        a[class*="primary"],
        button[class*="primary"]
    ) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    :where(
        body[data-global-uix-route^="account."] .customer-account-page,
        body[data-global-uix-surface="auth"]
    ) :where(
        a, button, input, select, textarea
    ):focus-visible {
        outline-color: var(--ui-primary) !important;
    }

    @media (prefers-reduced-motion: reduce) {
        :where(
            body[data-global-uix-route^="account."] .customer-account-page,
            body[data-global-uix-surface="auth"]
        ) * {
            scroll-behavior: auto !important;
        }
    }

    /* =========================================================
       PUBLIC THEME COMPLETION v0.1.2 — ACCOUNT + CONTACT

       Compatibility only:
       local legacy visual variables/selectors consume DesignRuntime.
       Semantic status, danger and WhatsApp colors remain untouched.
       ========================================================= */

    /* Customer Account */
    /*
     * ACCOUNT HEADER/FOOTER ISOLATION
     * Legacy account aliases must live inside the account content wrapper.
     * Keeping them on body leaks them into the global storefront header/footer.
     */
    body[data-global-uix-route^="account."] .customer-account-page {
        --brand-primary: var(--ui-primary);
        --ek-navy: var(--ui-text);
        --ek-gray-50: var(--ui-surface-alt);
        --ek-gray-100: var(--ui-surface-alt);
        --ek-gray-200: var(--ui-border);
        --ek-gray-400: var(--ui-text-muted);
        --ek-gray-500: var(--ui-text-muted);
        --ek-gray-600: var(--ui-text-muted);
    }

    body[data-global-uix-route^="account."] .customer-account-page {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar {
        background: var(--ui-account-sidebar-bg) !important;
        border-color: var(--ui-account-card-border) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__profile {
        background:
            radial-gradient(
                circle at 100% 0,
                color-mix(in srgb, var(--ui-primary) 28%, transparent),
                transparent 42%
            ),
            var(--ui-secondary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__avatar {
        background: var(--ui-primary) !important;
        color: var(--ui-on-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__link.is-active {
        background: var(--ui-account-sidebar-active-bg) !important;
        color: var(--ui-account-sidebar-active-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero {
        background:
            radial-gradient(
                circle at 92% 12%,
                color-mix(in srgb, var(--ui-primary) 28%, transparent),
                transparent 35%
            ),
            linear-gradient(
                135deg,
                var(--ui-secondary),
                color-mix(in srgb, var(--ui-secondary) 78%, var(--ui-primary))
            ) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero > div:first-child > span {
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-menu-button,
        .customer-account-stat,
        .customer-account-panel,
        .customer-account-completion,
        .customer-account-quick__item,
        .customer-photo-request-card
    ) {
        background: var(--ui-account-card-bg) !important;
        border-color: var(--ui-account-card-border) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-menu-button__icon,
        .customer-account-stat > svg,
        .customer-account-quick__item > span,
        .customer-account-order-row__icon,
        .customer-account-photo-summary__icon
    ) {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-completion__bar {
        background: var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-completion__bar > span {
        background: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-panel > header span,
        .customer-account-panel > header a,
        .customer-account-completion a,
        .customer-account-empty a,
        .customer-account-page-header > div > span
    ) {
        color: var(--ui-account-link) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-menu-button,
        .customer-account-page-header h1,
        .customer-account-quick h2,
        .customer-account-empty strong,
        .customer-account-photo-summary__main strong
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-menu-button small,
        .customer-account-page-header p,
        .customer-account-photo-summary__main small
    ) {
        color: var(--ui-text-muted) !important;
    }

    /* Contact:
       Rebind the old --ct-* palette at route scope. The local contact CSS can
       keep its layout while Appearance owns the visual palette. */
    body[data-global-uix-route="contact"] {
        --ct-brand: var(--ui-primary);
        --ct-brand-hover: var(--ui-primary-hover);
        --ct-brand-light: var(--ui-primary-soft);
        --ct-brand-soft: var(--ui-primary-soft);
        --ct-brand-strong: var(--ui-primary-soft);
        --ct-brand-border: var(--ui-primary-border);
        --ct-brand-glow: var(--ui-primary-soft);
        --ct-navy: var(--ui-text);
        --ct-gray-50: var(--ui-bg-page);
        --ct-gray-100: var(--ui-surface-alt);
        --ct-gray-200: var(--ui-border);
        --ct-gray-400: var(--ui-text-muted);
        --ct-gray-600: var(--ui-text-muted);
        --ct-white: var(--ui-surface);
    }

    body[data-global-uix-route="contact"] .ct-main {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="contact"] :where(
        .ct-card,
        .ct-form-card,
        .ct-social-section,
        .ct-stat
    ) {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-card-border-color) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route="contact"] .ct-about-card {
        background:
            linear-gradient(
                135deg,
                var(--ui-card-bg),
                var(--ui-primary-soft)
            ) !important;
        border-color: var(--ui-primary-border) !important;
    }

    body[data-global-uix-route="contact"] :where(
        .ct-logo-icon,
        .ct-card-icon,
        .ct-hero-badge
    ) {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
    }

    body[data-global-uix-route="contact"] .ct-hero-gradient {
        background: none !important;
        color: var(--ui-primary) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    body[data-global-uix-route="contact"] :where(
        .ct-about-header h2,
        .ct-stat strong,
        .ct-card-value,
        .ct-social-title,
        .ct-form-header h3,
        .ct-map-header h3
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="contact"] :where(
        .ct-about-text,
        .ct-card-label,
        .ct-social-name,
        .ct-form-header p
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="contact"] .ct-social-link {
        background: var(--ui-surface-alt) !important;
        border-color: var(--ui-border) !important;
    }

    body[data-global-uix-route="contact"] .ct-social-link:hover {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="contact"] .ct-input-wrap :where(input, textarea) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
    }

    body[data-global-uix-route="contact"] .ct-input-wrap :where(input, textarea):focus {
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="contact"] .ct-submit-btn {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-route="contact"] .ct-submit-btn:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    /* =========================================================
       GLOBAL BRAND COLOR AUTHORITY v0.1 — ACCOUNT PRIMARY SURFACE
       Primary changes propagate here automatically.
       ========================================================= */

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-sidebar__profile,
        .customer-account-hero
    ) {
        background:
            linear-gradient(
                135deg,
                var(--ui-primary),
                var(--ui-primary-hover)
            ) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-sidebar__identity strong,
        .customer-account-hero h1
    ) {
        color: var(--ui-on-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-sidebar__identity span,
        .customer-account-hero p,
        .customer-account-hero > div:first-child > span
    ) {
        color:
            color-mix(
                in srgb,
                var(--ui-on-primary) 74%,
                transparent
            ) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero__avatar {
        background:
            color-mix(
                in srgb,
                var(--ui-on-primary) 12%,
                transparent
            ) !important;
        border-color:
            color-mix(
                in srgb,
                var(--ui-on-primary) 18%,
                transparent
            ) !important;
        color: var(--ui-on-primary) !important;
    }

    /* =========================================================
       PUBLIC LEAD FORMS THEME WIRING v0.1 — WORK WITH US + CAREERS

       Legacy page CSS remains layout-only. Brand/surface/form colors consume
       canonical DesignRuntime tokens. Success/error alert semantics are not
       overridden here.
       ========================================================= */

    /* Work With Us */
    body[data-global-uix-route="work-with-us"] :where(
        .work-form-card,
        .work-info-card
    ) {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route="work-with-us"] :where(
        .work-form-card h2,
        .work-info-card h3,
        .work-upload p
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="work-with-us"] :where(
        .work-benefit p,
        .work-requirements li,
        .work-upload span,
        .work-checkbox,
        .work-secure
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-field :where(
        input,
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-field :where(
        input,
        select,
        textarea
    ):focus {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-upload {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-input-border-color) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-upload:hover {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-upload-icon {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-checkbox input {
        accent-color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-submit {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-submit:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    body[data-global-uix-route="work-with-us"] :where(
        .work-benefit-icon,
        .work-contact-links a
    ) {
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="work-with-us"] .work-requirements li::before {
        background: var(--ui-primary) !important;
    }

    /* Careers */
    body[data-global-uix-route="careers"] .careers-form-card {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route="careers"] :where(
        .careers-form-card h2,
        .careers-upload p
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="careers"] :where(
        .careers-left > p,
        .careers-upload span
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="careers"] :where(
        .careers-badge,
        .careers-upload-icon
    ) {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
    }

    body[data-global-uix-route="careers"] .careers-perk {
        background: var(--ui-surface-alt) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="careers"] .careers-field :where(
        input,
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    body[data-global-uix-route="careers"] .careers-field :where(
        input,
        select,
        textarea
    ):focus {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="careers"] .careers-upload {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-input-border-color) !important;
    }

    body[data-global-uix-route="careers"] .careers-upload:hover {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="careers"] .careers-upload-icon {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="careers"] .careers-submit {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-route="careers"] .careers-submit:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    /* ACCOUNT THEME FIX NOW v1 */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__profile {
        background:
            linear-gradient(
                135deg,
                var(--ui-primary),
                var(--ui-primary-hover)
            ) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero h1,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity strong {
        color: var(--ui-on-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero p,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero > div:first-child > span,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity span {
        color:
            color-mix(
                in srgb,
                var(--ui-on-primary) 78%,
                transparent
            ) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__avatar {
        background: var(--ui-primary-hover) !important;
        color: var(--ui-on-primary) !important;
    }

    /* ACCOUNT THEME HARMONY NOW v2 */

    /* Same large-surface authority as the public navigation. */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__profile {
        background: var(--ui-nav-bg) !important;
        color: var(--ui-nav-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero h1,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity strong {
        color: var(--ui-nav-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero p,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity span {
        color:
            color-mix(
                in srgb,
                var(--ui-nav-text) 68%,
                transparent
            ) !important;
    }

    /* Brand Primary stays where the storefront also uses brand emphasis. */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero > div:first-child > span {
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__avatar {
        background: var(--ui-primary) !important;
        color: var(--ui-on-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero__avatar {
        background:
            color-mix(
                in srgb,
                var(--ui-primary) 22%,
                var(--ui-nav-bg)
            ) !important;
        border-color:
            color-mix(
                in srgb,
                var(--ui-primary) 42%,
                transparent
            ) !important;
        color: var(--ui-nav-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__link.is-active {
        background: var(--ui-account-sidebar-active-bg) !important;
        color: var(--ui-account-sidebar-active-text) !important;
    }

    /* =========================================================
       ACCOUNT STOREFRONT UNIFICATION FINAL v1

       Account keeps layout/functionality only.
       Visual authority = the same public --ui-* storefront tokens.

       IMPORTANT:
       - all account-specific legacy aliases are scoped inside
         .customer-account-page
       - global header/navigation/footer are explicitly restored
         to the same public-shell roles used on Home/Shop/etc.
       - semantic status / danger / WhatsApp colors are untouched
       ========================================================= */

    /* ---------------------------------------------------------
       1. ACCOUNT SCOPE — NO GLOBAL SHELL LEAKAGE
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page {
        --brand-primary: var(--ui-primary);
        --ek-navy: var(--ui-text);
        --ek-gray-50: var(--ui-surface-alt);
        --ek-gray-100: var(--ui-surface-alt);
        --ek-gray-200: var(--ui-border);
        --ek-gray-300: var(--ui-border);
        --ek-gray-400: var(--ui-text-muted);
        --ek-gray-500: var(--ui-text-muted);
        --ek-gray-600: var(--ui-text-muted);
        --ek-gray-700: var(--ui-text);

        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
    }

    /* ---------------------------------------------------------
       2. ACCOUNT LAYOUT — KEEP STRUCTURE, REMOVE PRIVATE THEME
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-shell {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar {
        background: var(--ui-surface) !important;
        border-color: var(--ui-border) !important;
        box-shadow: var(--ui-card-shadow) !important;
        border-radius: var(--ui-card-radius) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__profile {
        background: var(--ui-surface) !important;
        border-bottom: 1px solid var(--ui-border) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__avatar {
        background: var(--ui-primary-soft) !important;
        border: 1px solid var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity strong {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__identity span {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__link {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__link:hover {
        background: var(--ui-surface-alt) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-sidebar__link.is-active {
        background: var(--ui-account-sidebar-active-bg) !important;
        color: var(--ui-account-sidebar-active-text) !important;
    }

    /* logout/danger semantics intentionally untouched */

    /* ---------------------------------------------------------
       3. HERO = NORMAL STOREFRONT SURFACE, NOT A PRIVATE THEME
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero {
        background: var(--ui-surface) !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero h1 {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero p {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero > div:first-child > span {
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-hero__avatar {
        background: var(--ui-primary-soft) !important;
        border: 1px solid var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    /* ---------------------------------------------------------
       4. CARDS / PANELS / STATS / QUICK ACTIONS
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-menu-button,
        .customer-account-stat,
        .customer-account-completion,
        .customer-account-panel,
        .customer-account-quick__item,
        .customer-photo-request-card
    ) {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-panel > header {
        border-bottom-color: var(--ui-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-stat > svg,
        .customer-account-menu-button__icon,
        .customer-account-quick__item > span,
        .customer-account-order-row__icon,
        .customer-account-photo-summary__icon
    ) {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-panel h2,
        .customer-account-quick h2,
        .customer-account-empty strong,
        .customer-account-page-header h1,
        .customer-account-order-row strong,
        .customer-account-rfq-row strong,
        .customer-account-photo-summary__main strong
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-stat small,
        .customer-account-menu-button small,
        .customer-account-page-header p,
        .customer-account-order-row small,
        .customer-account-rfq-row small,
        .customer-account-rfq-row em,
        .customer-account-photo-summary__main small,
        .customer-account-completion p
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-panel > header span,
        .customer-account-panel > header a,
        .customer-account-completion a,
        .customer-account-empty a,
        .customer-account-page-header > div > span
    ) {
        color: var(--ui-account-link) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-completion {
        background: var(--ui-surface) !important;
        border-color: var(--ui-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-completion__bar {
        background: var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-completion__bar > span {
        background: var(--ui-primary) !important;
    }

    /* ---------------------------------------------------------
       5. LISTS / ROWS
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-order-row,
        .customer-account-rfq-row,
        .customer-account-photo-summary
    ) {
        border-color: var(--ui-border) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page :where(
        .customer-account-order-row,
        .customer-account-rfq-row,
        .customer-account-photo-summary
    ):hover {
        background: var(--ui-surface-alt) !important;
    }

    /* ---------------------------------------------------------
       6. ACCOUNT PRIMARY ACTIONS / FORMS
       --------------------------------------------------------- */
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-primary-button,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-main button[type="submit"] {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-primary-button:hover,
    body[data-global-uix-route^="account."] .customer-account-page .customer-account-main button[type="submit"]:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-main :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-main :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route^="account."] .customer-account-page .customer-account-main :where(
        input[type="checkbox"],
        input[type="radio"]
    ) {
        accent-color: var(--ui-primary);
    }

    /* semantic .customer-account-status--* colors intentionally untouched */

    /* =========================================================
       ACCOUNT UI UNIFICATION + SOFT NAV v1.0.1
       Dashboard is the account visual reference.
       Global header/navigation/footer are intentionally untouched.
       ========================================================= */

    /*
     * Legacy account pages are wrapped at Blade level so they can consume
     * the same account theme authority without editing their business logic.
     */
    .customer-account-page--legacy {
        min-height: 65vh;
        padding: 30px 0 56px;
        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
    }

    .customer-account-page--legacy > div[style*="max-width:1100px"] {
        width: min(1180px, calc(100% - 40px)) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .customer-account-page--legacy .account-layout {
        display: grid !important;
        grid-template-columns: 245px minmax(0, 1fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .customer-account-page--legacy .account-layout > div:last-child {
        min-width: 0;
    }

    /*
     * Match the dashboard's clean heading hierarchy.
     */
    .customer-account-page--legacy .account-layout > div:last-child h1 {
        color: var(--ui-text) !important;
        font-size: clamp(23px, 3vw, 31px) !important;
        font-weight: 800 !important;
        letter-spacing: -.025em !important;
        line-height: 1.15 !important;
    }

    /*
     * Neutral legacy inline text colors become DesignRuntime text roles.
     * Semantic status colors are deliberately not included here.
     */
    .customer-account-page--legacy .account-layout > div:last-child [style*="color:var(--ek-navy)"] {
        color: var(--ui-text) !important;
    }

    /*
     * Primary actions and forms.
     * Scope stays inside the page main column so logout/danger semantics
     * in the sidebar are never converted to brand actions.
     */
    .customer-account-page--legacy .account-layout > div:last-child
    :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    .customer-account-page--legacy .account-layout > div:last-child
    :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    .customer-account-page--legacy .account-layout > div:last-child
    :where(
        input[type="checkbox"],
        input[type="radio"]
    ) {
        accent-color: var(--ui-primary);
    }

    .customer-account-page--legacy .account-layout > div:last-child
    button[type="submit"] {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    .customer-account-page--legacy .account-layout > div:last-child
    [style*="background:var(--brand-primary)"] {
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
    }

    /*
     * Addresses was a separate green visual theme.
     * Rebind presentation green to Brand Primary while preserving delete red.
     */
    .customer-account-page--legacy [id="add-btn"],
    .customer-account-page--legacy .addr-btn-save,
    .customer-account-page--legacy button[onclick="toggleAddForm()"] {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        box-shadow: none !important;
    }

    .customer-account-page--legacy [id="add-btn"]:hover,
    .customer-account-page--legacy .addr-btn-save:hover,
    .customer-account-page--legacy button[onclick="toggleAddForm()"]:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    .customer-account-page--legacy .addr-field input:focus,
    .customer-account-page--legacy .addr-field textarea:focus {
        border-color: var(--ui-input-focus-color) !important;
        background: var(--ui-input-bg) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    .customer-account-page--legacy .addr-card-default {
        border-color: var(--ui-primary-border) !important;
        background:
            linear-gradient(
                135deg,
                var(--ui-surface),
                var(--ui-primary-soft)
            ) !important;
    }

    .customer-account-page--legacy .addr-badge-default {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    .customer-account-page--legacy :where(
        [id="add-btn"],
        .addr-btn-save,
        .addr-card-default,
        .addr-badge-default,
        .addr-field
    ) svg[stroke]:not([stroke="none"]) {
        stroke: var(--ui-primary) !important;
    }

    /*
     * PHOTO REQUESTS CSS FIX
     * The empty-state camera SVG has no intrinsic CSS size in the current
     * account page, which allows it to expand to the available width.
     */
    .customer-account-page .customer-account-empty--large {
        min-height: 320px;
        align-content: center;
        justify-items: center;
        padding: 48px 24px !important;
        background: var(--ui-card-bg) !important;
        border: 1px solid var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
        text-align: center;
    }

    .customer-account-page .customer-account-empty--large > svg {
        display: block !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
        stroke: currentColor !important;
    }

    .customer-account-page .customer-account-empty--large h2 {
        color: var(--ui-text) !important;
        margin: 14px 0 0 !important;
    }

    .customer-account-page .customer-account-empty--large p {
        color: var(--ui-text-muted) !important;
        margin: 7px 0 16px !important;
    }

    /*
     * Soft-navigation visual feedback.
     */
    body.destpeka-account-soft-loading .customer-account-page {
        opacity: .58;
        pointer-events: none;
        transition: opacity .12s ease;
    }

    body.destpeka-account-soft-loading {
        cursor: progress;
    }

    @media (max-width: 959px) {
        .customer-account-page--legacy {
            padding-top: 22px;
        }

        .customer-account-page--legacy > div[style*="max-width:1100px"] {
            width: min(1180px, calc(100% - 28px)) !important;
        }

        .customer-account-page--legacy .account-layout {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }
    }

    /* =========================================================
       MOBILE ACCOUNT SIDEBAR POLISH v1
       Mobile-only. Desktop account and global shell untouched.
       ========================================================= */
    @media (max-width: 959px) {
        /*
         * Global mobile shell reserves 60px for the header and ~60px for
         * the fixed bottom navigation. Keep the account drawer inside that
         * usable viewport instead of hiding its profile below the header.
         */
        .customer-account-page .customer-account-sidebar {
            inset-block-start: 60px !important;
            inset-block-end: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
            height: auto !important;
            max-height: none !important;
            width: min(84vw, 310px) !important;
            z-index: 145 !important;
            border-radius: 0 !important;
            box-shadow: 16px 0 40px color-mix(in srgb, var(--ui-text) 18%, transparent) !important;
        }

        [dir="rtl"] .customer-account-page .customer-account-sidebar {
            box-shadow: -16px 0 40px color-mix(in srgb, var(--ui-text) 18%, transparent) !important;
        }

        .customer-account-page .customer-account-overlay {
            inset-block-start: 60px !important;
            inset-block-end: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
            height: auto !important;
            z-index: 140 !important;
        }

        /* Compact profile block: fully visible below mobile header. */
        .customer-account-page .customer-account-sidebar__profile {
            flex: 0 0 auto !important;
            min-height: 86px !important;
            padding: 14px 16px !important;
        }

        .customer-account-page .customer-account-sidebar__avatar {
            width: 46px !important;
            height: 46px !important;
            border-radius: 13px !important;
        }

        /*
         * Root cause of the huge gaps in the screenshot:
         * nav is grid + flex:1, so auto grid tracks stretch to consume the
         * full 100dvh drawer. Pin tracks to content height instead.
         */
        .customer-account-page .customer-account-sidebar__nav {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-auto-rows: minmax(44px, max-content) !important;
            align-content: start !important;
            gap: 4px !important;
            padding: 10px 12px !important;
            overflow-y: auto !important;
            overscroll-behavior: contain !important;
            -webkit-overflow-scrolling: touch;
        }

        .customer-account-page .customer-account-sidebar__link,
        .customer-account-page .customer-account-sidebar__logout {
            min-height: 44px !important;
            padding: 9px 10px !important;
            flex: 0 0 auto !important;
        }

        .customer-account-page .customer-account-sidebar__logout-form {
            flex: 0 0 auto !important;
            padding: 8px 12px 10px !important;
            background: var(--ui-surface) !important;
        }

        /* The profile surface is light after storefront unification. */
        .customer-account-page .customer-account-sidebar__close {
            color: var(--ui-text-muted) !important;
            background: var(--ui-surface-alt) !important;
            border-color: var(--ui-border) !important;
        }

        .customer-account-page .customer-account-sidebar__close:hover,
        .customer-account-page .customer-account-sidebar__close:focus-visible {
            color: var(--ui-primary) !important;
            border-color: var(--ui-primary-border) !important;
            background: var(--ui-primary-soft) !important;
        }
    }


    /* =========================================================
       GLOBAL BRAND STUDIO CONSUMER ENFORCEMENT v1.0.0

       Brand Studio / DesignRuntime already owns the canonical visual tokens.
       This section does NOT introduce another palette. It only rebinds legacy
       customer-facing page variables and remaining presentation accents to
       the existing --ui-* authority.

       Semantics intentionally preserved:
       - success / warning / danger / info => --ui-success etc.
       - WhatsApp => official WhatsApp green.
       ========================================================= */

    /* ---------------------------------------------------------
       1. LEGACY GLOBAL STOREFRONT ALIASES
       --------------------------------------------------------- */
    body[data-global-uix-route] {
        --store-primary: var(--ui-primary);
        --store-primary-dark: var(--ui-primary-hover);
        --store-primary-soft: var(--ui-primary-soft);
        --store-accent: var(--ui-accent);
        --store-bg: var(--ui-bg-page);
        --store-surface: var(--ui-surface);
        --store-soft: var(--ui-surface-alt);
        --store-soft-2: var(--ui-surface-alt);
        --store-text: var(--ui-text);
        --store-muted: var(--ui-text-muted);
        --store-light: var(--ui-text-muted);
        --store-border: var(--ui-border);
        --store-border-strong: var(--ui-border-strong);
    }

    /* Homepage local palette. */
    .xkh-home {
        --xkh-ink: var(--ui-text) !important;
        --xkh-deep: var(--ui-secondary) !important;
        --xkh-brand: var(--ui-primary) !important;
        --xkh-brand-dark: var(--ui-primary-hover) !important;
        --xkh-brand-soft: var(--ui-primary-soft) !important;
        --xkh-text: var(--ui-text) !important;
        --xkh-muted: var(--ui-text-muted) !important;
        --xkh-line: var(--ui-border) !important;
        --xkh-soft: var(--ui-surface-alt) !important;
    }

    .xkh-home :where(
        .xkh-cta__eyebrow,
        .xkh-cta__title .cta-accent
    ) {
        color: var(--ui-primary) !important;
    }

    .xkh-home .xkh-cta__eyebrow {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
    }

    .xkh-home .xkh-cta__eyebrow-dot {
        background: var(--ui-primary) !important;
    }

    .xkh-home .xkh-cta__btn--primary {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        box-shadow:
            0 8px 20px
            color-mix(in srgb, var(--ui-primary) 26%, transparent) !important;
    }

    .xkh-home .xkh-cta__btn--primary:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    .xkh-home .xkh-cta__btn--ghost {
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
        background: var(--ui-surface) !important;
    }

    .xkh-home .xkh-cta__btn--ghost:hover {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary) !important;
    }

    /* Global Page Hero local palette + decorative SVG presentation attrs. */
    .page-hero {
        --ph-green: var(--ui-primary) !important;
        --ph-green-light: var(--ui-primary-hover) !important;
        --ph-ink: var(--ui-text) !important;
        --ph-muted: var(--ui-text-muted) !important;
        --ph-border: var(--ui-border) !important;
    }

    .page-hero .page-hero__eyebrow {
        color: var(--ui-primary) !important;
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
    }

    .page-hero__canvas :where(
        .page-hero__ring-cw,
        .page-hero__ring-ccw,
        .page-hero__pulse-dot,
        .page-hero__pulse-ring,
        .page-hero__geo,
        .page-hero__particle
    )[fill]:not([fill="none"]) {
        fill: var(--ui-primary) !important;
    }

    .page-hero__canvas :where(
        .page-hero__grid-line,
        .page-hero__ring-cw,
        .page-hero__ring-ccw,
        .page-hero__pulse-dot,
        .page-hero__pulse-ring,
        .page-hero__geo,
        .page-hero__particle
    )[stroke]:not([stroke="none"]) {
        stroke: var(--ui-primary) !important;
    }

    /* Shop / filters / catalogue legacy palettes. */
    :where(
        body[data-global-uix-route="shop"],
        body[data-global-uix-route="shop.by-brand"],
        body[data-global-uix-route="shop.by-business"],
        body[data-global-uix-route="products.index"],
        body[data-global-uix-route="products.show"],
        body[data-global-uix-route="categories.show"],
        body[data-global-uix-route="brands.show"]
    ) {
        --shop-brand: var(--ui-primary);
        --shop-brand-hover: var(--ui-primary-hover);
        --shop-brand-light: var(--ui-primary-soft);
        --shop-brand-soft: var(--ui-primary-soft);
        --shop-brand-border: var(--ui-primary-border);
        --shop-accent: var(--ui-accent);
        --shop-navy: var(--ui-text);
        --shop-gray-50: var(--ui-bg-page);
        --shop-gray-100: var(--ui-surface-alt);
        --shop-gray-200: var(--ui-border);
        --shop-gray-400: var(--ui-text-muted);
        --shop-gray-500: var(--ui-text-muted);
        --shop-gray-600: var(--ui-text-muted);
        --shop-gray-700: var(--ui-text);
        --shop-white: var(--ui-surface);
        --shop-red: var(--ui-danger);
        --shop-green: var(--ui-success);

        --sb-brand: var(--ui-primary);
        --sb-brand-hover: var(--ui-primary-hover);
        --sb-brand-light: var(--ui-primary-soft);
        --sb-accent: var(--ui-accent);
        --sb-navy: var(--ui-text);
        --sb-gray-50: var(--ui-bg-page);
        --sb-gray-100: var(--ui-surface-alt);
        --sb-gray-200: var(--ui-border);
        --sb-gray-400: var(--ui-text-muted);
        --sb-gray-500: var(--ui-text-muted);
        --sb-gray-700: var(--ui-text);
        --sb-white: var(--ui-surface);
        --sb-red: var(--ui-danger);
        --sb-green: var(--ui-success);
    }

    body[data-global-uix-route="shop.by-business"] {
        --sbp-ink: var(--ui-text);
        --sbp-brand: var(--ui-primary);
        --sbp-muted: var(--ui-text-muted);
        --sbp-line: var(--ui-border);
        --sbp-soft: var(--ui-surface-alt);
    }

    body[data-global-uix-route="products.show"] {
        --page-bg: var(--ui-bg-page);
        --soft-bg: var(--ui-surface-alt);
        --line: var(--ui-border);
        --line-soft: var(--ui-border);
        --text: var(--ui-text);
        --muted: var(--ui-text-muted);
        --muted-light: var(--ui-text-muted);
    }

    /* Public policy surfaces. */
    body[data-global-uix-route^="pages."] {
        --privacy-primary: var(--ui-primary);
        --privacy-primary-light: var(--ui-primary-soft);
        --privacy-dark: var(--ui-text);
        --privacy-text: var(--ui-text);
        --privacy-light: var(--ui-text-muted);
        --privacy-border: var(--ui-border);
        --privacy-bg: var(--ui-bg-page);
    }

    /* Public quotation surface. */
    body[data-global-uix-route^="quotation.public"] {
        --dq-brand: var(--ui-primary);
        --dq-brand-dark: var(--ui-primary-hover);
        --dq-navy: var(--ui-secondary);
        --dq-text: var(--ui-text);
        --dq-muted: var(--ui-text-muted);
        --dq-border: var(--ui-border);
        --dq-surface: var(--ui-surface);
        --dq-bg: var(--ui-bg-page);
    }

    /* ---------------------------------------------------------
       2. GLOBAL HEADER + STOREFRONT PRIMARY INTERACTIONS
       --------------------------------------------------------- */
    .ek-header-photo-btn,
    .ek-mobile-photo-btn {
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
        background: var(--ui-primary-soft) !important;
    }

    .ek-header-photo-btn:hover,
    .ek-mobile-photo-btn:active {
        color: var(--ui-on-primary) !important;
        border-color: var(--ui-primary) !important;
        background: var(--ui-primary) !important;
        box-shadow:
            0 4px 12px
            color-mix(in srgb, var(--ui-primary) 22%, transparent) !important;
    }

    .ek-header-photo-btn:focus-visible {
        outline-color: var(--ui-primary) !important;
    }

    .ek-cart-header-left svg,
    .ek-bottom-cart-item-price {
        color: var(--ui-primary) !important;
    }

    .ek-bottom-cart-empty a,
    .ek-bottom-cart-btn-primary {
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
        border-color: var(--ui-button-primary-border) !important;
    }

    .ek-bottom-cart-empty a:hover,
    .ek-bottom-cart-btn-primary:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    /* Photo-request modal is brand interaction; success icon remains semantic. */
    :where(.pm-upload:hover, .pm-preview-add:hover, .pm-input:focus) {
        border-color: var(--ui-primary) !important;
    }

    .pm-preview-add:hover {
        color: var(--ui-primary) !important;
    }

    .pm-upload:hover,
    .pm-input:focus {
        background: var(--ui-primary-soft) !important;
    }

    .pm-input:focus {
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    .pm-btn-primary {
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
    }

    .pm-success-icon {
        color: var(--ui-success) !important;
        background:
            color-mix(in srgb, var(--ui-success) 11%, var(--ui-surface)) !important;
    }

    /* ---------------------------------------------------------
       3. RFQ — COMPLETE BRAND STUDIO CONSUMER WIRING
       --------------------------------------------------------- */
    body[data-global-uix-route="rfq"] {
        background: var(--ui-bg-page) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="rfq"] [data-rfq-page] {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-body) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-3c5f13a,
        .rfq-u-aed704a,
        .rfq-u-4979197,
        .rfq-u-9ad067f,
        .rfq-u-e0f1b46
    ) {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-heading) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-2b83f9c,
        .rfq-u-f532635,
        .rfq-u-f28f7df,
        .rfq-u-ea2298a
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-edac830,
        .rfq-u-4f169ab
    ) {
        background: var(--ui-card-bg) !important;
        border-color: var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-3ced88a,
        .rfq-u-a054079,
        .rfq-u-501f8f3,
        .rfq-u-34cbe8d,
        .rfq-u-a0f0a2d,
        .rfq-u-bec61fd,
        .rfq-u-691f6e6,
        .rfq-u-5ac78b9,
        .rfq-item-name,
        .rfq-item-quantity,
        .rfq-item-specifications
    ) {
        background: var(--ui-input-bg) !important;
        border-color: var(--ui-input-border-color) !important;
        color: var(--ui-input-text-color) !important;
        border-radius: var(--ui-input-radius) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-3ced88a,
        .rfq-u-a054079,
        .rfq-u-501f8f3,
        .rfq-u-34cbe8d,
        .rfq-u-a0f0a2d,
        .rfq-u-bec61fd,
        .rfq-u-691f6e6,
        .rfq-u-5ac78b9,
        .rfq-item-name,
        .rfq-item-quantity,
        .rfq-item-specifications
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-70fda72,
        .rfq-u-2de5594
    ) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-2de5594:hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-e8c0ea7 {
        background: var(--ui-surface) !important;
        border-color: var(--ui-primary) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-e8c0ea7:hover {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-hover) !important;
        color: var(--ui-primary-hover) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-988c1ee {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-78f9ec7 {
        background: var(--ui-surface) !important;
        border-color: var(--ui-input-border-color) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-78f9ec7:hover,
    body[data-global-uix-route="rfq"] .rfq-u-78f9ec7:focus-visible {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary) !important;
        outline-color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-f13ffc5 {
        background: var(--ui-secondary) !important;
        color: var(--ui-on-primary) !important;
        border-radius: var(--ui-card-radius) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-f13ffc5 :where(
        .rfq-u-c0ab781,
        .rfq-u-2c374d0
    ) {
        color:
            color-mix(
                in srgb,
                var(--ui-on-primary) 82%,
                transparent
            ) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-f13ffc5 .rfq-u-82d341f {
        stroke: var(--ui-primary) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-9bf62d6 {
        background: var(--ui-surface-alt) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-9bf62d6:hover {
        background: var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-9bf62d6 svg[stroke]:not([stroke="none"]) {
        stroke: var(--ui-primary) !important;
    }

    /* Success/error remain semantic, not brand-colored. */
    body[data-global-uix-route="rfq"] .rfq-u-bf79870 {
        color: var(--ui-success) !important;
        background:
            color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)) !important;
        border-color:
            color-mix(in srgb, var(--ui-success) 28%, var(--ui-border)) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-bf79870 svg {
        stroke: var(--ui-success) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-3229215 {
        color: var(--ui-danger) !important;
        background:
            color-mix(in srgb, var(--ui-danger) 7%, var(--ui-surface)) !important;
        border-color:
            color-mix(in srgb, var(--ui-danger) 24%, var(--ui-border)) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-3145769 {
        background:
            color-mix(in srgb, var(--ui-success) 7%, var(--ui-surface)) !important;
        border-color:
            color-mix(in srgb, var(--ui-success) 26%, var(--ui-border)) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-u-24eac9b {
        background: var(--ui-success) !important;
    }

    body[data-global-uix-route="rfq"] :where(
        .rfq-u-1901b8a,
        .rfq-u-6a30619,
        .rfq-file-tag
    ) {
        color: var(--ui-success) !important;
    }

    body[data-global-uix-route="rfq"] .rfq-file-tag {
        background:
            color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)) !important;
    }

    /* Official third-party identity intentionally not rebound to Brand Primary. */
    body[data-global-uix-route="rfq"] .rfq-u-2bdcb1c {
        background: var(--ui-service-whatsapp-bg) !important;
        color: var(--ui-service-whatsapp-text) !important;
    }

    /* ---------------------------------------------------------
       4. PUBLIC CATALOG / CATEGORY / BRAND / PRODUCT ACTIONS
       --------------------------------------------------------- */
    :where(
        body[data-global-uix-route="shop"],
        body[data-global-uix-route="shop.by-brand"],
        body[data-global-uix-route="shop.by-business"],
        body[data-global-uix-route="products.index"],
        body[data-global-uix-route="products.show"],
        body[data-global-uix-route="categories.show"],
        body[data-global-uix-route="brands.show"]
    ) :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    :where(
        .pcard-brand,
        .pcard-title:hover,
        .pcard-price-quote,
        .brand-i005,
        .brand-i028,
        .category-i006,
        .shop-u-2259c18,
        .sb-filter-label svg,
        .sb-filter-item.active .sb-filter-name
    ) {
        color: var(--ui-primary) !important;
    }

    :where(
        .pcard-btn-quote,
        .brand-i009,
        .brand-i016,
        .brand-i033,
        .category-i013,
        .category-i035,
        .shop-u-40312ad,
        .shop-u-cbd43cd,
        .sb-apply-btn,
        .sb-header-icon,
        .sb-header-count,
        .sb-mobile-count
    ) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    :where(
        .pcard-btn-quote,
        .brand-i009,
        .brand-i033
    ):hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    .pcard-brand {
        background: var(--ui-primary-soft) !important;
    }

    :where(.cat-slide-card:hover, .partner-card:hover) {
        border-color: var(--ui-primary) !important;
    }

    :where(.cat-slide-icon, .partner-card__placeholder) {
        background: var(--ui-primary-soft) !important;
        color: var(--ui-primary) !important;
    }

    :where(.shop-filter-tag-search, .shop-filter-tag-stock) {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    :where(.shop-filter-tag-search a, .shop-filter-tag-stock a) {
        color: var(--ui-primary) !important;
    }

    .sb-search-input:focus {
        border-color: var(--ui-input-focus-color) !important;
        background: var(--ui-input-bg) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
    }

    :where(.sb-dot, .sb-stock-dot) {
        background: var(--ui-primary) !important;
    }

    .sb-stock-toggle input[type="checkbox"] {
        accent-color: var(--ui-primary) !important;
    }

    /* In-stock is semantic success, not Brand Primary. */
    :where(.pcard-stock.in, .ek-stock .is-in-stock) {
        color: var(--ui-success) !important;
    }

    .pcard-stock.in {
        background:
            color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)) !important;
    }

    /* ---------------------------------------------------------
       5. CONTENT / ABOUT / PARTNERS / POLICY PRESENTATION ACCENTS
       --------------------------------------------------------- */
    :where(
        .about-breadcrumb__inner a,
        .about-label,
        .about-mv article span,
        .partners-label,
        .policy-breadcrumb__inner a:hover,
        .privacy-contact-card__item a:hover
    ) {
        color: var(--ui-primary) !important;
    }

    :where(.about-actions a, .about-cta a, .partners-cta a) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    :where(.about-actions a, .about-cta a, .partners-cta a):hover {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    .privacy-header__label {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    /* CMS-authored CTA compatibility classes. */
    :where(.cms-page-block__cta, .cms-replacement__cta) :where(a, button),
    :where(.cms-page-block, .cms-replacement) a[class*="cta"] {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    /* ---------------------------------------------------------
       6. INLINE SVG LEGACY PRESENTATION BRIDGE
       Only presentation greens are rebound. Semantic success regions below
       can override this with higher specificity.
       --------------------------------------------------------- */
    /* ---------------------------------------------------------
       7. GLOBAL FOCUS + PRIMARY CHECK/RADIO AUTHORITY
       --------------------------------------------------------- */
    body[data-global-uix-route] :where(
        input[type="checkbox"],
        input[type="radio"]
    ) {
        accent-color: var(--ui-primary);
    }

    body[data-global-uix-route] :where(
        a[href],
        button,
        input,
        select,
        textarea
    ):focus-visible {
        outline-color: var(--ui-primary) !important;
    }