/*
 * ShopHub customer experience v1
 *
 * One theme foundation for all storefront and customer-account surfaces.
 * It is intentionally scoped to .customer-surface so the administration
 * workspace keeps its existing appearance and behavior.
 */

body.customer-surface {
    --cx-canvas: #f7f9fc;
    --cx-surface: #ffffff;
    --cx-surface-subtle: #f1f5fb;
    --cx-surface-hover: #eaf1ff;
    --cx-text: #10233e;
    --cx-text-muted: #60728c;
    --cx-text-faint: #8291a8;
    --cx-line: #d8e2f0;
    --cx-line-strong: #b8c8de;
    --cx-primary: #2563eb;
    --cx-primary-hover: #1d4ed8;
    --cx-primary-soft: #eaf1ff;
    --cx-primary-on-soft: #1d4ed8;
    --cx-on-primary: #ffffff;
    --cx-focus: rgb(37 99 235 / 28%);
    --cx-success: #078760;
    --cx-success-soft: #e7f7f0;
    --cx-warning: #b85d08;
    --cx-warning-soft: #fff4df;
    --cx-danger: #c7354a;
    --cx-danger-soft: #fff0f2;
    --cx-shadow-card: 0 1px 2px rgb(20 43 75 / 4%), 0 10px 28px rgb(20 43 75 / 6%);
    --cx-shadow-floating: 0 18px 46px rgb(20 43 75 / 13%);
    --cx-radius-control: 10px;
    --cx-radius-panel: 14px;
    --cx-radius-stage: 18px;
    background: var(--cx-canvas);
    color: var(--cx-text);
}

html[data-color-scheme="dark"] body.customer-surface {
    --cx-canvas: #0b1220;
    --cx-surface: #121c2c;
    --cx-surface-subtle: #18253a;
    --cx-surface-hover: #1e3150;
    --cx-text: #f4f7fb;
    --cx-text-muted: #a9b8ce;
    --cx-text-faint: #8394af;
    --cx-line: #2a3a54;
    --cx-line-strong: #405474;
    --cx-primary: #5b8cff;
    --cx-primary-hover: #7aa2ff;
    --cx-primary-soft: #1a315a;
    --cx-primary-on-soft: #a9c2ff;
    --cx-on-primary: #081426;
    --cx-focus: rgb(122 162 255 / 34%);
    --cx-success: #43d19d;
    --cx-success-soft: #123d35;
    --cx-warning: #f4bd51;
    --cx-warning-soft: #443314;
    --cx-danger: #ff7a8b;
    --cx-danger-soft: #48212d;
    --cx-shadow-card: 0 1px 2px rgb(0 0 0 / 18%), 0 12px 32px rgb(0 0 0 / 18%);
    --cx-shadow-floating: 0 22px 54px rgb(0 0 0 / 34%);
}

/* Canvas, hierarchy and typography. */
body.customer-surface,
body.customer-surface .market-shell,
body.customer-surface .market-main,
body.customer-surface .market-home,
body.customer-surface .workspace-main {
    background: var(--cx-canvas) !important;
    color: var(--cx-text) !important;
}

body.customer-surface :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--cx-text);
}

body.customer-surface :is(p, small, .muted, .text-muted, .market-page-heading-copy) {
    color: var(--cx-text-muted);
}

body.customer-surface :is(.market-main, .market-home, .content-container-v5, .mock-page, .table-shell, .article-page, .narrow-form) {
    color: var(--cx-text);
}

body.customer-surface a {
    color: var(--cx-primary);
}

body.customer-surface a:is(:hover, :focus-visible) {
    color: var(--cx-primary-hover);
}

body.customer-surface :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--cx-focus) !important;
    outline-offset: 2px;
}

/* Header, account controls and footer. */
body.customer-surface .market-header {
    border-bottom: 1px solid var(--cx-line) !important;
    background: var(--cx-surface) !important;
    box-shadow: 0 4px 18px rgb(20 43 75 / 5%);
}

html[data-color-scheme="dark"] body.customer-surface .market-header {
    box-shadow: 0 4px 18px rgb(0 0 0 / 20%);
}

body.customer-surface :is(.market-brand, .market-primary-nav a, .market-action-link, .market-account-summary, .market-login) {
    color: var(--cx-text) !important;
}

