/*
 * Purpose: Color-theme layer for the standalone wholesale customer and
 * representative portal. This file intentionally does not use Kinetic tokens
 * or reproduce the authenticated Gruff Tools visual language.
 *
 * Runtime contract:
 * - `html[data-wholesale-theme="light"]` keeps the current light presentation.
 * - `html[data-wholesale-theme="dark"]` forces the custom dark palette.
 * - `html[data-wholesale-theme="system"]` follows `prefers-color-scheme`.
 *
 * Private wholesale staging remains forced dark, while production uses
 * `system` so the browser and operating system select the active palette.
 */

html[data-wholesale-theme="light"] {
    color-scheme: light;
}

html[data-wholesale-theme="dark"] {
    color-scheme: dark;
}

html[data-wholesale-theme="system"] {
    color-scheme: light dark;
}

body.wholesale-portal-body {
    --wholesale-page-bg: #f3f3f5;
    --wholesale-page-bg-rgb: 243, 243, 245;
    --wholesale-surface: #ffffff;
    --wholesale-surface-rgb: 255, 255, 255;
    --wholesale-surface-raised: #ffffff;
    --wholesale-surface-soft: #fafafb;
    --wholesale-surface-muted: #f0f1f3;
    --wholesale-product-row-bg: var(--wholesale-surface-muted);
    --wholesale-surface-hover: #f7f7f8;
    --wholesale-surface-strong: #e7e9ed;
    --wholesale-field-bg: #ffffff;
    --wholesale-quantity-input-bg: #ffffff;
    --wholesale-quantity-input-striped-bg: #ffffff;
    --wholesale-quantity-button-striped-bg: #e6e6e6;
    --wholesale-quantity-button-striped-hover: #dadada;
    --wholesale-sold-out-notice-bg: #6c6c6c;
    --wholesale-sold-out-notice-text: #ffffff;
    --wholesale-text: #030305;
    --wholesale-text-rgb: 3, 3, 5;
    --wholesale-text-strong: #111318;
    --wholesale-text-muted: #666b75;
    --wholesale-text-subtle: #858a93;
    --wholesale-border: rgba(3, 3, 5, 0.08);
    --wholesale-border-strong: rgba(3, 3, 5, 0.16);
    --wholesale-border-dashed: rgba(3, 3, 5, 0.22);
    --wholesale-shadow: rgba(3, 3, 5, 0.12);
    --wholesale-shadow-strong: rgba(3, 3, 5, 0.22);
    --wholesale-header-bg: rgba(255, 255, 255, 0.92);
    --wholesale-toolbar-bg: rgba(243, 243, 245, 0.88);
    --wholesale-toolbar-start-bg: rgba(255, 255, 255, 0.8);
    --wholesale-overlay-bg: rgba(255, 255, 255, 0.68);
    --wholesale-overlay-panel-bg: rgba(255, 255, 255, 0.97);
    --wholesale-modal-bg: rgba(255, 255, 255, 0.96);
    --wholesale-image-bg: #eef0f4;
    --wholesale-image-gradient-start: #eceef1;
    --wholesale-image-gradient-end: #dfe2e7;
    --wholesale-control-bg: #e6e6e6;
    --wholesale-control-hover: #dadada;
    --wholesale-control-disabled: #d3d3d3;
    --wholesale-control-disabled-text: #8d8d8d;
    --wholesale-active-bg: #030305;
    --wholesale-active-text: #ffffff;
    --wholesale-focus-outline: #030305;
    --wholesale-shell-meta-text: #6c727d;
    --wholesale-warm-surface: #faf8f4;
    --wholesale-warm-icon: #f0ece4;
    --wholesale-note-surface: #fffaf0;
    --wholesale-neutral-border: #d7dbe0;
    --wholesale-neutral-surface: #eef0f3;
    --wholesale-neutral-text: #4e5561;
    --wholesale-info-border: #b9d5ec;
    --wholesale-info-surface: #e8f2fb;
    --wholesale-info-text: #174b7a;
    --wholesale-success-border: #b9dfc4;
    --wholesale-success-surface: #e7f5eb;
    --wholesale-success-text: #1f6a37;
    --wholesale-warning-border: #ead591;
    --wholesale-warning-surface: #fff3cf;
    --wholesale-warning-text: #77500a;
    --wholesale-danger-border: #e8bcbc;
    --wholesale-danger-surface: #fbeaea;
    --wholesale-danger-text: #8a2b2b;
    --wholesale-link: #0d6efd;
    --wholesale-total-bg: #2f8d46;
    --wholesale-minimum-bg: rgba(255, 196, 58, 0.18);
    --wholesale-minimum-text: #2f2410;
    --wholesale-tag-text: #2f2410;

    --bs-body-bg: var(--wholesale-page-bg);
    --bs-body-bg-rgb: var(--wholesale-page-bg-rgb);
    --bs-body-color: var(--wholesale-text);
    --bs-body-color-rgb: var(--wholesale-text-rgb);
    --bs-emphasis-color: var(--wholesale-text);
    --bs-emphasis-color-rgb: var(--wholesale-text-rgb);
    --bs-secondary-color: var(--wholesale-text-muted);
    --bs-tertiary-bg: var(--wholesale-surface-soft);
    --bs-border-color: var(--wholesale-border);
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body {
    --wholesale-page-bg: #0f1115;
    --wholesale-page-bg-rgb: 15, 17, 21;
    --wholesale-surface: #181b21;
    --wholesale-surface-rgb: 24, 27, 33;
    --wholesale-surface-raised: #20242b;
    --wholesale-surface-soft: #15181d;
    --wholesale-surface-muted: #242932;
    --wholesale-product-row-bg: #242932;
    --wholesale-surface-hover: #292f39;
    --wholesale-surface-strong: #303640;
    --wholesale-field-bg: #12151a;
    --wholesale-quantity-input-bg: #28333e;
    --wholesale-quantity-input-striped-bg: #3d4854;
    --wholesale-quantity-button-striped-bg: #313a45;
    --wholesale-quantity-button-striped-hover: #3a4652;
    --wholesale-sold-out-notice-bg: #343b44;
    --wholesale-sold-out-notice-text: #b8bec8;
    --wholesale-text: #f4f5f7;
    --wholesale-text-rgb: 244, 245, 247;
    --wholesale-text-strong: #ffffff;
    --wholesale-text-muted: #b8bec8;
    --wholesale-text-subtle: #8d95a1;
    --wholesale-border: rgba(255, 255, 255, 0.11);
    --wholesale-border-strong: rgba(255, 255, 255, 0.2);
    --wholesale-border-dashed: rgba(255, 255, 255, 0.28);
    --wholesale-shadow: rgba(0, 0, 0, 0.38);
    --wholesale-shadow-strong: rgba(0, 0, 0, 0.56);
    --wholesale-header-bg: rgba(15, 17, 21, 0.92);
    --wholesale-toolbar-bg: rgba(15, 17, 21, 0.9);
    --wholesale-toolbar-start-bg: rgba(24, 27, 33, 0.9);
    --wholesale-overlay-bg: rgba(5, 6, 8, 0.76);
    --wholesale-overlay-panel-bg: rgba(24, 27, 33, 0.97);
    --wholesale-modal-bg: rgba(24, 27, 33, 0.98);
    --wholesale-image-bg: transparent;
    --wholesale-image-gradient-start: #242a33;
    --wholesale-image-gradient-end: #1b2028;
    --wholesale-control-bg: #1c232b;
    --wholesale-control-hover: #252e38;
    --wholesale-control-disabled: #242830;
    --wholesale-control-disabled-text: #727a86;
    --wholesale-active-bg: #f4f5f7;
    --wholesale-active-text: #111318;
    --wholesale-focus-outline: #ffffff;
    --wholesale-shell-meta-text: #8d95a1;
    --wholesale-warm-surface: #035c9d;
    --wholesale-warm-icon: #332b20;
    --wholesale-note-surface: #2a2417;
    --wholesale-neutral-border: #4a515d;
    --wholesale-neutral-surface: #292f38;
    --wholesale-neutral-text: #c7ccd4;
    --wholesale-info-border: #305f8f;
    --wholesale-info-surface: #162a3e;
    --wholesale-info-text: #8ec7ff;
    --wholesale-success-border: #356a45;
    --wholesale-success-surface: #182c20;
    --wholesale-success-text: #8fe0a8;
    --wholesale-warning-border: #7a6425;
    --wholesale-warning-surface: #332a12;
    --wholesale-warning-text: #f1cf70;
    --wholesale-danger-border: #7a3e43;
    --wholesale-danger-surface: #351b1e;
    --wholesale-danger-text: #ff9da3;
    --wholesale-link: #86bdff;
    --wholesale-total-bg: #26763b;
    --wholesale-minimum-bg: #332a12;
    --wholesale-minimum-text: #f1cf70;
    --wholesale-tag-text: #2f2410;
}

@media (prefers-color-scheme: dark) {
    html[data-wholesale-theme="system"] body.wholesale-portal-body {
        --wholesale-page-bg: #0f1115;
        --wholesale-page-bg-rgb: 15, 17, 21;
        --wholesale-surface: #181b21;
        --wholesale-surface-rgb: 24, 27, 33;
        --wholesale-surface-raised: #20242b;
        --wholesale-surface-soft: #15181d;
        --wholesale-surface-muted: #242932;
        --wholesale-product-row-bg: #242932;
        --wholesale-surface-hover: #292f39;
        --wholesale-surface-strong: #303640;
        --wholesale-field-bg: #12151a;
        --wholesale-quantity-input-bg: #28333e;
        --wholesale-quantity-input-striped-bg: #3d4854;
        --wholesale-quantity-button-striped-bg: #313a45;
        --wholesale-quantity-button-striped-hover: #3a4652;
        --wholesale-sold-out-notice-bg: #343b44;
        --wholesale-sold-out-notice-text: #b8bec8;
        --wholesale-text: #f4f5f7;
        --wholesale-text-rgb: 244, 245, 247;
        --wholesale-text-strong: #ffffff;
        --wholesale-text-muted: #b8bec8;
        --wholesale-text-subtle: #8d95a1;
        --wholesale-border: rgba(255, 255, 255, 0.11);
        --wholesale-border-strong: rgba(255, 255, 255, 0.2);
        --wholesale-border-dashed: rgba(255, 255, 255, 0.28);
        --wholesale-shadow: rgba(0, 0, 0, 0.38);
        --wholesale-shadow-strong: rgba(0, 0, 0, 0.56);
        --wholesale-header-bg: rgba(15, 17, 21, 0.92);
        --wholesale-toolbar-bg: rgba(15, 17, 21, 0.9);
        --wholesale-toolbar-start-bg: rgba(24, 27, 33, 0.9);
        --wholesale-overlay-bg: rgba(5, 6, 8, 0.76);
        --wholesale-overlay-panel-bg: rgba(24, 27, 33, 0.97);
        --wholesale-modal-bg: rgba(24, 27, 33, 0.98);
        --wholesale-image-bg: transparent;
        --wholesale-image-gradient-start: #242a33;
        --wholesale-image-gradient-end: #1b2028;
        --wholesale-control-bg: #1c232b;
        --wholesale-control-hover: #252e38;
        --wholesale-control-disabled: #242830;
        --wholesale-control-disabled-text: #727a86;
        --wholesale-active-bg: #f4f5f7;
        --wholesale-active-text: #111318;
        --wholesale-focus-outline: #ffffff;
        --wholesale-shell-meta-text: #8d95a1;
        --wholesale-warm-surface: #035c9d;
        --wholesale-warm-icon: #332b20;
        --wholesale-note-surface: #2a2417;
        --wholesale-neutral-border: #4a515d;
        --wholesale-neutral-surface: #292f38;
        --wholesale-neutral-text: #c7ccd4;
        --wholesale-info-border: #305f8f;
        --wholesale-info-surface: #162a3e;
        --wholesale-info-text: #8ec7ff;
        --wholesale-success-border: #356a45;
        --wholesale-success-surface: #182c20;
        --wholesale-success-text: #8fe0a8;
        --wholesale-warning-border: #7a6425;
        --wholesale-warning-surface: #332a12;
        --wholesale-warning-text: #f1cf70;
        --wholesale-danger-border: #7a3e43;
        --wholesale-danger-surface: #351b1e;
        --wholesale-danger-text: #ff9da3;
        --wholesale-link: #86bdff;
        --wholesale-total-bg: #26763b;
        --wholesale-minimum-bg: #332a12;
        --wholesale-minimum-text: #f1cf70;
        --wholesale-tag-text: #2f2410;
    }
}

body.wholesale-portal-body {
    background: var(--wholesale-page-bg);
    color: var(--wholesale-text);
}

body.wholesale-portal-body .form-control,
body.wholesale-portal-body .form-select,
body.wholesale-portal-body .form-check-input,
body.wholesale-portal-body .input-group-text {
    border-color: var(--wholesale-border-strong);
    background-color: var(--wholesale-field-bg);
    color: var(--wholesale-text);
}

body.wholesale-portal-body .form-control::placeholder,
body.wholesale-portal-body .form-select:invalid {
    color: var(--wholesale-text-subtle);
}

body.wholesale-portal-body .form-control:focus,
body.wholesale-portal-body .form-select:focus,
body.wholesale-portal-body .form-check-input:focus {
    border-color: rgba(255, 196, 58, 0.7);
    box-shadow: 0 0 0 0.22rem rgba(255, 196, 58, 0.18);
}

body.wholesale-portal-body .form-check-input:checked {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

body.wholesale-portal-body .dropdown-menu {
    --bs-dropdown-bg: var(--wholesale-surface-raised);
    --bs-dropdown-border-color: var(--wholesale-border);
    --bs-dropdown-link-color: var(--wholesale-text);
    --bs-dropdown-link-hover-color: var(--wholesale-text-strong);
    --bs-dropdown-link-hover-bg: var(--wholesale-surface-hover);
    --bs-dropdown-link-active-color: var(--wholesale-active-text);
    --bs-dropdown-link-active-bg: var(--wholesale-active-bg);
    box-shadow: 0 16px 36px var(--wholesale-shadow);
}

body.wholesale-portal-body .table {
    --bs-table-color: var(--wholesale-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wholesale-border);
    --bs-table-striped-color: var(--wholesale-text);
    --bs-table-striped-bg: var(--wholesale-surface-soft);
    --bs-table-hover-color: var(--wholesale-text);
    --bs-table-hover-bg: var(--wholesale-surface-hover);
}

body.wholesale-portal-body .modal-content,
body.wholesale-portal-body .card {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface-raised);
    color: var(--wholesale-text);
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .btn-close:hover,
html[data-wholesale-theme="dark"] body.wholesale-portal-body .btn-close:focus {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    html[data-wholesale-theme="system"] body.wholesale-portal-body .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
        opacity: 0.9;
    }

    html[data-wholesale-theme="system"] body.wholesale-portal-body .btn-close:hover,
    html[data-wholesale-theme="system"] body.wholesale-portal-body .btn-close:focus {
        opacity: 1;
    }
}

body.wholesale-portal-body .btn-outline-dark {
    --bs-btn-color: var(--wholesale-text);
    --bs-btn-border-color: var(--wholesale-border-strong);
    --bs-btn-hover-color: var(--wholesale-active-text);
    --bs-btn-hover-bg: var(--wholesale-active-bg);
    --bs-btn-hover-border-color: var(--wholesale-active-bg);
    --bs-btn-active-color: var(--wholesale-active-text);
    --bs-btn-active-bg: var(--wholesale-active-bg);
    --bs-btn-active-border-color: var(--wholesale-active-bg);
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .btn-outline-dark {
    --bs-btn-bg: var(--wholesale-surface-muted);
    --bs-btn-border-color: var(--wholesale-border-strong);
    --bs-btn-hover-color: var(--wholesale-text-strong);
    --bs-btn-hover-bg: var(--wholesale-surface-strong);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.32);
    --bs-btn-active-color: var(--wholesale-text-strong);
    --bs-btn-active-bg: var(--wholesale-surface-hover);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: dark) {
    html[data-wholesale-theme="system"] body.wholesale-portal-body .btn-outline-dark {
        --bs-btn-bg: var(--wholesale-surface-muted);
        --bs-btn-border-color: var(--wholesale-border-strong);
        --bs-btn-hover-color: var(--wholesale-text-strong);
        --bs-btn-hover-bg: var(--wholesale-surface-strong);
        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.32);
        --bs-btn-active-color: var(--wholesale-text-strong);
        --bs-btn-active-bg: var(--wholesale-surface-hover);
        --bs-btn-active-border-color: rgba(255, 255, 255, 0.38);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    }
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .btn-dark {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #3c5166;
    --bs-btn-border-color: #3c5166;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #465f78;
    --bs-btn-hover-border-color: #465f78;
    --bs-btn-focus-shadow-rgb: 60, 81, 102;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #324559;
    --bs-btn-active-border-color: #324559;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #3c5166;
    --bs-btn-disabled-border-color: #3c5166;
}

@media (prefers-color-scheme: dark) {
    html[data-wholesale-theme="system"] body.wholesale-portal-body .btn-dark {
        --bs-btn-color: #ffffff;
        --bs-btn-bg: #3c5166;
        --bs-btn-border-color: #3c5166;
        --bs-btn-hover-color: #ffffff;
        --bs-btn-hover-bg: #465f78;
        --bs-btn-hover-border-color: #465f78;
        --bs-btn-focus-shadow-rgb: 60, 81, 102;
        --bs-btn-active-color: #ffffff;
        --bs-btn-active-bg: #324559;
        --bs-btn-active-border-color: #324559;
        --bs-btn-disabled-color: #ffffff;
        --bs-btn-disabled-bg: #3c5166;
        --bs-btn-disabled-border-color: #3c5166;
    }
}

.wholesale-shell-header,
.wholesale-shell-tabs {
    border-color: var(--wholesale-border);
    background: var(--wholesale-header-bg);
}

.wholesale-shell-brand__home,
.wholesale-shell-tabs__link,
.wholesale-brand-switcher__link,
.wholesale-customer-insight__link,
.wholesale-account-timeline__record-link,
.wholesale-family-card__price,
.wholesale-order-number,
.wholesale-order-total,
.wholesale-order-history__empty strong,
.wholesale-welcome-hero h1,
.wholesale-welcome-card__content h2,
.wholesale-auth-choice-card h2,
.wholesale-cart-continue-link:hover,
.wholesale-tier-copy__tier--next {
    color: var(--wholesale-text);
}

.wholesale-shell-tabs__link,
.wholesale-brand-switcher__link {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface);
}

