/* Component color roles are supplied by the active theme. Product artwork retains its colors. */
body.commerce-interface { background-color: var(--site-background); color: var(--site-text); }
body.commerce-interface::before { background: color-mix(in srgb, var(--site-primary) 6%, transparent); }
body.commerce-interface #app:has(:is(.catalog-page, .commerce-cart-page, .commerce-account-page)) { background: var(--site-background); }
body.commerce-interface :is(.catalog-page-header h1, .catalog-results__heading h2, .commerce-page-heading h1, .product-detail-info h1, .landing-home-section-heading h2) { color: var(--site-heading); }
body.commerce-interface .text-primary { color: var(--site-primary) !important; }
body.commerce-interface :is(.text-muted, .text-secondary) { color: var(--site-muted) !important; }

/* Header controls need explicit colors instead of inheriting legacy dark text. */
body.commerce-interface :is(.custom-navbar, .desktop-navbar) { background: var(--site-header-background); color: var(--site-header-text); border-color: var(--site-border); }
body.commerce-interface .desktop-navbar .menu-buttons > button,
body.commerce-interface .desktop-navbar .menu-buttons > a > button,
body.commerce-interface .desktop-navbar .profile-dropdown > button,
body.commerce-interface .custom-navbar .menu-mobile-buttons > button { background: transparent; color: var(--site-header-text); }
body.commerce-interface .desktop-navbar .menu-buttons button > i,
body.commerce-interface .desktop-navbar .menu-buttons button > span:not(.counter),
body.commerce-interface .custom-navbar .menu-mobile-buttons > button > i { color: inherit; }
body.commerce-interface .desktop-navbar .menu-buttons button:hover,
body.commerce-interface .desktop-navbar .profile-dropdown.open > button,
body.commerce-interface .custom-navbar .menu-mobile-buttons > button:hover { background: var(--site-header-hover); color: var(--site-header-text); }
body.commerce-interface .desktop-navbar > .desktop-navbar-box > .add-to-cart,
body.commerce-interface .custom-navbar .menu-mobile-buttons > .add-to-cart { background: var(--site-button-background); color: var(--site-button-text); box-shadow: none; }
body.commerce-interface .desktop-navbar > .desktop-navbar-box > .add-to-cart:hover,
body.commerce-interface .custom-navbar .menu-mobile-buttons > .add-to-cart:hover { background: var(--site-button-hover); color: var(--site-button-text); }
body.commerce-interface .desktop-navbar .search-bar,
body.commerce-interface .desktop-navbar .search-bar:focus-within,
body.commerce-interface .mobile-search,
body.commerce-interface .mobile-search .catalog-search-form,
body.commerce-interface .landing-home-search .catalog-search-form { background: var(--site-search-background); border-color: var(--site-border); }
body.commerce-interface .desktop-navbar .search-bar input,
body.commerce-interface .mobile-search .catalog-search-input,
body.commerce-interface .landing-home-search .catalog-search-input { background: transparent; color: var(--site-search-text); }
body.commerce-interface :is(.search-bar, .mobile-search, .landing-home-search) input::placeholder { color: var(--site-search-text); opacity: .65; }
body.commerce-interface .desktop-navbar .search-bar button,
body.commerce-interface .desktop-navbar .search-bar button i,
body.commerce-interface .mobile-search .catalog-search-form button,
body.commerce-interface .landing-home-search .catalog-search-form button { background: transparent; color: var(--site-search-icon); }
body.commerce-interface .profile-dropdown-menu,
body.commerce-interface .catalog-search-suggestions { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface .profile-dropdown-menu a,
body.commerce-interface .profile-dropdown-menu a i { color: var(--site-text); }
body.commerce-interface .profile-dropdown-menu a:hover { background: var(--site-secondary-background); color: var(--site-secondary-text); }

/* Category menu and mobile navigation. */
body.commerce-interface .categories-menu { background: var(--site-menu-background); color: var(--site-menu-text); }
body.commerce-interface .categories-menu :is(h5, .close-menu-btn, .category-item-main-bt, .category-item-groups-option, .catalog-tags-menu__item small) { color: var(--site-menu-text); }
body.commerce-interface .categories-menu :is(.category-item, .catalog-tags-menu__item) { background: var(--site-menu-item-background); }
body.commerce-interface .categories-menu .category-item-main-bt { background: transparent; }
body.commerce-interface .categories-menu :is(.category-item:hover, .category-item-groups-option:hover, .catalog-tags-menu__item:hover, .catalog-tags-menu__item.is-active) { background: var(--site-menu-item-hover); color: var(--site-menu-text); }
body.commerce-interface .bottom-bar { background: var(--site-bottom-background); border-color: var(--site-border); color: var(--site-bottom-text); }
body.commerce-interface .bottom-bar button,
body.commerce-interface .bottom-bar button i { color: var(--site-bottom-text); }
body.commerce-interface .bottom-bar button:hover { background: color-mix(in srgb, var(--site-bottom-text) 10%, transparent); color: var(--site-bottom-text); }

/* Primary and secondary actions. */
body.commerce-interface :is(.btn-primary, .add-to-cart-btn, .catalog-filter-submit, .catalog-category-button, .catalog-context-strip__categories, .commerce-button--primary, .landing-home-add-button, .landing-home-button:not(.landing-home-button--white):not(.landing-home-button--glass)) {
    background: var(--site-button-background); border-color: var(--site-button-background); color: var(--site-button-text);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--site-button-background) 15%, transparent);
}
body.commerce-interface :is(.btn-primary, .add-to-cart-btn, .catalog-filter-submit, .catalog-category-button, .catalog-context-strip__categories, .commerce-button--primary, .landing-home-add-button, .landing-home-button:not(.landing-home-button--white):not(.landing-home-button--glass)):is(:hover, :focus-visible) { background: var(--site-button-hover); border-color: var(--site-button-hover); color: var(--site-button-text); }
body.commerce-interface .product-buttons .add-to-cart-btn { background: var(--site-button-background); color: var(--site-button-text); }
body.commerce-interface .product-buttons .add-to-cart-btn:hover { background: var(--site-button-hover); color: var(--site-button-text); }
body.commerce-interface :is(.btn-outline-primary, .commerce-button--secondary, .catalog-context-chip, .catalog-pagination button, .product-detail-back) { background: var(--site-secondary-background); border-color: var(--site-border); color: var(--site-secondary-text); }
body.commerce-interface :is(.btn-outline-primary, .commerce-button--secondary, .catalog-context-chip, .catalog-pagination button, .product-detail-back):hover { background: var(--site-secondary-hover); color: var(--site-secondary-text); }
body.commerce-interface :is(.catalog-context-chip.is-active, .catalog-context-chip.is-selected) { background: var(--site-secondary-background); color: var(--site-secondary-text); border-color: var(--site-border) !important; }