body.customer-surface .market-primary-nav a:is(:hover, :focus-visible, .active),
body.customer-surface .market-account-links a:is(:hover, :focus-visible, .active) {
    background: var(--cx-primary-soft) !important;
    color: var(--cx-primary) !important;
}

/* Match the specificity of the older persisted-scheme rules. */
html[data-color-scheme] body.customer-surface :is(
    .market-primary-nav a.active,
    .market-view-switch a.active,
    .market-results-toolbar nav a.active,
    .market-category-filter a.active
) {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary-soft) !important;
    color: var(--cx-primary-on-soft) !important;
}

html[data-color-scheme] body.customer-surface .market-primary-nav a.active .ui-icon {
    color: var(--cx-primary-on-soft) !important;
}

body.customer-surface :is(.market-theme-toggle, .market-account-menu, .market-language-menu, .market-search, .market-language-row select) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text) !important;
}

body.customer-surface .market-trust-strip {
    border-block-color: var(--cx-line) !important;
    background: var(--cx-surface-subtle) !important;
}

body.customer-surface .market-trust-strip :is(span, b, small) {
    color: var(--cx-text-muted);
}

body.customer-surface .market-trust-strip .ui-icon {
    color: var(--cx-primary);
}

body.customer-surface .market-footer {
    border-top: 1px solid var(--cx-line) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text-muted) !important;
}

body.customer-surface .market-footer :is(b, a) {
    color: var(--cx-text) !important;
}

body.customer-surface .market-footer a:is(:hover, :focus-visible) {
    color: var(--cx-primary) !important;
}

body.customer-surface .market-breadcrumb {
    color: var(--cx-text-muted) !important;
}

body.customer-surface .market-breadcrumb a {
    color: var(--cx-primary) !important;
}

body.customer-surface :is(.market-live-ticker, .storefront-flash-strip) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface-subtle) !important;
    color: var(--cx-text-muted) !important;
}

body.customer-surface .market-live-ticker :is(a, b, span, em) {
    color: inherit;
}

/* Blog, article and FAQ pages reuse the same customer semantic palette. */
body.customer-surface .content-hub-v5 {
    --content-accent: var(--cx-primary);
    --content-accent-strong: var(--cx-primary-hover);
    --content-accent-soft: var(--cx-primary-soft);
    --content-ink: var(--cx-text);
    --content-muted: var(--cx-text-muted);
    --content-line: var(--cx-line);
    --content-canvas: var(--cx-canvas);
    --content-surface: var(--cx-surface);
}

body.customer-surface .content-filter-buttons-v5 button:not(.active) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.content-filter-nav-v5 a.active, .content-filter-buttons-v5 button.active) {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary) !important;
    color: var(--cx-on-primary) !important;
}

/* Reusable content surfaces shared by storefront and account pages. */
body.customer-surface :is(
    .market-page-heading,
    .market-results-toolbar,
    .market-filter-panel > form,
    .market-product-card,
    .shop-product-card,
    .market-store-cover,
    .market-store-identity,
    .market-store-toolbar,
    .market-product-summary,
    .market-purchase-panel,
    .market-product-detail-card,
    .market-seller-card,
    .market-product-tab-panel,
    .market-checkout-page .checkout-order-review,
    .market-checkout-page .checkout-payment-card,
    .account-overview-card,
    .account-settings-panel,
    .security-password-card,
    .wallet-v4-header,
    .wallet-page-grid .mock-panel,
    .orders-page-heading,
    .orders-filter-bar,
    .order-detail-pane,
    .order-summary-card,
    .api-docs-page .api-endpoint-directory,
    .api-docs-page .api-endpoint-panel,
    .content-container-v5 > article,
    .market-main > .page-hero,
    .market-main > .table-shell,
    .market-main > .contact-layout > *,
    .market-main > .tool-grid > *,
    .market-main > .legal-page,
    .market-main > .error-page,
    .faq-list details,
    .blog-grid article,
    .mock-page .mock-panel,
    .mock-page .admin-panel,
    .mock-page .admin-form,
    .narrow-form > form
) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text) !important;
    box-shadow: var(--cx-shadow-card) !important;
}