.wholesale-shell-tabs__link:hover,
.wholesale-brand-switcher__link:hover {
    border-color: var(--wholesale-border-strong);
    background: var(--wholesale-surface-hover);
}

.wholesale-shell-tabs__link.is-active,
.wholesale-brand-switcher__link.is-active {
    border-color: var(--wholesale-active-bg);
    background: var(--wholesale-active-bg);
    color: var(--wholesale-active-text);
}

.wholesale-auth-panel,
.wholesale-auth-card,
.wholesale-panel,
.k-stat-list.wholesale-customer-insight-list,
.k-timeline__content.wholesale-account-timeline__content,
.wholesale-orders-table .wholesale-order-card,
.wholesale-gallery-modal__content,
.wholesale-order-history__view-switch,
.wholesale-order-archive-action {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface);
    color: var(--wholesale-text);
    box-shadow: 0 12px 30px var(--wholesale-shadow);
}

.wholesale-login-apply-card,
.wholesale-application-confirmation__steps li,
.wholesale-rep-customer-card,
.wholesale-empty-state,
.wholesale-customer-contact-card,
.wholesale-cart-style,
.wholesale-legacy-invitation__identity {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface-soft);
    color: var(--wholesale-text);
}

.wholesale-locked-preview__topbar,
.wholesale-locked-preview__product {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface-raised);
    box-shadow: 0 12px 28px var(--wholesale-shadow);
}

