/*
     * GLOBAL UIX STOREFRONT / COMMERCE BRIDGE
     *
     * This layer intentionally changes presentation only. Existing routes,
     * forms, Alpine behavior, commerce logic and template composition remain
     * authoritative. Legacy selectors consume the canonical --ui-* design
     * runtime until their markup is incrementally converted to <x-ui.*>.
     */

    body {
        background: var(--ui-bg-page);
        color: var(--ui-text);
        font-family: var(--ui-font-body);
    }

    :where(
        h1, h2, h3,
        .page-title,
        .section-title,
        .ek-page-title,
        .ek-section-title,
        .ek-product-title,
        .shop-title
    ) {
        color: var(--ui-text);
        font-family: var(--ui-font-heading);
    }

    :where(
        p,
        .text-muted,
        .ek-muted,
        .ek-product-meta,
        .ek-checkout-header p,
        .ek-bottom-cart-item-meta
    ) {
        color: var(--ui-text-muted);
    }

    /* Storefront Top Bar authority */
    body[data-public-template] .ek-topbar {
        background: var(--ui-storefront-topbar-bg) !important;
        color: var(--ui-storefront-topbar-text) !important;
        border-bottom-color: var(--ui-storefront-topbar-border) !important;
    }

    body[data-public-template] .ek-topbar-social-link,
    body[data-public-template] .ek-topbar-social-link svg {
        color: var(--ui-storefront-topbar-icon) !important;
    }

    body[data-public-template] .ek-topbar-link,
    body[data-public-template] .ek-topbar-lang {
        color: var(--ui-storefront-topbar-link) !important;
    }

    body[data-public-template] .ek-topbar-link:hover,
    body[data-public-template] .ek-topbar-link:focus-visible,
    body[data-public-template] .ek-topbar-lang:hover,
    body[data-public-template] .ek-topbar-lang:focus-visible,
    body[data-public-template] .ek-topbar-social-link:hover,
    body[data-public-template] .ek-topbar-social-link:focus-visible {
        color: var(--ui-storefront-topbar-link-hover) !important;
    }

    /* Shell authority */
    :where(.ek-header, .ek-header-inner) {
        background-color: var(--ui-header-bg) !important;
        color: var(--ui-header-text);
    }

    :where(
        .ek-header-search,
        .ek-header-search input,
        .ek-header-action,
        .ek-mobile-action-btn
    ) {
        border-color: var(--ui-border) !important;
    }

    .ek-header-search-inner:focus-within {
        border-color: var(--ui-primary) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft);
    }

    :where(
        .ek-header-action:hover,
        .ek-mobile-action-btn:hover,
        .ek-drawer-cat-item:hover,
        .ek-drawer-menu-item:hover
    ) {
        color: var(--ui-primary) !important;
        border-color: var(--ui-primary-border) !important;
        background-color: var(--ui-primary-soft) !important;
    }

    .ek-nav {
        background-color: var(--ui-nav-bg) !important;
        border-bottom-color: color-mix(in srgb, var(--ui-nav-text) 20%, transparent);
        color: var(--ui-nav-text);
    }

    :where(
        .ek-nav a,
        .ek-nav button,
        .ek-nav-cat-item
    ) {
        color: var(--ui-nav-text);
    }

    :where(
        .ek-nav a:hover,
        .ek-nav a.is-active,
        .ek-nav button:hover,
        .ek-nav-cat-item:hover,
        .ek-nav-cat-item.is-active
    ) {
        color: var(--ui-on-primary) !important;
        /* Progressive enhancement: old browsers keep Primary; modern
           browsers replace it with the color-mix declaration below. */
        background-color: var(--ui-primary) !important;
        background-color: color-mix(in srgb, var(--ui-primary) 72%, transparent) !important;
    }

    body[data-public-template] .ek-nav .ek-nav-cat-btn:is(:hover, :focus-visible, .is-open) {
        color: var(--ui-nav-text) !important;
        background: color-mix(in srgb, var(--ui-nav-text) 12%, transparent) !important;
    }

    body[data-public-template] .ek-nav .ek-nav-cat-dropdown {
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        box-shadow: var(--ui-shadow-card);
    }

    body[data-public-template] .ek-nav .ek-nav-cat-item {
        color: var(--ui-text);
    }

    body[data-public-template] .ek-nav .ek-nav-cat-item:is(:hover, :focus-visible, .is-active) {
        color: var(--ui-primary) !important;
        background: var(--ui-primary-soft) !important;
    }

    .store-fixed-wrapper.is-scrolled {
        box-shadow: var(--ui-shadow-sticky);
    }

    /* Global action bridge */
    :where(
        .ek-btn-primary,
        .btn-primary,
        .button-primary,
        .ek-cart-btn-primary,
        .ek-bottom-cart-btn-primary,
        .ek-checkout-submit,
        .checkout-submit,
        .rfq-submit,
        #rfq-form button[type="submit"],
        .ek-checkout-page button[type="submit"],
        .ek-cart-page a[href*="checkout"],
        .cart-page a[href*="checkout"],
        .newsletter-minimal__button
    ) {
        background-color: 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;
        font-family: var(--ui-font-ui);
    }

    :where(
        .ek-btn-primary,
        .btn-primary,
        .button-primary,
        .ek-cart-btn-primary,
        .ek-bottom-cart-btn-primary,
        .ek-checkout-submit,
        .checkout-submit,
        .rfq-submit,
        #rfq-form button[type="submit"],
        .ek-checkout-page button[type="submit"],
        .newsletter-minimal__button
    ):hover {
        background-color: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
    }

    :where(
        .ek-btn-outline,
        .btn-outline,
        .button-outline,
        .ek-cart-btn-outline,
        .ek-bottom-cart-btn-outline
    ) {
        background-color: transparent !important;
        border-color: var(--ui-primary) !important;
        color: var(--ui-primary) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    :where(
        .ek-btn-outline,
        .btn-outline,
        .button-outline,
        .ek-cart-btn-outline,
        .ek-bottom-cart-btn-outline
    ):hover {
        background-color: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
    }

    /* Brand propagation compatibility authority.
       Primary and Accent selected in Brand Studio reach legacy public
       actions as well as modern UI primitives. Semantic status colors and
       third-party messaging brand colors remain independent. */
    body[data-public-template] :where(
        .pcard-btn-primary,
        .ek-product-button--primary,
        .ek-product-button-primary,
        .product-card__button--primary,
        .product-card__cta--primary,
        .shop-product-card__button--primary,
        .ek-add-to-cart-btn,
        .add-to-cart-btn,
        .add-to-cart-button,
        .btn-add-to-cart,
        .ek-btn-add-to-cart,
        .ek-buy-now-btn,
        .buy-now-btn,
        .btn-buy-now
    ) {
        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;
        font-family: var(--ui-font-ui);
    }

    body[data-public-template] :where(
        .pcard-btn-primary,
        .ek-product-button--primary,
        .ek-product-button-primary,
        .product-card__button--primary,
        .product-card__cta--primary,
        .shop-product-card__button--primary,
        .ek-add-to-cart-btn,
        .add-to-cart-btn,
        .add-to-cart-button,
        .btn-add-to-cart,
        .ek-btn-add-to-cart,
        .ek-buy-now-btn,
        .buy-now-btn,
        .btn-buy-now
    ):is(:hover, :focus-visible) {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    /* Quote and secondary product actions consume Accent instead of legacy green. */
    body[data-public-template] :where(
        .pcard-btn-quote,
        .pcard-btn-ghost,
        .ek-product-button--secondary,
        .ek-product-button--outline,
        .product-card__button--secondary,
        .product-card__button--outline,
        .shop-product-card__button--secondary
    ) {
        background: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-surface)) !important;
        border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-border)) !important;
        color: var(--ui-text) !important;
        border-radius: var(--ui-button-radius) !important;
        font-family: var(--ui-font-ui);
    }

    body[data-public-template] :where(
        .pcard-btn-quote,
        .pcard-btn-ghost,
        .ek-product-button--secondary,
        .ek-product-button--outline,
        .product-card__button--secondary,
        .product-card__button--outline,
        .shop-product-card__button--secondary
    ):is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-surface)) !important;
        border-color: var(--ui-accent) !important;
        color: var(--ui-text) !important;
    }

    /* Search-area and desktop Photo Request are supporting brand actions. */
    body[data-public-template] :where(
        .ek-header-search .ui-photo-request-trigger--search,
        .ek-header-search .ek-header-photo-btn,
        .ui-photo-request-trigger--desktop,
        .ek-header-photo-uix-cta
    ) {
        background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface)) !important;
        border-color: color-mix(in srgb, var(--ui-primary) 34%, var(--ui-border)) !important;
        color: var(--ui-primary) !important;
        border-radius: var(--ui-button-radius) !important;
        font-family: var(--ui-font-ui);
    }

    body[data-public-template] :where(
        .ek-header-search .ui-photo-request-trigger--search,
        .ek-header-search .ek-header-photo-btn,
        .ui-photo-request-trigger--desktop,
        .ek-header-photo-uix-cta
    ):is(:hover, :focus-visible) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-public-template] :where(
        .ek-header-search .ui-photo-request-trigger--search svg,
        .ek-header-search .ek-header-photo-btn svg,
        .ui-photo-request-trigger--desktop svg,
        .ek-header-photo-uix-cta svg
    ) {
        color: currentColor !important;
        stroke: currentColor !important;
    }

    body[data-public-template] :where(
        .projects-eyebrow,
        .project-card__cta,
        .ek-brand-link,
        .ek-category-tag
    ) {
        color: var(--ui-primary) !important;
    }

    body[data-public-template] :where(
        .project-card__category,
        .pcard-brand,
        .pcard-category
    ) {
        border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border)) !important;
        background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface)) !important;
        color: var(--ui-text) !important;
    }

    /* Global Page Hero authority.
       <x-page-hero> is the canonical standard public-page hero.
       Visual structure is shared; Brand + Design Runtime own its palette. */
    body[data-public-template] .page-hero {
        --ph-green: var(--ui-primary);
        --ph-green-light: color-mix(
            in srgb,
            var(--ui-primary) 66%,
            var(--ui-accent)
        );
        --ph-ink: var(--ui-text);
        --ph-muted: var(--ui-text-muted);
        --ph-border: var(--ui-border);
        background: var(--ui-surface) !important;
        border-bottom-color: var(--ui-border) !important;
        color: var(--ui-text) !important;
        font-family: var(--ui-font-ui);
    }

    body[data-public-template] .page-hero__grid-line {
        stroke: color-mix(
            in srgb,
            var(--ui-primary) 8%,
            transparent
        ) !important;
    }

    body[data-public-template] .page-hero__eyebrow {
        background: color-mix(
            in srgb,
            var(--ui-primary) 8%,
            var(--ui-surface)
        ) !important;
        border-color: color-mix(
            in srgb,
            var(--ui-primary) 28%,
            var(--ui-border)
        ) !important;
        color: var(--ui-primary) !important;
    }

    body[data-public-template] .page-hero__eyebrow-dot {
        background: var(--ui-primary) !important;
    }

    body[data-public-template] .page-hero__title {
        color: var(--ui-text) !important;
        font-family: var(--ui-font-heading) !important;
    }

    body[data-public-template] .page-hero__title .ph-accent {
        color: var(--ui-primary) !important;
    }

    body[data-public-template] .page-hero__title .ph-accent::after {
        background: linear-gradient(
            90deg,
            var(--ui-primary),
            color-mix(
                in srgb,
                var(--ui-primary) 58%,
                var(--ui-accent)
            )
        ) !important;
    }

    body[data-public-template] .page-hero__description {
        color: var(--ui-text-muted) !important;
    }

    body[data-public-template]
        .page-hero__divider
        span:first-child,
    body[data-public-template]
        .page-hero__divider
        span:nth-child(3) {
        background: color-mix(
            in srgb,
            var(--ui-primary) 30%,
            transparent
        ) !important;
    }

    body[data-public-template]
        .page-hero__divider
        span:nth-child(2) {
        background: var(--ui-primary) !important;
    }

    body[data-public-template] .page-hero__accent {
        background: linear-gradient(
            180deg,
            transparent,
            var(--ui-primary),
            color-mix(
                in srgb,
                var(--ui-primary) 58%,
                var(--ui-accent)
            ),
            transparent
        ) !important;
    }

    @media (max-width: 640px) {
        body[data-public-template] .page-hero__accent {
            background: linear-gradient(
                90deg,
                transparent,
                var(--ui-primary),
                color-mix(
                    in srgb,
                    var(--ui-primary) 58%,
                    var(--ui-accent)
                ),
                transparent
            ) !important;
        }
    }


    /* Shop brand completion authority.
       Legacy sidebar and toolbar controls still contain old fixed presentation
       values. The storefront theme now wins without changing stock/status
       semantics or shop behavior. */
    body[data-public-template] :where(
        .sb-header-icon,
        .sb-header-count,
        .sb-mobile-count,
        .shop-view-btn.active
    ) {
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
        border-color: var(--ui-button-primary-border) !important;
    }

    body[data-public-template] :where(
        .sb-filter-label svg,
        .sb-dot
    ) {
        color: var(--ui-primary) !important;
        fill: currentColor;
    }

    body[data-public-template] .sb-dot {
        background: var(--ui-primary) !important;
    }

    body[data-public-template] .sb-search-input:focus {
        border-color: var(--ui-primary) !important;
        box-shadow: 0 0 0 3px
            color-mix(
                in srgb,
                var(--ui-primary) 10%,
                transparent
            ) !important;
    }

    body[data-public-template] .sb-filter-item.active {
        background: color-mix(
            in srgb,
            var(--ui-primary) 9%,
            var(--ui-surface)
        ) !important;
    }

    body[data-public-template]
        .sb-filter-item.active
        .sb-filter-name {
        color: var(--ui-primary) !important;
    }

    body[data-public-template] :where(
        .sb-section button[type="submit"],
        .sb-apply-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-public-template] :where(
        .sb-section button[type="submit"],
        .sb-apply-btn
    ):is(:hover, :focus-visible) {
        background: var(--ui-button-primary-hover-bg) !important;
        border-color: var(--ui-button-primary-hover-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-public-template] .sb-rfq-card {
        border: 1px solid
            color-mix(
                in srgb,
                var(--ui-accent) 42%,
                var(--ui-border)
            ) !important;
        background: linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--ui-primary) 8%,
                var(--ui-surface)
            ),
            color-mix(
                in srgb,
                var(--ui-accent) 16%,
                var(--ui-surface-alt)
            )
        ) !important;
        color: var(--ui-text) !important;
        box-shadow: var(--ui-shadow-sm);
    }

    body[data-public-template] .sb-rfq-card svg {
        color: var(--ui-primary) !important;
        stroke: currentColor !important;
    }

    body[data-public-template] .sb-rfq-title {
        color: var(--ui-text) !important;
    }

    body[data-public-template] .sb-rfq-btn {
        background: color-mix(
            in srgb,
            var(--ui-accent) 26%,
            var(--ui-surface)
        ) !important;
        border: 1px solid
            color-mix(
                in srgb,
                var(--ui-accent) 58%,
                var(--ui-border)
            ) !important;
        color: var(--ui-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-public-template] .sb-rfq-btn:is(
        :hover,
        :focus-visible
    ) {
        background: color-mix(
            in srgb,
            var(--ui-accent) 38%,
            var(--ui-surface)
        ) !important;
        border-color: var(--ui-accent) !important;
        color: var(--ui-text) !important;
    }

    body[data-public-template] :where(
        .shop-pagination a,
        .pagination a,
        .pagination span
    ) {
        border-color: var(--ui-border) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-public-template] :where(
        .shop-pagination .active,
        .pagination .active,
        .pagination [aria-current="page"]
    ) {
        background: var(--ui-button-primary-bg) !important;
        border-color: var(--ui-button-primary-border) !important;
        color: var(--ui-button-primary-text) !important;
    }

    /* Raw legacy controls on commerce/form surfaces */
    :where(
        .ek-checkout-page,
        .ek-cart-page,
        .cart-page,
        .wishlist-page,
        .ek-wishlist-page,
        #rfq-form,
        .ek-product-grid,
        .shop-page,
        .ek-shop-page
    ) :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
        select,
        textarea
    ) {
        border-color: var(--ui-input-border-color) !important;
        border-radius: var(--ui-input-radius) !important;
        background-color: var(--ui-input-bg) !important;
        color: var(--ui-input-text-color) !important;
        font-family: var(--ui-font-ui);
    }

    :where(
        .ek-checkout-page,
        .ek-cart-page,
        .cart-page,
        .wishlist-page,
        .ek-wishlist-page,
        #rfq-form,
        .ek-product-grid,
        .shop-page,
        .ek-shop-page
    ) :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
        select,
        textarea
    ):focus {
        border-color: var(--ui-input-focus-color) !important;
        outline: 2px solid var(--ui-primary-soft);
        outline-offset: 1px;
    }

    :where(
        .ek-checkout-page,
        .ek-cart-page,
        .cart-page,
        .wishlist-page,
        .ek-wishlist-page,
        #rfq-form
    ) input[type="checkbox"],
    :where(
        .ek-checkout-page,
        .ek-cart-page,
        .cart-page,
        .wishlist-page,
        .ek-wishlist-page,
        #rfq-form
    ) input[type="radio"] {
        accent-color: var(--ui-primary);
    }

    /* Commerce surfaces */
    :where(
        .product-card,
        .ek-product-card,
        .shop-product-card,
        .category-card,
        .ek-category-card,
        .brand-card,
        .ek-brand-card,
        .ek-cart-item,
        .cart-item,
        .wishlist-item,
        .ek-wishlist-item,
        .ek-checkout-card,
        .ek-checkout-section,
        .ek-checkout-summary,
        .ek-product-summary,
        .ek-product-gallery
    ) {
        border-color: var(--ui-card-border-color) !important;
        border-radius: var(--ui-card-radius) !important;
        background-color: var(--ui-card-bg) !important;
        box-shadow: var(--ui-card-shadow);
    }

    :where(
        .product-card,
        .ek-product-card,
        .shop-product-card,
        .category-card,
        .ek-category-card,
        .brand-card,
        .ek-brand-card
    ):hover {
        border-color: var(--ui-primary-border) !important;
        box-shadow: var(--ui-shadow-card);
    }

    :where(
        .ek-product-price,
        .product-price,
        .sale-price,
        .ek-cart-total strong,
        .ek-bottom-cart-total strong,
        .ek-checkout-total strong
    ) {
        color: var(--ui-commerce-price) !important;
    }

    :where(
        .is-selected,
        .is-current,
        .is-active,
        [aria-selected="true"]
    ):where(
        .product-option,
        .variant-option,
        .filter-option,
        .ek-product-option,
        .ek-variant-option,
        .ek-filter-option,
        .ek-checkout-step,
        .ek-bottom-nav-item
    ) {
        border-color: var(--ui-commerce-selected-border) !important;
        background-color: var(--ui-commerce-selected-bg) !important;
        color: var(--ui-primary) !important;
    }

    :where(
        .ek-bottom-nav-item.is-active,
        .ek-bottom-nav-photo,
        .wishlist-toggle.is-active,
        .ek-wishlist-toggle.is-active
    ) {
        color: var(--ui-primary) !important;
    }

    :where(
        .ek-bottom-nav-badge,
        .ek-header-action-badge,
        .cart-count,
        .wishlist-count
    ) {
        background-color: var(--ui-primary) !important;
        color: var(--ui-on-primary) !important;
    }

    /* Breadcrumbs and public links */
    :where(
        .ek-breadcrumb-shell a,
        .shop-breadcrumb a,
        .ek-checkout-breadcrumb a,
        .ek-product-breadcrumb a,
        #rfq-form a
    ):hover {
        color: var(--ui-primary) !important;
    }

    /* Banners / notices */
    :where(
        .photo-request-banner,
        .ek-photo-request-banner,
        .promo-banner,
        .ek-promo-banner,
        .announcement-banner,
        .ek-announcement-banner
    ) {
        border-color: var(--ui-primary-border) !important;
        background-color: var(--ui-primary-soft) !important;
        color: var(--ui-text) !important;
        border-radius: var(--ui-card-radius);
    }

    /* Footer remains structurally controlled by Storefront Studio. The global
       design system owns the interaction color, typography and controls. */
    .premium-footer {
        font-family: var(--ui-font-body);
    }

    :where(
        .newsletter-minimal__success
    ) {
        color: var(--ui-primary) !important;
    }

    .newsletter-minimal__input:focus {
        border-color: var(--ui-primary) !important;
        box-shadow: 0 0 0 3px var(--ui-primary-soft);
    }

    /* Shared focus authority */
    :where(
        a,
        button,
        input,
        select,
        textarea
    ):focus-visible {
        outline-color: var(--ui-primary);
    }

    @media (prefers-reduced-motion: reduce) {
        :where(
            .product-card,
            .ek-product-card,
            .shop-product-card,
            .category-card,
            .brand-card
        ) {
            transition: none !important;
        }
    }


    /* =============================================================
       STOREFRONT THEME WIRING v0.2.3
       Reported public surfaces consume the canonical --ui-* runtime.
       Slider management/business logic is intentionally untouched.
       ============================================================= */

    /* Topbar social icons: visible profiles inherit Appearance colors. */
    body[data-public-template] .ek-topbar-social-link,
    body[data-public-template] .ek-topbar-social-icon,
    body[data-public-template] .ek-topbar-social-svg {
        color: var(--ui-storefront-topbar-icon) !important;
    }

    body[data-public-template] .ek-topbar-social-svg.is-fill {
        fill: currentColor !important;
    }

    body[data-public-template] .ek-topbar-social-svg.is-stroke {
        fill: none !important;
        stroke: currentColor !important;
    }

    body[data-public-template] .ek-topbar-social-link:hover,
    body[data-public-template] .ek-topbar-social-link:focus-visible,
    body[data-public-template] .ek-topbar-social-link:hover .ek-topbar-social-icon,
    body[data-public-template] .ek-topbar-social-link:focus-visible .ek-topbar-social-icon,
    body[data-public-template] .ek-topbar-social-link:hover .ek-topbar-social-svg,
    body[data-public-template] .ek-topbar-social-link:focus-visible .ek-topbar-social-svg {
        color: var(--ui-storefront-topbar-link-hover) !important;
    }

    /* Current homepage hero / slider presentation only. */
    body[data-public-template] .xkh-hero__title,
    body[data-public-template] .xkh-section-heading h2,
    body[data-public-template] .xkh-section-heading h3,
    body[data-public-template] .xkh-cta__title {
        color: var(--ui-text) !important;
    }

    body[data-public-template] :where(
        .xkh-kicker,
        .xkh-hero__eyebrow,
        .xkh-section-heading__eyebrow,
        .xkh-section-heading > div > span,
        .xkh-insight-card__meta,
        .xkh-cta__eyebrow
    ) {
        color: var(--ui-primary) !important;
    }

    body[data-public-template] :where(
        .xkh-kicker__line,
        .xkh-cta__eyebrow-dot
    ) {
        background-color: var(--ui-primary) !important;
    }

    body[data-public-template] .xkh-section-heading__aside,
    body[data-public-template] .xkh-section-heading__aside a {
        color: var(--ui-primary) !important;
    }

    body[data-public-template] .xkh-section-heading__aside:hover,
    body[data-public-template] .xkh-section-heading__aside:focus-visible,
    body[data-public-template] .xkh-section-heading__aside a:hover,
    body[data-public-template] .xkh-section-heading__aside a:focus-visible {
        color: var(--ui-primary-hover) !important;
    }

    body[data-public-template] .xkh-button--primary {
        border-color: var(--ui-button-primary-border) !important;
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
        transition:
            background-color var(--ui-motion-normal),
            border-color var(--ui-motion-normal),
            color var(--ui-motion-normal),
            transform var(--ui-motion-normal);
    }

    body[data-public-template] .xkh-button--primary:hover,
    body[data-public-template] .xkh-button--primary:focus-visible {
        border-color: var(--ui-button-primary-hover-border) !important;
        background: var(--ui-button-primary-hover-bg) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-public-template] .xkh-button--secondary {
        border-color: var(--ui-secondary) !important;
        background: var(--ui-surface) !important;
        color: var(--ui-secondary) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-public-template] .xkh-button--secondary:hover,
    body[data-public-template] .xkh-button--secondary:focus-visible {
        border-color: var(--ui-secondary) !important;
        background: var(--ui-secondary) !important;
        color: var(--ui-on-primary) !important;
    }

    /* Knowledge Centre cards and Read Article actions. */
    body[data-public-template] .xkh-insight-card {
        border-color: var(--ui-card-border-color) !important;
        background: var(--ui-card-bg) !important;
        color: var(--ui-text) !important;
        border-radius: var(--ui-card-radius) !important;
        box-shadow: var(--ui-card-shadow) !important;
    }

    body[data-public-template] .xkh-insight-card__body h3 {
        color: var(--ui-text) !important;
    }

    body[data-public-template] :where(
        .xkh-insight-card__body p,
        .xkh-section-heading__aside,
        .xkh-cta__desc
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-public-template] .xkh-text-link {
        color: var(--ui-primary) !important;
        transition: color var(--ui-motion-normal);
    }

    body[data-public-template] .xkh-text-link:hover,
    body[data-public-template] .xkh-text-link:focus-visible {
        color: var(--ui-primary-hover) !important;
    }

    /* Start Your Project: theme surface + primary CTA. WhatsApp remains semantic. */
    body[data-public-template] .xkh-cta__panel {
        border-color: var(--ui-primary-border) !important;
        background:
            linear-gradient(
                135deg,
                var(--ui-primary-soft) 0%,
                var(--ui-surface) 72%
            ) !important;
        color: var(--ui-text) !important;
        border-radius: var(--ui-card-radius) !important;
    }

    body[data-public-template] .xkh-cta__btn--primary {
        border-color: var(--ui-button-primary-border) !important;
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-public-template] .xkh-cta__btn--primary:hover,
    body[data-public-template] .xkh-cta__btn--primary:focus-visible {
        border-color: var(--ui-button-primary-hover-border) !important;
        background: var(--ui-button-primary-hover-bg) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-public-template] :where(
        .xkh-cta__cell-blink,
        .xkh-cta__cursor,
        .xkh-cta__bar,
        .xkh-cta__sparkline
    ) {
        fill: var(--ui-primary) !important;
        stroke: var(--ui-primary) !important;
    }

    body[data-public-template] .xkh-cta__canvas > rect:not([fill^="url("]) {
        fill: var(--ui-primary-soft) !important;
    }

    body[data-public-template] .xkh-cta__canvas > :where(line, rect[stroke]) {
        stroke: var(--ui-primary-border) !important;
    }

    body[data-public-template] .xkh-cta__canvas > circle {
        fill: var(--ui-primary) !important;
    }

    body[data-public-template] .xkh-cta__canvas > polyline {
        stroke: var(--ui-primary) !important;
    }

    /* Catalogue is a brand action; WhatsApp keeps its own semantic green. */
    body[data-public-template] .ek-whatsapp-floating-stack,
    body[data-public-template] .catalogue-fab {
        position: fixed !important;
        left: auto !important;
        right: auto !important;
        inset-inline-end: 20px !important;
    }

    body[data-public-template] .ek-whatsapp-floating-stack {
        bottom: 18px !important;
        z-index: 10020 !important;
    }

    body[data-public-template] .catalogue-fab {
        bottom: 92px !important;
        z-index: 10021 !important;
        border-color: var(--ui-button-primary-border) !important;
        background: var(--ui-button-primary-bg) !important;
        color: var(--ui-button-primary-text) !important;
        border-radius: var(--ui-button-radius) !important;
    }

    body[data-public-template] .catalogue-fab:hover,
    body[data-public-template] .catalogue-fab:focus-visible {
        border-color: var(--ui-button-primary-hover-border) !important;
        background: var(--ui-button-primary-hover-bg) !important;
        color: var(--ui-button-primary-text) !important;
    }

    body[data-public-template] .catalogue-fab svg {
        color: currentColor !important;
    }

    @media (max-width: 640px) {
        body[data-public-template] .ek-whatsapp-floating-stack,
        body[data-public-template] .catalogue-fab {
            inset-inline-end: 14px !important;
        }

        body[data-public-template] .ek-whatsapp-floating-stack {
            bottom: 14px !important;
        }

        body[data-public-template] .catalogue-fab {
            bottom: 82px !important;
        }
    }


    /* =========================================================
       MOBILE FLOATING ACTIONS LIFT v0.1
       Keep WhatsApp + Download Catalogue above the mobile nav.
       Bottom-nav footprint is ~58px plus safe-area / optional floating offset.
       ========================================================= */
    @media (max-width: 640px) {
        body[data-public-template] .ek-whatsapp-floating-stack {
            bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        }

        body[data-public-template] .catalogue-fab {
            bottom: calc(154px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* =========================================================
       PUBLIC THEME COMPLETION v0.1.2 — SHOP BY BUSINESS

       The legacy --sbp-* page palette becomes an alias of DesignRuntime.
       WhatsApp and stock/status semantics are deliberately not overridden.
       ========================================================= */

    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="shop.by-business"] .sbp-page {
        color: var(--ui-text) !important;
        background: var(--ui-bg-page) !important;
    }

    body[data-global-uix-route="shop.by-business"] :where(
        .sbp-label,
        .sbp-biz-arrow,
        .sbp-uae-kicker,
        .sbp-view-all
    ) {
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-label::before {
        background: var(--ui-primary) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-biz-grid {
        background: var(--ui-border) !important;
        border-color: var(--ui-border) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-biz-card {
        background: var(--ui-card-bg) !important;
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-biz-card:hover {
        background: var(--ui-primary-soft) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-biz-icon {
        background: var(--ui-surface-alt) !important;
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-biz-card:hover .sbp-biz-icon {
        background: var(--ui-primary) !important;
        color: var(--ui-on-primary) !important;
    }

    body[data-global-uix-route="shop.by-business"] :where(
        .sbp-intro h2,
        .sbp-biz-card h3,
        .sbp-feat-head h2,
        .sbp-seo h2,
        .sbp-uae-cta h2
    ) {
        color: var(--ui-text) !important;
    }

    body[data-global-uix-route="shop.by-business"] :where(
        .sbp-intro p,
        .sbp-stat span,
        .sbp-biz-card p,
        .sbp-feat-head p,
        .sbp-seo p
    ) {
        color: var(--ui-text-muted) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-uae-cta {
        background:
            linear-gradient(
                135deg,
                var(--ui-primary-soft),
                var(--ui-surface)
            ) !important;
        border-color: var(--ui-primary-border) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-uae-city {
        background: var(--ui-primary-soft) !important;
        border-color: var(--ui-primary-border) !important;
        color: var(--ui-primary) !important;
    }

    body[data-global-uix-route="shop.by-business"] .sbp-btn-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;
    }

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

    /* =========================================================
       MOBILE BOTTOM NAV REQUEST THEME FIX v1.0.1

       Photo Request is a brand CTA, not a success/WhatsApp semantic.
       Canonical authority = --ui-primary family.
       ========================================================= */
    .ek-bottom-nav-photo {
        color: var(--ui-primary) !important;
    }

    .ek-bottom-nav-photo .ek-bottom-nav-photo-inner {
        background:
            linear-gradient(
                135deg,
                var(--ui-primary),
                var(--ui-primary-hover)
            ) !important;

        color: var(--ui-on-primary) !important;

        box-shadow:
            0 4px 16px
            color-mix(
                in srgb,
                var(--ui-primary) 30%,
                transparent
            ) !important;
    }

    .ek-bottom-nav-photo .ek-bottom-nav-photo-inner svg {
        color: var(--ui-on-primary) !important;
        stroke: currentColor !important;
    }

    .ek-bottom-nav-photo > span,
    .ek-bottom-nav-photo span:not(.ek-bottom-nav-badge) {
        color: var(--ui-primary) !important;
    }

    /* =========================================================
       BRAND STYLE VISUAL SYSTEMS v3.0.0

       Brand Style controls visual character only:
       shape, density, typography, elevation and motion.

       Color authority remains exclusively Brand Studio /
       DesignRuntime through existing --ui-* variables.
       No Primary / Secondary / Accent values are defined here.
       ========================================================= */

    body[data-brand-style] {
        background: var(--ui-bg-page);
        color: var(--ui-text);
    }

    body[data-brand-style] :where(
        h1,
        h2,
        h3,
        .page-title,
        .section-title,
        .ek-page-title,
        .ek-section-title,
        .ek-product-title,
        .page-hero__title
    ) {
        font-family: var(--ui-font-heading);
    }

    /*
     * COMMERCE CLASSIC
     * Familiar enterprise commerce: restrained radius, clear borders,
     * conventional typography and low-risk elevation.
     */
    body[data-brand-style="commerce-classic"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 12px;
        border: 1px solid var(--ui-card-border-color);
        box-shadow: var(--ui-card-shadow);
    }

    body[data-brand-style="commerce-classic"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled)
    ) {
        border-radius: 8px;
    }

    body[data-brand-style="commerce-classic"] :where(
        .ek-nav a,
        .ek-nav button,
        .page-hero__title,
        .section-title
    ) {
        letter-spacing: normal;
        text-transform: none;
    }

    /*
     * MODERN COMMERCE
     * Softer geometry, elevated cards and visible motion hierarchy.
     */
    body[data-brand-style="modern-commerce"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--ui-card-shadow);
        transition:
            transform var(--ui-motion-normal) var(--ui-motion-ease),
            box-shadow var(--ui-motion-normal) var(--ui-motion-ease);
    }

    body[data-brand-style="modern-commerce"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled)
    ) {
        border-radius: 14px;
    }

    body[data-brand-style="modern-commerce"] :where(
        h1,
        h2,
        .page-hero__title,
        .section-title
    ) {
        letter-spacing: -.025em;
        font-weight: 700;
    }

    @media (hover: hover) {
        body[data-brand-style="modern-commerce"] :where(
            .product-card,
            .ek-product-card,
            .category-card,
            .brand-card,
            .project-card,
            .blog-card
        ):hover {
            transform: translateY(-4px);
        }
    }

    /*
     * WARM ARTISAN
     * Hand-crafted character via asymmetric geometry, softer controls
     * and relaxed heading rhythm.
     */
    body[data-brand-style="artisan-warm"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 24px;
        border: 1px solid var(--ui-card-border-color);
        box-shadow: none;
        overflow: hidden;
    }

    body[data-brand-style="artisan-warm"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled)
    ) {
        border-radius: 999px;
    }

    body[data-brand-style="artisan-warm"] :where(
        h1,
        h2,
        h3,
        .page-hero__title,
        .section-title,
        .ek-product-title
    ) {
        letter-spacing: -.015em;
        font-weight: 600;
        line-height: 1.12;
    }

    body[data-brand-style="artisan-warm"] :where(
        .eyebrow,
        .page-hero__eyebrow
    ) {
        text-transform: none;
        letter-spacing: .035em;
        font-style: italic;
    }

    /*
     * BEAUTY EDITORIAL
     * Flat editorial cards, dramatic whitespace and lighter display type.
     */
    body[data-brand-style="beauty-editorial"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 0;
        box-shadow: none;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: var(--ui-card-border-color);
    }

    body[data-brand-style="beauty-editorial"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled)
    ) {
        border-radius: 0;
    }

    body[data-brand-style="beauty-editorial"] :where(
        h1,
        h2,
        h3,
        .page-hero__title,
        .section-title,
        .ek-product-title
    ) {
        letter-spacing: -.04em;
        font-weight: 400;
        line-height: 1.02;
    }

    body[data-brand-style="beauty-editorial"] :where(
        .ek-nav a,
        .ek-nav button,
        .eyebrow,
        .page-hero__eyebrow
    ) {
        text-transform: uppercase;
        letter-spacing: .10em;
        font-weight: 500;
    }

    /*
     * INDUSTRIAL
     * Hard edges, visible structure, denser controls and technical labels.
     */
    body[data-brand-style="industrial"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 4px;
        border: 2px solid var(--ui-card-border-color);
        box-shadow: none;
    }

    body[data-brand-style="industrial"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled),
        input,
        select,
        textarea
    ) {
        border-radius: 4px;
    }

    body[data-brand-style="industrial"] :where(
        .ek-nav a,
        .ek-nav button,
        .eyebrow,
        .page-hero__eyebrow,
        .section-title
    ) {
        text-transform: uppercase;
        letter-spacing: .075em;
        font-weight: 700;
    }

    body[data-brand-style="industrial"] :where(
        h1,
        h2,
        h3,
        .page-hero__title
    ) {
        letter-spacing: -.015em;
        font-weight: 800;
    }

    /*
     * MEDICAL CLEAN
     * Calm geometry, low elevation, clean borders and generous readability.
     */
    body[data-brand-style="medical-clean"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 14px;
        border: 1px solid var(--ui-border);
        box-shadow: none;
    }

    body[data-brand-style="medical-clean"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled),
        input,
        select,
        textarea
    ) {
        border-radius: 8px;
    }

    body[data-brand-style="medical-clean"] :where(
        h1,
        h2,
        h3,
        .page-hero__title,
        .section-title
    ) {
        letter-spacing: -.018em;
        font-weight: 600;
        line-height: 1.15;
    }

    body[data-brand-style="medical-clean"] :where(
        .ek-nav,
        .ek-header,
        .store-header,
        .store-navigation
    ) {
        border-color: var(--ui-border);
    }

    /*
     * PREMIUM LUXURY
     * Editorial restraint: square geometry, low shadow, wide navigation
     * tracking and light display typography.
     */
    body[data-brand-style="luxury"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 0;
        border: 1px solid var(--ui-card-border-color);
        box-shadow: none;
    }

    body[data-brand-style="luxury"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled)
    ) {
        border-radius: 0;
        letter-spacing: .075em;
        text-transform: uppercase;
    }

    body[data-brand-style="luxury"] :where(
        h1,
        h2,
        h3,
        .page-hero__title,
        .section-title,
        .ek-product-title
    ) {
        letter-spacing: -.03em;
        font-weight: 400;
        line-height: 1.04;
    }

    body[data-brand-style="luxury"] :where(
        .ek-nav a,
        .ek-nav button,
        .eyebrow,
        .page-hero__eyebrow
    ) {
        text-transform: uppercase;
        letter-spacing: .14em;
        font-weight: 500;
    }

    /*
     * MINIMAL
     * Nearly flat UI, compact shape language and deliberately quiet chrome.
     */
    body[data-brand-style="minimal"] :where(
        .product-card,
        .ek-product-card,
        .category-card,
        .brand-card,
        .project-card,
        .blog-card,
        .ui-card,
        .ek-card
    ) {
        border-radius: 6px;
        border: 1px solid var(--ui-border);
        box-shadow: none !important;
    }

    body[data-brand-style="minimal"] :where(
        .ek-btn,
        .ui-button,
        button:not(.unstyled),
        input,
        select,
        textarea
    ) {
        border-radius: 6px;
        box-shadow: none;
    }

    body[data-brand-style="minimal"] :where(
        .ek-nav a,
        .ek-nav button,
        .page-hero__title,
        .section-title
    ) {
        letter-spacing: -.01em;
        text-transform: none;
    }

    body[data-brand-style="minimal"] :where(
        h1,
        h2,
        h3,
        .page-hero__title
    ) {
        font-weight: 600;
        line-height: 1.1;
    }