body.customer-surface :is(
    .market-page-heading,
    .market-store-cover,
    .market-product-summary,
    .market-purchase-panel,
    .market-checkout-page .checkout-order-review,
    .market-checkout-page .checkout-payment-card,
    .wallet-v4-header,
    .orders-page-heading
) {
    border-radius: var(--cx-radius-stage) !important;
}

body.customer-surface :is(
    .market-results-toolbar,
    .market-filter-panel > form,
    .market-product-card,
    .shop-product-card,
    .market-store-identity,
    .market-store-toolbar,
    .market-product-detail-card,
    .market-seller-card,
    .market-product-tab-panel,
    .account-overview-card,
    .account-settings-panel,
    .security-password-card,
    .wallet-page-grid .mock-panel,
    .orders-filter-bar,
    .order-detail-pane,
    .order-summary-card,
    .faq-list details,
    .blog-grid article
) {
    border-radius: var(--cx-radius-panel) !important;
}

body.customer-surface :is(.market-product-card, .shop-product-card, .blog-grid article, .faq-list details) {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.customer-surface :is(.market-product-card, .shop-product-card, .blog-grid article, .faq-list details):hover {
    border-color: var(--cx-line-strong) !important;
    box-shadow: var(--cx-shadow-floating) !important;
    transform: translateY(-2px);
}

/* Product discovery and purchase panels. */
body.customer-surface .market-weekly-offer {
    border: 1px solid var(--cx-line) !important;
    border-left: 4px solid var(--cx-primary) !important;
    border-radius: var(--cx-radius-stage) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text) !important;
    box-shadow: var(--cx-shadow-card) !important;
}

body.customer-surface .market-weekly-offer :is(strong, small, b) {
    color: var(--cx-text) !important;
}

body.customer-surface .market-weekly-offer small {
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.market-gallery-stage, .market-product-media, .market-product-card-media, .shop-product-art) {
    background: var(--cx-surface-subtle) !important;
}

body.customer-surface :is(.market-product-card, .shop-product-card) :is(p, small, .market-product-category, .market-product-card-stats) {
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.market-product-price, .shop-product-price, .market-purchase-total strong) {
    color: var(--cx-primary) !important;
}

/*
 * A few older storefront layers use a more-specific rose accent selector.
 * Keep the visual language coherent by reconciling those visible customer
 * elements with the shared cobalt primary token.  The html qualifier is
 * intentional: it wins in both saved light and dark colour-scheme states
 * without affecting any .admin-surface rule.
 */
html[data-color-scheme] body.customer-surface .market-home-copy h1 em,
html[data-color-scheme] body.customer-surface :is(
    .shop-price strong,
    .market-product-price strong,
    .market-product-card .price,
    .market-purchase-total strong,
    .market-purchase-total b,
    .detail-price,
    .grand-total strong,
    .checkout-total strong,
    .checkout-payment-total strong
) {
    color: var(--cx-primary) !important;
}

html[data-color-scheme] body.customer-surface .market-home-products .product-rating span {
    color: var(--cx-warning) !important;
}

body.customer-surface .market-weekly-offer b {
    border: 1px solid var(--cx-primary) !important;
    border-radius: var(--cx-radius-control);
    background: var(--cx-primary) !important;
    color: var(--cx-on-primary) !important;
    box-shadow: 0 5px 14px rgb(37 99 235 / 20%) !important;
}

body.customer-surface .market-weekly-offer:is(:hover, :focus-visible) b {
    border-color: var(--cx-primary-hover) !important;
    background: var(--cx-primary-hover) !important;
}

/* Store cards used a rose buy action whose inherited link colour hid the label. */
body.customer-surface .market-product-card footer > a {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary) !important;
    color: var(--cx-on-primary) !important;
    box-shadow: 0 5px 14px rgb(37 99 235 / 20%) !important;
}

body.customer-surface .market-product-card footer > a:is(:hover, :focus-visible) {
    border-color: var(--cx-primary-hover) !important;
    background: var(--cx-primary-hover) !important;
    color: var(--cx-on-primary) !important;
}

body.customer-surface .market-product-card footer > a .ui-icon {
    color: inherit !important;
}

body.customer-surface .market-results-toolbar nav a:not(.active) {
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.market-package-options label, .market-quantity-row, .market-coupon-field, .market-order-note, .market-add-favorite, .market-view-switch) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface-subtle) !important;
    color: var(--cx-text) !important;
}