.wholesale-auth-shell--locked-preview {
    border-color: var(--wholesale-border);
    background: var(--wholesale-surface-strong);
    box-shadow: 0 24px 70px var(--wholesale-shadow-strong);
}

.wholesale-locked-preview__veil {
    background: var(--wholesale-overlay-bg);
}

.wholesale-locked-preview__dialog {
    border-color: var(--wholesale-border);
    background: var(--wholesale-overlay-panel-bg);
    color: var(--wholesale-text);
    box-shadow: 0 28px 80px var(--wholesale-shadow-strong);
}

.wholesale-locked-preview__nav span,
.wholesale-order-history__count,
.wholesale-cart-count {
    background: var(--wholesale-surface-muted);
    color: var(--wholesale-text-muted);
}

.wholesale-locked-preview__benefit-icon {
    background: var(--wholesale-surface-muted);
    color: var(--wholesale-text-strong);
}

.wholesale-locked-preview__benefit,
.wholesale-login-form h2,
.wholesale-login-apply-card h2,
.wholesale-login-pending-note strong,
.wholesale-application-confirmation__steps strong,
.wholesale-customer-insight__context strong,
.wholesale-empty-state > i,
.wholesale-customer-contact-name,
.wholesale-customer-activity-section legend,
.wholesale-customer-back-link,
.wholesale-account-timeline__title,
.wholesale-account-timeline__details,
.wholesale-account-timeline__outcome,
.wholesale-auth-label {
    color: var(--wholesale-text-strong);
}

