/* Customer and staff surfaces share a single semantic color palette. */
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) {
    --site-canvas: #f8f9fb;
    --site-surface: #ffffff;
    --site-raised: #f0f2f5;
    --site-hover: #e8ecf1;
    --site-text: #171717;
    --site-muted: #52525b;
    --site-border: rgba(24, 32, 43, .12);
    --site-control-border: #858d98;
    --site-edge-highlight: rgba(255, 255, 255, .85);
    --site-edge-hover: rgba(24, 32, 43, .22);
    --site-panel-shadow: 0 8px 28px -16px rgba(24, 32, 43, .18);
    --site-accent-text: #171717;
    --site-on-accent: #171717;
    --site-cta-bg: #ffd700;
    --site-cta-text: var(--site-on-accent);
    --site-cta-hover-bg: #e5c100;
    --site-accent-tint: rgba(255,215,0,.12);
    --site-accent-border: rgba(255,215,0,.35);
    --site-focus-ring: rgba(255,215,0,.22);
    --site-success: #16723c;
    --site-danger: #b42336;
    --site-info: #245bb0;
    --site-warning: #865800;
    --site-violet: #7542ad;
    --site-scheme: light;
    --site-overlay: rgba(255,255,255,.96);
    --site-panel-tint: rgba(15,23,42,.035);
    --primary-60: var(--site-surface);
    --primary-60-soft: var(--site-raised);
    --primary-60-card: var(--site-surface);
    --secondary-30: var(--site-text);
    --secondary-30-muted: var(--site-muted);
    --secondary-30-light: var(--site-muted);
    --secondary-30-border: var(--site-border);
    --dark-primary-60: var(--site-canvas);
    --dark-primary-60-alpha: var(--site-overlay);
    --dark-secondary-30: var(--site-text);
    --dark-secondary-30-muted: var(--site-muted);
    --dark-secondary-30-panel: var(--site-surface);
    --dark-secondary-30-border: var(--site-border);
    --dark-accent-10: var(--site-accent-text);
    --gold-dark: var(--site-accent-text);
    --dash-bg: var(--site-canvas);
    --dash-card-bg: var(--site-surface);
    --dash-border: var(--site-border);
    --dash-card-border: var(--site-border);
    --dash-text-main: var(--site-text);
    --dash-text-muted: var(--site-muted);
    --dash-text-dim: var(--site-muted);
}
html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode="dark"] {
    --site-canvas: #000000;
    --site-surface: #000000;
    --site-raised: #000000;
    --site-hover: #000000;
    --site-text: #f1f5f9;
    --site-muted: #b0bac9;
    --site-border: rgba(255, 255, 255, .12);
    --site-control-border: #68707c;
    --site-edge-highlight: rgba(255, 255, 255, .07);
    --site-edge-hover: rgba(255, 255, 255, .24);
    --site-panel-shadow: 0 12px 32px -20px rgba(0, 0, 0, .8);
    --site-accent-text: #ffd700;
    --site-success: #4ade80;
    --site-danger: #fca5a5;
    --site-info: #93c5fd;
    --site-warning: #fbbf24;
    --site-violet: #c4a0ef;
    --site-scheme: dark;
    --site-overlay: #000000;
    --site-panel-tint: #000000;
}
html[data-theme-scope="customer"] body { background: var(--site-canvas); color: var(--site-text); }
html[data-theme-scope="customer"] .site-header,
html[data-theme-scope="customer"] .site-footer {
    --site-header-bg: var(--site-surface);
    --primary-60-soft: var(--site-surface);
    --text-main: var(--site-text);
    --text-muted: var(--site-muted);
    --text-light: var(--site-muted);
    --border: var(--site-border);
    --site-cta-bg: #ffd700;
    --site-cta-text: #171717;
    --site-cta-hover-bg: #e5c100;
    --site-hover-bg: var(--site-hover);
    --site-color-scheme: var(--site-scheme);
}
.site-header-controls { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.site-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: space-around; isolation: isolate; flex: 0 0 80px; width: 80px; height: 44px; padding: 4px; border: 1px solid #d4d4d4; border-radius: 24px; background: #f1f1f1; color: #737373; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.site-theme-toggle__thumb { position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 50%; background: #ffd700; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; z-index: -1; }
.site-theme-toggle svg { flex: 0 0 18px; pointer-events: none; transform-origin: center; transition: color .24s ease, transform .34s cubic-bezier(.22, 1, .36, 1); }
.site-theme-toggle__sun { color: #171717; transform: rotate(0) scale(1); }
.site-theme-toggle__moon { transform: rotate(-18deg) scale(.85); }
.site-theme-toggle:hover { border-color: #a3a3a3; box-shadow: none; }
html[data-color-mode="dark"] .site-theme-toggle { background: #171717; border-color: #404040; color: #a3a3a3; }
html[data-color-mode="dark"] .site-theme-toggle__thumb { transform: translateX(36px); background: #ffd700; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
html[data-color-mode="dark"] .site-theme-toggle__sun { color: #a3a3a3; transform: rotate(30deg) scale(.85); }
html[data-color-mode="dark"] .site-theme-toggle__moon { color: #171717; transform: rotate(0) scale(1); }
html[data-color-mode="dark"] .site-theme-toggle:hover { border-color: #737373; }
@media (prefers-reduced-motion: reduce) { .site-theme-toggle, .site-theme-toggle__thumb, .site-theme-toggle svg { transition: none; } }
.site-theme-toggle:focus-visible { outline: 3px solid #ffd700; outline-offset: 3px; }
@media (min-width: 992px) { .site-header-controls { order: 3; margin-left: 16px; } }
@media (max-width: 575px) {
    .site-header .navbar-brand { font-size: .95rem; margin-right: .25rem; }
    .site-header .client-logo-img { max-width: 34px; height: 34px; object-fit: contain; }
    .site-header .navbar-toggler { padding: .35rem; }
}
html[data-theme-scope="customer"] :is(input, select, textarea) { color-scheme: var(--site-scheme); }
html[data-theme-scope="customer"] .text-muted { color: var(--site-muted) !important; }
html[data-theme-scope="customer"] .text-primary { color: var(--site-accent-text) !important; }
html[data-theme-scope="customer"] .form-control,
html[data-theme-scope="customer"] .form-select { background-color: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
html[data-theme-scope="customer"] :is(.form-control, .form-select):focus { border-color: var(--site-accent-text); box-shadow: 0 0 0 3px rgba(255,215,0,.22); }
html[data-theme-scope="customer"] .modal-content { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
html[data-theme-scope="customer"] :is(.modal-header, .modal-footer) { border-color: var(--site-border); }
html[data-theme-scope="customer"][data-color-mode="dark"] .btn-close { filter: invert(1); }
html[data-theme-scope="customer"] .table { --bs-table-bg: var(--site-surface); --bs-table-color: var(--site-text); --bs-table-border-color: var(--site-border); }
html[data-theme-scope="customer"] .btn-primary { color: #171717; }
/* Yellow remains the brand fill; text on a light surface uses a legible ochre. */
html[data-theme-scope="customer"] :is(.catalog-title, .svc-title, .calc-title, .auth-title) .accent { background: none; color: var(--site-accent-text); -webkit-text-fill-color: currentColor; }
@media print { .site-theme-toggle { display: none !important; } }

/* Bootstrap utilities and shared widgets must follow the public palette too. */
html[data-theme-scope="customer"] .text-dark { color: var(--site-text) !important; }
html[data-theme-scope="customer"] .bg-white { background-color: var(--site-surface) !important; }
html[data-theme-scope="customer"] .bg-light { background-color: var(--site-raised) !important; }
html[data-theme-scope="customer"] .border-dark { border-color: var(--site-border) !important; }
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) :is(.chat-header, #chatbot-window, #chatbot-messages, .chat-input-area, .chat-bubble.bot, .chat-faq-btn) { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) #chatbot-input { background: var(--site-raised); color: var(--site-text); border-color: var(--site-border); }
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) :is(.chat-bubble.user, #chatbot-toggle, #chatbot-send) { background: #171717; color: #ffd700; }
html[data-theme-scope="customer"] .btn-outline-primary { color: var(--site-text); border-color: var(--site-border); }
html[data-theme-scope="customer"] .btn-outline-primary:hover { background: var(--site-hover); color: var(--site-text); }
html[data-theme-scope="customer"] .action-bars :is(.btn-back, .btn-print) { color: var(--site-text); border-color: var(--site-border); background: var(--site-surface); }
/* Preserve document print colors even though the screen palette loads last. */
@media print {
    html[data-theme-scope="customer"] { color-scheme: light; }
    html[data-theme-scope="customer"] body { background: #fff !important; color: #18202b !important; }
}

html[data-theme-scope="customer"] .form-control::placeholder { color: var(--site-muted); opacity: 1; }
html[data-theme-scope="customer"] .btn-primary { background: #ffd700; border-color: #ffd700; color: #171717; }
html[data-theme-scope="customer"] .btn-primary:hover { background: #e5c100; border-color: #e5c100; }
html[data-theme-scope="customer"] .btn-outline-dark { color: var(--site-text); border-color: var(--site-border); }
html[data-theme-scope="customer"] .btn-outline-dark:hover { background: var(--site-hover); color: var(--site-text); }
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) .chat-header h5 { color: var(--site-text); }
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) .chat-header-icon { color: var(--site-accent-text); }
html[data-theme-scope="customer"][data-color-mode="light"] .auth-card { box-shadow: 0 12px 36px rgba(15,23,42,.1); }
html[data-theme-scope="customer"][data-color-mode="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b0bac9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

html[data-theme-scope="customer"][data-color-mode="light"] :is(.viz-workspace, .svc-form-card) { box-shadow: 0 12px 36px rgba(15,23,42,.1); }

/* Match the staff header's black background in customer dark mode. */
html[data-theme-scope="customer"][data-color-mode="dark"] .site-header {
    --site-header-bg: #000000;
}

/* Soft structural edges; interactive controls retain a distinct outline.
   Screen-only so document printing keeps its established borders. */
@media screen {
    html[data-theme-scope="customer"][data-color-mode] :is(
        .hero-catalog, .spotlight-card, .feature-card, .product-card, .related-card, .product-grid .empty-state,
        .detail-addon-panel, .svc-card, .svc-form-card, .glass-card, .auth-card,
        .cust-panel, .cust-summary-tile, .viz-workspace, .viz-comparison-panel,
        .viz-result-details, .policy-card, .invoice-container, .modal-content, #chatbot-window
    ) {
        border-color: var(--site-border);
        box-shadow: inset 0 1px 0 var(--site-edge-highlight), var(--site-panel-shadow);
    }
    html[data-theme-scope="customer"] :is(.spotlight-card, .product-card, .related-card, .hero-catalog):hover {
        border-color: var(--site-edge-hover);
    }
    html[data-theme-scope="customer"] :is(
        .form-control, .form-select, .auth-input, .sort-select,
        .catalog-search-field, #chatbot-input, .viz-product-search,
        .btn-outline-dark, .btn-outline-primary, .btn-hero-secondary
    ) {
        --site-border: var(--site-control-border);
    }
    html[data-theme-scope="customer"] :is(.form-control, .form-select, .auth-input)[aria-invalid="true"],
    html[data-theme-scope="customer"] :is(.form-control, .form-select).is-invalid {
        border-color: var(--site-danger);
    }
    html[data-theme-scope="customer"] :is(.form-control, .form-select).is-valid {
        border-color: var(--site-success);
    }
}
@media (forced-colors: active) {
    html[data-theme-scope="customer"] {
        --site-border: CanvasText;
        --site-control-border: ButtonText;
        --site-edge-hover: Highlight;
    }
}

/* Override the shared dark-page adapter with the staff workspace background. */
html[data-theme-scope="admin"][data-color-mode="dark"] :is(.site-header, .site-footer) {
    --site-header-bg: #000000;
    --primary-60-soft: #000000;
}

/* Customer glass surfaces. Opaque fallback is intentional without blur support. */
html:is([data-theme-scope="customer"], [data-theme-scope="admin"]) {
    --glass-fill: rgba(255, 255, 255, .48);
    --glass-sheen: rgba(255, 255, 255, .28);
    --glass-edge: rgba(24, 32, 43, .13);
    --glass-fallback: #ffffff;
}
html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode="dark"] {
    --glass-fill: rgba(14, 14, 14, .72);
    --glass-sheen: rgba(255, 255, 255, .045);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-fallback: #0a0a0a;
}
@media screen {
    html[data-theme-scope="customer"][data-color-mode] :is(
        .hero-catalog, .spotlight-card, .feature-card, .product-card, .related-card, .product-grid .empty-state,
        .svc-card, .svc-form-card, .auth-card, .cust-panel, .cust-summary-tile,
        .viz-workspace, .viz-comparison-panel, .viz-result-details, .policy-card,
        .settings-account-strip, .cust-product-detail, .cust-account-options, .catalog-suggestions,
        .modal-content
    ) {
        background: var(--glass-fallback);
        border-color: var(--glass-edge);
    }
    @supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
        html[data-theme-scope="customer"][data-color-mode] :is(
            .hero-catalog, .spotlight-card, .feature-card, .product-card, .related-card, .product-grid .empty-state,
            .svc-card, .svc-form-card, .auth-card, .cust-panel, .cust-summary-tile,
            .viz-workspace, .viz-comparison-panel, .viz-result-details, .policy-card,
        .settings-account-strip, .cust-product-detail, .cust-account-options, .catalog-suggestions,
            .modal-content
        ) {
            background: linear-gradient(135deg, var(--glass-sheen), transparent 55%), var(--glass-fill);
            -webkit-backdrop-filter: blur(16px) saturate(115%);
            backdrop-filter: blur(16px) saturate(115%);
            background-clip: padding-box;
        }
    }
    html[data-theme-scope="customer"][data-color-mode] :is(.hero-catalog, .spotlight-card, .product-card, .related-card):hover {
        border-color: var(--site-edge-hover);
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html[data-theme-scope="customer"][data-color-mode] :is(
        .hero-catalog, .spotlight-card, .feature-card, .product-card, .related-card, .product-grid .empty-state,
        .svc-card, .svc-form-card, .auth-card, .cust-panel, .cust-summary-tile,
        .viz-workspace, .viz-comparison-panel, .viz-result-details, .policy-card,
        .settings-account-strip, .cust-product-detail, .cust-account-options, .catalog-suggestions,
        .modal-content
    ) {
        background: var(--glass-fallback);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Light-mode links keep readable ink and gain a brand-yellow hover underline. */
html[data-theme-scope="customer"][data-color-mode="light"] :is(
    .hero-catalog-heading a, .hero-product-link, .home-text-link, .policy-card a
):hover {
    color: #171717;
    text-decoration: underline;
    text-decoration-color: #d6b400;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Introductory labels must remain readable on both page palettes. */
html[data-theme-scope="customer"] .intro-label {
    color: var(--site-muted);
    font-weight: 600;
    letter-spacing: .055em;
}
html[data-theme-scope="customer"] .intro-label::before {
    height: 2px;
    background: var(--accent-10);
}

/* Extend the service-card finish to customer search and supporting panels. */
@media screen {
    html[data-theme-scope="customer"][data-color-mode] :is(
        .filter-bar, .catalog-suggestions, .product-search-list,
        .detail-addon-panel, .detail-size-estimate, .spec-item, .svc-product-card, .product-addon-picker,
        .glass-card
    ) {
        background: var(--glass-fallback);
        border-color: var(--glass-edge);
        box-shadow: inset 0 1px 0 var(--site-edge-highlight), var(--site-panel-shadow);
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .filter-bar {
        border-radius: 24px;
    }
    @supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
        html[data-theme-scope="customer"][data-color-mode] :is(
            .filter-bar, .catalog-suggestions, .product-search-list,
            .detail-addon-panel, .detail-size-estimate, .spec-item, .svc-product-card, .product-addon-picker,
            .glass-card
        ) {
            background: linear-gradient(135deg, var(--glass-sheen), transparent 55%), var(--glass-fill);
            -webkit-backdrop-filter: blur(16px) saturate(115%);
            backdrop-filter: blur(16px) saturate(115%);
            background-clip: padding-box;
        }
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .catalog-search-field {
        background: rgba(0, 0, 0, .6);
        border-color: var(--site-control-border);
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .catalog-search-field:focus-within {
        border-color: #ffd700;
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .catalog-search-submit {
        background: #ffd700;
        color: #171717;
        border-color: #ffd700;
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .catalog-search-submit:hover {
        background: #e5c100;
        border-color: #e5c100;
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .svc-product-card:focus-within {
        border-color: #ffd700;
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html[data-theme-scope="customer"][data-color-mode] :is(
        .filter-bar, .catalog-suggestions, .product-search-list,
        .detail-addon-panel, .detail-size-estimate, .spec-item, .svc-product-card, .product-addon-picker,
        .glass-card
    ) {
        background: var(--glass-fallback);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Catalog and detail media keep their own surface, separate from glass content. */
html[data-theme-scope="customer"][data-color-mode="dark"] :is(.product-card, .related-card) {
    border-radius: 24px;
}
html[data-theme-scope="customer"][data-color-mode="dark"] .product-img-hero:has(.product-img-placeholder-detail) {
    --site-surface: #000000;
    background: #000000;
    box-shadow: none;
}
html[data-theme-scope="customer"][data-color-mode="dark"] .product-img-placeholder-detail {
    background: #000000;
    color: var(--site-muted);
}
.detail-size-estimate { background: var(--site-raised); border: 1px solid var(--site-border); border-radius: 16px; }

/* Product detail glass needs enough tonal separation to read on a black canvas. */
html[data-theme-scope="customer"][data-color-mode="dark"] :is(.detail-wrap, .related-section) {
    --glass-fill: rgba(14, 14, 14, .72);
    --glass-sheen: rgba(255, 255, 255, .06);
    --glass-edge: rgba(255, 255, 255, .16);
    --site-edge-highlight: rgba(255, 255, 255, .08);
}
@media screen {
    html[data-theme-scope="customer"][data-color-mode="dark"] .detail-wrap .col-lg-6:last-child {
        background-image: radial-gradient(ellipse closest-side at 50% 45%, rgba(213, 186, 113, .025) 0%, transparent 100%);
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] :is(.detail-size-estimate, .detail-addon-panel, .related-card) {
        border-top-color: rgba(255, 255, 255, .18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 1px 0 0 rgba(255, 255, 255, .02), 0 16px 40px rgba(0, 0, 0, .3);
    }
    html[data-theme-scope="customer"][data-color-mode="dark"] .detail-size-estimate {
        border-radius: 16px !important;
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html[data-theme-scope="customer"][data-color-mode="dark"] .detail-wrap .col-lg-6:last-child { background-image: none; }
}

html[data-theme-scope="customer"] .product-img-hero:has(.product-img-placeholder-detail) {
    border: 1px solid var(--site-border);
    border-radius: 24px;
}
html[data-theme-scope="customer"][data-color-mode="dark"] .product-img-hero:has(.product-img-placeholder-detail) {
    border-color: rgba(255, 255, 255, .18);
}

/* Warm ambient light repeats down the entire customer journey, including
   long pages and the glass header/footer, without section-sized cutoffs. */
@media screen {
    html[data-theme-scope="customer"] { --customer-ambient: rgba(215,180,45,.10); }
    html[data-theme-scope="customer"][data-color-mode="dark"] { --customer-ambient: rgba(255,215,0,.07); }
    html[data-theme-scope="customer"] body {
        background-color: var(--site-canvas);
        background-image:
            radial-gradient(ellipse 85% 400px at 12% 400px, var(--customer-ambient), transparent 100%),
            radial-gradient(ellipse 85% 400px at 85% 1200px, var(--customer-ambient), transparent 100%) !important;
        background-size: 100% 1600px;
        background-repeat: repeat-y;
    }
    html[data-theme-scope="customer"] .main-content {
        background-color: transparent;
        background-image: url("../img/surface-grain.9500d649d2ee.svg");
        background-size: 240px 240px;
        background-repeat: repeat;
    }
    html[data-theme-scope="customer"] :is(
        .hero, .spotlight, .features-strip, .how-it-works, .cta-banner,
        .catalog-header, .detail-wrap, .related-section, .svc-header,
        .features-section, .auth-page, .cust-dash, .svc-form-page,
        .viz-page, .viz-result-page, .policy-page
    ) {
        background-color: transparent;
        background-image: none;
    }
    html[data-theme-scope="customer"] :is(.auth-page, .cust-dash)::before {
        background-image: none;
    }
    html[data-theme-scope="customer"] :is(.auth-glow, .cust-dash-glow) {
        display: none;
    }
    html[data-theme-scope="customer"] :is(.home-collections, .home-features) {
        background: none;
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active), print {
    html[data-theme-scope="customer"] :is(body, .main-content) {
        background-image: none !important;
    }
}

html[data-theme-scope="customer"] .hero-visual::before { display: none; }

/* Keep an uninterrupted glass surface when catalog/related images are absent.
   The large product-detail placeholder deliberately remains pure black. */
html[data-theme-scope="customer"][data-color-mode="dark"] :is(.product-card, .related-card) {
    --glass-sheen: rgba(255, 255, 255, .065);
    --glass-fill: rgba(14, 14, 14, .68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 32px rgba(0,0,0,.2);
}
html[data-theme-scope="customer"][data-color-mode="dark"] :is(
    .product-img-wrap:has(.product-img-placeholder), .product-img-placeholder,
    .related-card-img:not(:has(img))
) {
    background: transparent;
    border-bottom: 1px solid var(--site-border);
}
html[data-theme-scope="customer"][data-color-mode="dark"] .product-img-placeholder { border-bottom: 0; }
.related-image-placeholder { color: var(--site-muted); font-size: .8rem; font-weight: 500; }

/* A select chevron is one icon, even when page styles reset its background. */
html[data-theme-scope="customer"] .form-select {
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px 12px;
    padding-right: 2.75rem;
}
/* Customer site chrome shares the same frosted surface as the portal panels. */
@media screen {
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] :is(.site-header, .site-footer) {
        background: var(--glass-fallback);
        border-color: var(--glass-edge);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] .site-header {
        box-shadow: inset 0 1px 0 var(--glass-sheen), 0 4px 24px rgb(0 0 0 / 5%);
    }
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] .site-header.scrolled {
        box-shadow: inset 0 1px 0 var(--glass-sheen), 0 8px 28px rgb(0 0 0 / 12%);
    }
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] .site-footer {
        box-shadow: inset 0 1px 0 var(--glass-sheen);
    }
    @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
        html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] :is(.site-header, .site-footer) {
            background: linear-gradient(120deg, var(--glass-sheen), transparent 65%), var(--glass-fill);
            -webkit-backdrop-filter: blur(20px) saturate(115%);
            backdrop-filter: blur(20px) saturate(115%);
        }
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode] :is(.site-header, .site-footer) {
        background: var(--glass-fallback);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
}

/* Customer filters and dropdowns share the portal's glass surfaces. */
@media screen {
    html[data-theme-scope="customer"] { --customer-menu-fill: rgba(255,255,255,.94); --customer-control-fill: rgba(255,255,255,.38); }
    html[data-theme-scope="customer"][data-color-mode="dark"] { --customer-menu-fill: rgba(24,24,24,.94); --customer-control-fill: rgba(255,255,255,.055); }
    html[data-theme-scope="customer"][data-color-mode] body :is(select, .filter-pill) {
        background-color: var(--customer-control-fill);
        color: var(--site-text);
        backdrop-filter: blur(12px) saturate(115%);
        -webkit-backdrop-filter: blur(12px) saturate(115%);
    }
    html[data-theme-scope="customer"][data-color-mode] :is(.catalog-suggestions, .cust-account-options) {
        background: linear-gradient(135deg, var(--glass-sheen), transparent 65%), var(--customer-menu-fill);
    }
    html[data-theme-scope="customer"][data-color-mode] :is(.catalog-suggestion, .catalog-suggestions-all, .cust-account-options a):hover { background: rgba(215,180,45,.1); }
    html[data-theme-scope="customer"][data-color-mode] .catalog-suggestions-all { background: transparent; }
    html[data-theme-scope="customer"][data-color-mode] .filter-pill:is(:hover, .active) { background: rgba(215,180,45,.12); border-color: var(--site-accent-text); }
    @supports (appearance: base-select) {
        html[data-theme-scope="customer"] select:not([multiple]):not([size]),
        html[data-theme-scope="customer"] select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
        html[data-theme-scope="customer"][data-color-mode] body select:not([multiple]):not([size]) {
            display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem;
            white-space: nowrap; background-image: none; padding-right: .85rem;
        }
        html[data-theme-scope="customer"] select::picker-icon { margin-left: auto; flex: 0 0 auto; font-size: .7em; }
        html[data-theme-scope="customer"] select::picker(select) {
            background: linear-gradient(135deg, var(--glass-sheen), transparent 65%), var(--customer-menu-fill);
            color: var(--site-text); border: 1px solid var(--site-border); border-radius: 12px;
            padding: 6px; margin-block: 6px; max-height: min(360px,60vh); overflow: auto;
            box-shadow: 0 12px 32px rgb(0 0 0 / 18%); backdrop-filter: blur(22px) saturate(120%);
        }
        html[data-theme-scope="customer"] select:not([multiple]):not([size]) option { background: transparent; color: var(--site-text); padding: 10px 12px; border-radius: 7px; }
        html[data-theme-scope="customer"] select:not([multiple]):not([size]) option:is(:checked, :hover, :focus) { background: rgba(215,180,45,.16); }
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html[data-theme-scope="customer"][data-color-mode] body :is(select, .filter-pill, .catalog-suggestions, .cust-account-options),
    html[data-theme-scope="customer"] select::picker(select) {
        background: var(--glass-fallback); backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

/* Light glass needs a visible backdrop, not additional opaque white layers.
   Shared by public pages, customer accounts and every staff module. */
@media screen {
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode="light"] {
        --site-canvas: #f1f0e9;
        --site-panel-tint: rgba(255,255,255,.22);
        --site-border: rgba(67,65,49,.16);
        --site-control-border: #92938b;
        --site-panel-shadow: 0 12px 32px -18px rgba(70,60,30,.23);
        --admin-glass-fill: rgba(255,255,255,.48);
        --admin-glass-highlight: rgba(255,255,255,.6);
        --admin-select-fill: rgba(255,255,255,.38);
        --customer-ambient: rgba(227,190,71,.22);
    }
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode="light"] body,
    html[data-theme-scope="admin"][data-color-mode="light"] body[data-theme] {
        background-color: var(--site-canvas) !important;
        background-image:
            radial-gradient(ellipse 70% 420px at 6% 420px, rgba(229,190,65,.24), transparent 100%),
            radial-gradient(ellipse 70% 420px at 96% 1220px, rgba(207,175,76,.18), transparent 100%),
            radial-gradient(ellipse 60% 600px at 70% 800px, rgba(166,185,194,.15), transparent 100%) !important;
        background-size: 100% 1640px !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll !important;
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html:is([data-theme-scope="customer"], [data-theme-scope="admin"])[data-color-mode="light"] body,
    html[data-theme-scope="admin"][data-color-mode="light"] body[data-theme] {
        background-image: none !important;
    }
}
.header-menu-toggle { order: -1; margin-right: .5rem; }
.site-header > .container { flex-wrap: nowrap; }
.site-header-controls { margin-left: auto; }
@media (max-width: 767.98px) {
    .site-header > .container { flex-wrap: wrap; }
    .site-header .navbar-collapse { flex-basis: 100%; }
    .site-header .navbar-nav { align-items: stretch !important; gap: .35rem !important; }
    .site-header .nav-item { margin-left: 0 !important; }
}
@media (min-width: 1200px) {
    html[data-theme-scope="customer"] .header-menu-toggle { display: none; }
}