body.customer-surface .market-package-options input:checked + span,
body.customer-surface .market-view-switch a.active,
body.customer-surface .market-results-toolbar nav a.active {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary-soft) !important;
    color: var(--cx-primary) !important;
}

/* Forms use an explicit surface in both browser colour schemes. */
body.customer-surface :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-color: var(--cx-line-strong) !important;
    border-radius: var(--cx-radius-control) !important;
    background-color: var(--cx-surface) !important;
    color: var(--cx-text) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

body.customer-surface :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)::placeholder {
    color: var(--cx-text-faint) !important;
    opacity: 1;
}

body.customer-surface :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):is(:hover, :focus) {
    border-color: var(--cx-primary) !important;
}

body.customer-surface :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
    box-shadow: 0 0 0 3px var(--cx-focus) !important;
}

body.customer-surface input[type="range"] {
    accent-color: var(--cx-primary);
}

body.customer-surface .market-price-slider-track {
    background: var(--cx-line-strong) !important;
}

body.customer-surface .market-price-slider-track i {
    background: var(--cx-primary) !important;
}

body.customer-surface input[type="range"]::-webkit-slider-thumb {
    border-color: var(--cx-surface) !important;
    background: var(--cx-primary) !important;
}

body.customer-surface input[type="range"]::-moz-range-thumb {
    border-color: var(--cx-surface) !important;
    background: var(--cx-primary) !important;
}

body.customer-surface :is(label, legend, .field-label) {
    color: var(--cx-text) !important;
}

body.customer-surface :is(.validation, .field-validation-error, .input-validation-error) {
    color: var(--cx-danger) !important;
}

/* Actions share one visual hierarchy. */
body.customer-surface :is(
    .mock-primary,
    .market-buy-now,
    .market-filter-submit,
    .market-register,
    .market-wallet-shortcut,
    .system-primary-button-v6,
    .topup-button,
    .auth-submit,
    .login-submit,
    .market-search button[type="submit"],
    .content-primary-button-v5,
    .narrow-form button[type="submit"],
    .market-purchase-panel button[type="submit"],
    .checkout-payment-card button[type="submit"]
) {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary) !important;
    color: var(--cx-on-primary) !important;
    box-shadow: 0 5px 14px rgb(37 99 235 / 20%) !important;
}

body.customer-surface :is(
    .mock-primary,
    .market-buy-now,
    .market-filter-submit,
    .market-register,
    .market-wallet-shortcut,
    .system-primary-button-v6,
    .topup-button,
    .auth-submit,
    .login-submit,
    .market-search button[type="submit"],
    .content-primary-button-v5,
    .narrow-form button[type="submit"],
    .market-purchase-panel button[type="submit"],
    .checkout-payment-card button[type="submit"]
):is(:hover, :focus-visible) {
    border-color: var(--cx-primary-hover) !important;
    background: var(--cx-primary-hover) !important;
    color: var(--cx-on-primary) !important;
    box-shadow: 0 8px 18px rgb(37 99 235 / 28%) !important;
    transform: translateY(-1px);
}

html[data-color-scheme] body.customer-surface .auth-marketplace {
    --auth-accent: var(--cx-primary);
    --auth-accent-hover: var(--cx-primary-hover);
    --auth-text: var(--cx-text);
    --auth-muted: var(--cx-text-muted);
    --auth-line: var(--cx-line);
}

body.customer-surface .auth-card :is(a, .auth-password-toggle) {
    color: var(--cx-primary);
}

body.customer-surface .auth-card .auth-password-toggle:is(:hover, :focus-visible) {
    background: var(--cx-primary-soft) !important;
    color: var(--cx-primary-hover) !important;
}

body.customer-surface :is(
    .mock-secondary,
    .table-action,
    .plain-action,
    .market-login,
    .market-toolbar-action,
    .market-filter-reset,
    .market-add-favorite,
    .market-pagination a,
    .market-product-tab-list button
) {
    border-color: var(--cx-line-strong) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text) !important;
    box-shadow: none !important;
}

body.customer-surface :is(
    .mock-secondary,
    .table-action,
    .plain-action,
    .market-login,
    .market-toolbar-action,
    .market-filter-reset,
    .market-add-favorite,
    .market-pagination a,
    .market-product-tab-list button
):is(:hover, :focus-visible, .active) {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary-soft) !important;
    color: var(--cx-primary) !important;
}