.wholesale-locked-preview__product-copy span,
.wholesale-login-form__forgot,
.wholesale-login-apply-card > p:not(.wholesale-login-apply-card__staff),
.wholesale-login-apply-card__staff,
.wholesale-login-footer,
.wholesale-order-history__header p,
.wholesale-order-history__empty,
.wholesale-order-card__date,
.wholesale-order-card__items,
.wholesale-order-card__po,
.wholesale-order-status__type,
.wholesale-rep-hero__eyebrow,
.wholesale-rep-stat__label,
.wholesale-rep-hero__rate-label,
.wholesale-rep-stat__note,
.wholesale-rep-page__count,
.wholesale-customer-insight__contact,
.wholesale-customer-insight__brands,
.wholesale-customer-insight__context,
.wholesale-customer-activity-section > p,
.wholesale-account-timeline__time,
.wholesale-account-timeline__meta,
.wholesale-auth-panel .lead,
.wholesale-auth-choice-card p,
.wholesale-auth-section__label,
.wholesale-auth-panel .form-text,
.wholesale-welcome-hero__eyebrow,
.wholesale-welcome-hero p,
.wholesale-welcome-card__content p,
.wholesale-product-msrp,
.wholesale-catalog-total__label,
.wholesale-family-card__subtotal,
.wholesale-family-card__subtotal strong,
.wholesale-cart-eyebrow,
.wholesale-cart-style__title,
.wholesale-cart-size-row__quantity,
.wholesale-cart-continue-link,
.wholesale-legacy-invitation__identity span,
.wholesale-customer-insight__legacy-invite > strong {
    color: var(--wholesale-text-muted) !important;
}