/* Panels, forms and typography. */
body.commerce-interface :is(.catalog-filter-panel, .catalog-context-strip, .catalog-result-count, .catalog-query-summary, .catalog-filter-trigger, .catalog-empty-state, .commerce-surface, .modal-content, .form-control, .form-select) { background-color: var(--site-surface); border-color: var(--site-border); color: var(--site-text); }
body.commerce-interface .catalog-filter-form .form-select { background-color: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface :is(.catalog-result-count, .catalog-page-header p, .catalog-context-strip__hint, .catalog-filter-form > label > span, .catalog-filter-panel__heading small) { color: var(--site-muted); }
body.commerce-interface :is(.catalog-result-count strong, .catalog-results__heading > div > span, .catalog-filter-panel__heading button, .catalog-pagination__status strong) { color: var(--site-primary); }
body.commerce-interface :is(.catalog-filter-panel__icon, .catalog-pagination__status) { background: var(--site-primary-soft); color: var(--site-primary); }

/* Prices, names and metadata have separate roles. */
body.commerce-interface :is(.product-card-content, .product-item-content, .landing-home-product-card) { background: var(--site-card-background); color: var(--site-card-text); border-color: var(--site-card-border); }
body.commerce-interface :is(.product-card-content, .product-item-content, .landing-home-product-card):hover { border-color: var(--site-card-border); }
body.commerce-interface .product-card-details .product-name,
body.commerce-interface .landing-home-product-card__body h3 a { color: var(--site-card-text); }
body.commerce-interface .product-card-details > p:not(.product-name),
body.commerce-interface .product-card-content .product-identity,
body.commerce-interface .product-card-content .product-identity :is(dt, dd),
body.commerce-interface .landing-home-product-card .product-identity { color: var(--site-card-muted); }
body.commerce-interface .product-card-details > h5,
body.commerce-interface .product-detail-price,
body.commerce-interface .landing-home-product-card__price,
body.commerce-interface .scale-badge-price { color: var(--site-price); }
body.commerce-interface :is(.quantity-selector, .quantity-selector-add, .landing-home-quantity) { background: var(--site-quantity-background); border-color: var(--site-card-border); }
body.commerce-interface :is(.quantity-selector, .quantity-selector-add, .landing-home-quantity) :is(button, input),
body.commerce-interface .landing-home .quantity-selector-add.landing-home-quantity :is(button, input) { background: transparent; color: var(--site-quantity-text); border-color: var(--site-card-border); }
body.commerce-interface :is(.quantity-selector, .quantity-selector-add, .landing-home-quantity) button:hover { background: color-mix(in srgb, var(--site-quantity-text) 10%, transparent); }
body.commerce-interface .product-tags { border-color: var(--site-card-border); }

/* Tags and counters are distinct from primary buttons. */
body.commerce-interface .catalog-tags__item,
body.commerce-interface .catalog-filter-panel .catalog-tags__item,
body.commerce-interface .product-tag { background: var(--site-tag-background); border-color: var(--site-tag-background); color: var(--site-tag-text); }
body.commerce-interface .catalog-tags__item :is(small, .catalog-tags__hash),
body.commerce-interface .catalog-filter-panel .catalog-tags__item small { color: var(--site-tag-text); }
body.commerce-interface .catalog-tags__item:is(:hover, .is-active),
body.commerce-interface .catalog-filter-panel .catalog-tags__item:is(:hover, .is-active),
body.commerce-interface .product-tag:hover { background: var(--site-tag-hover); border-color: var(--site-tag-hover); color: var(--site-tag-text); }
body.commerce-interface .active-tag-filter { background: var(--site-primary-soft); color: var(--site-primary); border-color: var(--site-primary); }
body.commerce-interface .active-tag-filter :is(small, a) { color: var(--site-primary); }
body.commerce-interface :is(.desktop-navbar, .custom-navbar) .counter,
body.commerce-interface .favorite-menu-count { background: var(--site-badge-background); color: var(--site-badge-text); border-color: var(--site-header-background); }
body.commerce-interface .favorite-toggle { background: var(--site-favorite-background); color: var(--site-favorite-text); border-color: var(--site-card-border); }
body.commerce-interface .favorite-toggle:hover { background: var(--site-favorite-background); color: var(--site-favorite-text); border-color: var(--site-favorite-text); }
body.commerce-interface .favorite-toggle.is-favorite { background: var(--site-badge-background); color: var(--site-badge-text); border-color: var(--site-badge-background); }

/* The floating cart contains inline colors in legacy pages. */
body.commerce-interface #floating-cart-pill,
body.commerce-interface #cart-total-sticky-bar > div { background: var(--site-cart-background) !important; color: var(--site-cart-text) !important; }
body.commerce-interface #floating-cart-pill :is(button, i) { color: var(--site-cart-text); }

body.commerce-interface.landing-active,
body.commerce-interface .landing-home { background-color: var(--site-background); }
body.commerce-interface .landing-home-footer { background: var(--site-footer-background); color: var(--site-footer-text); }
body.commerce-interface .landing-home-footer :is(p, nav a, .landing-home-footer__bottom) { color: var(--site-footer-text); }
body.commerce-interface .landing-home-footer nav a:hover { color: var(--site-footer-text); text-decoration: underline; }

/* Landing: use the same semantic roles as the catalog, not its old fixed palette. */
body.commerce-interface .landing-home :is(.landing-home-categories, .landing-home-featured) { background: var(--site-background); }
body.commerce-interface .landing-home :is(.landing-home-company, .landing-home-quick, .landing-home-commercial-duo) { background-color: var(--site-surface); }
body.commerce-interface .landing-home :is(.landing-home-category-heading h2, .landing-home-company__heading h2, .landing-home-heading h2) { color: var(--site-heading); }
body.commerce-interface .landing-home :is(.landing-home-kicker, .landing-home-text-link) { color: var(--site-primary); }
body.commerce-interface .landing-home-text-link:hover { color: var(--site-primary-dark); }
body.commerce-interface .landing-home :is(.landing-home-category-tile, .landing-home-company-card, .landing-home-storefront__feature, .landing-home-storefront__mini, .landing-home-quick-card) { background: var(--site-card-background); border-color: var(--site-card-border); color: var(--site-card-text); }
body.commerce-interface .landing-home :is(.landing-home-category-tile, .landing-home-storefront__mini):hover { border-color: var(--site-primary); color: var(--site-card-text); }
body.commerce-interface .landing-home :is(.landing-home-company-card p, .landing-home-storefront__content > p, .landing-home-storefront__price small, .landing-home-storefront__rule, .landing-home-storefront__mini .product-identity, .landing-home-storefront__feature .product-identity) { color: var(--site-card-muted); }
body.commerce-interface .landing-home-company__heading p { color: var(--site-muted); }
body.commerce-interface .landing-home :is(.landing-home-category-tile__media, .landing-home-product-card__media, .landing-home-storefront__visual, .landing-home-storefront__mini-media) { background: var(--site-card-background); }
body.commerce-interface .landing-home :is(.landing-home-category-tile__media > span, .landing-home-company-card header > span, .landing-home-company__values, .landing-home-product-card .scale-badge, .landing-home-storefront__mini .scale-badge) { background: var(--site-primary-soft); border-color: var(--site-border); color: var(--site-primary); }
body.commerce-interface .landing-home-company__values :is(strong, span, i) { color: var(--site-primary); }
body.commerce-interface .landing-home :is(.landing-home-category-tile__body em, .landing-home-storefront__mini-content > small, .landing-home-storefront__mini-media > span:first-child) { color: var(--site-primary); }
body.commerce-interface .landing-home :is(.landing-home-storefront__price strong, .landing-home-storefront__mini-price) { color: var(--site-price); }
body.commerce-interface .landing-home :is(.landing-home-product-card__badge, .landing-home-storefront__gallery) { background: var(--site-secondary-background); color: var(--site-secondary-text); }
body.commerce-interface .landing-home :is(.landing-home-category-all, .landing-home-product-card__seller-tools > *, .landing-home-category-carousel .slick-arrow) { background: var(--site-secondary-background); border-color: var(--site-border); color: var(--site-secondary-text); }
body.commerce-interface .landing-home :is(.landing-home-category-all, .landing-home-product-card__seller-tools > *, .landing-home-category-carousel .slick-arrow):hover { background: var(--site-secondary-hover); color: var(--site-secondary-text); }
body.commerce-interface .landing-home-category-carousel :is(.slick-prev, .slick-next)::before { color: var(--site-secondary-text); }
body.commerce-interface .landing-home-commerce-dock { background: linear-gradient(180deg, transparent, var(--site-background) 55%); }
body.commerce-interface .landing-home-commerce-dock__panel { background: var(--site-surface); border-color: var(--site-border); color: var(--site-text); }
body.commerce-interface .landing-home-commerce-dock__identity { background: var(--site-cart-background); color: var(--site-cart-text); }
body.commerce-interface .landing-home-commerce-dock__identity small { color: var(--site-cart-text); opacity: .8; }
body.commerce-interface .landing-home-commerce-dock__links a { color: var(--site-text); }
body.commerce-interface .landing-home-commerce-dock__links a:hover { background: var(--site-secondary-background); color: var(--site-secondary-text); }
body.commerce-interface .landing-home-commerce-dock__links a > i { background: var(--site-primary-soft); color: var(--site-primary); }
/* The slider, its transparent header and campaign artwork keep their own design. */

/* Cart, checkout, account, favorites and order details share panels and controls. */
body.commerce-interface #app:has(.commerce-pos-page) { background: var(--site-background); }
body.commerce-interface :is(.cart-local-search, .commerce-cart-item, .order-card, .favorite-product-row, .profile-branches-grid button, .collaborator-list article, .commerce-pos-page .card, .commerce-pos-page .app-products-item, .commerce-pos-page .total-summary, .pos-shipping-section, .commerce-pos-page .progress-container, .commerce-pos-page .pos-section-heading, .commerce-pos-page #step1.pos-step-panel, .seller-context-notice) { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface :is(.commerce-cart-item:hover, .order-card__footer, .profile-data-grid > div, .account-inline-empty, .commerce-order-modal .modal-footer, .commerce-pos-page .address-item) { background-color: var(--site-background); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface :is(.commerce-cart-item__scales .product-scales, .commerce-cart-item__scales .scale-badge, .commerce-summary-link:not(.commerce-summary-link--danger), .commerce-note-save, .account-navigation nav button:hover, .commerce-pos-page .address-item.active, .commerce-pos-page .address-item:hover) { background: var(--site-secondary-background); border-color: var(--site-border); color: var(--site-secondary-text); }
body.commerce-interface :is(.commerce-cart-item__content h3, .account-section__heading h2, .commerce-cart-summary h2, .profile-overview h2, .favorites-heading h2, .commerce-pos-page h1, .commerce-pos-page h2, .commerce-pos-page h3) { color: var(--site-heading); }
body.commerce-interface :is(.commerce-breadcrumb, .commerce-cart-item__number, .commerce-cart-item__controls label, .account-navigation nav button, .orders-filter-form label > span) { color: var(--site-muted); }
body.commerce-interface :is(.commerce-cart-item__aside > span strong, .commerce-summary-line--total strong, .favorite-product-row__price strong, .order-card__total strong, .commerce-pos-page .total-summary h3, .commerce-pos-page .app-products-item-price) { color: var(--site-price); }
body.commerce-interface .commerce-cart-item .quantity-selector { background: var(--site-quantity-background); border-color: var(--site-card-border); }
body.commerce-interface .commerce-cart-item .quantity-selector :is(button, input) { background: transparent; color: var(--site-quantity-text); border-color: var(--site-card-border); }
body.commerce-interface .account-navigation nav button.is-active { background: var(--site-button-background); color: var(--site-button-text); }
body.commerce-interface .account-navigation__person > span { background: var(--site-primary); color: var(--site-on-primary); }
body.commerce-interface .profile-overview { background: var(--site-primary-dark); color: var(--site-on-primary-dark); }
body.commerce-interface .profile-overview :is(h2, .commerce-eyebrow, .profile-overview__identity p, .profile-overview__shortcuts button, .profile-overview__shortcuts button > small) { color: var(--site-on-primary-dark); }
body.commerce-interface :is(.form-control, .form-select, .cart-local-search input):focus { border-color: var(--site-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--site-primary) 15%, transparent); }
body.commerce-interface :is(.bg-white, .bg-light) { background-color: var(--site-surface) !important; }
body.commerce-interface .text-dark { color: var(--site-text) !important; }
body.commerce-interface .table { --bs-table-bg: var(--site-surface); --bs-table-color: var(--site-text); --bs-table-border-color: var(--site-border); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface :is(.list-group-item, .commerce-customer-modal .modal-content, .commerce-customer-modal .ts-control, .commerce-customer-modal .ts-dropdown, .pos-order-count) { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface .commerce-pos-page .total-summary :is(.form-control, .form-select),
body.commerce-interface .pos-shipping-section .form-control { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface .pos-summary-total { background: var(--site-cart-background); color: var(--site-cart-text); }
body.commerce-interface :is(.commerce-cart-empty h1, .commerce-pos-page .total-summary h5) { color: var(--site-heading); }
body.commerce-interface .product-detail-page { background: var(--site-background); }
body.commerce-interface :is(.product-detail-hero, .product-detail-facts > div, .product-detail-scales .scale-badge) { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.commerce-interface .product-detail-purchase { background: var(--site-primary-dark); color: var(--site-on-primary-dark); }
body.commerce-interface .product-detail-purchase :is(label, label span, .product-detail-unit-help) { color: var(--site-on-primary-dark); }
body.commerce-interface .product-detail-add { background: var(--site-button-background) !important; color: var(--site-button-text); }
body.commerce-interface .product-detail-add:hover:not(:disabled) { background: var(--site-button-hover) !important; color: var(--site-button-text); }
body:is(.commerce-interface, .site-themed) .policy-list { color: var(--site-text); }
body:is(.commerce-interface, .site-themed) .policy-list .policy-list__check { accent-color: var(--site-primary); }
body:is(.commerce-interface, .site-themed) .policy-list__item a { color: var(--site-primary); }

/* Standalone pages previously did not load the active theme at all. */
body.site-themed { background: var(--site-background); color: var(--site-text); }
body.site-themed :is(.card, .card-content, .modal-content, .form-control, .form-select) { background-color: var(--site-surface); border-color: var(--site-border); color: var(--site-text); }
body.site-themed :is(.card-header, .card-footer) { background: var(--site-background); border-color: var(--site-border); }
body.site-themed :is(.btn-primary, .login-submit) { background: var(--site-button-background); border-color: var(--site-button-background); color: var(--site-button-text); }
body.site-themed :is(.btn-primary, .login-submit):hover { background: var(--site-button-hover); border-color: var(--site-button-hover); color: var(--site-button-text); }
body.site-themed :is(.btn-link, .text-primary) { color: var(--site-primary); }
body.site-themed .text-muted { color: var(--site-muted) !important; }
body.site-auth :is(.login-panel, .login-shell) { background: var(--site-background); }
body.site-auth :is(.login-card h2, .card h1, .card h2) { color: var(--site-heading); }
body.site-auth :is(.field, .support-actions strong) { color: var(--site-text); }
body.site-auth :is(.catalog-link, .field__control > i, .password-toggle, .check-option, .terms-option, .login-divider, .support-actions small, .login-footer) { color: var(--site-muted); }
body.site-auth :is(.field__control input, .support-actions > a, .check-option > span, .terms-option > span) { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.site-auth .field__control input::placeholder { color: var(--site-muted); opacity: .7; }
body.site-auth .field__control:focus-within input { border-color: var(--site-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-primary) 12%, transparent); }
body.site-auth .support-actions > a:hover { background: var(--site-secondary-background); border-color: var(--site-primary); }
body.site-auth :is(.check-option, .terms-option) input:checked + span { background: var(--site-primary); border-color: var(--site-primary); }
body.site-auth :is(.check-option, .terms-option) input:checked + span::after { border-color: var(--site-on-primary); }
body.site-auth .login-visual__fade { background: linear-gradient(90deg, color-mix(in srgb, var(--site-primary-dark) 94%, transparent), color-mix(in srgb, var(--site-primary-dark) 60%, transparent) 40%, transparent); }
body.site-content-page .navbar { background: var(--site-header-background) !important; border-color: var(--site-border) !important; color: var(--site-header-text); }
body.site-content-page .navbar .text-dark { color: var(--site-header-text) !important; }
body.site-content-page .page-header { background: var(--site-primary-dark); color: var(--site-on-primary-dark); }
body.site-content-page .page-header::before { background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--site-primary) 25%, transparent), transparent 60%); }
body.site-content-page .card-content :is(h1, h2, h3, h4) { color: var(--site-heading); }
body.site-content-page .card-content a:not(.btn) { color: var(--site-primary); }
body.site-content-page .btn-outline-secondary { background: var(--site-secondary-background); border-color: var(--site-border); color: var(--site-secondary-text); }
body.site-content-page .btn-outline-secondary:hover { background: var(--site-secondary-hover); }
body.site-content-page .footer { background: var(--site-footer-background); color: var(--site-footer-text); }
body.site-content-page .footer a { color: var(--site-footer-text); }
@media (max-width: 880px) {
    body.site-auth .login-visual__veil { background: color-mix(in srgb, var(--site-primary-dark) 45%, transparent); }
    body.site-auth .login-visual__fade { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--site-primary-dark) 85%, transparent)); }
}