body.customer-surface :is(.danger-action, .market-danger-action) {
    border-color: color-mix(in srgb, var(--cx-danger) 34%, var(--cx-line)) !important;
    background: var(--cx-danger-soft) !important;
    color: var(--cx-danger) !important;
}

body.customer-surface :is(.danger-action, .market-danger-action):is(:hover, :focus-visible) {
    border-color: var(--cx-danger) !important;
    background: var(--cx-danger) !important;
    color: #ffffff !important;
}

/* Status uses colour and readable text, not colour alone. */
body.customer-surface :is(.status-pill.success, .status-success, .badge-success, .notice-success) {
    border-color: color-mix(in srgb, var(--cx-success) 38%, var(--cx-line)) !important;
    background: var(--cx-success-soft) !important;
    color: var(--cx-success) !important;
}

body.customer-surface :is(.status-pill.warning, .status-warning, .badge-warning, .notice-warning) {
    border-color: color-mix(in srgb, var(--cx-warning) 42%, var(--cx-line)) !important;
    background: var(--cx-warning-soft) !important;
    color: var(--cx-warning) !important;
}

body.customer-surface :is(.status-pill.danger, .status-danger, .badge-danger, .notice-danger, .notice-error) {
    border-color: color-mix(in srgb, var(--cx-danger) 36%, var(--cx-line)) !important;
    background: var(--cx-danger-soft) !important;
    color: var(--cx-danger) !important;
}

/* Tables, history lists and operational account views. */
body.customer-surface :is(.mock-table, .data-table, .table-shell, .orders-table, .wallet-history, .transaction-history) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface) !important;
    color: var(--cx-text) !important;
}

body.customer-surface :is(.mock-table, .data-table, .orders-table, .wallet-history, .transaction-history) :is(thead, .mock-th, .table-head) {
    background: var(--cx-surface-subtle) !important;
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.mock-table, .data-table, .orders-table, .wallet-history, .transaction-history) :is(tr, .mock-tr, .data-row) {
    border-color: var(--cx-line) !important;
}

body.customer-surface :is(.mock-table, .data-table, .orders-table, .wallet-history, .transaction-history) :is(tbody tr, .mock-tr, .data-row):hover {
    background: var(--cx-surface-hover) !important;
}

body.customer-surface :is(.market-empty-state, .empty-state, .empty-inline) {
    border-color: var(--cx-line-strong) !important;
    background: var(--cx-surface-subtle) !important;
    color: var(--cx-text-muted) !important;
}

body.customer-surface :is(.market-empty-state, .empty-state, .empty-inline) .ui-icon {
    color: var(--cx-primary) !important;
}

/* Wallet and checkout retain a calm transactional hierarchy. */
body.customer-surface :is(.wallet-v4-amount, .wallet-balance, .checkout-total, .checkout-payment-total) {
    color: var(--cx-primary) !important;
    font-variant-numeric: tabular-nums;
}

body.customer-surface :is(.wallet-v4-method, .wallet-method-card, .checkout-payment-method, .payment-method-card) {
    border-color: var(--cx-line) !important;
    background: var(--cx-surface-subtle) !important;
    color: var(--cx-text) !important;
}

body.customer-surface :is(.wallet-v4-method, .wallet-method-card, .checkout-payment-method, .payment-method-card):has(input:checked) {
    border-color: var(--cx-primary) !important;
    background: var(--cx-primary-soft) !important;
}

/* Mobile keeps controls comfortable without changing user flows. */
@media (max-width: 760px) {
    body.customer-surface :is(.market-page-heading, .market-store-cover, .market-product-summary, .market-purchase-panel, .market-checkout-page .checkout-order-review, .market-checkout-page .checkout-payment-card, .wallet-v4-header, .orders-page-heading) {
        border-radius: var(--cx-radius-panel) !important;
    }

    body.customer-surface :is(.market-results-toolbar, .orders-filter-bar, .market-filter-panel > form) {
        box-shadow: none !important;
    }

    body.customer-surface :is(.market-product-card, .shop-product-card, .blog-grid article, .faq-list details):hover {
        box-shadow: var(--cx-shadow-card) !important;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.customer-surface *,
    body.customer-surface *::before,
    body.customer-surface *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}