.wholesale-account-timeline__meta,
.wholesale-account-timeline__meta span + span::before,
.wholesale-tier-copy__tier--future,
.wholesale-price--sale,
.wholesale-price--sale span,
.wholesale-price--sale s,
.wholesale-cart-style__placeholder {
    color: var(--wholesale-text-subtle);
}

.wholesale-login-divider,
.wholesale-customer-activity-section,
.wholesale-rep-summary-row,
.k-stat-list__item.wholesale-customer-insight,
.wholesale-order-history__header,
.wholesale-orders-table thead th,
.wholesale-orders-table tbody td,
.wholesale-cart-header,
.wholesale-cart-total-row--grand {
    border-color: var(--wholesale-border);
}

.wholesale-login-pending-note,
.wholesale-application-confirmation__access-note {
    border-color: var(--wholesale-info-border);
    background: var(--wholesale-info-surface);
    color: var(--wholesale-info-text);
}

.wholesale-login-pending-note__icon,
.wholesale-application-confirmation__step-icon,
.wholesale-application-confirmation__access-note > span {
    background: var(--wholesale-info-surface);
    color: var(--wholesale-info-text);
}

.wholesale-login-apply-card {
    background: var(--wholesale-warm-surface);
}

.wholesale-login-apply-card__icon {
    background: var(--wholesale-warm-icon);
    color: var(--wholesale-text-strong);
}

.wholesale-login-apply-card__button {
    border-color: var(--wholesale-border-strong);
    background: var(--wholesale-surface);
    color: var(--wholesale-text);
}

.wholesale-login-apply-card__button:hover,
.wholesale-login-apply-card__button:focus,
.wholesale-order-history__view-switch:hover,
.wholesale-order-history__view-switch:focus,
.wholesale-order-archive-action:hover,
.wholesale-order-archive-action:focus {
    border-color: var(--wholesale-border-strong);
    background: var(--wholesale-surface-hover);
    color: var(--wholesale-text);
}

.wholesale-auth-input-wrap .wholesale-auth-control,
.wholesale-quantity-form__input,
.wholesale-image-debug-output {
    border-color: var(--wholesale-border-strong);
    background: var(--wholesale-field-bg);
    color: var(--wholesale-text);
}

body.wholesale-portal-body .wholesale-quantity-form__input {
    background: var(--wholesale-quantity-input-bg);
}

.wholesale-auth-input-wrap > i {
    color: var(--wholesale-text-subtle);
}

.wholesale-application-confirmation__status,
.wholesale-application-confirmation__email.is-not-sent,
.wholesale-status--warning .wholesale-status__badge,
.wholesale-customer-status-tag.k-type--warning {
    border-color: var(--wholesale-warning-border);
    background: var(--wholesale-warning-surface);
    color: var(--wholesale-warning-text);
}

.wholesale-application-confirmation__summary,
.wholesale-status--success .wholesale-status__badge,
.wholesale-customer-status-tag.k-type--success {
    border-color: var(--wholesale-success-border);
    background: var(--wholesale-success-surface);
    color: var(--wholesale-success-text);
}

.wholesale-application-confirmation__summary strong,
.wholesale-application-confirmation__summary p {
    color: var(--wholesale-success-text);
}

.wholesale-application-confirmation__email.is-sent,
.wholesale-status--info .wholesale-status__badge {
    border-color: var(--wholesale-info-border);
    background: var(--wholesale-info-surface);
    color: var(--wholesale-info-text);
}

.wholesale-status__badge,
.wholesale-customer-status-tag.k-type-muted {
    border-color: var(--wholesale-neutral-border);
    background: var(--wholesale-neutral-surface);
    color: var(--wholesale-neutral-text);
}

.wholesale-status--danger .wholesale-status__badge {
    border-color: var(--wholesale-danger-border);
    background: var(--wholesale-danger-surface);
    color: var(--wholesale-danger-text);
}

.wholesale-status__guidance {
    color: var(--wholesale-text-muted);
}

.wholesale-account-timeline__outcome {
    background: var(--wholesale-note-surface);
}

.wholesale-orders-table thead th {
    background: var(--wholesale-surface-hover);
    color: var(--wholesale-text-muted);
}

.wholesale-orders-table tbody tr:hover td {
    background: var(--wholesale-surface-hover);
}

.wholesale-order-history__view-switch,
.wholesale-order-archive-action {
    box-shadow: none;
}

.wholesale-rep-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 196, 58, 0.2), transparent 34%),
        linear-gradient(135deg, var(--wholesale-surface-raised) 0%, var(--wholesale-surface-soft) 100%);
}

.wholesale-welcome-hero {
    background:
        radial-gradient(circle at top left, rgba(255, 196, 58, 0.18), transparent 34%),
        linear-gradient(180deg, var(--wholesale-surface-raised), var(--wholesale-surface-soft));
}

.wholesale-preview-banner {
    border-color: var(--wholesale-info-border);
    background: color-mix(in srgb, var(--wholesale-info-surface) 88%, transparent);
    color: var(--wholesale-info-text);
    box-shadow: 0 12px 30px var(--wholesale-shadow);
}

.wholesale-catalog-toolbar.is-scrolled {
    border-bottom-color: var(--wholesale-border);
    background: var(--wholesale-toolbar-bg);
    box-shadow: 0 10px 28px var(--wholesale-shadow);
}

.wholesale-catalog-toolbar__start.is-scrolled {
    background: var(--wholesale-toolbar-start-bg);
}

.wholesale-product-row {
    background: var(--wholesale-product-row-bg);
}

.wholesale-product-row:nth-child(odd) {
    background: var(--wholesale-page-bg);
}

.wholesale-product-row:nth-child(even) {
    --wholesale-quantity-input-bg: var(--wholesale-quantity-input-striped-bg);
    --wholesale-control-bg: var(--wholesale-quantity-button-striped-bg);
    --wholesale-control-hover: var(--wholesale-quantity-button-striped-hover);
}

.wholesale-image-frame,
.wholesale-image-error,
.wholesale-cart-style__image-frame,
.wholesale-gallery-modal__carousel,
.wholesale-gallery-modal__image-frame {
    background: var(--wholesale-image-bg);
}

.wholesale-family-card__image,
.wholesale-product-card__image {
    border-radius: 2px;
}

.wholesale-image-placeholder {
    background: linear-gradient(135deg, var(--wholesale-image-gradient-start), var(--wholesale-image-gradient-end));
}

.wholesale-image-placeholder__pulse {
    background: rgba(var(--wholesale-surface-rgb), 0.72);
    box-shadow: 0 0 0 0 rgba(var(--wholesale-surface-rgb), 0.45);
}

.wholesale-image-error,
.wholesale-product-card__image-debug,
.wholesale-family-card__image-debug {
    color: var(--wholesale-text-muted);
}

.wholesale-product-card__image-debug,
.wholesale-family-card__image-debug {
    background: rgba(var(--wholesale-surface-rgb), 0.44);
}

.wholesale-gallery-modal__content {
    background: var(--wholesale-modal-bg);
}

.wholesale-quantity-form__button {
    background: var(--wholesale-control-bg);
    color: var(--wholesale-text-subtle);
}

.wholesale-quantity-form__button:hover,
.wholesale-quantity-form__button:focus {
    background: var(--wholesale-control-hover);
    color: var(--wholesale-text);
}

.wholesale-quantity-form__button:disabled,
.wholesale-quantity-form__input:disabled {
    background: var(--wholesale-control-disabled);
    color: var(--wholesale-control-disabled-text);
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form {
    opacity: 0.42;
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form__button:disabled {
    background: var(--wholesale-control-bg);
    color: var(--wholesale-text-subtle);
    opacity: 1;
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form__input:disabled {
    background: var(--wholesale-quantity-input-bg);
    color: var(--wholesale-control-disabled-text);
    opacity: 1;
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-size-row__label {
    color: var(--wholesale-text-subtle);
}

html[data-wholesale-theme="dark"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-size-row__notice {
    border: 1px solid var(--wholesale-border);
    background: var(--wholesale-sold-out-notice-bg);
    color: var(--wholesale-sold-out-notice-text);
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    html[data-wholesale-theme="system"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form {
        opacity: 0.42;
    }

    html[data-wholesale-theme="system"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form__button:disabled {
        background: var(--wholesale-control-bg);
        color: var(--wholesale-text-subtle);
        opacity: 1;
    }

    html[data-wholesale-theme="system"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-quantity-form__input:disabled {
        background: var(--wholesale-quantity-input-bg);
        color: var(--wholesale-control-disabled-text);
        opacity: 1;
    }

    html[data-wholesale-theme="system"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-size-row__label {
        color: var(--wholesale-text-subtle);
    }

    html[data-wholesale-theme="system"] body.wholesale-portal-body .wholesale-size-row--sold-out .wholesale-size-row__notice {
        border: 1px solid var(--wholesale-border);
        background: var(--wholesale-sold-out-notice-bg);
        color: var(--wholesale-sold-out-notice-text);
        box-shadow: none;
    }
}

.wholesale-size-row.is-save-confirmed .wholesale-quantity-form__input {
    background: var(--wholesale-success-surface);
}

.wholesale-skip-link:focus,
.wholesale-skip-link:focus-visible {
    box-shadow: 0 0 0 4px var(--wholesale-page-bg);
}

.wholesale-login-form__forgot:focus-visible,
.wholesale-login-apply-card a:focus-visible,
.wholesale-login-footer a:focus-visible,
.wholesale-login-form .wholesale-auth-btn:focus-visible,
.wholesale-application-confirmation__actions a:focus-visible,
.wholesale-order-history__view-switch:focus-visible,
.wholesale-order-invoice-action:focus-visible,
.wholesale-order-checkout-action:focus-visible,
.wholesale-order-archive-action:focus-visible {
    outline-color: var(--wholesale-focus-outline);
}

.wholesale-auth-panel a:not(.btn):not(.wholesale-auth-choice-card),
.wholesale-login-form__forgot,
.wholesale-login-footer a {
    color: var(--wholesale-link);
}

.wholesale-catalog-total__bubble {
    background: var(--wholesale-total-bg);
}

.wholesale-shell-brand__badge,
.wholesale-product-tag {
    color: var(--wholesale-tag-text);
}

.wholesale-catalog-minimum-order {
    border: 1px solid var(--wholesale-warning-border);
    background: var(--wholesale-minimum-bg);
    color: var(--wholesale-minimum-text);
}

.wholesale-catalog-minimum-progress__track {
    background: color-mix(in srgb, var(--wholesale-minimum-text) 22%, transparent);
}

.wholesale-catalog-minimum-progress__bar {
    background: var(--wholesale-minimum-text);
}

.wholesale-shell-main--legacy-invitation {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 5vw, 3.5rem);
}

.wholesale-legacy-invitation {
    width: min(100%, 36rem);
    margin: 0;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border: 1px solid var(--wholesale-border-strong);
    border-radius: 1.5rem;
    background: var(--wholesale-surface-raised);
    color: var(--wholesale-text);
    box-shadow: 0 24px 70px var(--wholesale-shadow-strong);
}

.wholesale-legacy-invitation__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.wholesale-legacy-invitation__logo {
    display: block;
    width: auto;
    max-width: min(13rem, 70%);
    max-height: 3.5rem;
    object-fit: contain;
}

.wholesale-legacy-invitation__mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: 1px solid var(--wholesale-border-strong);
    border-radius: 1rem;
    background: var(--wholesale-active-bg);
    color: var(--wholesale-active-text);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wholesale-legacy-invitation .wholesale-entry-card__header {
    text-align: center;
}

.wholesale-legacy-invitation .wholesale-entry-card__eyebrow {
    margin: 0 0 0.7rem;
    color: var(--wholesale-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.wholesale-legacy-invitation h1 {
    margin: 0;
    color: var(--wholesale-text-strong);
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 760;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.wholesale-legacy-invitation .wholesale-entry-card__header > p:last-child {
    max-width: 31rem;
    margin: 1rem auto 0;
    color: var(--wholesale-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.wholesale-legacy-invitation__identity {
    display: grid;
    gap: 0.35rem;
    margin: 1.75rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--wholesale-border);
    border-radius: 1rem;
    background: var(--wholesale-surface-soft);
}

.wholesale-legacy-invitation__identity span {
    color: var(--wholesale-text-muted) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wholesale-legacy-invitation__identity strong {
    color: var(--wholesale-text-strong);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.wholesale-legacy-invitation__form {
    display: grid;
    gap: 1.25rem;
}

.wholesale-legacy-invitation__field {
    display: grid;
    gap: 0.5rem;
}

.wholesale-legacy-invitation__field label {
    color: var(--wholesale-text-strong);
    font-size: 0.9rem;
    font-weight: 700;
}

.wholesale-legacy-invitation__field small {
    color: var(--wholesale-text-muted);
    font-size: 0.82rem;
}

.wholesale-legacy-invitation__field .wholesale-legacy-invitation__field-error {
    color: var(--wholesale-danger-text);
    font-weight: 700;
}

.wholesale-legacy-invitation__password-control input[aria-invalid="true"] {
    border-color: var(--wholesale-danger-border);
    outline-color: var(--wholesale-danger-border);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wholesale-danger-text) 18%, transparent);
}

.wholesale-legacy-invitation__password-control {
    position: relative;
}

.wholesale-legacy-invitation__password-control input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 4.6rem 0.8rem 1rem;
    border: 1px solid var(--wholesale-border-strong);
    border-radius: 0.9rem;
    background: var(--wholesale-field-bg);
    color: var(--wholesale-text);
    font: inherit;
}

.wholesale-legacy-invitation__password-control input:focus-visible {
    border-color: var(--wholesale-focus-outline);
    outline: 2px solid var(--wholesale-focus-outline);
    outline-offset: 2px;
}

.wholesale-legacy-invitation__password-control button {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    min-width: 3.35rem;
    padding: 0.45rem 0.65rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0.65rem;
    background: var(--wholesale-surface-muted);
    color: var(--wholesale-text);
    font-size: 0.78rem;
    font-weight: 750;
}

.wholesale-legacy-invitation__password-control button:hover,
.wholesale-legacy-invitation__password-control button:focus-visible {
    background: var(--wholesale-surface-hover);
}

.wholesale-legacy-invitation__password-control button:focus-visible,
.wholesale-legacy-invitation__submit:focus-visible {
    outline: 2px solid var(--wholesale-focus-outline);
    outline-offset: 2px;
}

.wholesale-legacy-invitation__submit {
    display: inline-flex;
    width: 100%;
    min-height: 3.35rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--wholesale-active-bg);
    border-radius: 0.95rem;
    background: var(--wholesale-active-bg);
    color: var(--wholesale-active-text);
    font-size: 0.95rem;
    font-weight: 760;
    text-align: center;
    text-decoration: none;
}

.wholesale-legacy-invitation__submit:hover {
    filter: brightness(0.92);
    color: var(--wholesale-active-text);
}

.wholesale-legacy-invitation__submit[aria-disabled="true"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wholesale-legacy-submit-spin 0.7s linear infinite;
}

.wholesale-legacy-invitation__alert {
    margin: 1.5rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--wholesale-danger-border);
    border-radius: 0.9rem;
    background: var(--wholesale-danger-surface);
    color: var(--wholesale-danger-text);
    line-height: 1.5;
}

.wholesale-legacy-invitation .wholesale-entry-card__actions {
    margin-top: 1.5rem;
}

.wholesale-legacy-invitation .wholesale-entry-card__support {
    margin: 1rem 0 0;
    color: var(--wholesale-text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
    text-align: center;
}

@keyframes wholesale-legacy-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575.98px) {
    .wholesale-shell-main--legacy-invitation {
        align-items: start;
        padding: 1rem;
    }

    .wholesale-legacy-invitation {
        padding: 1.35rem;
        border-radius: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wholesale-legacy-invitation__submit[aria-disabled="true"]::before {
        animation: none;
    }
}