/*
 * Commerce Workspace
 * Final application-wide readability layer for customer and admin surfaces.
 * Loaded after the legacy styles so routes and Razor markup remain unchanged.
 */

.commerce-workspace {
    --cw-brand: #0f766e;
    --cw-brand-hover: #0b5f59;
    --cw-brand-pressed: #084c47;
    --cw-brand-soft: #e9f6f3;
    --cw-brand-border: #a8d9d1;
    --cw-canvas: #f5f7f8;
    --cw-surface: #ffffff;
    --cw-surface-subtle: #f9fafb;
    --cw-surface-raised: #ffffff;
    --cw-ink: #172033;
    --cw-ink-soft: #344054;
    --cw-muted: #667085;
    --cw-muted-light: #8a94a6;
    --cw-line: #dfe4ea;
    --cw-line-strong: #cbd3dc;
    --cw-info: #2563eb;
    --cw-info-soft: #eef4ff;
    --cw-success: #16845b;
    --cw-success-soft: #eaf7f1;
    --cw-warning: #a95f0a;
    --cw-warning-soft: #fff5e8;
    --cw-danger: #c43d4f;
    --cw-danger-soft: #fff0f2;
    --cw-radius-xs: 4px;
    --cw-radius-sm: 7px;
    --cw-radius-md: 10px;
    --cw-radius-lg: 14px;
    --cw-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --cw-shadow-raised: 0 8px 24px rgba(16, 24, 40, .08);
    --cw-rail: 260px;
    --cw-topbar: 68px;
    --brand: var(--cw-brand);
    --brand-strong: var(--cw-brand-hover);
    --brand-soft: var(--cw-brand-soft);
    --brand-2: var(--cw-brand);
    --accent: var(--cw-brand);
    --accent-soft: var(--cw-brand-soft);
    --success: var(--cw-success);
    --success-soft: var(--cw-success-soft);
    --warning: var(--cw-warning);
    --warning-soft: var(--cw-warning-soft);
    --danger: var(--cw-danger);
    --danger-soft: var(--cw-danger-soft);
    --ink: var(--cw-ink);
    --muted: var(--cw-muted);
    --line: var(--cw-line);
    --cream: var(--cw-canvas);
    --paper: var(--cw-surface);
    --rail: var(--cw-rail);
    --topbar: var(--cw-topbar);
    --shadow: var(--cw-shadow);
    background: var(--cw-canvas);
    color: var(--cw-ink);
    font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

/* Account profile and settings v3 */

.account-workspace-surface .account-profile-page,
.account-workspace-surface .account-settings-page {
    display: grid;
    gap: 20px;
}

.account-workspace-surface .account-profile-hero {
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--cw-shadow-raised);
}

.account-workspace-surface .account-profile-cover {
    position: relative;
    z-index: 1;
    min-height: 154px;
    overflow: hidden;
    background:
        radial-gradient(circle at 17% 20%, rgba(36, 201, 185, .2), transparent 28%),
        linear-gradient(115deg, #172940 0%, #101b2b 52%, #0c141f 100%);
}

.account-workspace-surface .account-profile-cover > img {
    width: 100%;
    height: 154px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.account-workspace-surface .account-profile-cover::before,
.account-workspace-surface .account-profile-cover::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(85, 225, 210, .14);
    border-radius: 50%;
}

.account-workspace-surface .account-profile-cover::before {
    width: 240px;
    height: 240px;
    top: -74px;
    left: 8%;
}

.account-workspace-surface .account-profile-cover::after {
    width: 300px;
    height: 300px;
    right: 8%;
    bottom: -224px;
}

.account-workspace-surface .account-profile-cover > span {
    position: absolute;
    inset: 50% auto auto 50%;
    color: rgba(255, 255, 255, .055);
    font-size: clamp(46px, 7vw, 88px);
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.account-workspace-surface .account-profile-identity {
    position: relative;
    z-index: 2;
    min-height: 118px;
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 0 24px 18px;
}

.account-workspace-surface .account-profile-avatar {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    align-self: start;
    margin-top: -52px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #111c2c;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .18);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.04em;
    overflow: hidden;
}

.account-workspace-surface .account-profile-avatar > img,
.account-workspace-surface .account-mini-avatar > img,
.commerce-workspace .account-chip > span > img,
.marketplace-surface .market-account > span > img,
.marketplace-surface .market-account-dropdown > header > span > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.commerce-workspace .account-chip > span,
.account-workspace-surface .account-mini-avatar,
.marketplace-surface .market-account-dropdown > header > span,
.marketplace-surface .market-account > span {
    overflow: hidden;
}

.marketplace-surface .market-account > span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
}

.account-workspace-surface .account-profile-copy {
    min-width: 0;
}

.account-workspace-surface .account-profile-copy > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.account-workspace-surface .account-profile-copy h1 {
    margin: 0 4px 0 0;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.15;
}

.account-workspace-surface .account-profile-copy mark,
.account-workspace-surface .account-profile-details mark,
.account-workspace-surface .profile-security-list mark,
.account-workspace-surface .profile-order-list mark,
.account-workspace-surface .security-state,
.account-workspace-surface .account-activity-copy mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #e9f6f3;
    color: #0f766e;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.1;
}

.account-workspace-surface .account-profile-copy mark.online {
    background: #eaf7f1;
    color: #16845b;
}

.account-workspace-surface .account-profile-copy mark.online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.account-workspace-surface .account-profile-copy > p {
    margin: 7px 0 0;
    font-size: 13px;
}

.account-workspace-surface .account-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.account-workspace-surface .account-profile-actions > a,
.account-workspace-surface .account-settings-panel-header > a,
.account-workspace-surface .account-settings-form-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.account-workspace-surface .account-profile-actions .ui-icon,
.account-workspace-surface .account-settings-panel-header > a .ui-icon,
.account-workspace-surface .account-settings-form-actions .ui-icon {
    width: 17px;
    height: 17px;
}

.account-workspace-surface .account-profile-notice {
    margin: 0;
}

.account-workspace-surface .account-profile-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: var(--cw-shadow);
}

.account-workspace-surface .account-profile-stats article {
    min-width: 0;
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border-left: 1px solid var(--cw-line);
}

.account-workspace-surface .account-profile-stats article:first-child {
    border-left: 0;
}

.account-workspace-surface .account-profile-stats article > span,
.account-workspace-surface .account-overview-card > header > span {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
}

.account-workspace-surface .account-profile-stats .ui-icon,
.account-workspace-surface .account-overview-card > header > span .ui-icon {
    width: 18px;
    height: 18px;
}

.account-workspace-surface .account-profile-stats article > div {
    min-width: 0;
}

.account-workspace-surface .account-profile-stats strong,
.account-workspace-surface .account-profile-stats small {
    display: block;
}

.account-workspace-surface .account-profile-stats strong {
    overflow: hidden;
    color: var(--cw-ink);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .account-profile-stats small {
    margin-top: 3px;
    color: var(--cw-muted);
    font-size: 11px;
}

.account-workspace-surface .account-profile-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.account-workspace-surface .account-overview-card {
    min-width: 0;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--cw-line);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: var(--cw-shadow);
}

.account-workspace-surface .account-overview-card > header {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
}

.account-workspace-surface .account-overview-card > header h2 {
    min-width: 0;
    margin: 0;
    font-size: 17px;
}

.account-workspace-surface .account-overview-card > header > small {
    margin-left: auto;
    padding: 5px 8px;
    border: 1px solid var(--cw-line);
    border-radius: 999px;
    color: var(--cw-muted);
    white-space: nowrap;
}

.account-workspace-surface .account-overview-card > header > a {
    margin-left: auto;
    color: var(--cw-brand);
    font-size: 12px;
    font-weight: 700;
}

.account-workspace-surface .account-profile-details {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0 16px 16px;
}

.account-workspace-surface .account-profile-details > div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
}

.account-workspace-surface .account-profile-details dt,
.account-workspace-surface .account-profile-details dd {
    min-width: 0;
    margin: 0;
    font-size: 13px;
}

.account-workspace-surface .account-profile-details dt {
    color: var(--cw-muted);
}

.account-workspace-surface .account-profile-details dd {
    overflow-wrap: anywhere;
    color: var(--cw-ink-soft);
    font-weight: 650;
}

.account-workspace-surface .account-profile-details dd mark {
    margin-left: 5px;
    padding: 4px 6px;
    font-size: 10px;
}

.account-workspace-surface .account-profile-details mark.pending,
.account-workspace-surface .profile-security-list mark.pending {
    background: var(--cw-warning-soft);
    color: var(--cw-warning);
}

.account-workspace-surface .account-profile-details mark.member {
    margin-left: 0;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
}

.account-workspace-surface .account-card-action {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 16px 16px;
    border-radius: 7px;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.account-workspace-surface .account-card-action:hover,
.account-workspace-surface .account-card-action:focus-visible {
    background: #dcefeb;
    color: var(--cw-brand-hover);
}

.account-workspace-surface .profile-purchase-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 16px;
}

.account-workspace-surface .profile-purchase-metrics article {
    min-height: 76px;
    padding: 13px;
    border: 1px solid var(--cw-line);
    border-radius: 9px;
    background: var(--cw-surface-subtle);
}

.account-workspace-surface .profile-purchase-metrics small,
.account-workspace-surface .profile-purchase-metrics strong {
    display: block;
}

.account-workspace-surface .profile-purchase-metrics small {
    color: var(--cw-muted);
}

.account-workspace-surface .profile-purchase-metrics strong {
    margin-top: 6px;
    color: var(--cw-ink);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.account-workspace-surface .profile-security-list {
    display: grid;
    gap: 0;
    padding: 0 16px 12px;
}

.account-workspace-surface .profile-security-list > div {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #edf0f3;
}

.account-workspace-surface .profile-security-list > div:first-child {
    border-top: 0;
}

.account-workspace-surface .profile-security-list > div > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f2f5f7;
    color: var(--cw-muted);
}

.account-workspace-surface .profile-security-list .ui-icon {
    width: 16px;
    height: 16px;
}

.account-workspace-surface .profile-security-list p,
.account-workspace-surface .profile-security-list b,
.account-workspace-surface .profile-security-list small {
    min-width: 0;
    display: block;
    margin: 0;
}

.account-workspace-surface .profile-security-list b {
    color: var(--cw-ink-soft);
    font-size: 12px;
}

.account-workspace-surface .profile-security-list small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--cw-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .profile-security-list > div > a {
    color: var(--cw-brand);
    font-size: 11px;
    font-weight: 750;
}

.account-workspace-surface .profile-security-list mark {
    padding: 4px 6px;
    font-size: 10px;
}

.account-workspace-surface .profile-recent-orders {
    grid-column: span 2;
}

.account-workspace-surface .profile-order-list {
    display: grid;
    padding: 0 16px 12px;
}

.account-workspace-surface .profile-order-list > a {
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #edf0f3;
    color: var(--cw-ink-soft);
    text-decoration: none;
}

.account-workspace-surface .profile-order-list > a:first-child {
    border-top: 0;
}

.account-workspace-surface .profile-order-list > a:hover p b,
.account-workspace-surface .profile-order-list > a:focus-visible p b {
    color: var(--cw-brand);
}

.account-workspace-surface .profile-order-list > a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eaf3f7;
    color: #34546b;
    font-weight: 800;
}

.account-workspace-surface .profile-order-list p,
.account-workspace-surface .profile-order-list p b,
.account-workspace-surface .profile-order-list p small {
    min-width: 0;
    display: block;
    margin: 0;
}

.account-workspace-surface .profile-order-list p b {
    overflow: hidden;
    color: var(--cw-ink-soft);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .profile-order-list p small {
    margin-top: 3px;
    color: var(--cw-muted);
    font-size: 10px;
}

.account-workspace-surface .profile-order-list mark.warning {
    background: var(--cw-warning-soft);
    color: var(--cw-warning);
}

.account-workspace-surface .profile-order-list mark.danger {
    background: var(--cw-danger-soft);
    color: var(--cw-danger);
}

.account-workspace-surface .profile-order-list mark.neutral {
    background: #f0f2f5;
    color: var(--cw-muted);
}

.account-workspace-surface .profile-order-list > a > strong {
    min-width: 94px;
    color: var(--cw-ink);
    font-size: 13px;
    text-align: right;
}

.account-workspace-surface .profile-activity-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 16px 12px;
    list-style: none;
}

.account-workspace-surface .profile-activity-list li {
    min-height: 66px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-top: 1px solid #edf0f3;
}

.account-workspace-surface .profile-activity-list li:first-child {
    border-top: 0;
}

.account-workspace-surface .profile-activity-list li > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cw-success-soft);
    color: var(--cw-success);
}

.account-workspace-surface .profile-activity-list .ui-icon {
    width: 16px;
    height: 16px;
}

.account-workspace-surface .profile-activity-list p,
.account-workspace-surface .profile-activity-list b,
.account-workspace-surface .profile-activity-list small,
.account-workspace-surface .profile-activity-list time {
    display: block;
    margin: 0;
}

.account-workspace-surface .profile-activity-list b {
    color: var(--cw-ink-soft);
    font-size: 12px;
}

.account-workspace-surface .profile-activity-list small,
.account-workspace-surface .profile-activity-list time {
    margin-top: 2px;
    color: var(--cw-muted);
    font-size: 10px;
}

.account-workspace-surface .account-profile-empty {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 16px 16px;
    border: 1px dashed var(--cw-line-strong);
    border-radius: 9px;
    background: var(--cw-surface-subtle);
    text-align: center;
}

.account-workspace-surface .account-profile-empty > span,
.account-workspace-surface .account-settings-empty > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
}

.account-workspace-surface .account-profile-empty b {
    margin-top: 10px;
    color: var(--cw-ink-soft);
    font-size: 13px;
}

.account-workspace-surface .account-profile-empty p {
    margin: 4px 16px 0;
    font-size: 11px;
}

.account-workspace-surface .profile-settings-section {
    display: grid;
    gap: 16px;
    scroll-margin-top: 20px;
}

.account-workspace-surface .profile-settings-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 8px;
}

.account-workspace-surface .profile-settings-intro h2 {
    margin: 0;
    font-size: 25px;
}

.account-workspace-surface .profile-settings-intro p {
    margin: 4px 0 0;
    font-size: 13px;
}

.account-workspace-surface .profile-settings-intro > a {
    color: var(--cw-brand);
    font-size: 12px;
    font-weight: 700;
}

/* Shared account settings shell */

.account-workspace-surface .account-settings-layout {
    display: grid;
    grid-template-columns: 282px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.account-workspace-surface .account-settings-sidebar {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 12px;
}

.account-workspace-surface .account-mini-profile,
.account-workspace-surface .account-settings-nav,
.account-workspace-surface .account-settings-panel {
    border: 1px solid var(--cw-line);
    border-radius: 13px;
    background: #ffffff;
    box-shadow: var(--cw-shadow);
}

.account-workspace-surface .account-mini-profile {
    min-height: 112px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px;
}

.account-workspace-surface .account-mini-avatar {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #111c2c;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    overflow: hidden;
}

.account-workspace-surface .account-mini-profile > div {
    min-width: 0;
}

.account-workspace-surface .account-mini-profile p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.account-workspace-surface .account-mini-profile strong {
    overflow: hidden;
    color: var(--cw-ink);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .account-mini-profile mark {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 5px;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
    font-size: 9px;
    font-weight: 750;
}

.account-workspace-surface .account-mini-profile small {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: var(--cw-muted);
    font-size: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.account-workspace-surface .account-settings-nav {
    display: grid;
    gap: 3px;
    padding: 12px;
}

.account-workspace-surface .account-settings-nav > small {
    margin: 1px 8px 6px;
    color: var(--cw-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.account-workspace-surface .account-settings-nav > a {
    min-height: 58px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--cw-ink-soft);
    text-decoration: none;
}

.account-workspace-surface .account-settings-nav > a > span:first-child {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--cw-muted);
}

.account-workspace-surface .account-settings-nav .ui-icon {
    width: 19px;
    height: 19px;
}

.account-workspace-surface .account-settings-nav b,
.account-workspace-surface .account-settings-nav em {
    display: block;
}

.account-workspace-surface .account-settings-nav b {
    font-size: 13px;
}

.account-workspace-surface .account-settings-nav em {
    margin-top: 2px;
    color: var(--cw-muted);
    font-size: 10px;
    font-style: normal;
}

.account-workspace-surface .account-settings-nav > a:hover,
.account-workspace-surface .account-settings-nav > a:focus-visible {
    background: var(--cw-surface-subtle);
    color: var(--cw-brand);
}

.account-workspace-surface .account-settings-nav > a.active {
    border-color: #15263d;
    background: #15263d;
    color: #ffffff;
    box-shadow: inset 3px 0 0 #27c4b6;
}

.account-workspace-surface .account-settings-nav > a.active > span:first-child {
    color: #7ce9df;
}

.account-workspace-surface .account-settings-nav > a.active em {
    color: #b4c3d7;
}

.account-workspace-surface .account-settings-main,
.account-workspace-surface .security-settings-main {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.account-workspace-surface .account-settings-panel {
    min-width: 0;
    overflow: hidden;
}

.account-workspace-surface .account-settings-panel-header {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 20px;
    border-bottom: 1px solid var(--cw-line);
}

.account-workspace-surface .account-settings-panel-header h1,
.account-workspace-surface .account-settings-panel-header h2,
.account-workspace-surface .account-settings-panel-header h3 {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
}

.account-workspace-surface .account-settings-panel-header h3 {
    font-size: 21px;
}

.account-workspace-surface .account-settings-panel-header p {
    margin: 5px 0 0;
    font-size: 13px;
}

.account-workspace-surface .account-settings-panel-header > span {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
}

.account-workspace-surface .account-settings-panel-header > span .ui-icon {
    width: 20px;
    height: 20px;
}

.account-workspace-surface .account-settings-panel-header .compact {
    min-height: 38px;
    padding: 8px 11px;
    white-space: nowrap;
}

.account-workspace-surface .account-settings-validation,
.account-workspace-surface .account-settings-notice {
    margin: 16px 20px 0;
}

.account-workspace-surface .profile-media-grid {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr);
    gap: 14px;
    padding: 20px 20px 2px;
}

.account-workspace-surface .profile-media-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--cw-line);
    border-radius: 10px;
    background: var(--cw-surface-subtle);
}

.account-workspace-surface .profile-media-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-workspace-surface .profile-media-card > header h4,
.account-workspace-surface .profile-media-card > header p {
    margin: 0;
}

.account-workspace-surface .profile-media-card > header h4 {
    font-size: 14px;
}

.account-workspace-surface .profile-media-card > header p {
    margin-top: 2px;
    font-size: 10px;
}

.account-workspace-surface .profile-media-card > header > .ui-icon {
    width: 20px;
    height: 20px;
    color: var(--cw-success);
}

.account-workspace-surface .profile-avatar-preview,
.account-workspace-surface .profile-cover-preview {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-top: 13px;
    background: #15263d;
}

.account-workspace-surface .profile-avatar-preview {
    width: 96px;
    height: 96px;
    align-self: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(16, 24, 40, .16);
}

.account-workspace-surface .profile-cover-preview {
    width: 100%;
    min-height: 112px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 20% 0, rgba(36, 201, 185, .22), transparent 34%),
        linear-gradient(115deg, #172940, #0c141f);
}

.account-workspace-surface .profile-avatar-preview > img,
.account-workspace-surface .profile-cover-preview > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.account-workspace-surface .profile-avatar-preview > span,
.account-workspace-surface .profile-cover-preview > span {
    color: #ffffff;
    font-weight: 800;
}

.account-workspace-surface .profile-avatar-preview > span {
    font-size: 25px;
}

.account-workspace-surface .profile-cover-preview > span {
    color: rgba(255, 255, 255, .16);
    font-size: 20px;
    letter-spacing: .12em;
}

.account-workspace-surface .profile-avatar-preview > label,
.account-workspace-surface .profile-cover-preview > label {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(11, 20, 31, .9);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.account-workspace-surface .profile-avatar-preview > label {
    right: 50%;
    bottom: 5px;
    transform: translateX(50%);
    white-space: nowrap;
}

.account-workspace-surface .profile-avatar-preview > label .ui-icon,
.account-workspace-surface .profile-cover-preview > label .ui-icon {
    width: 13px;
    height: 13px;
}

.account-workspace-surface .profile-media-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.account-workspace-surface .profile-media-card:focus-within .profile-avatar-preview,
.account-workspace-surface .profile-media-card:focus-within .profile-cover-preview {
    outline: 3px solid rgba(15, 118, 110, .22);
    outline-offset: 2px;
}

.account-workspace-surface .profile-media-card > .profile-media-error {
    display: block;
    min-height: 17px;
    margin-top: 5px;
    color: var(--cw-danger);
    font-size: 10px;
}

.account-workspace-surface .profile-media-card > footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.account-workspace-surface .profile-media-card > footer small {
    color: var(--cw-muted);
    font-size: 9px;
}

.account-workspace-surface .profile-media-card > footer small span {
    display: inline-block;
    max-width: 210px;
    overflow: hidden;
    color: var(--cw-muted-light);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .profile-media-card > footer button {
    min-height: 36px;
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 10px;
}

.account-workspace-surface .profile-media-card.has-selection {
    border-color: var(--cw-brand-border);
    background: #f2faf8;
}

.account-workspace-surface .profile-information-form {
    margin-top: 18px;
    border-top: 1px solid var(--cw-line);
}

.account-workspace-surface .profile-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
}

.account-workspace-surface .profile-settings-form-grid label,
.account-workspace-surface .password-settings-form label,
.account-workspace-surface .two-factor-form label,
.account-workspace-surface .two-factor-disable-form label {
    min-width: 0;
    display: block;
    margin: 0;
}

.account-workspace-surface .profile-settings-form-grid label > span,
.account-workspace-surface .password-settings-form label > span,
.account-workspace-surface .two-factor-form label > span,
.account-workspace-surface .two-factor-disable-form label > span {
    display: block;
    margin-bottom: 7px;
    color: var(--cw-ink-soft);
    font-size: 13px;
    font-weight: 750;
}

.account-workspace-surface .profile-settings-form-grid input,
.account-workspace-surface .password-settings-form input,
.account-workspace-surface .two-factor-form input,
.account-workspace-surface .two-factor-disable-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--cw-line-strong);
    border-radius: 7px;
    background: #ffffff;
    color: var(--cw-ink);
    font-size: 14px;
}

.account-workspace-surface .profile-settings-form-grid input:focus,
.account-workspace-surface .password-settings-form input:focus,
.account-workspace-surface .two-factor-form input:focus,
.account-workspace-surface .two-factor-disable-form input:focus {
    border-color: var(--cw-brand);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .11);
}

.account-workspace-surface .profile-settings-form-grid input[readonly] {
    background: #f4f6f8;
    color: var(--cw-muted);
    cursor: not-allowed;
}

.account-workspace-surface .profile-settings-form-grid label > small,
.account-workspace-surface .password-settings-form label > small {
    display: block;
    margin-top: 6px;
    color: var(--cw-muted);
    font-size: 11px;
}

.account-workspace-surface .profile-settings-form-grid label > em,
.account-workspace-surface .password-settings-form label > em,
.account-workspace-surface .two-factor-form label > em,
.account-workspace-surface .two-factor-disable-form label > em,
.account-workspace-surface .field-validation-message {
    display: block;
    margin-top: 5px;
    color: var(--cw-danger);
    font-size: 11px;
    font-style: normal;
}

.account-workspace-surface .field-validation-valid,
.account-workspace-surface .profile-media-error.field-validation-valid {
    display: none;
}

.account-workspace-surface .account-settings-form-actions {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 20px;
    border-top: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.account-workspace-surface .account-settings-form-actions p {
    margin: 0;
    font-size: 12px;
}

.account-workspace-surface .account-settings-form-actions > a {
    color: var(--cw-brand);
    font-size: 13px;
    font-weight: 700;
}

/* Activity settings */

.account-workspace-surface .account-settings-empty {
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px;
    border: 1px dashed var(--cw-line-strong);
    border-radius: 10px;
    background: var(--cw-surface-subtle);
    text-align: center;
}

.account-workspace-surface .account-settings-empty h2 {
    margin: 12px 0 0;
    font-size: 17px;
}

.account-workspace-surface .account-settings-empty p {
    max-width: 500px;
    margin: 5px 20px 0;
    font-size: 12px;
}

.account-workspace-surface .account-activity-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 20px 12px;
    list-style: none;
}

.account-workspace-surface .account-activity-timeline > li {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--cw-line);
}

.account-workspace-surface .account-activity-timeline > li:first-child {
    border-top: 0;
}

.account-workspace-surface .account-activity-timeline > li > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--cw-success-soft);
    color: var(--cw-success);
}

.account-workspace-surface .account-activity-timeline > li > span.failed {
    background: var(--cw-danger-soft);
    color: var(--cw-danger);
}

.account-workspace-surface .account-activity-copy > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.account-workspace-surface .account-activity-copy h2 {
    margin: 0;
    font-size: 15px;
}

.account-workspace-surface .account-activity-copy mark.failed {
    background: var(--cw-danger-soft);
    color: var(--cw-danger);
}

.account-workspace-surface .account-activity-copy > p {
    margin: 5px 0 0;
    font-size: 12px;
}

.account-workspace-surface .account-activity-copy dl {
    display: grid;
    grid-template-columns: 150px 150px minmax(0, 1fr);
    gap: 16px;
    margin: 12px 0 0;
    padding: 11px 12px;
    border-radius: 8px;
    background: var(--cw-surface-subtle);
}

.account-workspace-surface .account-activity-copy dt,
.account-workspace-surface .account-activity-copy dd {
    margin: 0;
    font-size: 11px;
}

.account-workspace-surface .account-activity-copy dt {
    color: var(--cw-muted);
}

.account-workspace-surface .account-activity-copy dd {
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--cw-ink-soft);
    font-weight: 650;
}

/* Password and security settings */

.account-workspace-surface .password-settings-form {
    max-width: 680px;
    display: grid;
    gap: 17px;
    padding: 20px;
}

.account-workspace-surface .security-password-card .account-settings-panel-header {
    border-bottom: 0;
}

.account-workspace-surface .security-state.enabled {
    background: var(--cw-success-soft);
    color: var(--cw-success);
}

.account-workspace-surface .security-state.disabled {
    background: var(--cw-warning-soft);
    color: var(--cw-warning);
}

.account-workspace-surface .two-factor-setup,
.account-workspace-surface .two-factor-enabled {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.account-workspace-surface .two-factor-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
}

.account-workspace-surface .two-factor-step > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #15263d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.account-workspace-surface .two-factor-step h3,
.account-workspace-surface .two-factor-step p {
    margin: 0;
}

.account-workspace-surface .two-factor-step h3 {
    font-size: 15px;
}

.account-workspace-surface .two-factor-step p {
    margin-top: 4px;
    font-size: 12px;
}

.account-workspace-surface .security-key-field {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--cw-line);
    border-radius: 9px;
    background: var(--cw-surface-subtle);
}

.account-workspace-surface .security-key-field > span {
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 700;
}

.account-workspace-surface .security-key-field code,
.account-workspace-surface .security-uri-details code {
    overflow-wrap: anywhere;
    color: var(--cw-ink);
    font-size: 13px;
}

.account-workspace-surface .security-uri-details {
    padding: 12px 14px;
    border: 1px solid var(--cw-line);
    border-radius: 9px;
}

.account-workspace-surface .security-uri-details summary {
    color: var(--cw-brand);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.account-workspace-surface .security-uri-details code {
    display: block;
    margin-top: 12px;
    padding: 12px;
    border-radius: 7px;
    background: #f3f5f7;
}

.account-workspace-surface .two-factor-form {
    display: grid;
    grid-template-columns: minmax(220px, 360px) auto;
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--cw-line);
    border-radius: 10px;
}

.account-workspace-surface .two-factor-form > .validation {
    grid-column: 1 / -1;
}

.account-workspace-surface .two-factor-form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.account-workspace-surface .security-confirmation {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid #b9dfd0;
    border-radius: 10px;
    background: var(--cw-success-soft);
}

.account-workspace-surface .security-confirmation > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--cw-success);
}

.account-workspace-surface .security-confirmation h3,
.account-workspace-surface .security-confirmation p {
    margin: 0;
}

.account-workspace-surface .security-confirmation h3 {
    color: #116344;
    font-size: 16px;
}

.account-workspace-surface .security-confirmation p {
    margin-top: 3px;
    color: #317359;
    font-size: 12px;
}

.account-workspace-surface .two-factor-disable-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--cw-line);
    border-radius: 10px;
}

.account-workspace-surface .two-factor-actions {
    display: flex;
    gap: 8px;
}

.account-workspace-surface .recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 20px;
}

.account-workspace-surface .recovery-code-grid code {
    padding: 12px;
    border: 1px solid var(--cw-line);
    border-radius: 7px;
    background: var(--cw-surface-subtle);
    color: var(--cw-ink);
    text-align: center;
}

.account-workspace-surface .security-guidance {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px 19px;
    border: 1px solid #c9e4df;
    border-radius: 12px;
    background: #f1faf8;
}

.account-workspace-surface .security-guidance > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ffffff;
    color: var(--cw-brand);
}

.account-workspace-surface .security-guidance h2,
.account-workspace-surface .security-guidance p {
    margin: 0;
}

.account-workspace-surface .security-guidance h2 {
    font-size: 14px;
}

.account-workspace-surface .security-guidance p {
    margin-top: 3px;
    font-size: 11px;
}

.account-workspace-surface .security-guidance > a {
    color: var(--cw-brand);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 1220px) {
    .account-workspace-surface .account-profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-workspace-surface .account-profile-stats article:nth-child(4) {
        border-left: 0;
    }

    .account-workspace-surface .account-profile-stats article:nth-child(n + 4) {
        border-top: 1px solid var(--cw-line);
    }

    .account-workspace-surface .account-profile-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-workspace-surface .profile-security-card,
    .account-workspace-surface .profile-recent-activity {
        grid-column: auto;
    }

    .account-workspace-surface .profile-recent-orders {
        grid-column: span 2;
    }

    .account-workspace-surface .two-factor-disable-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .account-workspace-surface .account-profile-identity {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .account-workspace-surface .account-profile-avatar {
        width: 104px;
        height: 104px;
    }

    .account-workspace-surface .account-profile-actions {
        grid-column: 2;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .account-workspace-surface .account-settings-layout {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .account-settings-sidebar {
        position: static;
    }

    .account-workspace-surface .account-mini-profile {
        display: none;
    }

    .account-workspace-surface .account-settings-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: auto;
    }

    .account-workspace-surface .account-settings-nav > small {
        display: none;
    }

    .account-workspace-surface .account-settings-nav > a {
        min-width: 160px;
    }

    .account-workspace-surface .account-activity-copy dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-workspace-surface .account-activity-copy dl > div:last-child {
        grid-column: 1 / -1;
    }

    .account-workspace-surface .recovery-code-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .account-workspace-surface .account-profile-page,
    .account-workspace-surface .account-settings-page {
        gap: 14px;
    }

    .account-workspace-surface .account-profile-hero {
        border-radius: 12px;
    }

    .account-workspace-surface .account-profile-cover {
        min-height: 126px;
    }

    .account-workspace-surface .account-profile-cover > img {
        height: 126px;
    }

    .account-workspace-surface .account-profile-cover > span {
        font-size: 38px;
    }

    .account-workspace-surface .account-profile-identity {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 14px;
        padding: 0 16px 17px;
    }

    .account-workspace-surface .account-profile-avatar {
        width: 82px;
        height: 82px;
        margin-top: -30px;
        border-width: 4px;
        font-size: 25px;
    }

    .account-workspace-surface .account-profile-copy {
        padding-top: 10px;
    }

    .account-workspace-surface .account-profile-copy h1 {
        width: 100%;
        font-size: 23px;
    }

    .account-workspace-surface .account-profile-copy > p {
        font-size: 12px;
    }

    .account-workspace-surface .account-profile-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-workspace-surface .account-profile-actions > a {
        min-width: 0;
        padding-inline: 9px;
        font-size: 11px;
    }

    .account-workspace-surface .account-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-workspace-surface .account-profile-stats article,
    .account-workspace-surface .account-profile-stats article:nth-child(4) {
        min-height: 78px;
        border-top: 1px solid var(--cw-line);
        border-left: 1px solid var(--cw-line);
    }

    .account-workspace-surface .account-profile-stats article:nth-child(-n + 2) {
        border-top: 0;
    }

    .account-workspace-surface .account-profile-stats article:nth-child(odd) {
        border-left: 0;
    }

    .account-workspace-surface .account-profile-stats article {
        padding: 12px;
    }

    .account-workspace-surface .account-profile-stats article > span {
        width: 32px;
        height: 32px;
    }

    .account-workspace-surface .account-profile-stats strong {
        font-size: 14px;
    }

    .account-workspace-surface .account-profile-overview-grid {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .profile-recent-orders {
        grid-column: auto;
    }

    .account-workspace-surface .profile-order-list > a {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .account-workspace-surface .profile-order-list > a > strong {
        grid-column: 2 / -1;
        min-width: 0;
        margin-top: -5px;
        text-align: left;
    }

    .account-workspace-surface .profile-settings-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-workspace-surface .account-settings-nav {
        width: 100%;
        display: flex;
        padding: 8px;
    }

    .account-workspace-surface .account-settings-nav > a {
        min-width: 148px;
    }

    .account-workspace-surface .account-settings-panel-header {
        min-height: 78px;
        padding: 16px;
    }

    .account-workspace-surface .account-settings-panel-header h1,
    .account-workspace-surface .account-settings-panel-header h2,
    .account-workspace-surface .account-settings-panel-header h3 {
        font-size: 20px;
    }

    .account-workspace-surface .account-settings-panel-header p {
        font-size: 12px;
    }

    .account-workspace-surface .profile-settings-form-grid,
    .account-workspace-surface .profile-media-grid,
    .account-workspace-surface .two-factor-form {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .profile-media-grid {
        padding: 16px 16px 2px;
    }

    .account-workspace-surface .account-settings-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-workspace-surface .account-settings-form-actions > button {
        width: 100%;
    }

    .account-workspace-surface .account-activity-copy dl {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .account-activity-copy dl > div:last-child {
        grid-column: auto;
    }

    .account-workspace-surface .security-key-field {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .two-factor-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-workspace-surface .security-guidance {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .account-workspace-surface .security-guidance > a {
        grid-column: 2;
    }
}

@media (max-width: 460px) {
    .account-workspace-surface .account-profile-copy mark {
        padding: 4px 6px;
        font-size: 9px;
    }

    .account-workspace-surface .profile-purchase-metrics,
    .account-workspace-surface .recovery-code-grid {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .account-profile-details > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .account-workspace-surface .account-overview-card > header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .account-workspace-surface .account-overview-card > header > a,
    .account-workspace-surface .account-overview-card > header > small {
        margin-left: 46px;
    }

    .account-workspace-surface .account-settings-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-workspace-surface .account-settings-panel-header > a,
    .account-workspace-surface .account-settings-panel-header > span,
    .account-workspace-surface .account-settings-panel-header > mark {
        align-self: flex-start;
    }

    .account-workspace-surface .account-activity-timeline {
        padding-inline: 14px;
    }

    .account-workspace-surface .account-activity-copy > div:first-child {
        align-items: flex-start;
        flex-direction: column;
    }
}

.commerce-workspace,
.commerce-workspace button,
.commerce-workspace input,
.commerce-workspace select,
.commerce-workspace textarea {
    font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
}

.commerce-workspace h1,
.commerce-workspace h2,
.commerce-workspace h3,
.commerce-workspace h4,
.commerce-workspace .brand b {
    color: var(--cw-ink);
    font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
    font-weight: 720;
    letter-spacing: -.025em;
}

.commerce-workspace p {
    color: var(--cw-muted);
    font-size: 15px;
    line-height: 1.65;
}

.commerce-workspace small {
    font-size: 12px;
    line-height: 1.5;
}

.commerce-workspace code,
.commerce-workspace pre,
.commerce-workspace kbd {
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.commerce-workspace a,
.commerce-workspace button,
.commerce-workspace input,
.commerce-workspace select,
.commerce-workspace textarea,
.commerce-workspace summary {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.commerce-workspace a:focus-visible,
.commerce-workspace button:focus-visible,
.commerce-workspace input:focus-visible,
.commerce-workspace select:focus-visible,
.commerce-workspace textarea:focus-visible,
.commerce-workspace summary:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .22);
    outline-offset: 2px;
}

.commerce-workspace .ui-icon {
    width: 19px;
    height: 19px;
    stroke-width: 1.8;
}

/* Application shell */

.commerce-workspace .app-shell {
    grid-template-columns: var(--cw-rail) minmax(0, 1fr);
    background: var(--cw-canvas);
}

.commerce-workspace .side-rail {
    width: var(--cw-rail);
    padding: 0 14px 18px;
    border-right: 1px solid var(--cw-line);
    background: var(--cw-surface);
    box-shadow: none;
}

.commerce-workspace .brand {
    min-height: var(--cw-topbar);
    height: var(--cw-topbar);
    gap: 11px;
    margin: 0 0 8px;
    padding: 0 10px;
    color: var(--cw-ink);
    font-size: 19px;
}

.commerce-workspace .brand span {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--cw-brand);
    color: #fff;
    box-shadow: none;
    font-size: 20px;
}

.commerce-workspace .brand i {
    color: var(--cw-muted-light);
    font-size: 13px;
}

.commerce-workspace .rail-nav {
    gap: 3px;
}

.commerce-workspace .rail-nav small {
    margin: 17px 11px 7px;
    color: var(--cw-muted-light);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
}

.commerce-workspace .rail-nav a {
    min-height: 43px;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-ink-soft);
    font-size: 14px;
    font-weight: 600;
}

.commerce-workspace .rail-nav a .ui-icon {
    flex: 0 0 19px;
    color: #667085;
}

.commerce-workspace .rail-nav a:hover,
.commerce-workspace .rail-nav a:focus-visible {
    background: var(--cw-surface-subtle);
    color: var(--cw-brand-hover);
    transform: none;
}

.commerce-workspace .rail-nav a.active,
.commerce-workspace .rail-nav a[aria-current="page"] {
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    box-shadow: inset 3px 0 0 var(--cw-brand);
}

.commerce-workspace .rail-nav a.active .ui-icon,
.commerce-workspace .rail-nav a[aria-current="page"] .ui-icon {
    color: var(--cw-brand);
}

.commerce-workspace .vip-card,
.commerce-workspace .rail-support {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-md);
    background: var(--cw-surface-subtle);
    box-shadow: none;
}

.commerce-workspace .vip-card b,
.commerce-workspace .rail-support b {
    font-size: 14px;
}

.commerce-workspace .vip-card small,
.commerce-workspace .rail-support p {
    color: var(--cw-muted);
    font-size: 12px;
}

.commerce-workspace .vip-card progress {
    height: 7px;
    accent-color: var(--cw-brand);
}

.commerce-workspace .vip-card > a,
.commerce-workspace .rail-support > a {
    min-height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cw-brand-border);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-brand-hover);
    font-size: 12px;
    font-weight: 700;
}

.commerce-workspace .rail-support > span {
    background: var(--cw-success-soft);
    color: var(--cw-success);
    font-size: 11px;
}

.commerce-workspace .workspace {
    background: var(--cw-canvas);
}

.commerce-workspace .topbar {
    min-height: var(--cw-topbar);
    height: var(--cw-topbar);
    gap: 22px;
    padding: 0 28px;
    border-bottom: 1px solid var(--cw-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: none;
}

.commerce-workspace .global-search {
    width: min(620px, 52vw);
    height: 43px;
    padding: 0 13px;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
}

.commerce-workspace .global-search input {
    color: var(--cw-ink);
    font-size: 14px;
}

.commerce-workspace .global-search input::placeholder {
    color: #98a2b3;
}

.commerce-workspace .global-search kbd {
    padding: 3px 7px;
    border: 1px solid var(--cw-line);
    border-radius: 4px;
    background: var(--cw-surface-subtle);
    color: var(--cw-muted);
    font-size: 11px;
}

.commerce-workspace .top-actions {
    gap: 10px;
}

.commerce-workspace .topup-button,
.commerce-workspace .admin-access-button {
    min-height: 41px;
    gap: 7px;
    padding: 0 15px;
    border-radius: var(--cw-radius-sm);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.commerce-workspace .topup-button {
    border: 1px solid var(--cw-brand);
    background: var(--cw-brand);
    color: #fff;
}

.commerce-workspace .topup-button:hover {
    border-color: var(--cw-brand-hover);
    background: var(--cw-brand-hover);
}

.commerce-workspace .admin-access-button {
    border: 1px solid var(--cw-brand-border);
    background: var(--cw-surface);
    color: var(--cw-brand-hover);
}

.commerce-workspace .top-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-ink-soft);
}

.commerce-workspace .top-icon:hover {
    background: var(--cw-surface-subtle);
    color: var(--cw-brand);
}

.commerce-workspace .account-chip {
    min-width: 185px;
    padding: 5px 7px;
    border-left: 1px solid var(--cw-line);
    color: var(--cw-ink);
}

.commerce-workspace .account-chip > span {
    width: 38px;
    height: 38px;
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    font-size: 15px;
}

.commerce-workspace .account-chip small {
    font-size: 12px;
}

.commerce-workspace .account-chip small em {
    color: var(--cw-muted);
    font-size: 11px;
}

.commerce-workspace .workspace-main {
    min-height: calc(100vh - var(--cw-topbar));
}

.commerce-workspace .site-footer {
    padding: 32px 36px;
    border-top: 1px solid var(--cw-line);
    background: var(--cw-surface);
    color: var(--cw-ink);
    font-size: 13px;
}

.commerce-workspace .site-footer p,
.commerce-workspace .site-footer a {
    font-size: 13px;
}

/* Shared page language */

.commerce-workspace .mock-page,
.commerce-workspace .admin-page {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 30px 32px 44px;
}

.commerce-workspace .admin-page {
    max-width: none;
}

.commerce-workspace .mock-page-title,
.commerce-workspace .admin-title {
    margin-bottom: 24px;
}

.commerce-workspace .mock-page-title h1,
.commerce-workspace .admin-title h1,
.commerce-workspace .catalog-heading h1,
.commerce-workspace .catalog-heading h2 {
    margin: 4px 0 7px;
    font-size: clamp(28px, 2.2vw, 36px);
    line-height: 1.18;
}

.commerce-workspace .mock-page-title p,
.commerce-workspace .admin-title p:not(.eyebrow),
.commerce-workspace .catalog-subtitle,
.commerce-workspace .breadcrumb {
    margin: 0;
    color: var(--cw-muted);
    font-size: 14px;
    line-height: 1.6;
}

.commerce-workspace .eyebrow,
.commerce-workspace .admin-title .eyebrow,
.commerce-workspace .welcome-kicker,
.commerce-workspace .developer-eyebrow {
    color: var(--cw-brand-hover);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .07em;
}

.commerce-workspace .mock-panel,
.commerce-workspace .admin-panel,
.commerce-workspace .admin-form,
.commerce-workspace .mock-kpi,
.commerce-workspace .metric-grid > div,
.commerce-workspace .shop-product-card,
.commerce-workspace .order-card {
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-md);
    background: var(--cw-surface);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .mock-panel:hover,
.commerce-workspace .admin-panel:hover {
    border-color: var(--cw-line-strong);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .panel-heading,
.commerce-workspace .admin-panel > header {
    gap: 16px;
    padding: 19px 20px;
    border-bottom: 1px solid var(--cw-line);
}

.commerce-workspace .panel-heading h2,
.commerce-workspace .admin-panel h2 {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.35;
}

.commerce-workspace .panel-heading p,
.commerce-workspace .admin-panel header p {
    margin: 0;
    color: var(--cw-muted);
    font-size: 13px;
}

.commerce-workspace .panel-heading > a,
.commerce-workspace .panel-bottom-link,
.commerce-workspace .admin-panel header > a {
    color: var(--cw-brand-hover);
    font-size: 13px;
    font-weight: 700;
}

.commerce-workspace .panel-bottom-link {
    padding: 14px 18px;
}

.commerce-workspace .notice,
.commerce-workspace .inline-notice {
    margin: 14px 0;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: var(--cw-radius-sm);
    font-size: 14px;
    line-height: 1.55;
}

.commerce-workspace .notice-success {
    border-color: #b9dfd0;
    background: var(--cw-success-soft);
    color: #116344;
}

.commerce-workspace .notice-error,
.commerce-workspace .notice-danger {
    border-color: #f0c4ca;
    background: var(--cw-danger-soft);
    color: #a52f41;
}

.commerce-workspace .validation {
    color: var(--cw-danger);
    font-size: 13px;
}

.commerce-workspace .empty-inline,
.commerce-workspace .empty-state,
.commerce-workspace .muted {
    color: var(--cw-muted);
    font-size: 14px;
}

/* Buttons, tabs and status */

.commerce-workspace button,
.commerce-workspace .button,
.commerce-workspace .mock-primary,
.commerce-workspace .mock-secondary,
.commerce-workspace .table-action,
.commerce-workspace .danger-action,
.commerce-workspace .secondary-button {
    min-height: 42px;
    border-radius: var(--cw-radius-sm);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.commerce-workspace .button,
.commerce-workspace .mock-primary {
    border: 1px solid var(--cw-brand);
    background: var(--cw-brand);
    color: #fff;
    box-shadow: none;
}

.commerce-workspace .button:hover,
.commerce-workspace .mock-primary:hover {
    border-color: var(--cw-brand-hover);
    background: var(--cw-brand-hover);
    box-shadow: none;
    transform: none;
}

.commerce-workspace .mock-secondary,
.commerce-workspace .table-action,
.commerce-workspace .secondary-button {
    border: 1px solid var(--cw-line-strong);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
}

.commerce-workspace .mock-secondary:hover,
.commerce-workspace .table-action:hover,
.commerce-workspace .secondary-button:hover {
    border-color: var(--cw-brand-border);
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    transform: none;
}

.commerce-workspace .danger-action {
    border: 1px solid #e7b7bf;
    background: var(--cw-surface);
    color: var(--cw-danger);
}

.commerce-workspace .mock-tabs,
.commerce-workspace .admin-tabs,
.commerce-workspace .payment-tabs {
    min-height: 49px;
    gap: 3px;
    padding: 5px 7px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-md);
    background: var(--cw-surface);
}

.commerce-workspace .mock-tabs span,
.commerce-workspace .mock-tabs a,
.commerce-workspace .mock-tabs button,
.commerce-workspace .admin-tabs a,
.commerce-workspace .admin-tabs button,
.commerce-workspace .payment-tabs button {
    min-height: 38px;
    padding: 9px 13px;
    border: 0;
    border-radius: var(--cw-radius-sm);
    background: transparent;
    color: var(--cw-muted);
    font-size: 13px;
    font-weight: 650;
}

.commerce-workspace .mock-tabs .active,
.commerce-workspace .admin-tabs .active,
.commerce-workspace .payment-tabs .active {
    border: 0;
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.commerce-workspace .status-pill,
.commerce-workspace .status {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.commerce-workspace .status-pill.success,
.commerce-workspace .status.success,
.commerce-workspace .status {
    background: var(--cw-success-soft);
    color: var(--cw-success);
}

.commerce-workspace .status-pill.warning {
    background: var(--cw-warning-soft);
    color: var(--cw-warning);
}

.commerce-workspace .status-pill.danger {
    background: var(--cw-danger-soft);
    color: var(--cw-danger);
}

/* Forms */

.commerce-workspace label {
    color: var(--cw-ink-soft);
    font-size: 14px;
    font-weight: 650;
}

.commerce-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.commerce-workspace select,
.commerce-workspace textarea {
    min-height: 44px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink);
    font-size: 14px;
    line-height: 1.4;
}

.commerce-workspace textarea {
    min-height: 110px;
    line-height: 1.6;
    resize: vertical;
}

.commerce-workspace input::placeholder,
.commerce-workspace textarea::placeholder {
    color: #98a2b3;
}

.commerce-workspace input:focus,
.commerce-workspace select:focus,
.commerce-workspace textarea:focus {
    border-color: var(--cw-brand);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.commerce-workspace input[type="checkbox"],
.commerce-workspace input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--cw-brand);
}

.commerce-workspace .admin-form {
    padding: 22px;
}

.commerce-workspace .admin-form h2 {
    margin: 0 0 18px;
    font-size: 20px;
}

.commerce-workspace .admin-form label,
.commerce-workspace .admin-form-grid label {
    gap: 7px;
    margin-bottom: 14px;
}

.commerce-workspace .check {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Metrics and cards */

.commerce-workspace .mock-kpi-grid,
.commerce-workspace .metric-grid {
    gap: 14px;
    margin-bottom: 20px;
}

.commerce-workspace .mock-kpi,
.commerce-workspace .metric-grid > div {
    min-height: 118px;
    gap: 14px;
    padding: 18px;
}

.commerce-workspace .kpi-icon,
.commerce-workspace .metric-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--cw-radius-sm);
    display: grid;
    place-items: center;
    font-size: 18px;
}

.commerce-workspace .kpi-icon.blue,
.commerce-workspace .metric-icon.blue,
.commerce-workspace .kpi-icon.purple,
.commerce-workspace .metric-icon.purple {
    background: var(--cw-info-soft);
    color: var(--cw-info);
}

.commerce-workspace .kpi-icon.green,
.commerce-workspace .metric-icon.green,
.commerce-workspace .kpi-icon.cyan {
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.commerce-workspace .kpi-icon.orange,
.commerce-workspace .metric-icon.orange {
    background: var(--cw-warning-soft);
    color: var(--cw-warning);
}

.commerce-workspace .kpi-icon.red {
    background: var(--cw-danger-soft);
    color: var(--cw-danger);
}

.commerce-workspace .mock-kpi small,
.commerce-workspace .metric-grid small {
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
}

.commerce-workspace .mock-kpi strong,
.commerce-workspace .metric-grid strong {
    margin: 5px 0 3px;
    color: var(--cw-ink);
    font-size: 25px;
    line-height: 1.2;
}

.commerce-workspace .mock-kpi em,
.commerce-workspace .metric-grid em {
    color: var(--cw-muted);
    font-size: 12px;
}

/* Tables and list density */

.commerce-workspace .data-table,
.commerce-workspace .mock-table {
    width: 100%;
    overflow-x: auto;
}

.commerce-workspace .data-row,
.commerce-workspace .mock-tr {
    min-height: 57px;
    gap: 14px;
    padding: 13px 16px;
    border-top: 1px solid var(--cw-line);
    color: var(--cw-ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

.commerce-workspace .data-head,
.commerce-workspace .mock-th {
    min-height: 44px;
    background: var(--cw-surface-subtle);
    color: var(--cw-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .045em;
}

.commerce-workspace .data-row b,
.commerce-workspace .mock-tr b,
.commerce-workspace .compact-order b {
    color: var(--cw-ink);
    font-size: 13px;
}

.commerce-workspace .data-row small,
.commerce-workspace .mock-tr small,
.commerce-workspace .compact-order small,
.commerce-workspace .product-cell small {
    margin-top: 4px;
    color: var(--cw-muted);
    font-size: 11px;
}

.commerce-workspace .product-cell {
    gap: 10px;
}

.commerce-workspace .product-cell i,
.commerce-workspace .product-cell img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--cw-radius-sm);
    object-fit: cover;
}

.commerce-workspace .table-actions {
    gap: 6px;
}

.commerce-workspace .table-actions a,
.commerce-workspace .table-actions button {
    width: 34px;
    min-height: 34px;
    height: 34px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    font-size: 13px;
}

.commerce-workspace .pagination {
    min-height: 54px;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
}

.commerce-workspace .pagination a {
    padding: 8px 11px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
}

/* Customer dashboard */

.commerce-workspace .customer-dashboard {
    max-width: 1520px;
}

.commerce-workspace .dashboard-welcome {
    min-height: 230px;
    padding: 34px 38px;
    border: 1px solid var(--cw-line);
    border-left: 5px solid var(--cw-brand);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-surface);
    color: var(--cw-ink);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .dashboard-welcome h1 {
    max-width: 700px;
    margin: 13px 0 10px;
    color: var(--cw-ink);
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.12;
}

.commerce-workspace .dashboard-welcome h1 em {
    color: var(--cw-brand-hover);
}

.commerce-workspace .dashboard-welcome p {
    max-width: 680px;
    color: var(--cw-muted);
    font-size: 15px;
}

.commerce-workspace .welcome-actions {
    margin-top: 20px;
}

.commerce-workspace .welcome-secondary {
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    font-size: 14px;
    font-weight: 700;
}

.commerce-workspace .welcome-orbit {
    opacity: .58;
    filter: saturate(.65);
}

.commerce-workspace .dashboard-main-grid {
    gap: 16px;
}

.commerce-workspace .mock-tabs:not(.payment-tabs) {
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.commerce-workspace .recent-order-tabs button {
    cursor: pointer;
}

.commerce-workspace .recent-order-tabs button:focus-visible {
    outline: 2px solid var(--cw-brand);
    outline-offset: 2px;
}

.commerce-workspace .dashboard-order-table [hidden] {
    display: none;
}

.commerce-workspace .recent-order-filter-empty {
    border-top: 1px solid var(--cw-line);
}

@media (max-width: 640px) {
    .commerce-workspace .dashboard-order-table .mock-tr {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .commerce-workspace .dashboard-order-table .mock-tr > :nth-child(2),
    .commerce-workspace .dashboard-order-table .mock-tr > :nth-child(3),
    .commerce-workspace .dashboard-order-table .mock-tr > :nth-child(5) {
        display: none;
    }
}

.commerce-workspace .favorite-row,
.commerce-workspace .support-panel > a {
    min-height: 58px;
    padding: 13px 18px;
    border-top: 1px solid var(--cw-line);
    font-size: 13px;
}

.commerce-workspace .favorite-row b {
    font-size: 13px;
}

.commerce-workspace .quick-action-grid {
    gap: 8px;
    padding: 16px;
}

.commerce-workspace .quick-action-grid a {
    min-height: 106px;
    padding: 13px 8px;
    border: 1px solid transparent;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-ink-soft);
    font-size: 12px;
}

.commerce-workspace .quick-action-grid a:hover {
    border-color: var(--cw-line);
    background: var(--cw-surface-subtle);
    transform: none;
}

.commerce-workspace .quick-action-grid i {
    width: 42px;
    height: 42px;
    border-radius: var(--cw-radius-sm);
}

.commerce-workspace .quick-action-grid b {
    font-size: 12px;
}

.commerce-workspace .quick-action-grid small {
    font-size: 11px;
}

/* Catalog and product */

.commerce-workspace .catalog-section {
    max-width: 1520px;
}

.commerce-workspace .catalog-heading {
    padding: 25px 27px;
    border: 1px solid var(--cw-line);
    border-left: 5px solid var(--cw-brand);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-surface);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .catalog-heading-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--cw-radius-sm);
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    box-shadow: none;
}

.commerce-workspace .catalog-heading h1 small {
    display: inline-flex;
    margin-left: 6px;
    padding: 5px 8px;
    border-radius: var(--cw-radius-xs);
    background: var(--cw-surface-subtle);
    color: var(--cw-muted);
    font-size: 12px;
}

.commerce-workspace .category-carousel {
    gap: 8px;
    margin: 16px 0;
}

.commerce-workspace .category-carousel a {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    font-size: 13px;
    box-shadow: none;
}

.commerce-workspace .category-carousel a:hover {
    border-color: var(--cw-brand-border);
    color: var(--cw-brand-hover);
    box-shadow: none;
    transform: none;
}

.commerce-workspace .category-carousel a.active {
    border-color: var(--cw-brand);
    background: var(--cw-brand);
    color: #fff;
    box-shadow: none;
}

.commerce-workspace .catalog-filter {
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-md);
    background: var(--cw-surface);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .catalog-filter label {
    font-size: 13px;
}

.commerce-workspace .catalog-toolbar {
    padding: 15px 2px;
    color: var(--cw-muted);
    font-size: 13px;
}

.commerce-workspace .shop-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.commerce-workspace .shop-product-card {
    border-radius: var(--cw-radius-md);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .shop-product-card:hover {
    border-color: var(--cw-brand-border);
    box-shadow: var(--cw-shadow-raised);
    transform: translateY(-2px);
}

.commerce-workspace .shop-product-art {
    height: 184px;
    margin: 10px 10px 0;
    border-radius: var(--cw-radius-sm);
    background: #eef2f4;
}

.commerce-workspace .shop-product-copy {
    padding: 15px;
}

.commerce-workspace .product-rating span,
.commerce-workspace .product-rating small,
.commerce-workspace .shop-product-copy > p,
.commerce-workspace .stock-rating > span {
    font-size: 12px;
}

.commerce-workspace .shop-product-copy h2,
.commerce-workspace .shop-product-copy h3 {
    min-height: 44px;
    margin: 7px 0;
    font-size: 16px;
    line-height: 1.4;
}

.commerce-workspace .shop-price strong {
    color: var(--cw-brand-hover);
    font-size: 21px;
}

.commerce-workspace .product-card-actions a {
    min-height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    font-size: 13px;
}

.commerce-workspace .product-card-actions a.buy {
    border-color: var(--cw-brand);
    background: var(--cw-brand);
    color: #fff;
    box-shadow: none;
}

.commerce-workspace .product-intro h1 {
    font-size: clamp(30px, 3vw, 42px);
}

.commerce-workspace .product-intro p,
.commerce-workspace .product-description,
.commerce-workspace .benefit-card p {
    font-size: 14px;
}

/* Wallet, orders and transaction flows */

.commerce-workspace .wallet-page,
.commerce-workspace .orders-page,
.commerce-workspace .affiliate-page {
    max-width: 1500px;
}

.commerce-workspace .wallet-page-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .7fr);
    gap: 18px;
}

.commerce-workspace .wallet-payment-column,
.commerce-workspace .wallet-status-column {
    gap: 16px;
}

.commerce-workspace .payment-tabs {
    margin-bottom: 16px;
}

.commerce-workspace .payment-tabs button {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.commerce-workspace .payment-method-card {
    overflow: hidden;
}

.commerce-workspace .deposit-step {
    padding: 23px 24px;
    border-top: 1px solid var(--cw-line);
}

.commerce-workspace .deposit-step:first-child {
    border-top: 0;
}

.commerce-workspace .deposit-step h2,
.commerce-workspace .transaction-state h2,
.commerce-workspace .process-card h2 {
    margin: 0 0 16px;
    font-size: 18px;
}

.commerce-workspace .amount-selector {
    gap: 9px;
}

.commerce-workspace .amount-selector button {
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-ink-soft);
    font-size: 13px;
}

.commerce-workspace .amount-selector button.active {
    border-color: var(--cw-brand);
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.commerce-workspace .deposit-amount-input {
    min-height: 52px;
    border: 1px solid var(--cw-line-strong);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
}

.commerce-workspace .deposit-amount-input input {
    min-height: 50px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
}

.commerce-workspace .deposit-amount-input span {
    color: var(--cw-muted);
    font-size: 13px;
}

.commerce-workspace .deposit-totals {
    padding: 15px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface-subtle);
}

.commerce-workspace .deposit-totals span,
.commerce-workspace .deposit-totals small {
    font-size: 13px;
}

.commerce-workspace .deposit-totals strong {
    color: var(--cw-brand-hover);
    font-size: 22px;
}

.commerce-workspace .gateway-selector {
    gap: 10px;
}

.commerce-workspace .gateway-selector label {
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
}

.commerce-workspace .gateway-selector label:has(input:checked) {
    border-color: var(--cw-brand);
    background: var(--cw-brand-soft);
    box-shadow: 0 0 0 2px rgba(15, 118, 110, .08);
}

.commerce-workspace .gateway-selector label b {
    font-size: 14px;
}

.commerce-workspace .gateway-selector label small {
    color: var(--cw-muted);
    font-size: 12px;
}

.commerce-workspace .bank-transfer-box {
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-md);
    background: var(--cw-surface-subtle);
}

.commerce-workspace .bank-transfer-box dt,
.commerce-workspace .bank-transfer-box dd {
    padding: 8px 0;
    font-size: 13px;
}

.commerce-workspace .qr-placeholder {
    min-width: 180px;
    padding: 14px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
}

.commerce-workspace .transaction-state,
.commerce-workspace .process-card,
.commerce-workspace .wallet-help {
    padding: 20px;
}

.commerce-workspace .transaction-state header {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--cw-line);
}

.commerce-workspace .transaction-state p,
.commerce-workspace .transaction-state span,
.commerce-workspace .process-card span,
.commerce-workspace .wallet-help a {
    font-size: 13px;
}

.commerce-workspace .order-head {
    min-height: 74px;
    gap: 18px;
    padding: 16px 19px;
    font-size: 13px;
}

.commerce-workspace .order-head small {
    color: var(--cw-muted);
    font-size: 11px;
}

.commerce-workspace .delivered-data {
    padding: 15px 19px;
    border-top: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
    font-size: 13px;
}

/* Admin workspace */

.commerce-workspace.admin-surface {
    font-size: 15px;
}

.commerce-workspace .admin-title {
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 2px;
}

.commerce-workspace .admin-title > span {
    padding: 8px 10px;
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-sm);
    background: var(--cw-surface);
    color: var(--cw-muted);
    font-size: 12px;
}

.commerce-workspace .admin-grid {
    gap: 16px;
    margin-top: 16px;
}

.commerce-workspace .admin-panel {
    overflow: hidden;
}

.commerce-workspace .compact-order {
    min-height: 65px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cw-line);
    font-size: 13px;
}

.commerce-workspace .compact-order strong {
    font-size: 14px;
}

.commerce-workspace .admin-subnav {
    gap: 4px;
    padding: 8px 32px;
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface);
}

.commerce-workspace .admin-subnav a {
    min-height: 37px;
    padding: 9px 11px;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 650;
}

.commerce-workspace .admin-subnav a:hover,
.commerce-workspace .admin-subnav a.active {
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.commerce-workspace .products-admin-grid,
.commerce-workspace .users-admin-layout,
.commerce-workspace .admin-order-grid,
.commerce-workspace .warehouse-dashboard-grid {
    gap: 16px;
}

.commerce-workspace .admin-filter-grid,
.commerce-workspace .admin-order-filter,
.commerce-workspace .admin-users-filter,
.commerce-workspace .mock-toolbar {
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.commerce-workspace .admin-filter-grid label,
.commerce-workspace .admin-order-filter label,
.commerce-workspace .admin-users-filter label {
    font-size: 12px;
}

.commerce-workspace .table-command-bar {
    min-height: 54px;
    gap: 10px;
    padding: 9px 15px;
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface);
    font-size: 12px;
}

.commerce-workspace .table-command-bar > div {
    gap: 7px;
}

.commerce-workspace .table-command-bar button,
.commerce-workspace .table-command-bar a,
.commerce-workspace .table-command-bar select,
.commerce-workspace .table-command-bar input {
    min-height: 36px;
    font-size: 12px;
}

.commerce-workspace .category-tree a,
.commerce-workspace .category-summary p {
    min-height: 46px;
    padding: 11px 16px;
    border-top: 1px solid var(--cw-line);
    font-size: 13px;
}

.commerce-workspace .category-tree b {
    padding: 15px 16px;
    font-size: 13px;
}

/* Authentication and informational pages */

.commerce-workspace .login-showcase {
    max-width: 1280px;
    padding-top: 42px;
}

.commerce-workspace .login-shell-card {
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-surface);
    box-shadow: var(--cw-shadow-raised);
    overflow: hidden;
}

.commerce-workspace .login-promo {
    padding: 48px;
    background: #123f3a;
    color: #fff;
}

.commerce-workspace .login-promo h1,
.commerce-workspace .login-promo p,
.commerce-workspace .login-promo b {
    color: #fff;
}

.commerce-workspace .login-promo h1 {
    max-width: 560px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
}

.commerce-workspace .login-promo h1 em {
    color: #b8e2da;
}

.commerce-workspace .login-promo p {
    color: #d2e5e1;
    font-size: 15px;
}

.commerce-workspace .login-benefits span {
    min-height: 68px;
    gap: 12px;
}

.commerce-workspace .login-benefits b {
    font-size: 14px;
}

.commerce-workspace .login-benefits small {
    color: #c8ded9;
    font-size: 12px;
}

.commerce-workspace .login-form-panel {
    padding: 42px;
}

.commerce-workspace .login-form-panel > label {
    margin: 17px 0 7px;
    font-size: 14px;
}

.commerce-workspace .input-with-icon input {
    min-height: 48px;
    font-size: 15px;
}

.commerce-workspace .login-tabs {
    margin-bottom: 24px;
}

.commerce-workspace .login-tabs span,
.commerce-workspace .login-tabs a {
    min-height: 42px;
    font-size: 14px;
}

.commerce-workspace .login-options,
.commerce-workspace .register-prompt,
.commerce-workspace .login-security {
    font-size: 13px;
}

.commerce-workspace .auth-landing-hero {
    min-height: 540px;
    padding: 70px max(6vw, 34px);
    background: var(--cw-surface);
}

.commerce-workspace .auth-landing-hero h1 {
    font-size: clamp(52px, 7vw, 88px);
}

.commerce-workspace .auth-landing-hero h1 em {
    color: var(--cw-brand-hover);
}

.commerce-workspace .auth-landing-hero .hero-card {
    border-radius: var(--cw-radius-lg);
    background: #123f3a;
    box-shadow: 16px 16px 0 #cbe9e3;
}

/* Marketing and supporting surfaces */

.commerce-workspace .storefront-marketing-banner,
.commerce-workspace .storefront-flash-strip {
    border-color: var(--cw-line);
    background: var(--cw-surface);
    box-shadow: none;
}

.commerce-workspace .storefront-marketing-banner {
    min-height: 66px;
    margin: 14px 28px 0;
    padding: 10px 14px;
    border-radius: var(--cw-radius-md);
}

.commerce-workspace .storefront-marketing-banner b {
    font-size: 14px;
}

.commerce-workspace .storefront-marketing-banner em,
.commerce-workspace .storefront-marketing-banner small,
.commerce-workspace .storefront-flash-strip small {
    font-size: 12px;
}

.commerce-workspace .storefront-flash-strip {
    gap: 8px;
    margin: 10px 28px 0;
    padding: 8px;
    border-radius: var(--cw-radius-sm);
}

.commerce-workspace .storefront-flash-strip a {
    min-height: 42px;
    font-size: 12px;
}

/* API documentation inherits the same readable chrome */

.commerce-workspace .developer-docs-page {
    --api-blue: var(--cw-brand);
    --api-cyan: var(--cw-brand);
    --api-border: var(--cw-line);
    color: var(--cw-ink);
}

.commerce-workspace .developer-docs-heading,
.commerce-workspace .api-access-overview,
.commerce-workspace .api-endpoint-directory,
.commerce-workspace .api-reference-content,
.commerce-workspace .api-guide-card {
    border-color: var(--cw-line);
    background: var(--cw-surface);
    box-shadow: var(--cw-shadow);
}

.commerce-workspace .developer-docs-heading {
    border-left: 5px solid var(--cw-brand);
    background: var(--cw-surface);
}

.commerce-workspace .developer-docs-heading h1 {
    font-size: 34px;
}

.commerce-workspace .developer-docs-heading > div:first-child > p:last-child,
.commerce-workspace .api-reference-header p {
    font-size: 14px;
}

.commerce-workspace .developer-docs-nav a,
.commerce-workspace .api-reference-jump a,
.commerce-workspace .api-endpoint-nav-item b,
.commerce-workspace .api-reference-tags > span,
.commerce-workspace .api-reference-tags > code {
    font-size: 12px;
}

.commerce-workspace .api-endpoint-nav-item {
    min-height: 61px;
}

.commerce-workspace .api-endpoint-nav-item code,
.commerce-workspace .api-parameter-row,
.commerce-workspace .api-endpoint-errors b {
    font-size: 11px;
}

.commerce-workspace .api-reference-header h2 {
    font-size: 28px;
}

.commerce-workspace .api-section-heading h3 {
    font-size: 16px;
}

.commerce-workspace .api-url-field > code,
.commerce-workspace .api-code-card pre,
.commerce-workspace .api-response-card pre {
    font-size: 11px;
}

/* Responsive system */

@media (max-width: 1400px) {
    .commerce-workspace .shop-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .commerce-workspace .mock-kpi-grid.five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .commerce-workspace {
        --cw-rail: 236px;
    }

    .commerce-workspace .wallet-page-grid,
    .commerce-workspace .products-admin-grid,
    .commerce-workspace .users-admin-layout,
    .commerce-workspace .admin-order-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .wallet-status-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-workspace .wallet-status-column > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {
    .commerce-workspace .app-shell {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .side-rail {
        width: min(300px, 88vw);
        padding-inline: 14px;
        box-shadow: 18px 0 45px rgba(16, 24, 40, .18);
    }

    .commerce-workspace .topbar {
        height: 64px;
        min-height: 64px;
        padding: 0 14px;
    }

    .commerce-workspace .global-search {
        width: min(520px, 100%);
    }

    .commerce-workspace .top-actions {
        gap: 5px;
    }

    .commerce-workspace .account-chip {
        min-width: 0;
        border-left: 0;
    }

    .commerce-workspace .account-chip small,
    .commerce-workspace .admin-access-button span,
    .commerce-workspace .topup-button .ui-icon {
        display: none;
    }

    .commerce-workspace .topup-button {
        padding-inline: 12px;
    }

    .commerce-workspace .mock-page,
    .commerce-workspace .admin-page {
        padding: 23px 18px 34px;
    }

    .commerce-workspace .storefront-marketing-banner,
    .commerce-workspace .storefront-flash-strip {
        margin-inline: 16px;
    }

    .commerce-workspace .dashboard-welcome {
        min-height: 0;
        padding: 28px 24px;
    }

    .commerce-workspace .dashboard-welcome > div:first-child {
        max-width: 100%;
    }

    .commerce-workspace .welcome-orbit {
        display: none;
    }

    .commerce-workspace .dashboard-main-grid,
    .commerce-workspace .admin-grid,
    .commerce-workspace .affiliate-top-grid,
    .commerce-workspace .affiliate-bottom-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .dashboard-main-grid .span-2,
    .commerce-workspace .quick-panel {
        grid-column: auto;
    }

    .commerce-workspace .shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-workspace .catalog-filter {
        grid-template-columns: 1fr 1fr;
    }

    .commerce-workspace .wallet-status-column {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .wallet-status-column > :first-child {
        grid-column: auto;
    }

    .commerce-workspace .login-shell-card {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .login-promo {
        min-height: auto;
        padding: 32px;
    }

    .commerce-workspace .login-benefits {
        display: none;
    }

    .commerce-workspace .payment-tabs {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .commerce-workspace .payment-tabs button {
        flex: 0 0 auto;
        min-width: 180px;
    }
}

@media (max-width: 640px) {
    .commerce-workspace {
        font-size: 15px;
    }

    .commerce-workspace p {
        font-size: 14px;
    }

    .commerce-workspace .global-search {
        display: none;
    }

    .commerce-workspace .topbar {
        justify-content: space-between;
    }

    .commerce-workspace .mock-page,
    .commerce-workspace .admin-page {
        padding: 20px 14px 30px;
    }

    .commerce-workspace .mock-page-title h1,
    .commerce-workspace .admin-title h1,
    .commerce-workspace .catalog-heading h1,
    .commerce-workspace .catalog-heading h2 {
        font-size: 27px;
    }

    .commerce-workspace .admin-title {
        align-items: stretch;
        flex-direction: column;
    }

    .commerce-workspace .admin-title > .button,
    .commerce-workspace .admin-title > .table-action {
        width: 100%;
    }

    .commerce-workspace .mock-kpi-grid.five,
    .commerce-workspace .mock-kpi-grid.four,
    .commerce-workspace .metric-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .mock-kpi,
    .commerce-workspace .metric-grid > div {
        min-height: 104px;
    }

    .commerce-workspace .catalog-heading {
        padding: 20px;
    }

    .commerce-workspace .catalog-heading-icon {
        display: none;
    }

    .commerce-workspace .catalog-filter,
    .commerce-workspace .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .shop-product-art {
        height: 215px;
    }

    .commerce-workspace .quick-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .commerce-workspace .wallet-page-grid {
        display: block;
    }

    .commerce-workspace .wallet-page-grid > * {
        margin-bottom: 14px;
    }

    .commerce-workspace .deposit-step {
        padding: 19px 15px;
    }

    .commerce-workspace .amount-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .commerce-workspace .bank-transfer-box {
        grid-template-columns: 1fr;
    }

    .commerce-workspace .qr-placeholder {
        width: 100%;
    }

    .commerce-workspace .deposit-totals {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .commerce-workspace .login-showcase {
        padding: 14px;
    }

    .commerce-workspace .login-promo {
        padding: 26px 22px;
    }

    .commerce-workspace .login-promo h1 {
        font-size: 32px;
    }

    .commerce-workspace .login-form-panel {
        padding: 26px 20px;
    }

    .commerce-workspace .auth-landing-hero {
        padding: 50px 20px;
    }

    .commerce-workspace .auth-landing-hero h1 {
        font-size: 46px;
    }

    .commerce-workspace .auth-landing-hero .hero-card {
        box-shadow: 9px 9px 0 #cbe9e3;
    }

    .commerce-workspace .site-footer {
        grid-template-columns: 1fr;
        padding: 26px 20px;
    }
}

/* Compact account dropdown replaces the duplicated account navigation rail. */

.marketplace-surface .market-account-menu {
    position: relative;
}

.marketplace-surface .market-account-menu > summary {
    list-style: none;
    cursor: pointer;
}

.marketplace-surface .market-account-menu > summary::-webkit-details-marker {
    display: none;
}

.marketplace-surface .market-account-menu[open] > .market-account {
    border-color: var(--cw-brand);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .11);
}

.marketplace-surface .market-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: 290px;
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(16, 24, 40, .16);
}

.marketplace-surface .market-account-dropdown > header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-account-dropdown > header > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    font-size: 14px;
    font-weight: 800;
}

.marketplace-surface .market-account-dropdown > header div {
    min-width: 0;
    display: grid;
}

.marketplace-surface .market-account-dropdown > header b,
.marketplace-surface .market-account-dropdown > header small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-surface .market-account-dropdown > header b {
    color: var(--cw-ink);
    font-size: 13px;
}

.marketplace-surface .market-account-dropdown > header small {
    margin-top: 3px;
    color: var(--cw-muted);
    font-size: 10px;
}

.marketplace-surface .market-account-dropdown nav {
    display: grid;
    gap: 2px;
    padding: 8px;
}

.marketplace-surface .market-account-dropdown nav a {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--cw-ink-soft);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.marketplace-surface .market-account-dropdown nav a:hover,
.marketplace-surface .market-account-dropdown nav a:focus-visible {
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-account-dropdown nav .ui-icon {
    width: 17px;
    height: 17px;
    color: var(--cw-muted);
}

.marketplace-surface .market-account-dropdown nav a:hover .ui-icon,
.marketplace-surface .market-account-dropdown nav a:focus-visible .ui-icon {
    color: var(--cw-brand);
}

.marketplace-surface .market-account-dropdown > form {
    padding: 9px;
    border-top: 1px solid var(--cw-line);
}

.marketplace-surface .market-account-dropdown > form button {
    width: 100%;
    min-height: 38px;
    border: 1px solid #f1c2c8;
    border-radius: 7px;
    background: #fff5f6;
    color: #b42338;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.marketplace-surface .market-account-dropdown > form button:hover {
    background: #ffecee;
}

@media (max-width: 480px) {
    .marketplace-surface .market-account-dropdown {
        position: fixed;
        top: 72px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* Profile page v2 */

.marketplace-surface.account-workspace-surface .profile-page {
    max-width: none;
}

.account-workspace-surface .profile-identity-hero {
    min-height: 230px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) minmax(280px, 340px);
    align-items: center;
    gap: 24px;
    padding: 34px 38px;
    border-radius: 16px;
    background: #14243b;
    color: #ffffff;
}

.account-workspace-surface .profile-avatar {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: #17a89b;
    color: #ffffff;
    font-size: 31px;
    font-weight: 800;
}

.account-workspace-surface .profile-identity-copy {
    min-width: 0;
}

.account-workspace-surface .profile-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.account-workspace-surface .profile-title-row h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.account-workspace-surface .profile-title-row > span {
    padding: 6px 9px;
    border: 1px solid rgba(66, 223, 208, .3);
    border-radius: 6px;
    background: rgba(23, 168, 155, .16);
    color: #9ef5ec;
    font-size: 10px;
    font-weight: 750;
}

.account-workspace-surface .profile-identity-copy > p {
    max-width: 650px;
    margin: 12px 0 0;
    color: #b8c5d8;
    font-size: 13px;
    line-height: 1.65;
}

.account-workspace-surface .profile-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 22px 0 0;
}

.account-workspace-surface .profile-identity-meta > div {
    display: grid;
}

.account-workspace-surface .profile-identity-meta dt {
    color: #8292aa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.account-workspace-surface .profile-identity-meta dd {
    margin: 5px 0 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.account-workspace-surface .profile-balance-summary {
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
}

.account-workspace-surface .profile-balance-summary > small {
    color: #8fa0b8;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
}

.account-workspace-surface .profile-balance-summary > strong {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(27px, 2.4vw, 34px);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .profile-balance-summary > p {
    margin: 8px 0 16px;
    color: #aab8cb;
    font-size: 11px;
}

.account-workspace-surface .profile-balance-summary > p b {
    color: #dce6f2;
}

.account-workspace-surface .profile-balance-summary > a {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 7px;
    background: #ffffff;
    color: #14243b;
    font-size: 11px;
    font-weight: 750;
}

.account-workspace-surface .profile-balance-summary .ui-icon {
    width: 16px;
    height: 16px;
    color: #0f766e;
}

.account-workspace-surface .profile-notice {
    margin: 18px 0 0;
}

.account-workspace-surface .profile-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dce3e9;
    border-radius: 12px;
    background: #ffffff;
}

.account-workspace-surface .profile-status-strip article {
    min-width: 0;
    min-height: 120px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 21px 22px;
    border-left: 1px solid #e2e7ec;
}

.account-workspace-surface .profile-status-strip article:first-child {
    border-left: 0;
}

.account-workspace-surface .profile-status-strip article > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e9f6f3;
    color: #0f766e;
}

.account-workspace-surface .profile-status-strip article > span .ui-icon {
    width: 20px;
    height: 20px;
}

.account-workspace-surface .profile-status-strip article > div {
    min-width: 0;
}

.account-workspace-surface .profile-status-strip small,
.account-workspace-surface .profile-status-strip b,
.account-workspace-surface .profile-status-strip p {
    display: block;
}

.account-workspace-surface .profile-status-strip small {
    color: #667085;
    font-size: 10px;
}

.account-workspace-surface .profile-status-strip b {
    margin-top: 4px;
    color: #172033;
    font-size: 14px;
}

.account-workspace-surface .profile-status-strip p {
    margin: 4px 0 0;
    color: #8a94a6;
    font-size: 10px;
    line-height: 1.45;
}

.account-workspace-surface .profile-status-strip article > mark,
.account-workspace-surface .profile-status-strip article > a {
    min-width: max-content;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 750;
}

.account-workspace-surface .profile-status-strip article > mark.success {
    background: #eaf7f1;
    color: #16845b;
}

.account-workspace-surface .profile-status-strip article > mark.warning {
    background: #fff5e8;
    color: #a95f0a;
}

.account-workspace-surface .profile-status-strip article > a {
    border: 1px solid #a8d9d1;
    color: #0f766e;
}

.account-workspace-surface .profile-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}

.account-workspace-surface .profile-form-card,
.account-workspace-surface .profile-action-panel {
    overflow: hidden;
    border: 1px solid #dce3e9;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.account-workspace-surface .profile-section-heading {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    border-bottom: 1px solid #e2e7ec;
}

.account-workspace-surface .profile-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
}

.account-workspace-surface .profile-section-heading p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
}

.account-workspace-surface .profile-section-heading > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e9f6f3;
    color: #0f766e;
}

.account-workspace-surface .profile-section-heading .ui-icon {
    width: 19px;
    height: 19px;
}

.account-workspace-surface .profile-validation {
    margin: 18px 22px 0;
}

.account-workspace-surface .profile-form-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.account-workspace-surface .profile-form-body label {
    min-width: 0;
    display: block;
    margin: 0;
}

.account-workspace-surface .profile-form-body label:nth-child(3) {
    grid-column: 1 / -1;
}

.account-workspace-surface .profile-form-body label > span,
.account-workspace-surface .profile-form-body label > small {
    display: block;
}

.account-workspace-surface .profile-form-body label > span {
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.account-workspace-surface .profile-form-body label > small {
    min-height: 34px;
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.account-workspace-surface .profile-form-body input {
    width: 100%;
    min-height: 46px;
    display: block;
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px solid #cfd8e1;
    border-radius: 7px;
    background: #ffffff;
    color: #172033;
    font-size: 13px;
}

.account-workspace-surface .profile-form-body input:focus {
    border-color: #0f766e;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .11);
}

.account-workspace-surface .profile-form-body input[readonly] {
    background: #f5f7f8;
    color: #667085;
    cursor: not-allowed;
}

.account-workspace-surface .profile-form-body label > em {
    display: block;
    margin-top: 5px;
    color: #c43d4f;
    font-size: 10px;
    font-style: normal;
}

.account-workspace-surface .profile-form-actions {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-top: 1px solid #e2e7ec;
    background: #f8fafb;
}

.account-workspace-surface .profile-form-actions p {
    margin: 0;
    color: #667085;
    font-size: 11px;
}

.account-workspace-surface .profile-form-actions .mock-primary {
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 7px;
}

.account-workspace-surface .profile-side-stack {
    display: grid;
    gap: 18px;
}

.account-workspace-surface .profile-action-panel nav {
    display: grid;
}

.account-workspace-surface .profile-action-panel nav > a {
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid #e8ecf0;
    color: #344054;
}

.account-workspace-surface .profile-action-panel nav > a:first-child {
    border-top: 0;
}

.account-workspace-surface .profile-action-panel nav > a:hover,
.account-workspace-surface .profile-action-panel nav > a:focus-visible {
    background: #f1faf8;
    color: #0f766e;
}

.account-workspace-surface .profile-action-panel nav > a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f0f3f6;
    color: #667085;
}

.account-workspace-surface .profile-action-panel nav > a:hover > span {
    background: #e3f5f2;
    color: #0f766e;
}

.account-workspace-surface .profile-action-panel nav .ui-icon {
    width: 18px;
    height: 18px;
}

.account-workspace-surface .profile-action-panel nav div {
    min-width: 0;
}

.account-workspace-surface .profile-action-panel nav b,
.account-workspace-surface .profile-action-panel nav small {
    display: block;
}

.account-workspace-surface .profile-action-panel nav b {
    font-size: 12px;
}

.account-workspace-surface .profile-action-panel nav small {
    margin-top: 3px;
    color: #8a94a6;
    font-size: 10px;
}

.account-workspace-surface .profile-action-panel nav i {
    color: #98a2b3;
    font-size: 14px;
    font-style: normal;
}

@media (max-width: 1100px) {
    .account-workspace-surface .profile-identity-hero {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .account-workspace-surface .profile-avatar {
        width: 72px;
        height: 72px;
    }

    .account-workspace-surface .profile-balance-summary {
        grid-column: 1 / -1;
        max-width: 480px;
        margin-left: 102px;
    }

    .account-workspace-surface .profile-status-strip {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .profile-status-strip article,
    .account-workspace-surface .profile-status-strip article:first-child {
        min-height: 96px;
        border-top: 1px solid #e2e7ec;
        border-left: 0;
    }

    .account-workspace-surface .profile-status-strip article:first-child {
        border-top: 0;
    }

    .account-workspace-surface .profile-content-grid {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .profile-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .account-workspace-surface .profile-identity-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 25px 21px;
        border-radius: 12px;
    }

    .account-workspace-surface .profile-avatar {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        font-size: 25px;
    }

    .account-workspace-surface .profile-balance-summary {
        grid-column: auto;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    .account-workspace-surface .profile-status-strip article {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .account-workspace-surface .profile-status-strip article > mark,
    .account-workspace-surface .profile-status-strip article > a {
        grid-column: 2;
        justify-self: start;
    }

    .account-workspace-surface .profile-form-body,
    .account-workspace-surface .profile-side-stack {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .profile-form-body label:nth-child(3) {
        grid-column: auto;
    }

    .account-workspace-surface .profile-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-workspace-surface .profile-form-actions .mock-primary {
        width: 100%;
    }
}

/* Unified customer navigation
 * Every non-admin route shares the marketplace header. Signed-in workspaces add
 * one compact horizontal account rail instead of switching to a side layout.
 */

.commerce-workspace.marketplace-surface.account-workspace-surface,
.marketplace-surface.account-workspace-surface .market-shell,
.marketplace-surface.account-workspace-surface .market-main {
    background: #f3f6f8;
}

.marketplace-surface.account-workspace-surface .market-header,
.marketplace-surface.account-workspace-surface .market-header-main,
.marketplace-surface.account-workspace-surface .market-navigation {
    background: #ffffff;
}

.marketplace-surface.account-workspace-surface .market-main > .mock-page {
    padding-top: 30px;
    padding-bottom: 48px;
}

.marketplace-surface .account-portal-nav {
    border-top: 1px solid #24354d;
    background: #14243b;
}

.marketplace-surface .account-portal-nav > div {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.marketplace-surface .account-portal-nav > div::-webkit-scrollbar {
    display: none;
}

.marketplace-surface .account-nav-label,
.marketplace-surface .account-portal-nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 680;
    white-space: nowrap;
}

.marketplace-surface .account-nav-label {
    margin-right: 8px;
    padding-left: 0;
    color: #7f91aa;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.marketplace-surface .account-nav-label .ui-icon,
.marketplace-surface .account-portal-nav a .ui-icon {
    width: 16px;
    height: 16px;
}

.marketplace-surface .account-nav-label .ui-icon {
    color: #38d5c6;
}

.marketplace-surface .account-portal-nav a {
    color: #bac7d8;
    text-decoration: none;
}

.marketplace-surface .account-portal-nav a:hover,
.marketplace-surface .account-portal-nav a:focus-visible {
    border-color: #344761;
    background: #1d304a;
    color: #ffffff;
}

.marketplace-surface .account-portal-nav a.active,
.marketplace-surface .account-portal-nav a[aria-current="page"] {
    border-color: rgba(56, 213, 198, .28);
    background: rgba(23, 168, 155, .18);
    color: #ffffff;
}

.marketplace-surface .account-portal-nav a.active .ui-icon,
.marketplace-surface .account-portal-nav a[aria-current="page"] .ui-icon {
    color: #42dfd0;
}

@media (max-width: 920px) {
    .marketplace-surface .account-portal-nav > div {
        width: 100%;
        padding-inline: 16px;
    }

    .marketplace-surface .account-nav-label {
        display: none;
    }
}

@media (max-width: 640px) {
    .marketplace-surface.account-workspace-surface .market-main > .mock-page {
        padding-top: 18px;
        padding-bottom: 34px;
    }

    .marketplace-surface .account-portal-nav a {
        min-height: 34px;
        padding-inline: 9px;
        font-size: 10px;
    }
}

/* Account workspace v2
 * A visibly distinct signed-in surface: dark navigation rail, quiet white
 * command bar and high-clarity content canvas. Admin keeps its own styling.
 */

.commerce-workspace.account-workspace-surface {
    --cw-rail: 252px;
    --account-rail: #111b2e;
    --account-rail-raised: #18263d;
    --account-rail-text: #c7d2e3;
    --account-rail-muted: #71829b;
    background: #f3f6f8;
}

.account-workspace-surface .app-shell,
.account-workspace-surface .workspace,
.account-workspace-surface .workspace-main {
    background: #f3f6f8;
}

.account-workspace-surface .side-rail {
    width: var(--cw-rail);
    padding: 0 14px 18px;
    border-right: 0;
    background: var(--account-rail);
    color: var(--account-rail-text);
}

.account-workspace-surface .side-rail::-webkit-scrollbar {
    width: 6px;
}

.account-workspace-surface .side-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #30405a;
}

.account-workspace-surface .brand {
    margin-bottom: 12px;
    padding-inline: 9px;
    color: #ffffff;
}

.account-workspace-surface .brand b {
    color: #ffffff;
}

.account-workspace-surface .brand span {
    background: #17a89b;
    color: #ffffff;
}

.account-workspace-surface .brand i {
    color: #71829b;
}

.account-workspace-surface .rail-nav {
    gap: 2px;
}

.account-workspace-surface .rail-nav small {
    margin: 19px 12px 7px;
    color: var(--account-rail-muted);
    font-size: 10px;
    letter-spacing: .09em;
}

.account-workspace-surface .rail-nav small:first-child {
    margin-top: 4px;
}

.account-workspace-surface .rail-nav a {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--account-rail-text);
    font-size: 13px;
    font-weight: 620;
}

.account-workspace-surface .rail-nav a .ui-icon {
    color: #8291a8;
}

.account-workspace-surface .rail-nav a:hover,
.account-workspace-surface .rail-nav a:focus-visible {
    border-color: #2b3c55;
    background: var(--account-rail-raised);
    color: #ffffff;
}

.account-workspace-surface .rail-nav a.active,
.account-workspace-surface .rail-nav a[aria-current="page"] {
    border-color: rgba(31, 199, 184, .24);
    background: rgba(23, 168, 155, .17);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #1fc7b8;
}

.account-workspace-surface .rail-nav a.active .ui-icon,
.account-workspace-surface .rail-nav a[aria-current="page"] .ui-icon {
    color: #38d5c6;
}

.account-workspace-surface .vip-card,
.account-workspace-surface .rail-support {
    border-color: #2a3a52;
    background: var(--account-rail-raised);
    color: var(--account-rail-text);
}

.account-workspace-surface .vip-card b,
.account-workspace-surface .rail-support b {
    color: #ffffff;
}

.account-workspace-surface .vip-card small,
.account-workspace-surface .rail-support p {
    color: #94a3b8;
}

.account-workspace-surface .vip-card > a,
.account-workspace-surface .rail-support > a {
    border-color: #344762;
    background: #213049;
    color: #b9fff8;
}

.account-workspace-surface .topbar {
    min-height: 72px;
    height: 72px;
    gap: 18px;
    padding-inline: 26px;
    border-bottom: 1px solid #dce3e9;
    background: rgba(255, 255, 255, .98);
}

.account-workspace-surface .workspace-context {
    min-width: 158px;
    display: grid;
    line-height: 1.2;
}

.account-workspace-surface .workspace-context small {
    color: #8692a3;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .11em;
}

.account-workspace-surface .workspace-context b {
    margin-top: 5px;
    overflow: hidden;
    color: var(--cw-ink);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .global-search {
    width: min(470px, 38vw);
    height: 42px;
    margin-right: auto;
    border-color: #d9e0e7;
    background: #f8fafb;
}

.account-workspace-surface .global-search input {
    background: transparent;
}

.account-workspace-surface .topup-button {
    min-height: 40px;
    border-color: #0f766e;
    background: #0f766e;
}

.account-workspace-surface .admin-access-button {
    min-height: 40px;
    background: #ffffff;
}

.account-workspace-surface .account-chip {
    min-width: 172px;
}

.account-workspace-surface .account-chip > span {
    background: #e5f7f4;
    color: #0f766e;
}

.account-workspace-surface .workspace-main {
    min-height: calc(100vh - 72px);
}

.account-workspace-surface .mock-panel,
.account-workspace-surface .mock-kpi,
.account-workspace-surface .affiliate-surface {
    border-color: #dce3e9;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.account-workspace-surface .site-footer {
    padding: 28px 32px;
    border-top-color: #dce3e9;
    background: #ffffff;
}

/* Affiliate account page */

.account-workspace-surface .affiliate-page {
    max-width: 1500px;
    padding-top: 28px;
}

.account-workspace-surface .affiliate-hero {
    min-height: 245px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: center;
    gap: 42px;
    padding: 38px 42px;
    overflow: hidden;
    border-radius: 16px;
    background: #14243b;
    color: #ffffff;
}

.account-workspace-surface .affiliate-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.account-workspace-surface .affiliate-hero > div > p {
    max-width: 680px;
    margin: 15px 0 0;
    color: #b8c5d8;
    font-size: 14px;
    line-height: 1.7;
}

.account-workspace-surface .affiliate-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 27px;
}

.account-workspace-surface .affiliate-hero-facts > span {
    display: grid;
    grid-template-columns: 34px auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
}

.account-workspace-surface .affiliate-hero-facts .ui-icon {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 8px;
    background: rgba(31, 199, 184, .15);
    color: #42dfd0;
}

.account-workspace-surface .affiliate-hero-facts b {
    color: #ffffff;
    font-size: 15px;
}

.account-workspace-surface .affiliate-hero-facts small {
    margin-top: 2px;
    color: #8fa0b8;
    font-size: 10px;
}

.account-workspace-surface .affiliate-code-card {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
}

.account-workspace-surface .affiliate-code-card small {
    display: block;
    color: #95a6bd;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .1em;
}

.account-workspace-surface .affiliate-code-card strong {
    display: block;
    margin: 12px 0 18px;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 28px;
    letter-spacing: .08em;
}

.account-workspace-surface .affiliate-code-card button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: #ffffff;
    color: #14243b;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
}

.account-workspace-surface .affiliate-code-card button .ui-icon {
    width: 16px;
    height: 16px;
}

.account-workspace-surface .affiliate-page > .inline-notice {
    margin: 18px 0 0;
}

.account-workspace-surface .affiliate-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dce3e9;
    border-radius: 12px;
    background: #ffffff;
}

.account-workspace-surface .affiliate-metric-strip article {
    min-width: 0;
    min-height: 132px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 22px 24px;
    border-left: 1px solid #e2e7ec;
}

.account-workspace-surface .affiliate-metric-strip article:first-child {
    border-left: 0;
}

.account-workspace-surface .affiliate-metric-strip article > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e9f6f3;
    color: #0f766e;
}

.account-workspace-surface .affiliate-metric-strip article > span .ui-icon {
    width: 20px;
    height: 20px;
}

.account-workspace-surface .affiliate-metric-strip article div {
    min-width: 0;
}

.account-workspace-surface .affiliate-metric-strip small {
    display: block;
    color: #667085;
    font-size: 11px;
}

.account-workspace-surface .affiliate-metric-strip strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #172033;
    font-size: clamp(20px, 1.8vw, 27px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .affiliate-metric-strip p {
    margin: 5px 0 0;
    color: #8a94a6;
    font-size: 10px;
}

.account-workspace-surface .affiliate-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}

.account-workspace-surface .affiliate-primary-column,
.account-workspace-surface .affiliate-side-column {
    display: grid;
    gap: 18px;
}

.account-workspace-surface .affiliate-surface {
    overflow: hidden;
    border: 1px solid #dce3e9;
    border-radius: 12px;
    background: #ffffff;
}

.account-workspace-surface .affiliate-section-heading {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    border-bottom: 1px solid #e2e7ec;
}

.account-workspace-surface .affiliate-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.3;
}

.account-workspace-surface .affiliate-section-heading p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.account-workspace-surface .affiliate-section-heading > span {
    min-width: max-content;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.account-workspace-surface .affiliate-section-heading > span:has(.ui-icon) {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e9f6f3;
    color: #0f766e;
}

.account-workspace-surface .affiliate-section-heading > strong {
    color: #0f766e;
    font-size: 25px;
}

.account-workspace-surface .affiliate-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 22px;
    overflow: hidden;
    border: 1px solid #cfd8e1;
    border-radius: 8px;
    background: #f7f9fa;
}

.account-workspace-surface .affiliate-copy-field code {
    min-width: 0;
    padding: 14px 15px;
    overflow: hidden;
    color: #344054;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .affiliate-copy-field button {
    min-width: 136px;
    border: 0;
    background: #0f766e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.account-workspace-surface .affiliate-copy-field button:hover {
    background: #0b5f59;
}

.account-workspace-surface .affiliate-share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 22px 22px;
}

.account-workspace-surface .affiliate-share-row > span {
    margin-right: 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.account-workspace-surface .affiliate-share-row a,
.account-workspace-surface .affiliate-share-row button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #dce3e9;
    border-radius: 7px;
    background: #ffffff;
    color: #344054;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.account-workspace-surface .affiliate-share-row a:hover,
.account-workspace-surface .affiliate-share-row button:hover {
    border-color: #a8d9d1;
    background: #f1faf8;
    color: #0f766e;
}

.account-workspace-surface .affiliate-share-row b {
    min-width: 18px;
    color: #0f766e;
    font-size: 13px;
    text-align: center;
}

.account-workspace-surface .affiliate-funnel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
    align-items: stretch;
    padding: 22px;
}

.account-workspace-surface .affiliate-funnel > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e2e7ec;
    border-radius: 9px;
    background: #f8fafb;
}

.account-workspace-surface .affiliate-funnel > div > span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 800;
}

.account-workspace-surface .affiliate-funnel small,
.account-workspace-surface .affiliate-funnel b {
    display: block;
}

.account-workspace-surface .affiliate-funnel small {
    margin-top: 12px;
    color: #667085;
    font-size: 11px;
}

.account-workspace-surface .affiliate-funnel b {
    margin-top: 5px;
    overflow: hidden;
    color: #172033;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .affiliate-funnel > i {
    display: grid;
    place-items: center;
    padding-inline: 9px;
    color: #98a2b3;
    font-size: 18px;
    font-style: normal;
}

.account-workspace-surface .affiliate-conversion {
    padding: 0 22px 23px;
}

.account-workspace-surface .affiliate-conversion > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #667085;
    font-size: 11px;
}

.account-workspace-surface .affiliate-conversion b {
    color: #0f766e;
}

.account-workspace-surface .affiliate-conversion progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    accent-color: #0f766e;
}

.account-workspace-surface .affiliate-table-wrap {
    overflow-x: auto;
}

.account-workspace-surface .commission-table .mock-tr {
    grid-template-columns: minmax(150px, .7fr) minmax(280px, 1.7fr) minmax(140px, .6fr);
    min-width: 680px;
}

.account-workspace-surface .withdrawal-table .mock-tr {
    grid-template-columns: minmax(150px, .7fr) minmax(130px, .6fr) minmax(260px, 1.4fr) minmax(120px, .6fr) minmax(110px, .55fr);
    min-width: 900px;
}

.account-workspace-surface .commission-table .mock-tr,
.account-workspace-surface .withdrawal-table .mock-tr {
    min-height: 54px;
    padding-inline: 22px;
    font-size: 12px;
}

.account-workspace-surface .commission-table .mock-th,
.account-workspace-surface .withdrawal-table .mock-th {
    color: #667085;
    font-size: 10px;
}

.account-workspace-surface .commission-table .money-in {
    color: #16845b;
    font-weight: 750;
}

.account-workspace-surface .affiliate-wallet,
.account-workspace-surface .withdraw-card {
    padding: 0;
}

.account-workspace-surface .affiliate-balance {
    margin: 20px 20px 16px;
    padding: 22px;
    border-radius: 10px;
    background: #0f766e;
    color: #ffffff;
}

.account-workspace-surface .affiliate-balance > small {
    color: #b9eee8;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .08em;
}

.account-workspace-surface .affiliate-balance > strong {
    display: block;
    margin-top: 9px;
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(27px, 2.4vw, 36px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-workspace-surface .affiliate-balance > p {
    margin: 13px 0 0;
    color: #d7f6f2;
    font-size: 11px;
}

.account-workspace-surface .affiliate-balance-detail {
    margin: 0;
    padding: 0 20px 20px;
}

.account-workspace-surface .affiliate-balance-detail > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-top: 1px solid #e5e9ee;
}

.account-workspace-surface .affiliate-balance-detail dt {
    color: #667085;
    font-size: 12px;
}

.account-workspace-surface .affiliate-balance-detail dd {
    margin: 0;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}

.account-workspace-surface .withdraw-card > .validation,
.account-workspace-surface .withdraw-card > label,
.account-workspace-surface .withdraw-card > small,
.account-workspace-surface .withdraw-card > button {
    margin-inline: 20px;
}

.account-workspace-surface .withdraw-card > label {
    display: block;
    margin-top: 18px;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.account-workspace-surface .withdraw-card input,
.account-workspace-surface .withdraw-card textarea {
    width: 100%;
    min-height: 44px;
    display: block;
    margin-top: 7px;
    padding: 11px 12px;
    border: 1px solid #cfd8e1;
    border-radius: 7px;
    background: #ffffff;
    color: #172033;
    font-size: 13px;
}

.account-workspace-surface .withdraw-card textarea {
    resize: vertical;
}

.account-workspace-surface .withdraw-card input:focus,
.account-workspace-surface .withdraw-card textarea:focus {
    border-color: #0f766e;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .11);
}

.account-workspace-surface .withdraw-card label > span {
    display: block;
    margin-top: 5px;
    color: #c43d4f;
    font-size: 11px;
}

.account-workspace-surface .withdraw-card > small {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 11px;
}

.account-workspace-surface .withdraw-card > button {
    width: calc(100% - 40px);
    min-height: 44px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 7px;
}

.account-workspace-surface .withdrawal-history {
    margin-top: 18px;
}

.account-workspace-surface .withdrawal-history .danger-action {
    min-height: 32px;
    padding-inline: 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 1260px) {
    .account-workspace-surface .global-search {
        width: min(360px, 32vw);
    }

    .account-workspace-surface .account-chip {
        min-width: 0;
    }

    .account-workspace-surface .account-chip small {
        display: none;
    }

    .account-workspace-surface .affiliate-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-workspace-surface .affiliate-metric-strip article:nth-child(3) {
        border-top: 1px solid #e2e7ec;
        border-left: 0;
    }

    .account-workspace-surface .affiliate-metric-strip article:nth-child(4) {
        border-top: 1px solid #e2e7ec;
    }
}

@media (max-width: 1120px) {
    .account-workspace-surface {
        --cw-rail: 236px;
    }

    .account-workspace-surface .workspace-context {
        min-width: 130px;
    }

    .account-workspace-surface .global-search {
        display: none;
    }

    .account-workspace-surface .affiliate-workspace-grid {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .affiliate-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .account-workspace-surface .side-rail {
        width: min(310px, 88vw);
        background: var(--account-rail);
    }

    .account-workspace-surface .topbar {
        min-height: 64px;
        height: 64px;
        padding-inline: 14px;
    }

    .account-workspace-surface .workspace-context {
        display: grid;
        min-width: 0;
        margin-right: auto;
    }

    .account-workspace-surface .workspace-context small {
        display: none;
    }

    .account-workspace-surface .workspace-context b {
        margin-top: 0;
        font-size: 14px;
    }

    .account-workspace-surface .affiliate-page {
        padding-top: 16px;
    }

    .account-workspace-surface .affiliate-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px;
    }

    .account-workspace-surface .affiliate-code-card {
        max-width: 430px;
    }

    .account-workspace-surface .affiliate-side-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .account-workspace-surface .affiliate-hero {
        padding: 25px 21px;
        border-radius: 12px;
    }

    .account-workspace-surface .affiliate-hero h1 {
        font-size: 31px;
    }

    .account-workspace-surface .affiliate-hero-facts {
        align-items: stretch;
        flex-direction: column;
    }

    .account-workspace-surface .affiliate-code-card {
        padding: 20px;
    }

    .account-workspace-surface .affiliate-code-card strong {
        font-size: 23px;
    }

    .account-workspace-surface .affiliate-metric-strip {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .affiliate-metric-strip article,
    .account-workspace-surface .affiliate-metric-strip article:nth-child(3),
    .account-workspace-surface .affiliate-metric-strip article:nth-child(4) {
        min-height: 112px;
        border-top: 1px solid #e2e7ec;
        border-left: 0;
    }

    .account-workspace-surface .affiliate-metric-strip article:first-child {
        border-top: 0;
    }

    .account-workspace-surface .affiliate-copy-field {
        grid-template-columns: 1fr;
    }

    .account-workspace-surface .affiliate-copy-field button {
        min-height: 42px;
    }

    .account-workspace-surface .affiliate-share-row {
        align-items: stretch;
    }

    .account-workspace-surface .affiliate-share-row > span {
        width: 100%;
    }

    .account-workspace-surface .affiliate-funnel {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .account-workspace-surface .affiliate-funnel > i {
        display: none;
    }

    .account-workspace-surface .affiliate-section-heading {
        min-height: 72px;
        padding: 17px;
    }

    .account-workspace-surface .affiliate-copy-field {
        margin: 17px;
    }

    .account-workspace-surface .affiliate-share-row,
    .account-workspace-surface .affiliate-conversion {
        padding-right: 17px;
        padding-left: 17px;
    }

    .account-workspace-surface .affiliate-funnel {
        padding: 17px;
    }
}

/* Marketplace home */

.marketplace-surface .market-home-hero {
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-home-hero > .market-container {
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
    align-items: center;
    gap: clamp(48px, 7vw, 96px);
    padding-block: 62px;
}

.marketplace-surface .market-home-copy {
    max-width: 720px;
}

.marketplace-surface .market-home-copy h1 {
    max-width: 700px;
    margin: 0;
    color: var(--cw-ink);
    font-size: clamp(42px, 4.4vw, 66px);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.marketplace-surface .market-home-copy h1 em {
    color: var(--cw-brand-hover);
    font-style: normal;
}

.marketplace-surface .market-home-copy > p {
    max-width: 610px;
    margin: 24px 0 0;
    color: var(--cw-muted);
    font-size: 17px;
    line-height: 1.7;
}

.marketplace-surface .market-home-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.marketplace-surface .market-home-actions .mock-primary,
.marketplace-surface .market-home-actions .mock-secondary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.marketplace-surface .market-home-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--cw-line);
}

.marketplace-surface .market-home-methods span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 650;
}

.marketplace-surface .market-home-methods .ui-icon {
    width: 17px;
    height: 17px;
    color: var(--cw-brand);
}

.marketplace-surface .market-featured-preview {
    display: block;
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .10);
    color: var(--cw-ink);
    text-decoration: none;
}

.marketplace-surface .market-featured-art {
    height: 250px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--cw-line);
    background: #eef2f4;
}

.marketplace-surface .market-featured-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.marketplace-surface .market-featured-preview:hover .market-featured-art img {
    transform: scale(1.025);
}

.marketplace-surface .market-featured-art > span {
    color: var(--cw-brand);
    font-size: 84px;
    font-weight: 800;
}

.marketplace-surface .market-featured-copy {
    padding: 22px 24px 24px;
}

.marketplace-surface .market-featured-copy > small {
    color: var(--cw-brand-hover);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.marketplace-surface .market-featured-copy h2 {
    margin: 7px 0;
    color: var(--cw-ink);
    font-size: 22px;
    line-height: 1.3;
}

.marketplace-surface .market-featured-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--cw-muted);
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.marketplace-surface .market-featured-copy > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid var(--cw-line);
}

.marketplace-surface .market-featured-copy strong {
    color: var(--cw-brand-hover);
    font-size: 24px;
}

.marketplace-surface .market-featured-copy div > span {
    color: var(--cw-muted);
    font-size: 11px;
}

.marketplace-surface .market-featured-empty {
    min-height: 410px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 30px;
    border: 1px solid var(--cw-line);
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.marketplace-surface .market-featured-empty .ui-icon {
    width: 48px;
    height: 48px;
    color: var(--cw-brand);
}

.marketplace-surface .market-featured-empty h2 {
    margin: 16px 0 4px;
    font-size: 22px;
}

.marketplace-surface .market-featured-empty p {
    margin: 0;
}

.marketplace-surface .market-home-products {
    padding-block: 64px 72px;
}

.marketplace-surface .market-home-products > header,
.marketplace-surface .market-home-flow header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.marketplace-surface .market-home-products header h2,
.marketplace-surface .market-home-flow header h2 {
    margin: 0;
    color: var(--cw-ink);
    font-size: clamp(27px, 2.5vw, 36px);
    line-height: 1.2;
}

.marketplace-surface .market-home-products header p,
.marketplace-surface .market-home-flow header p {
    margin: 7px 0 0;
    color: var(--cw-muted);
    font-size: 14px;
}

.marketplace-surface .market-home-products header > a {
    color: var(--cw-brand-hover);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.marketplace-surface .market-home-products .shop-product-copy > p {
    min-height: 42px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--cw-muted);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.marketplace-surface .market-home-flow {
    padding-block: 62px 70px;
    border-top: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-home-flow header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
}

.marketplace-surface .market-home-flow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketplace-surface .market-home-flow li {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    padding: 26px 34px;
    border-left: 1px solid var(--cw-line);
}

.marketplace-surface .market-home-flow li:first-child {
    padding-left: 0;
    border-left: 0;
}

.marketplace-surface .market-home-flow li > span {
    color: var(--cw-brand);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
}

.marketplace-surface .market-home-flow li b {
    color: var(--cw-ink);
    font-size: 16px;
}

.marketplace-surface .market-home-flow li p {
    margin: 7px 0 0;
    color: var(--cw-muted);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1040px) {
    .marketplace-surface .market-home-hero > .market-container {
        grid-template-columns: 1fr 380px;
        gap: 42px;
    }

    .marketplace-surface .market-home-copy h1 {
        font-size: 46px;
    }
}

@media (max-width: 820px) {
    .marketplace-surface .market-home-hero > .market-container {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-block: 46px;
    }

    .marketplace-surface .market-home-copy,
    .marketplace-surface .market-home-copy h1 {
        max-width: none;
    }

    .marketplace-surface .market-home-showcase {
        max-width: 560px;
    }

    .marketplace-surface .market-home-flow ol {
        grid-template-columns: 1fr;
    }

    .marketplace-surface .market-home-flow li,
    .marketplace-surface .market-home-flow li:first-child {
        padding: 22px 0;
        border-top: 1px solid var(--cw-line);
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .marketplace-surface .market-home-copy h1 {
        font-size: 39px;
    }

    .marketplace-surface .market-home-copy > p {
        margin-top: 18px;
        font-size: 15px;
    }

    .marketplace-surface .market-home-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 24px;
    }

    .marketplace-surface .market-featured-art {
        height: 210px;
    }

    .marketplace-surface .market-featured-copy {
        padding: 19px;
    }

    .marketplace-surface .market-featured-copy > div,
    .marketplace-surface .market-home-products > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .marketplace-surface .market-home-products {
        padding-block: 44px 52px;
    }

    .marketplace-surface .market-home-flow {
        padding-block: 44px 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-workspace *,
    .commerce-workspace *::before,
    .commerce-workspace *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Marketplace shell
 * Public browsing follows a horizontal marketplace hierarchy while account and
 * admin routes retain the focused workspace shell above.
 */

.commerce-workspace.marketplace-surface {
    --market-max: 1320px;
    background: #ffffff;
}

.marketplace-surface .market-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.marketplace-surface .market-container {
    width: min(calc(100% - 48px), var(--market-max));
    margin-inline: auto;
}

.marketplace-surface .market-header {
    position: relative;
    z-index: 40;
    border-bottom: 1px solid var(--cw-line);
    background: #ffffff;
}

.marketplace-surface .market-header-main {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
}

.marketplace-surface .market-brand {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--cw-ink);
    text-decoration: none;
}

.marketplace-surface .market-brand > span:first-child {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--cw-brand);
    color: #ffffff;
    font-size: 21px;
    font-weight: 780;
    letter-spacing: -.04em;
}

.marketplace-surface .market-brand > span:last-child {
    display: grid;
    line-height: 1.1;
}

.marketplace-surface .market-brand b {
    color: var(--cw-ink);
    font-size: 19px;
    letter-spacing: -.025em;
}

.marketplace-surface .market-brand small {
    margin-top: 4px;
    color: var(--cw-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.marketplace-surface .market-search {
    min-width: 0;
    height: 46px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    border: 1px solid var(--cw-line-strong);
    border-radius: 9px;
    background: #ffffff;
}

.marketplace-surface .market-search:focus-within {
    border-color: var(--cw-brand);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.marketplace-surface .market-search > .ui-icon {
    color: var(--cw-muted);
}

.marketplace-surface .market-search input {
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cw-ink);
    font-size: 14px;
}

.marketplace-surface .market-search input::placeholder {
    color: #98a2b3;
}

.marketplace-surface .market-search button {
    align-self: stretch;
    min-width: 102px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--cw-brand);
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.marketplace-surface .market-search button:hover {
    background: var(--cw-brand-hover);
}

.marketplace-surface .market-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.marketplace-surface .market-header-unified .market-action-link {
    width: 42px;
    padding-inline: 0;
    justify-content: center;
}

.marketplace-surface .market-header-unified .market-action-link > span {
    display: none;
}

.marketplace-surface .market-action-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--cw-ink-soft);
    text-decoration: none;
}

.marketplace-surface .market-action-link:hover,
.marketplace-surface .market-action-link:focus-visible {
    background: var(--cw-surface-subtle);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-action-link > span {
    display: grid;
    line-height: 1.15;
}

.marketplace-surface .market-action-link small {
    color: var(--cw-muted);
    font-size: 10px;
}

.marketplace-surface .market-action-link b {
    max-width: 120px;
    margin-top: 3px;
    overflow: hidden;
    color: currentColor;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-surface .market-admin-link {
    border: 1px solid var(--cw-brand-border);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-account {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cw-brand-border);
    border-radius: 50%;
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.marketplace-surface .market-login,
.marketplace-surface .market-register {
    min-height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.marketplace-surface .market-login {
    color: var(--cw-ink-soft);
}

.marketplace-surface .market-login:hover {
    background: var(--cw-surface-subtle);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-register {
    border: 1px solid var(--cw-brand);
    background: var(--cw-brand);
    color: #ffffff;
}

.marketplace-surface .market-register:hover {
    border-color: var(--cw-brand-hover);
    background: var(--cw-brand-hover);
}

.marketplace-surface .market-menu-toggle {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cw-ink);
    cursor: pointer;
}

.marketplace-surface .market-navigation {
    min-width: 0;
    border: 0;
    background: transparent;
}

.marketplace-surface .market-navigation-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.marketplace-surface .market-primary-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.marketplace-surface .market-primary-nav a {
    min-height: 76px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 2px solid transparent;
    color: var(--cw-ink-soft);
    font-size: 13px;
    font-weight: 680;
    text-decoration: none;
    white-space: nowrap;
}

.marketplace-surface .market-primary-nav a:hover,
.marketplace-surface .market-primary-nav a.active,
.marketplace-surface .market-primary-nav a[aria-current="page"] {
    border-bottom-color: var(--cw-brand);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-wallet-shortcut {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--cw-brand-border);
    border-radius: 6px;
    color: var(--cw-brand-hover);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.marketplace-surface .market-wallet-shortcut .ui-icon {
    width: 16px;
    height: 16px;
}

.marketplace-surface .market-category-strip {
    border-top: 1px solid #edf0f3;
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-category-strip > div {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.marketplace-surface .market-category-strip > div::-webkit-scrollbar {
    display: none;
}

.marketplace-surface .market-category-strip a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 620;
    text-decoration: none;
    white-space: nowrap;
}

.marketplace-surface .market-category-strip a:hover {
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-category-strip .market-category-all {
    padding-left: 0;
    color: var(--cw-ink-soft);
    font-weight: 760;
}

.marketplace-surface .market-category-all .ui-icon {
    width: 16px;
    height: 16px;
}

.marketplace-surface .market-main {
    min-height: 55vh;
    flex: 1 0 auto;
    background: #ffffff;
}

.marketplace-surface .market-main > .mock-page {
    width: min(calc(100% - 48px), var(--market-max));
    max-width: none;
    padding: 32px 0 56px;
}

.marketplace-surface .storefront-marketing-banner.market-container,
.marketplace-surface .storefront-flash-strip.market-container {
    width: min(calc(100% - 48px), var(--market-max));
    margin: 14px auto 0;
}

.marketplace-surface .market-trust-strip {
    border-top: 1px solid var(--cw-line);
    border-bottom: 1px solid var(--cw-line);
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-trust-strip > div {
    min-height: 112px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

.marketplace-surface .market-trust-strip span {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 18px 24px;
    border-left: 1px solid var(--cw-line);
}

.marketplace-surface .market-trust-strip span:first-child {
    padding-left: 0;
    border-left: 0;
}

.marketplace-surface .market-trust-strip .ui-icon {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 9px;
    background: var(--cw-brand-soft);
    color: var(--cw-brand);
}

.marketplace-surface .market-trust-strip b {
    color: var(--cw-ink);
    font-size: 13px;
}

.marketplace-surface .market-trust-strip small {
    margin-top: 3px;
    color: var(--cw-muted);
    font-size: 11px;
}

.marketplace-surface .market-footer {
    background: #111827;
    color: #d1d5db;
}

.marketplace-surface .market-footer-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(150px, 1fr));
    gap: 54px;
    padding-block: 54px 44px;
}

.marketplace-surface .market-footer .market-brand {
    color: #ffffff;
}

.marketplace-surface .market-footer .market-brand b {
    color: #ffffff;
}

.marketplace-surface .market-footer .market-brand small {
    color: #9ca3af;
}

.marketplace-surface .market-footer-brand p {
    max-width: 390px;
    margin: 18px 0;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.7;
}

.marketplace-surface .market-payment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.marketplace-surface .market-payment-list span {
    padding: 6px 9px;
    border: 1px solid #344054;
    border-radius: 5px;
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
}

.marketplace-surface .market-footer nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.marketplace-surface .market-footer nav > b {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 13px;
}

.marketplace-surface .market-footer nav a {
    color: #9ca3af;
    font-size: 12px;
    text-decoration: none;
}

.marketplace-surface .market-footer nav a:hover {
    color: #ffffff;
}

.marketplace-surface .market-footer-bottom {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #273244;
    color: #778196;
    font-size: 11px;
}

@media (max-width: 1180px) {
    .marketplace-surface .market-header-main {
        gap: 12px;
    }

    .marketplace-surface .market-action-link > span,
    .marketplace-surface .market-admin-link > span {
        display: none;
    }

    .marketplace-surface .market-action-link {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .marketplace-surface .market-primary-nav a {
        padding-inline: 8px;
    }

    .marketplace-surface .market-account-menu > .market-account {
        min-width: 44px;
        width: 44px;
        justify-content: center;
        padding: 4px;
        border-radius: 50%;
    }

    .marketplace-surface .market-account-trigger-name,
    .marketplace-surface .market-account-chevron {
        display: none;
    }

    .marketplace-surface .market-trust-strip span {
        padding-inline: 16px;
    }
}

@media (max-width: 1140px) {
    .marketplace-surface .market-header-main {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 12px;
        padding-block: 13px;
    }

    .marketplace-surface .market-brand {
        grid-column: 1;
    }

    .marketplace-surface .market-menu-toggle {
        grid-column: 2;
        display: grid;
    }

    .marketplace-surface .market-actions {
        grid-column: 3;
    }

    .marketplace-surface .market-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .marketplace-surface .market-navigation {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        display: none;
        border-top: 1px solid var(--cw-line);
    }

    .marketplace-surface.market-nav-open .market-navigation {
        display: block;
    }

    .marketplace-surface .market-navigation-inner {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding-block: 10px 14px;
    }

    .marketplace-surface .market-primary-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .marketplace-surface .market-primary-nav a {
        min-height: 42px;
        padding: 0 4px;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }

    .marketplace-surface .market-primary-nav a:hover,
    .marketplace-surface .market-primary-nav a.active,
    .marketplace-surface .market-primary-nav a[aria-current="page"] {
        padding-left: 12px;
        border-left-color: var(--cw-brand);
        background: var(--cw-brand-soft);
    }

    .marketplace-surface .market-wallet-shortcut {
        align-self: flex-start;
        margin-top: 8px;
    }

    .marketplace-surface .market-trust-strip > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-surface .market-trust-strip span:nth-child(3) {
        border-left: 0;
    }

    .marketplace-surface .market-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px;
    }

    .marketplace-surface .market-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .marketplace-surface .market-container,
    .marketplace-surface .market-main > .mock-page,
    .marketplace-surface .storefront-marketing-banner.market-container,
    .marketplace-surface .storefront-flash-strip.market-container {
        width: min(calc(100% - 32px), var(--market-max));
    }

    .marketplace-surface .market-header-main {
        grid-template-columns: auto auto 1fr;
    }

    .marketplace-surface .market-brand > span:first-child {
        width: 36px;
        height: 36px;
    }

    .marketplace-surface .market-brand > span:last-child {
        display: none;
    }

    .marketplace-surface .market-actions {
        gap: 3px;
    }

    .marketplace-surface .market-actions > .market-action-link {
        display: none;
    }

    .marketplace-surface .market-login,
    .marketplace-surface .market-register {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .marketplace-surface .market-search {
        height: 43px;
    }

    .marketplace-surface .market-search button {
        min-width: 82px;
    }

    .marketplace-surface .market-main > .mock-page {
        padding-top: 22px;
        padding-bottom: 38px;
    }

    .marketplace-surface .market-trust-strip > div,
    .marketplace-surface .market-footer-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-surface .market-trust-strip span,
    .marketplace-surface .market-trust-strip span:nth-child(3) {
        min-height: 88px;
        padding-inline: 0;
        border-top: 1px solid var(--cw-line);
        border-left: 0;
    }

    .marketplace-surface .market-trust-strip span:first-child {
        border-top: 0;
    }

    .marketplace-surface .market-footer-grid {
        gap: 30px;
        padding-block: 42px 34px;
    }

    .marketplace-surface .market-footer-brand {
        grid-column: auto;
    }

    .marketplace-surface .market-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: 16px;
    }
}

/* Account control v2: compact trigger, real preferences, and accessible menu. */

.marketplace-surface .market-account-menu {
    flex: 0 0 auto;
}

.marketplace-surface .market-account-menu > .market-account {
    width: auto;
    min-width: 132px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 5px;
    border: 1px solid var(--cw-line-strong);
    border-radius: 12px;
    background: var(--cw-surface);
    color: var(--cw-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.marketplace-surface .market-account-menu > .market-account:hover {
    border-color: var(--cw-brand-border);
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-account-menu[open] > .market-account {
    border-color: var(--cw-brand);
    background: var(--cw-surface);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .13), 0 5px 14px rgba(16, 24, 40, .08);
}

.marketplace-surface .market-account-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 50%;
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
    font-size: 12px;
    font-weight: 800;
}

.marketplace-surface .market-account-avatar > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.marketplace-surface .market-account > .market-account-trigger-name {
    width: auto;
    max-width: 128px;
    height: auto;
    display: block;
    overflow: hidden;
    color: var(--cw-ink);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-surface .market-account-chevron {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--cw-muted-light);
    transition: transform .16s ease;
}

.marketplace-surface .market-account-menu[open] .market-account-chevron {
    transform: rotate(180deg);
}

.marketplace-surface .market-account-dropdown {
    top: calc(100% + 12px);
    width: min(382px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--cw-line);
    border-radius: 16px;
    background: var(--cw-surface);
    box-shadow: 0 22px 60px rgba(16, 24, 40, .18), 0 3px 10px rgba(16, 24, 40, .08);
}

.marketplace-surface .market-account-user-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 12px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--cw-line) 65%, transparent);
    border-radius: 13px;
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-account-avatar-large {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    font-size: 15px;
}

.marketplace-surface .market-account-user-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
}

.marketplace-surface .market-account-user-copy strong,
.marketplace-surface .market-account-user-copy small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-surface .market-account-user-copy strong {
    color: var(--cw-ink);
    font-size: 14px;
    line-height: 1.35;
}

.marketplace-surface .market-account-user-copy small {
    margin-top: 1px;
    color: var(--cw-muted);
    font-size: 11px;
}

.marketplace-surface .market-account-user-copy mark {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff2cf;
    color: #9a5b08;
    font-size: 10px;
    font-weight: 750;
}

.marketplace-surface .market-account-user-copy mark .ui-icon {
    width: 13px;
    height: 13px;
}

.marketplace-surface .market-account-preferences {
    display: grid;
    gap: 14px;
    margin: 0 12px;
    padding: 14px 0;
    border-top: 1px solid var(--cw-line);
    border-bottom: 1px solid var(--cw-line);
}

.marketplace-surface .market-account-preference-row,
.marketplace-surface .market-theme-row {
    display: grid;
    gap: 8px;
}

.marketplace-surface .market-account-preference-row > span,
.marketplace-surface .market-theme-row > span {
    color: var(--cw-muted);
    font-size: 12px;
    font-weight: 700;
}

.marketplace-surface .market-language-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.marketplace-surface .market-language-switch {
    display: flex;
    padding: 2px;
    border: 1px solid var(--cw-line);
    border-radius: 10px;
    background: var(--cw-surface-subtle);
}

.marketplace-surface .market-language-switch form {
    margin: 0;
}

.marketplace-surface .market-language-switch button,
.marketplace-surface .market-theme-switch button {
    border: 0;
    color: var(--cw-muted);
    font-family: inherit;
    font-weight: 720;
    cursor: pointer;
}

.marketplace-surface .market-language-switch button {
    min-width: 42px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
}

.marketplace-surface .market-language-switch button.is-active {
    background: var(--cw-ink);
    color: var(--cw-surface);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
}

.marketplace-surface .market-theme-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.marketplace-surface .market-theme-switch button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--cw-line);
    border-radius: 9px;
    background: var(--cw-surface);
    font-size: 11px;
}

.marketplace-surface .market-theme-switch button:hover,
.marketplace-surface .market-theme-switch button:focus-visible {
    border-color: var(--cw-brand-border);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-theme-switch button.is-active {
    border-color: var(--cw-ink);
    background: var(--cw-ink);
    color: var(--cw-surface);
}

.marketplace-surface .market-theme-switch .ui-icon {
    width: 15px;
    height: 15px;
}

.marketplace-surface .market-account-dropdown nav.market-account-links {
    display: grid;
    gap: 3px;
    padding: 10px 12px 8px;
}

.marketplace-surface .market-account-dropdown nav.market-account-links a {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--cw-ink-soft);
    font-size: 12px;
    font-weight: 680;
}

.marketplace-surface .market-account-dropdown nav.market-account-links a:hover,
.marketplace-surface .market-account-dropdown nav.market-account-links a:focus-visible,
.marketplace-surface .market-account-dropdown nav.market-account-links a.active {
    background: var(--cw-brand-soft);
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-account-dropdown nav.market-account-links a.active {
    box-shadow: inset 3px 0 var(--cw-brand);
}

.marketplace-surface .market-account-dropdown nav.market-account-links a .ui-icon {
    width: 17px;
    height: 17px;
    color: var(--cw-muted);
}

.marketplace-surface .market-account-dropdown nav.market-account-links a:hover .ui-icon,
.marketplace-surface .market-account-dropdown nav.market-account-links a:focus-visible .ui-icon,
.marketplace-surface .market-account-dropdown nav.market-account-links a.active .ui-icon {
    color: var(--cw-brand);
}

.marketplace-surface .market-account-dropdown nav.market-account-links .market-account-admin-link {
    color: var(--cw-brand-hover);
}

.marketplace-surface .market-account-dropdown > form.market-account-logout {
    padding: 7px 12px 12px;
    border: 0;
}

.marketplace-surface .market-account-dropdown > form.market-account-logout button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--cw-danger);
}

.marketplace-surface .market-account-dropdown > form.market-account-logout button:hover {
    background: var(--cw-danger-soft);
}

.marketplace-surface .market-account-logout .ui-icon {
    width: 17px;
    height: 17px;
}

html[data-color-scheme="dark"] .commerce-workspace {
    --cw-canvas: #0d141d;
    --cw-surface: #141e2a;
    --cw-surface-subtle: #192532;
    --cw-surface-raised: #182330;
    --cw-ink: #f4f7fb;
    --cw-ink-soft: #d8e0e9;
    --cw-muted: #a4afbd;
    --cw-muted-light: #8390a1;
    --cw-line: #2a3949;
    --cw-line-strong: #3a4b5d;
    --cw-brand-soft: #133a38;
    --cw-brand-border: #2a746d;
    --cw-danger-soft: #3b2027;
    color-scheme: dark;
}

html[data-color-scheme="dark"] .marketplace-surface .market-header,
html[data-color-scheme="dark"] .marketplace-surface .market-header-main,
html[data-color-scheme="dark"] .marketplace-surface .market-navigation,
html[data-color-scheme="dark"] .marketplace-surface .market-category-strip,
html[data-color-scheme="dark"] .marketplace-surface .market-search,
html[data-color-scheme="dark"] .marketplace-surface .market-menu-toggle {
    background: var(--cw-surface);
}

html[data-color-scheme="dark"] .marketplace-surface .market-account-user-copy mark {
    background: #3f321d;
    color: #ffd68a;
}

@media (max-width: 920px) {
    .marketplace-surface .market-account-menu > .market-account {
        min-width: 126px;
    }
}

@media (max-width: 640px) {
    .marketplace-surface .market-account-menu > .market-account {
        min-width: 42px;
        width: 42px;
        height: 42px;
        justify-content: center;
        padding: 3px;
        border-radius: 50%;
    }

    .marketplace-surface .market-account-trigger-name,
    .marketplace-surface .market-account-chevron {
        display: none;
    }

    .marketplace-surface .market-account-dropdown {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
    }
}

@media (max-width: 390px) {
    .marketplace-surface .market-theme-switch button {
        gap: 4px;
        padding-inline: 5px;
        font-size: 10px;
    }
}

/* Marketplace buying flow v1 */

.market-commerce-page {
    --market-accent: var(--cw-brand);
    --market-accent-strong: var(--cw-brand-hover);
    --market-accent-soft: var(--cw-brand-soft);
    --market-border: var(--cw-line);
    --market-text: var(--cw-ink);
    --market-muted: var(--cw-muted);
    background: var(--cw-surface);
    color: var(--market-text);
}

.market-commerce-page button,
.market-commerce-page input,
.market-commerce-page select,
.market-commerce-page textarea {
    font-family: inherit;
}

.market-commerce-page :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(15, 118, 110, .2);
    outline-offset: 2px;
}

.market-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: var(--market-muted);
    font-size: 12px;
    white-space: nowrap;
}

.market-breadcrumb a {
    color: var(--market-accent-strong);
    text-decoration: none;
}

.market-breadcrumb > :last-child {
    overflow: hidden;
    color: var(--market-text);
    text-overflow: ellipsis;
}

.market-page-heading {
    padding-top: 28px;
    padding-bottom: 18px;
}

.market-page-heading > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.market-page-heading h1 {
    margin: 0;
    color: var(--market-text);
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.market-page-heading > div > span {
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--cw-surface-subtle);
    color: var(--market-muted);
    font-size: 11px;
    font-weight: 700;
}

.market-page-heading > p {
    margin: 7px 0 0;
    color: var(--market-muted);
    font-size: 14px;
}

.market-catalog-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding-bottom: 38px;
}

.market-filter-panel {
    position: sticky;
    top: 12px;
    z-index: 3;
    overflow: hidden;
    border: 1px solid var(--market-border);
    border-radius: 12px;
    background: var(--cw-surface);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
}

.market-filter-mobile-toggle {
    display: none;
}

.market-filter-panel form > header {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-bottom: 1px solid var(--market-border);
}

.market-filter-panel form > header .ui-icon {
    width: 16px;
    height: 16px;
    color: var(--market-accent);
}

.market-filter-panel form > header h2 {
    flex: 1;
    margin: 0;
    font-size: 14px;
}

.market-filter-panel form > header span {
    min-width: 28px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
    font-size: 10px;
    font-weight: 750;
    text-align: center;
}

.market-filter-search,
.market-filter-panel fieldset {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--market-border);
    color: var(--market-text);
    font-size: 11px;
    font-weight: 750;
}

.market-filter-panel legend {
    padding: 0;
    font-size: 11px;
    font-weight: 750;
}

.market-filter-search > span {
    min-height: 38px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    background: var(--cw-surface-subtle);
}

.market-filter-search .ui-icon {
    width: 16px;
    height: 16px;
    color: var(--market-muted);
}

.market-filter-search input {
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--market-text);
    font-size: 12px;
}

.market-category-filter a {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 7px;
    color: var(--market-muted);
    font-size: 11px;
    font-weight: 620;
    cursor: pointer;
    text-decoration: none;
}

.market-category-filter a:hover,
.market-category-filter a.active {
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
}

.market-category-filter a span {
    flex: 1;
}

.market-category-filter a b {
    font-size: 10px;
}

.market-price-filter > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 6px;
}

.market-price-filter label {
    display: grid;
    gap: 5px;
    color: var(--market-muted);
    font-size: 9px;
    font-weight: 650;
}

.market-price-filter input {
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--market-border);
    border-radius: 7px;
    background: var(--cw-surface-subtle);
    color: var(--market-text);
    font-size: 11px;
}

.market-stock-filter label {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--market-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.market-stock-filter input {
    width: 15px;
    height: 15px;
    accent-color: var(--market-accent);
}

.market-filter-submit,
.market-filter-reset {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 12px 14px 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.market-filter-submit {
    width: calc(100% - 28px);
    border: 1px solid var(--market-accent);
    background: var(--market-accent);
    color: #ffffff;
    cursor: pointer;
}

.market-filter-submit:hover {
    border-color: var(--market-accent-strong);
    background: var(--market-accent-strong);
}

.market-filter-submit .ui-icon {
    width: 15px;
    height: 15px;
}

.market-filter-reset {
    margin-top: 7px;
    margin-bottom: 13px;
    border: 1px solid var(--market-border);
    color: var(--market-accent-strong);
}

.market-filter-reset:hover {
    border-color: var(--market-accent);
    background: var(--market-accent-soft);
}

.market-results-toolbar {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.market-results-toolbar > span {
    color: var(--market-muted);
    font-size: 11px;
}

.market-results-toolbar > nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.market-results-toolbar a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    color: var(--market-muted);
    font-size: 10px;
    font-weight: 680;
    text-decoration: none;
}

.market-results-toolbar a:hover,
.market-results-toolbar a.active {
    border-color: var(--market-accent);
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
}

.market-view-switch {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 3px;
    border: 1px solid var(--market-border);
    border-radius: 9px;
}

.market-results-toolbar .market-view-switch a {
    min-height: 30px;
    gap: 6px;
    border: 0;
}

.market-view-switch .ui-icon {
    width: 14px;
    height: 14px;
}

.market-weekly-offer {
    min-height: 132px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: center;
    overflow: hidden;
    margin-bottom: 14px;
    padding-left: 26px;
    border: 1px solid #b8ddd8;
    border-radius: 12px;
    background: linear-gradient(105deg, #f8fffd 0%, #eef8f6 56%, #d8efec 100%);
    color: var(--market-text);
    text-decoration: none;
}

.market-weekly-offer > span {
    display: grid;
    justify-items: start;
}

.market-weekly-offer strong {
    font-size: 20px;
    letter-spacing: -.025em;
}

.market-weekly-offer small {
    margin-top: 3px;
    color: var(--market-muted);
    font-size: 11px;
}

.market-weekly-offer b {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 0 12px;
    border-radius: 7px;
    background: var(--market-accent);
    color: #ffffff;
    font-size: 10px;
}

.market-weekly-offer b .ui-icon {
    width: 14px;
    height: 14px;
    transform: rotate(-90deg);
}

.market-weekly-offer > i {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    overflow: hidden;
    padding: 18px;
    background: linear-gradient(125deg, #19344c, #0f766e);
    font-style: normal;
}

.market-weekly-offer > i::before,
.market-weekly-offer > i::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border: 22px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.market-weekly-offer > i::before {
    top: -55px;
    right: -25px;
}

.market-weekly-offer > i::after {
    bottom: -70px;
    left: 30px;
}

.market-weekly-offer > i .ui-icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.market-product-collection {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.market-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--market-border);
    border-radius: 11px;
    background: var(--cw-surface);
    box-shadow: 0 5px 16px rgba(16, 24, 40, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.market-product-card:hover {
    z-index: 2;
    border-color: var(--cw-brand-border);
    box-shadow: 0 14px 30px rgba(16, 24, 40, .11);
    transform: translateY(-3px);
}

.market-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 22%, rgba(15, 118, 110, .22), transparent 26%),
        linear-gradient(145deg, #eef8f6, #e7eef5);
    color: var(--market-accent-strong);
    text-decoration: none;
}

.market-product-media::after {
    display: none;
    content: "";
    position: absolute;
    right: -36px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(23, 32, 51, .06);
    border-radius: 50%;
}

.market-product-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}

.market-product-card:hover .market-product-media > img {
    transform: scale(1.035);
}

.market-product-monogram {
    position: relative;
    z-index: 1;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 850;
    letter-spacing: -.08em;
    text-shadow: 0 9px 26px rgba(15, 118, 110, .16);
}

.market-product-media > small {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 5px;
    background: rgba(255, 255, 255, .82);
    color: #344054;
    font-size: 9px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.market-product-media > mark {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 2;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #fff4d9;
    color: #945b09;
    font-size: 9px;
    font-weight: 760;
}

.market-product-media > mark .ui-icon {
    width: 12px;
    height: 12px;
}

.market-product-content {
    display: grid;
    padding: 11px;
}

.market-product-store {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--market-muted);
    font-size: 9px;
    font-weight: 650;
    text-decoration: none;
}

.market-product-store > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-product-store .ui-icon {
    width: 13px;
    height: 13px;
}

.market-product-store .market-verified {
    color: var(--market-accent);
}

.market-product-content h2 {
    min-height: 39px;
    margin: 7px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--market-text);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-product-content h2 a {
    color: inherit;
    text-decoration: none;
}

.market-product-content > p {
    min-height: 33px;
    margin: 5px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--market-muted);
    font-size: 9px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.market-product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin-top: 8px;
    color: var(--market-muted);
    font-size: 8px;
}

.market-product-facts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.market-product-facts .ui-icon {
    width: 12px;
    height: 12px;
    color: var(--market-accent);
}

.market-product-price {
    min-height: 44px;
    display: flex;
    align-items: end;
    gap: 7px;
    margin-top: 7px;
}

.market-product-price strong {
    color: var(--market-accent-strong);
    font-size: 16px;
    letter-spacing: -.02em;
}

.market-product-price del {
    padding-bottom: 2px;
    color: var(--market-muted);
    font-size: 9px;
}

.market-product-content > footer {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--market-border);
}

.market-product-content > footer > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--market-muted);
    font-size: 9px;
    font-weight: 650;
}

.market-product-content > footer > span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.market-product-content > footer > span.in-stock {
    color: var(--cw-success);
}

.market-product-content > footer > span.sold-out {
    color: var(--cw-danger);
}

.market-product-content > footer > a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--market-accent);
    color: #ffffff;
    font-size: 9px;
    font-weight: 740;
    text-decoration: none;
}

.market-product-content > footer > a:hover {
    background: var(--market-accent-strong);
}

.market-product-content > footer > a .ui-icon {
    width: 13px;
    height: 13px;
}

.market-product-collection.is-list {
    grid-template-columns: 1fr;
}

.market-product-collection.is-list .market-product-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
}

.market-product-collection.is-list .market-product-media {
    aspect-ratio: auto;
    min-height: 180px;
}

.market-product-collection.is-list .market-product-content > p {
    min-height: 0;
    -webkit-line-clamp: 3;
}

.market-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 26px 0 8px;
}

.market-pagination a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    color: var(--market-muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.market-pagination a:hover,
.market-pagination a.active {
    border-color: var(--market-accent);
    background: var(--market-accent);
    color: #ffffff;
}

.market-pagination a.disabled {
    opacity: .35;
    pointer-events: none;
}

.market-empty-state {
    min-height: 320px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 28px;
    border: 1px dashed var(--cw-line-strong);
    border-radius: 12px;
    color: var(--market-muted);
    text-align: center;
}

.market-empty-state > .ui-icon {
    width: 38px;
    height: 38px;
    color: var(--market-accent);
}

.market-empty-state h2,
.market-empty-state p {
    margin: 0;
}

.market-empty-state h2 {
    color: var(--market-text);
    font-size: 18px;
}

.market-empty-state p {
    font-size: 12px;
}

.market-empty-state a {
    color: var(--market-accent-strong);
    font-size: 11px;
    font-weight: 750;
}

.market-assurance-band {
    border-top: 1px solid var(--market-border);
    border-bottom: 1px solid var(--market-border);
    background: var(--cw-surface-subtle);
}

.market-assurance-band > div {
    min-height: 116px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-assurance-band > div > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px;
    border-left: 1px solid var(--market-border);
}

.market-assurance-band > div > div:last-child {
    border-right: 1px solid var(--market-border);
}

.market-assurance-band .ui-icon {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 9px;
    background: var(--market-accent-soft);
    color: var(--market-accent);
}

.market-assurance-band span {
    display: grid;
}

.market-assurance-band strong {
    color: var(--market-text);
    font-size: 11px;
}

.market-assurance-band small {
    margin-top: 3px;
    color: var(--market-muted);
    font-size: 9px;
    line-height: 1.4;
}

/* Product detail */

.market-product-page {
    padding-top: 22px;
    padding-bottom: 44px;
}

.market-product-page > .market-breadcrumb {
    margin-bottom: 16px;
}

.market-product-primary {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, 1fr) 310px;
    align-items: start;
    gap: 14px;
}

.market-product-gallery,
.market-product-summary,
.market-purchase-panel,
.market-product-detail-card,
.market-seller-card {
    border: 1px solid var(--market-border);
    border-radius: 12px;
    background: var(--cw-surface);
}

.market-product-gallery {
    padding: 10px;
}

.market-gallery-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background:
        radial-gradient(circle at 65% 18%, rgba(15, 118, 110, .26), transparent 28%),
        linear-gradient(145deg, #eaf5f3, #dce8ef);
    color: var(--market-accent-strong);
}

.market-gallery-stage > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-gallery-stage > span {
    font-size: clamp(70px, 10vw, 118px);
    font-weight: 850;
    letter-spacing: -.09em;
}

.market-gallery-stage > small {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    color: #344054;
    font-size: 10px;
    font-weight: 700;
}

.market-gallery-assurance {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.market-gallery-assurance span {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(16, 31, 43, .82);
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.market-gallery-assurance .ui-icon {
    width: 14px;
    height: 14px;
    color: #6ee7d7;
}

.market-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}

.market-gallery-thumbs button {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 2px;
    border: 1px solid var(--market-border);
    border-radius: 7px;
    background: var(--cw-surface);
    cursor: pointer;
}

.market-gallery-thumbs button.active {
    border-color: var(--market-accent);
    box-shadow: 0 0 0 2px var(--market-accent-soft);
}

.market-gallery-thumbs img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.market-product-summary {
    padding: 16px;
}

.market-product-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.market-product-labels :is(a, span) {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
    font-size: 9px;
    font-weight: 720;
    text-decoration: none;
}

.market-product-summary h1 {
    margin: 11px 0 8px;
    color: var(--market-text);
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.market-product-reputation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: var(--market-muted);
    font-size: 10px;
}

.market-product-reputation span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cw-success);
    font-weight: 700;
}

.market-product-reputation .ui-icon {
    width: 14px;
    height: 14px;
}

.market-product-lead {
    margin: 12px 0;
    color: var(--market-muted);
    font-size: 11px;
    line-height: 1.6;
}

.market-product-benefits {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--market-border);
    border-bottom: 1px solid var(--market-border);
    list-style: none;
}

.market-product-benefits li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.market-product-benefits li > .ui-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 7px;
    background: var(--market-accent-soft);
    color: var(--market-accent);
}

.market-product-benefits li span {
    display: grid;
}

.market-product-benefits b {
    color: var(--market-text);
    font-size: 10px;
}

.market-product-benefits small {
    margin-top: 2px;
    color: var(--market-muted);
    font-size: 8px;
    line-height: 1.4;
}

.market-product-spec-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.market-product-spec-strip span {
    display: grid;
    gap: 2px;
    padding: 4px 8px;
    border-left: 1px solid var(--market-border);
}

.market-product-spec-strip span:first-child {
    padding-left: 0;
    border-left: 0;
}

.market-product-spec-strip small {
    color: var(--market-muted);
    font-size: 8px;
}

.market-product-spec-strip b {
    overflow: hidden;
    color: var(--market-text);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-purchase-panel {
    position: sticky;
    top: 12px;
    overflow: hidden;
}

.market-purchase-panel form > header {
    display: grid;
    justify-items: start;
    padding: 14px;
    border-bottom: 1px solid var(--market-border);
}

.market-purchase-panel form > header > span {
    color: var(--market-muted);
    font-size: 10px;
    font-weight: 700;
}

.market-purchase-panel form > header > strong {
    margin-top: 2px;
    color: var(--market-accent-strong);
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.market-purchase-panel form > header > small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: var(--cw-success);
    font-size: 9px;
    font-weight: 700;
}

.market-purchase-panel form > header > small.unavailable {
    color: var(--cw-danger);
}

.market-purchase-panel form > header > small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.market-package-options {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 13px;
    border: 0;
    border-bottom: 1px solid var(--market-border);
}

.market-package-options legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--market-text);
    font-size: 10px;
    font-weight: 750;
}

.market-package-options label {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    cursor: pointer;
}

.market-package-options label:hover,
.market-package-options label.active {
    border-color: var(--market-accent);
    background: var(--market-accent-soft);
}

.market-package-options input {
    width: 15px;
    height: 15px;
    accent-color: var(--market-accent);
}

.market-package-options label span {
    min-width: 0;
    display: grid;
}

.market-package-options label b {
    overflow: hidden;
    color: var(--market-text);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-package-options label small {
    margin-top: 2px;
    color: var(--market-muted);
    font-size: 8px;
}

.market-package-options label strong {
    color: var(--market-accent-strong);
    font-size: 10px;
}

.market-quantity-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--market-border);
}

.market-quantity-row > label,
.market-coupon-field,
.market-order-note {
    color: var(--market-text);
    font-size: 10px;
    font-weight: 740;
}

.market-quantity-row .quantity-control {
    width: 116px;
    min-height: 34px;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
}

.market-quantity-row .quantity-control :is(button, input) {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--market-text);
    font-size: 11px;
    text-align: center;
}

.market-quantity-row .quantity-control button {
    cursor: pointer;
}

.market-quantity-row .quantity-control input {
    width: 100%;
    border-right: 1px solid var(--market-border);
    border-left: 1px solid var(--market-border);
}

.market-coupon-field,
.market-order-note {
    display: grid;
    gap: 6px;
    padding: 11px 13px 0;
}

.market-coupon-field > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.market-coupon-field input,
.market-order-note textarea {
    min-width: 0;
    border: 1px solid var(--market-border);
    background: var(--cw-surface-subtle);
    color: var(--market-text);
    font-size: 10px;
}

.market-coupon-field input {
    height: 36px;
    padding: 0 9px;
    border-radius: 7px 0 0 7px;
}

.market-coupon-field button {
    min-width: 68px;
    border: 0;
    border-radius: 0 7px 7px 0;
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
    font-size: 9px;
    font-weight: 740;
    cursor: pointer;
}

.market-coupon-field > small {
    min-height: 15px;
    color: var(--cw-success);
    font-size: 8px;
    font-weight: 600;
}

.market-coupon-field > small.error {
    color: var(--cw-danger);
}

.market-order-note textarea {
    min-height: 56px;
    resize: vertical;
    padding: 8px 9px;
    border-radius: 7px;
    line-height: 1.45;
}

.market-purchase-total {
    display: grid;
    justify-items: end;
    margin: 11px 13px 0;
    padding: 11px;
    border-radius: 8px;
    background: var(--cw-surface-subtle);
}

.market-purchase-total span {
    color: var(--market-muted);
    font-size: 9px;
}

.market-purchase-total strong {
    color: var(--market-accent-strong);
    font-size: 18px;
}

.market-purchase-total small {
    color: var(--market-muted);
    font-size: 8px;
}

.market-buy-now,
.market-add-favorite {
    width: calc(100% - 26px);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 9px 13px 0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 760;
    cursor: pointer;
}

.market-buy-now {
    border: 1px solid var(--market-accent);
    background: var(--market-accent);
    color: #ffffff;
}

.market-buy-now:hover {
    border-color: var(--market-accent-strong);
    background: var(--market-accent-strong);
}

.market-buy-now:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.market-add-favorite {
    margin-top: 7px;
    border: 1px solid var(--cw-brand-border);
    background: var(--cw-surface);
    color: var(--market-accent-strong);
}

.market-buy-now .ui-icon,
.market-add-favorite .ui-icon {
    width: 15px;
    height: 15px;
}

.market-purchase-panel form > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 9px 0 13px;
    color: var(--market-muted);
    font-size: 8px;
}

.market-purchase-panel form > p .ui-icon {
    width: 12px;
    height: 12px;
    color: var(--market-accent);
}

.market-product-secondary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}

.market-product-detail-card {
    min-height: 220px;
    overflow: hidden;
}

.market-product-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 8px 11px 0;
    border-bottom: 1px solid var(--market-border);
}

.market-product-tabs button {
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--market-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.market-product-tabs button.active {
    border-bottom-color: var(--market-accent);
    color: var(--market-accent-strong);
}

.market-product-tab-panel {
    padding: 20px;
}

.market-product-tab-panel h2 {
    margin: 0 0 14px;
    color: var(--market-text);
    font-size: 15px;
}

.market-product-tab-panel p,
.market-product-tab-panel li {
    color: var(--market-muted);
    font-size: 11px;
    line-height: 1.75;
}

.market-rich-copy {
    white-space: pre-line;
}

.market-product-tab-panel dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--market-border);
    border-radius: 8px;
}

.market-product-tab-panel dl div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    padding: 10px;
    border-bottom: 1px solid var(--market-border);
}

.market-product-tab-panel dt,
.market-product-tab-panel dd {
    margin: 0;
    font-size: 10px;
}

.market-product-tab-panel dt {
    color: var(--market-muted);
}

.market-product-tab-panel dd {
    color: var(--market-text);
    font-weight: 700;
}

.market-tab-empty {
    min-height: 130px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--market-border);
    border-radius: 8px;
    color: var(--market-muted);
    font-size: 11px;
}

.market-product-tab-panel > a {
    display: inline-flex;
    margin-top: 8px;
    color: var(--market-accent-strong);
    font-size: 10px;
    font-weight: 740;
}

.market-seller-card {
    padding: 15px;
}

.market-seller-card > h2 {
    margin: 0 0 13px;
    color: var(--market-text);
    font-size: 13px;
}

.market-seller-card > div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.market-seller-card > div > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--market-border);
    border-radius: 50%;
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
    font-size: 15px;
    font-weight: 800;
}

.market-seller-card > div > span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-seller-card > div p {
    min-width: 0;
    display: grid;
    margin: 0;
}

.market-seller-card > div strong {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--market-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-seller-card > div strong .ui-icon {
    width: 14px;
    height: 14px;
    color: var(--market-accent);
}

.market-seller-card > div small {
    margin-top: 2px;
    color: var(--market-muted);
    font-size: 8px;
}

.market-seller-card dl {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.market-seller-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--market-border);
}

.market-seller-card dt,
.market-seller-card dd {
    margin: 0;
    font-size: 9px;
}

.market-seller-card dt {
    color: var(--market-muted);
}

.market-seller-card dd {
    color: var(--market-text);
    font-weight: 740;
}

.market-seller-card > a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--cw-brand-border);
    border-radius: 8px;
    color: var(--market-accent-strong);
    font-size: 10px;
    font-weight: 740;
    text-decoration: none;
}

.market-seller-card > a:hover {
    border-color: var(--market-accent);
    background: var(--market-accent-soft);
}

.market-seller-card > a .ui-icon {
    width: 15px;
    height: 15px;
}

/* Checkout review */

.market-checkout-page {
    padding-top: 28px;
    padding-bottom: 52px;
}

.checkout-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.checkout-page-heading h1 {
    margin: 14px 0 4px;
    color: var(--market-text);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.checkout-page-heading p {
    margin: 0;
    color: var(--market-muted);
    font-size: 14px;
}

.checkout-page-heading > a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--market-text);
    font-size: 11px;
    font-weight: 740;
    text-decoration: none;
}

.checkout-page-heading > a .ui-icon {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}

.checkout-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 362px;
    align-items: start;
    gap: 16px;
}

.checkout-order-review,
.checkout-payment-card {
    overflow: hidden;
    border: 1px solid var(--market-border);
    border-radius: 14px;
    background: var(--cw-surface);
}

.checkout-order-review > header,
.checkout-payment-card > header {
    padding: 16px;
    border-bottom: 1px solid var(--market-border);
}

.checkout-order-review > header h2,
.checkout-payment-card > header h2 {
    margin: 0;
    color: var(--market-text);
    font-size: 17px;
}

.checkout-order-review > header p,
.checkout-payment-card > header p {
    margin: 3px 0 0;
    color: var(--market-muted);
    font-size: 11px;
}

.checkout-product-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
}

.checkout-product-image {
    /*
       _ProductFallbackVisual is positioned absolutely so that a missing product
       image never changes the height of the order-review row.  Keep this cell
       as its containing block; without it the illustration is positioned
       against the page and can cover the checkout controls.
    */
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(circle at 75% 20%, rgba(15, 118, 110, .24), transparent 25%),
        linear-gradient(145deg, #eaf6f3, #dce8ef);
    color: var(--market-accent-strong);
}

.checkout-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-product-image span {
    font-size: 34px;
    font-weight: 850;
    letter-spacing: -.08em;
}

.checkout-product-copy {
    min-width: 0;
}

.checkout-product-copy > div {
    display: flex;
    gap: 5px;
}

.checkout-product-copy mark {
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--market-accent-soft);
    color: var(--market-accent-strong);
    font-size: 8px;
    font-weight: 740;
}

.checkout-product-copy h2 {
    margin: 8px 0 4px;
    color: var(--market-text);
    font-size: 16px;
    line-height: 1.35;
}

.checkout-product-copy p,
.checkout-product-copy small {
    margin: 0;
    color: var(--market-muted);
    font-size: 10px;
    line-height: 1.5;
}

.checkout-product-copy > small {
    display: block;
    margin-top: 6px;
}

.checkout-product-total {
    display: grid;
    justify-items: end;
    text-align: right;
}

.checkout-product-total span,
.checkout-product-total small {
    color: var(--market-muted);
    font-size: 9px;
}

.checkout-product-total strong {
    color: var(--market-text);
    font-size: 15px;
}

.checkout-note {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    margin: 0 16px 16px;
    padding: 10px;
    border-radius: 8px;
    background: var(--cw-surface-subtle);
}

.checkout-note > .ui-icon {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 7px;
    background: var(--market-accent-soft);
    color: var(--market-accent);
}

.checkout-note span {
    display: grid;
}

.checkout-note b {
    font-size: 9px;
}

.checkout-note small {
    color: var(--market-muted);
    font-size: 9px;
}

.checkout-protection-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 16px;
    padding: 14px 0 18px;
    border-top: 1px solid var(--market-border);
}

.checkout-protection-row > span {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 0 9px;
}

.checkout-protection-row .ui-icon {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    padding: 6px;
    border: 1px solid var(--market-border);
    border-radius: 50%;
    color: var(--market-accent);
}

.checkout-protection-row b {
    color: var(--market-text);
    font-size: 10px;
}

.checkout-protection-row small {
    color: var(--market-muted);
    font-size: 8px;
}

.checkout-payment-card {
    position: sticky;
    top: 12px;
    padding-bottom: 14px;
}

.checkout-payable {
    display: grid;
    margin: 14px;
    padding: 13px;
    border: 1px solid var(--market-border);
    border-radius: 10px;
    background: var(--cw-surface-subtle);
}

.checkout-payable > span {
    color: var(--market-muted);
    font-size: 10px;
}

.checkout-payable > strong {
    color: var(--market-accent-strong);
    font-size: 28px;
    letter-spacing: -.035em;
}

.checkout-payable > small {
    color: var(--cw-success);
    font-size: 9px;
    font-weight: 700;
}

.checkout-coupon {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0 14px 12px;
    padding: 9px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
}

.checkout-coupon > .ui-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 7px;
    background: var(--market-accent-soft);
    color: var(--market-accent);
}

.checkout-coupon span {
    min-width: 0;
    display: grid;
}

.checkout-coupon b {
    font-size: 9px;
}

.checkout-coupon small {
    overflow: hidden;
    color: var(--market-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-coupon > strong {
    color: var(--cw-success);
    font-size: 9px;
}

.checkout-currency {
    display: grid;
    gap: 6px;
    margin: 0 14px 12px;
    color: var(--market-text);
    font-size: 10px;
    font-weight: 740;
}

.checkout-currency select {
    width: 100%;
    height: 38px;
    padding: 0 9px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    background: var(--cw-surface-subtle);
    color: var(--market-muted);
    font-size: 10px;
}

.checkout-wallet {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    margin: 0 14px 12px;
    padding: 11px;
    border: 1px solid var(--market-border);
    border-radius: 9px;
    background: var(--cw-surface-subtle);
}

.checkout-wallet > .ui-icon {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 8px;
    background: var(--cw-surface);
    color: var(--market-accent);
}

.checkout-wallet.is-low > .ui-icon {
    color: var(--cw-danger);
}

.checkout-wallet span {
    display: grid;
}

.checkout-wallet b {
    font-size: 9px;
}

.checkout-wallet strong {
    color: var(--market-text);
    font-size: 13px;
}

.checkout-wallet small {
    color: var(--market-muted);
    font-size: 8px;
}

.checkout-price-lines {
    display: grid;
    gap: 7px;
    margin: 0 14px 12px;
    padding: 11px 0;
    border-top: 1px solid var(--market-border);
    border-bottom: 1px solid var(--market-border);
}

.checkout-price-lines p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    color: var(--market-muted);
    font-size: 9px;
}

.checkout-price-lines p b {
    color: var(--market-text);
}

.checkout-price-lines p:last-child {
    align-items: end;
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--market-border);
    color: var(--market-text);
    font-weight: 740;
}

.checkout-price-lines p:last-child strong {
    color: var(--market-accent-strong);
    font-size: 18px;
}

.checkout-payment-card > .notice {
    margin: 0 14px 9px;
    font-size: 9px;
}

.checkout-payment-card > .validation-summary-valid {
    display: none;
}

.checkout-topup,
.checkout-confirm {
    width: calc(100% - 28px);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 14px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 760;
    text-decoration: none;
}

.checkout-topup {
    border: 1px solid var(--cw-brand-border);
    color: var(--market-accent-strong);
}

.checkout-confirm {
    border: 1px solid var(--market-accent);
    background: var(--market-accent);
    color: #ffffff;
    cursor: pointer;
}

.checkout-confirm:hover {
    border-color: var(--market-accent-strong);
    background: var(--market-accent-strong);
}

.checkout-confirm:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.checkout-confirm .ui-icon {
    width: 15px;
    height: 15px;
}

.checkout-confirm-note {
    display: block;
    padding: 0 20px;
    color: var(--market-muted);
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
}

/* Seller storefront */

.market-store-cover {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #203b52;
    background:
        radial-gradient(circle at 78% 12%, rgba(42, 206, 188, .24), transparent 28%),
        linear-gradient(115deg, #12273a, #0f1f2f 60%, #0b544f);
    color: #ffffff;
}

.market-store-cover::after {
    display: none;
    content: "";
    position: absolute;
    right: 8%;
    bottom: -130px;
    width: 360px;
    height: 360px;
    border: 54px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}

.market-store-cover .market-container {
    position: relative;
    z-index: 1;
    padding-top: 22px;
    padding-bottom: 30px;
}

.market-store-cover .market-breadcrumb,
.market-store-cover .market-breadcrumb a,
.market-store-cover .market-breadcrumb > :last-child {
    color: #b8c8d7;
}

.market-store-identity {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.market-store-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .35);
    border-radius: 16px;
    background: #ffffff;
    color: var(--market-accent-strong);
    font-size: 28px;
    font-weight: 850;
}

.market-store-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-store-identity > div {
    min-width: 0;
}

.market-store-identity p,
.market-store-identity h1,
.market-store-identity > div > span {
    margin: 0;
}

.market-store-identity p {
    color: #85d9d0;
    font-size: 10px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.market-store-identity h1 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    color: #ffffff;
    font-size: 28px;
    letter-spacing: -.035em;
}

.market-store-identity h1 .ui-icon {
    width: 19px;
    height: 19px;
    color: #63e2d4;
}

.market-store-identity > div > span {
    display: block;
    margin-top: 5px;
    color: #b8c8d7;
    font-size: 10px;
}

.market-store-identity > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 740;
    text-decoration: none;
}

.market-store-identity > a:hover {
    background: rgba(255, 255, 255, .1);
}

.market-store-identity > a .ui-icon {
    width: 15px;
    height: 15px;
}

.market-store-content {
    padding-top: 28px;
    padding-bottom: 48px;
}

.market-store-content > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.market-store-content > header h2 {
    margin: 0;
    color: var(--market-text);
    font-size: 22px;
}

.market-store-content > header p {
    margin: 4px 0 0;
    color: var(--market-muted);
    font-size: 11px;
}

.market-store-content > header form {
    display: flex;
    align-items: center;
    gap: 7px;
}

.market-store-content > header form > span {
    min-width: 220px;
    height: 38px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--market-border);
    border-radius: 8px;
    background: var(--cw-surface-subtle);
}

.market-store-content > header form .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--market-muted);
}

.market-store-content > header input {
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--market-text);
    font-size: 10px;
}

.market-store-content > header select,
.market-store-content > header button {
    height: 38px;
    border-radius: 8px;
    font-size: 10px;
}

.market-store-content > header select {
    padding: 0 28px 0 9px;
    border: 1px solid var(--market-border);
    background: var(--cw-surface);
    color: var(--market-text);
}

.market-store-content > header button {
    padding: 0 13px;
    border: 1px solid var(--market-accent);
    background: var(--market-accent);
    color: #ffffff;
    font-weight: 740;
    cursor: pointer;
}

html[data-color-scheme="dark"] .market-weekly-offer {
    border-color: var(--cw-line-strong);
    background: linear-gradient(105deg, #172630 0%, #15332f 56%, #16433d 100%);
}

html[data-color-scheme="dark"] .market-product-media > small {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(20, 30, 42, .84);
    color: var(--cw-ink-soft);
}

@media (max-width: 1180px) {
    .market-product-collection {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-product-primary {
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, 1fr) 286px;
    }

    .market-store-content > header {
        align-items: stretch;
        flex-direction: column;
    }

    .market-store-content > header form > span {
        flex: 1;
    }
}

@media (max-width: 1020px) {
    .market-product-primary {
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    }

    .market-purchase-panel {
        position: static;
        grid-column: 1 / -1;
    }

    .market-purchase-panel form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-purchase-panel form > header,
    .market-package-options,
    .market-purchase-total {
        grid-column: span 1;
    }

    .market-purchase-panel form > header {
        border-right: 1px solid var(--market-border);
    }

    .market-package-options {
        border-left: 1px solid var(--market-border);
    }

    .market-quantity-row,
    .market-coupon-field,
    .market-order-note,
    .market-buy-now,
    .market-add-favorite,
    .market-purchase-panel form > p {
        grid-column: span 1;
    }

    .market-purchase-total {
        margin-bottom: 11px;
    }
}

@media (max-width: 900px) {
    .market-catalog-layout {
        grid-template-columns: 1fr;
    }

    .market-filter-panel {
        position: static;
    }

    .market-filter-panel form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-filter-panel form > header,
    .market-filter-panel .market-filter-submit,
    .market-filter-panel .market-filter-reset {
        grid-column: 1 / -1;
    }

    .market-filter-search,
    .market-filter-panel fieldset {
        border-right: 1px solid var(--market-border);
    }

    .market-weekly-offer {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .market-assurance-band > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-assurance-band > div > div:nth-child(3) {
        border-top: 1px solid var(--market-border);
    }

    .market-assurance-band > div > div:nth-child(4) {
        border-top: 1px solid var(--market-border);
    }

    .checkout-review-layout {
        grid-template-columns: 1fr;
    }

    .checkout-payment-card {
        position: static;
    }
}

@media (max-width: 760px) {
    .market-results-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .market-results-toolbar > nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .market-product-collection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-product-primary,
    .market-product-secondary {
        grid-template-columns: 1fr;
    }

    .market-purchase-panel {
        grid-column: auto;
    }

    .market-product-summary {
        order: -1;
    }

    .market-product-secondary .market-seller-card {
        grid-row: 1;
    }

    .checkout-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .checkout-product-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .checkout-product-total {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .market-store-identity {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .market-store-avatar {
        width: 62px;
        height: 62px;
    }

    .market-store-identity > a {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .market-store-content > header form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-store-content > header form > span {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .market-page-heading {
        padding-top: 20px;
    }

    .market-page-heading > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .market-filter-panel form {
        grid-template-columns: 1fr;
    }

    .market-filter-mobile-toggle {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0 14px;
        border: 0;
        background: var(--cw-surface);
        color: var(--market-text);
        font-size: 11px;
        font-weight: 760;
        cursor: pointer;
    }

    .market-filter-mobile-toggle > span {
        flex: 1;
        text-align: left;
    }

    .market-filter-mobile-toggle > b {
        min-width: 26px;
        padding: 3px 6px;
        border-radius: 5px;
        background: var(--market-accent-soft);
        color: var(--market-accent-strong);
        font-size: 9px;
    }

    .market-filter-mobile-toggle .ui-icon {
        width: 15px;
        height: 15px;
        color: var(--market-accent);
    }

    .market-filter-mobile-toggle .market-filter-chevron {
        color: var(--market-muted);
        transition: transform .16s ease;
    }

    .market-filter-panel.is-mobile-open .market-filter-chevron {
        transform: rotate(180deg);
    }

    .market-filter-panel > form {
        display: none;
    }

    .market-filter-panel.is-mobile-open > form {
        display: grid;
    }

    .market-filter-panel form > header,
    .market-filter-panel .market-filter-submit,
    .market-filter-panel .market-filter-reset {
        grid-column: auto;
    }

    .market-filter-search,
    .market-filter-panel fieldset {
        border-right: 0;
    }

    .market-weekly-offer {
        min-height: 180px;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .market-weekly-offer > i {
        display: none;
    }

    .market-product-collection {
        grid-template-columns: 1fr;
    }

    .market-product-collection.is-list .market-product-card {
        grid-template-columns: 1fr;
    }

    .market-product-collection.is-list .market-product-media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .market-product-card {
        display: grid;
        grid-template-columns: 142px minmax(0, 1fr);
    }

    .market-product-media {
        aspect-ratio: auto;
        min-height: 218px;
    }

    .market-product-content > p,
    .market-product-facts {
        display: none;
    }

    .market-product-price {
        min-height: 38px;
    }

    .market-assurance-band > div {
        grid-template-columns: 1fr;
    }

    .market-assurance-band > div > div {
        min-height: 84px;
        border-top: 1px solid var(--market-border);
        border-right: 1px solid var(--market-border);
    }

    .market-assurance-band > div > div:first-child {
        border-top: 0;
    }

    .market-product-page,
    .market-checkout-page {
        padding-top: 16px;
        padding-bottom: 34px;
    }

    .market-gallery-assurance {
        grid-template-columns: 1fr;
    }

    .market-gallery-assurance span:nth-child(n + 2) {
        display: none;
    }

    .market-purchase-panel form {
        grid-template-columns: 1fr;
    }

    .market-purchase-panel form > header,
    .market-package-options,
    .market-quantity-row,
    .market-coupon-field,
    .market-order-note,
    .market-purchase-total,
    .market-buy-now,
    .market-add-favorite,
    .market-purchase-panel form > p {
        grid-column: auto;
    }

    .market-purchase-panel form > header,
    .market-package-options {
        border-right: 0;
        border-left: 0;
    }

    .market-product-tab-panel {
        padding: 16px;
    }

    .market-product-tab-panel dl {
        grid-template-columns: 1fr;
    }

    .market-product-tab-panel dl div {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .checkout-page-heading h1 {
        font-size: 27px;
    }

    .checkout-product-row {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
        padding: 14px;
    }

    .checkout-protection-row {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .market-store-content > header form {
        grid-template-columns: 1fr;
    }

    .market-store-content > header form > span {
        grid-column: auto;
    }
}

@media (max-width: 390px) {
    .market-product-card {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .market-product-media {
        min-height: 202px;
    }

    .market-product-content {
        padding: 9px;
    }

    .market-product-content > footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Catalog storefront v2 — reference-led red marketplace treatment. */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.market-catalog-page {
    --catalog-accent: #ff454b;
    --catalog-accent-hover: #ed3038;
    --catalog-accent-soft: #fff0f1;
    --catalog-ink: #101828;
    --catalog-copy: #344054;
    --catalog-muted: #7b879c;
    --catalog-line: #d9e2ef;
    --catalog-subtle: #f7f9fc;
    background: #ffffff;
    color: var(--catalog-ink);
    font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
}

.market-catalog-page .market-container {
    width: min(calc(100% - 96px), 1364px);
}

.market-catalog-page :is(a, button, input, select):focus-visible {
    outline-color: rgba(255, 69, 75, .28);
}

.market-catalog-page .market-page-heading {
    padding-top: 30px;
    padding-bottom: 20px;
}

.market-catalog-page .market-breadcrumb {
    gap: 10px;
    color: #8c98aa;
    font-size: 14px;
    line-height: 1.4;
}

.market-catalog-page .market-breadcrumb a {
    color: #7d899b;
    transition: color .18s ease;
}

.market-catalog-page .market-breadcrumb a:hover {
    color: var(--catalog-accent);
}

.market-catalog-page .market-breadcrumb > :last-child {
    color: var(--catalog-copy);
    font-weight: 650;
}

.market-catalog-page .market-page-heading > div {
    gap: 14px;
    margin-top: 20px;
}

.market-catalog-page .market-page-heading h1 {
    color: var(--catalog-ink);
    font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
    font-size: clamp(32px, 2.65vw, 40px);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -.035em;
}

.market-catalog-page .market-page-heading > div > span {
    padding: 7px 12px;
    border-radius: 10px;
    background: #f4f6fa;
    color: #8a95a6;
    font-size: 14px;
    font-weight: 650;
}

.market-catalog-page .market-catalog-layout {
    grid-template-columns: 278px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 48px;
}

.market-catalog-page .market-filter-panel {
    top: 16px;
    border-color: var(--catalog-line);
    border-radius: 11px;
    box-shadow: 0 14px 34px rgba(26, 39, 68, .065);
}

.market-catalog-page .market-filter-panel form > header {
    min-height: 54px;
    gap: 10px;
    padding: 0 16px;
    border-color: var(--catalog-line);
}

.market-catalog-page .market-filter-panel form > header .ui-icon {
    width: 18px;
    height: 18px;
    color: #66758a;
}

.market-catalog-page .market-filter-panel form > header h2 {
    color: var(--catalog-ink);
    font-size: 15px;
    font-weight: 760;
}

.market-catalog-page .market-filter-panel form > header > span {
    display: none;
}

.market-catalog-page .market-filter-search,
.market-catalog-page .market-filter-panel fieldset,
.market-catalog-page .market-currency-filter {
    gap: 10px;
    padding: 16px;
    border-color: #e7ebf2;
    color: var(--catalog-ink);
    font-size: 13px;
    font-weight: 740;
}

.market-catalog-page .market-filter-panel legend {
    font-size: 13px;
    font-weight: 740;
}

.market-catalog-page .market-filter-search > span {
    min-height: 42px;
    gap: 8px;
    padding: 0 12px;
    border-color: var(--catalog-line);
    border-radius: 9px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.market-catalog-page .market-filter-search > span:focus-within {
    border-color: var(--catalog-accent);
    box-shadow: 0 0 0 3px rgba(255, 69, 75, .1);
}

.market-catalog-page .market-filter-search .ui-icon {
    width: 19px;
    height: 19px;
    color: #8d99aa;
}

.market-catalog-page .market-filter-search input {
    height: 40px;
    color: var(--catalog-copy);
    font-size: 14px;
}

.market-catalog-page .market-filter-search input::placeholder,
.market-catalog-page .market-price-filter input::placeholder {
    color: #9aa6b7;
}

.market-catalog-page .market-category-filter {
    gap: 3px;
}

.market-catalog-page .market-category-filter a {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #46546a;
    font-size: 14px;
    font-weight: 520;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.market-catalog-page .market-category-filter a:hover {
    background: #f8f9fc;
    color: var(--catalog-accent-hover);
    transform: translateX(2px);
}

.market-catalog-page .market-category-filter a.active {
    background: var(--catalog-accent-soft);
    color: var(--catalog-accent);
    font-weight: 680;
}

.market-catalog-page .market-category-filter a b {
    color: inherit;
    font-size: 13px;
    font-weight: 650;
}

.market-catalog-page .market-price-filter {
    gap: 13px;
}

.market-catalog-page .market-price-range {
    position: relative;
    height: 15px;
    display: block;
}

.market-catalog-page .market-price-range::before,
.market-catalog-page .market-price-range::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--catalog-accent);
    border-radius: 50%;
    background: #ffffff;
}

.market-catalog-page .market-price-range::before {
    left: 3px;
}

.market-catalog-page .market-price-range::after {
    right: 3px;
}

.market-catalog-page .market-price-range > i {
    position: absolute;
    top: 9px;
    right: 8px;
    left: 8px;
    height: 2px;
    background: var(--catalog-accent);
}

.market-catalog-page .market-price-filter > .market-price-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.market-catalog-page .market-price-slider {
    --price-start: 0%;
    --price-end: 100%;
    position: relative;
    height: 22px;
    display: block;
    margin: 0;
}

.market-catalog-page .market-price-slider-track {
    position: absolute;
    top: 9px;
    right: 6px;
    left: 6px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f3f6;
}

.market-catalog-page .market-price-slider-track > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--price-start);
    right: calc(100% - var(--price-end));
    border-radius: inherit;
    background: var(--catalog-accent);
}

.market-catalog-page .market-price-slider input[type="range"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.market-catalog-page .market-price-slider input[type="range"].market-price-slider-min {
    z-index: 3;
}

.market-catalog-page .market-price-slider input[type="range"].is-active-thumb {
    z-index: 5;
}

.market-catalog-page .market-price-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    border: 0;
    background: transparent;
}

.market-catalog-page .market-price-slider input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 1.5px solid var(--catalog-accent);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    cursor: grab;
    transition: box-shadow .16s ease, transform .16s ease;
}

.market-catalog-page .market-price-slider input[type="range"]::-moz-range-track {
    height: 3px;
    border: 0;
    background: transparent;
}

.market-catalog-page .market-price-slider input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--catalog-accent);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: none;
    pointer-events: auto;
    cursor: grab;
    transition: box-shadow .16s ease, transform .16s ease;
}

.market-catalog-page .market-price-slider input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 4px rgba(255, 69, 75, .1);
    transform: scale(1.05);
}

.market-catalog-page .market-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(255, 69, 75, .12);
}

.market-catalog-page .market-price-slider input[type="range"]:active::-moz-range-thumb,
.market-catalog-page .market-price-slider input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(255, 69, 75, .12);
    transform: scale(1.05);
}

.market-catalog-page .market-price-inputs input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.market-catalog-page .market-price-inputs input[type="number"]::-webkit-inner-spin-button,
.market-catalog-page .market-price-inputs input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.market-catalog-page .market-price-filter input {
    height: 42px;
    padding: 0 12px;
    border-color: var(--catalog-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--catalog-copy);
    font-size: 14px;
}

.market-catalog-page .market-price-filter input:focus {
    border-color: var(--catalog-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 69, 75, .1);
}

.market-catalog-page .market-currency-filter {
    display: grid;
    border-bottom: 1px solid #e7ebf2;
}

.market-catalog-page .market-currency-filter select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--catalog-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--catalog-copy);
    font-size: 14px;
}

.market-catalog-page label.market-stock-filter {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #e7ebf2;
    color: var(--catalog-copy);
    font-size: 14px;
    font-weight: 520;
    cursor: pointer;
}

.market-catalog-page label.market-stock-filter input {
    width: 17px;
    height: 17px;
    accent-color: var(--catalog-accent);
}

.market-catalog-page .market-filter-submit,
.market-catalog-page .market-filter-reset {
    min-height: 42px;
    margin-right: 16px;
    margin-left: 16px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}

.market-catalog-page .market-filter-submit {
    width: calc(100% - 32px);
    border-color: var(--catalog-accent);
    background: var(--catalog-accent);
    box-shadow: 0 8px 18px rgba(255, 69, 75, .16);
}

.market-catalog-page .market-filter-submit:hover {
    border-color: var(--catalog-accent-hover);
    background: var(--catalog-accent-hover);
    box-shadow: 0 11px 23px rgba(237, 48, 56, .22);
    transform: translateY(-1px);
}

.market-catalog-page .market-filter-reset {
    margin-bottom: 16px;
    border-color: var(--catalog-accent);
    color: var(--catalog-accent);
}

.market-catalog-page .market-filter-reset:hover {
    border-color: var(--catalog-accent-hover);
    background: var(--catalog-accent-soft);
    color: var(--catalog-accent-hover);
}

.market-catalog-page .market-results-toolbar {
    min-height: 42px;
    gap: 9px;
    margin-bottom: 18px;
}

.market-catalog-page .market-results-toolbar > span {
    color: #657187;
    font-size: 14px;
}

.market-catalog-page .market-results-toolbar > nav {
    gap: 8px;
}

.market-catalog-page .market-results-toolbar a {
    min-height: 38px;
    padding: 0 16px;
    border-color: var(--catalog-line);
    border-radius: 9px;
    color: #46546a;
    font-size: 14px;
    font-weight: 560;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.market-catalog-page .market-results-toolbar a:hover,
.market-catalog-page .market-results-toolbar a.active {
    border-color: var(--catalog-accent);
    background: var(--catalog-accent-soft);
    color: var(--catalog-accent);
}

.market-catalog-page .market-results-toolbar a.active {
    box-shadow: inset 0 0 0 1px rgba(255, 69, 75, .06);
    font-weight: 680;
}

.market-catalog-page .market-results-toolbar .market-toolbar-action {
    width: 40px;
    min-width: 40px;
    padding: 0;
    margin-left: auto;
}

.market-catalog-page .market-toolbar-action .ui-icon {
    width: 16px;
    height: 16px;
}

.market-catalog-page .market-view-switch {
    gap: 2px;
    margin-left: 0;
    padding: 4px;
    border-color: var(--catalog-line);
    border-radius: 10px;
}

.market-catalog-page .market-results-toolbar .market-view-switch a {
    min-width: 104px;
    min-height: 32px;
    gap: 8px;
    padding: 0 13px;
    border: 0;
}

.market-catalog-page .market-results-toolbar .market-view-switch a.active {
    background: var(--catalog-accent-soft);
    box-shadow: none;
}

.market-catalog-page .market-view-switch .ui-icon {
    width: 17px;
    height: 17px;
}

.market-catalog-page .market-weekly-offer {
    min-height: 184px;
    grid-template-columns: minmax(0, 1fr) 48%;
    margin-bottom: 20px;
    padding-left: 32px;
    border-color: #d9e2ef;
    border-radius: 13px;
    background:
        radial-gradient(circle at 43% 18%, rgba(255, 69, 75, .08), transparent 18%),
        linear-gradient(105deg, #ffffff 0%, #fffafa 54%, #fff0f1 100%);
    box-shadow: 0 10px 28px rgba(32, 46, 74, .055);
}

.market-catalog-page .market-weekly-offer strong {
    color: var(--catalog-ink);
    font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
    font-size: 25px;
    font-weight: 760;
    letter-spacing: -.025em;
}

.market-catalog-page .market-weekly-offer small {
    margin-top: 5px;
    color: #536176;
    font-size: 14px;
}

.market-catalog-page .market-weekly-offer b {
    min-height: 42px;
    gap: 10px;
    margin-top: 22px;
    padding: 0 18px;
    border-radius: 9px;
    background: var(--catalog-accent);
    font-size: 14px;
    font-weight: 720;
    box-shadow: 0 9px 20px rgba(255, 69, 75, .2);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.market-catalog-page .market-weekly-offer:hover b {
    background: var(--catalog-accent-hover);
    box-shadow: 0 12px 26px rgba(237, 48, 56, .26);
    transform: translateY(-2px);
}

.market-catalog-page .market-weekly-offer > i {
    gap: 0;
    padding: 0 22px;
    background:
        radial-gradient(circle at 85% 22%, rgba(255, 213, 87, .8) 0 7%, transparent 7.5%),
        linear-gradient(135deg, #121d3a, #133d82 44%, #1e9a50 76%, #ffede9);
    isolation: isolate;
}

.market-catalog-page .market-weekly-offer > i::before {
    top: -65px;
    right: -15px;
    width: 170px;
    height: 170px;
    border-width: 34px;
    border-color: rgba(255, 255, 255, .12);
}

.market-catalog-page .market-weekly-offer > i::after {
    bottom: -108px;
    left: 45%;
    width: 210px;
    height: 210px;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #ffe4e0);
    box-shadow: 0 12px 28px rgba(13, 30, 63, .3);
    transform: rotate(42deg);
}

.market-catalog-page .market-weekly-offer > i .ui-icon {
    z-index: 2;
    width: 76px;
    height: 92px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 18px 34px rgba(5, 18, 50, .3);
    backdrop-filter: blur(6px);
    transform: skewX(-8deg) rotate(-3deg);
    transition: transform .24s ease;
}

.market-catalog-page .market-weekly-offer > i .ui-icon:nth-child(1) {
    color: #ffffff;
    background: rgba(5, 20, 44, .64);
}

.market-catalog-page .market-weekly-offer > i .ui-icon:nth-child(2) {
    color: #ffffff;
    background: rgba(13, 106, 219, .62);
    transform: skewX(-8deg) rotate(3deg) translateY(8px);
}

.market-catalog-page .market-weekly-offer > i .ui-icon:nth-child(3) {
    color: #ffffff;
    background: rgba(34, 159, 76, .68);
    transform: skewX(-8deg) rotate(-1deg);
}

.market-catalog-page .market-weekly-offer:hover > i .ui-icon:nth-child(1) {
    transform: skewX(-8deg) rotate(-6deg) translateY(-3px);
}

.market-catalog-page .market-weekly-offer:hover > i .ui-icon:nth-child(2) {
    transform: skewX(-8deg) rotate(5deg) translateY(4px);
}

.market-catalog-page .market-weekly-offer:hover > i .ui-icon:nth-child(3) {
    transform: skewX(-8deg) rotate(2deg) translateY(-3px);
}

.market-catalog-page .market-product-collection {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.market-catalog-page .market-product-card {
    border-color: var(--catalog-line);
    border-radius: 11px;
    box-shadow: 0 7px 20px rgba(25, 39, 68, .055);
    transition: transform .22s cubic-bezier(.2, .75, .25, 1), border-color .2s ease, box-shadow .22s ease;
}

.market-catalog-page .market-product-card:hover {
    border-color: rgba(255, 69, 75, .48);
    box-shadow: 0 18px 38px rgba(25, 39, 68, .13);
    transform: translateY(-5px);
}

.market-catalog-page .market-product-media {
    aspect-ratio: 1.35;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .75), transparent 55%),
        linear-gradient(145deg, #e9f3ff, #f9fbff);
    color: #2c64cf;
}

.market-catalog-page .market-product-media::after {
    right: -46px;
    bottom: -58px;
    width: 170px;
    height: 170px;
    border-color: rgba(44, 100, 207, .085);
}

.market-catalog-page .market-product-card:nth-child(4n + 2) .market-product-media {
    background: radial-gradient(circle at 78% 22%, #257cff, transparent 28%), linear-gradient(145deg, #06164c, #0d3fa9);
    color: #ffffff;
}

.market-catalog-page .market-product-card:nth-child(4n + 3) .market-product-media {
    background: radial-gradient(circle at 70% 22%, #6b77ff, transparent 25%), linear-gradient(145deg, #071d67, #032c82);
    color: #ffffff;
}

.market-catalog-page .market-product-card:nth-child(4n + 4) .market-product-media {
    background: linear-gradient(145deg, #eef6ff, #dfeaff);
    color: #3266c8;
}

.market-catalog-page .market-product-card:nth-child(4n + 5) .market-product-media {
    background: radial-gradient(circle at 22% 18%, #ffe886, transparent 24%), linear-gradient(145deg, #ff5c43, #ffb34e);
    color: #ffffff;
}

.market-catalog-page .market-product-media > small {
    display: none;
}

.market-catalog-page .market-product-monogram {
    font-size: clamp(54px, 5vw, 78px);
    font-weight: 850;
    letter-spacing: -.085em;
    text-shadow: 0 12px 28px rgba(21, 57, 122, .2);
    transition: transform .28s ease;
}

.market-catalog-page .market-product-card:hover .market-product-monogram {
    transform: scale(1.045) rotate(-1deg);
}

.market-catalog-page .market-product-media > mark {
    top: 9px;
    left: 9px;
    min-width: 43px;
    min-height: 43px;
    justify-content: center;
    padding: 7px;
    border: 2px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff7b2, #ffc744);
    color: #ff393f;
    box-shadow: 0 7px 15px rgba(90, 53, 0, .18);
}

.market-catalog-page .market-product-media > mark .ui-icon {
    width: 23px;
    height: 23px;
    stroke-width: 2.2;
}

.market-catalog-page .market-product-media > mark span {
    display: none;
}

.market-catalog-page .market-product-content {
    min-height: 178px;
    align-content: start;
    padding: 15px 16px 14px;
}

.market-catalog-page .market-product-store,
.market-catalog-page .market-product-content > p,
.market-catalog-page .market-product-facts {
    display: none;
}

.market-product-category {
    display: none;
}

.market-catalog-page .market-product-category {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #8a95a8;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-catalog-page .market-product-content h2 {
    min-height: 43px;
    margin: 0;
    color: var(--catalog-ink);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.4;
}

.market-catalog-page .market-product-content h2 a {
    transition: color .16s ease;
}

.market-catalog-page .market-product-content h2 a:hover {
    color: var(--catalog-accent);
}

.market-catalog-page .market-product-price {
    min-height: 31px;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.market-catalog-page .market-product-price strong {
    color: var(--catalog-accent);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.market-catalog-page .market-product-price del {
    color: #9ba6b7;
    font-size: 11px;
}

.market-catalog-page .market-product-content > footer {
    min-height: 38px;
    gap: 8px;
    margin-top: 5px;
    padding-top: 0;
    border-top: 0;
}

.market-product-card-stats {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #8a95a8;
    font-size: 11px;
    white-space: nowrap;
}

.market-product-card-stats > i {
    color: #aab3c1;
    font-style: normal;
}

.market-product-card-stats > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-product-card-stats .market-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ffa719;
    font-weight: 700;
}

.market-product-rating .ui-icon {
    width: 15px;
    height: 15px;
}

.market-catalog-page .market-product-content > footer > a {
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--catalog-accent);
    border-radius: 10px;
    background: #ffffff;
    color: var(--catalog-accent);
    transition: color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.market-catalog-page .market-product-content > footer > a:hover {
    background: var(--catalog-accent);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(255, 69, 75, .2);
    transform: translateY(-2px);
}

.market-catalog-page .market-product-content > footer > a .ui-icon {
    width: 18px;
    height: 18px;
}

.market-catalog-page .market-product-content > footer > a span {
    display: none;
}

.market-catalog-page .market-product-collection.is-list {
    grid-template-columns: 1fr;
}

.market-catalog-page .market-product-collection.is-list .market-product-card {
    grid-template-columns: 260px minmax(0, 1fr);
}

.market-catalog-page .market-product-collection.is-list .market-product-content {
    align-content: center;
}

.market-catalog-page .market-pagination a:hover,
.market-catalog-page .market-pagination a.active {
    border-color: var(--catalog-accent);
    background: var(--catalog-accent);
}

@media (max-width: 1240px) {
    .market-catalog-page .market-container {
        width: min(calc(100% - 48px), 1364px);
    }

    .market-catalog-page .market-catalog-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 16px;
    }

    .market-catalog-page .market-results-toolbar a {
        padding-inline: 12px;
    }

    .market-catalog-page .market-product-collection {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .market-catalog-page .market-catalog-layout {
        grid-template-columns: 1fr;
    }

    .market-catalog-page .market-weekly-offer {
        grid-template-columns: minmax(0, 1fr) 42%;
    }
}

@media (max-width: 760px) {
    .market-catalog-page .market-container {
        width: min(calc(100% - 32px), 1364px);
    }

    .market-catalog-page .market-page-heading h1 {
        font-size: 32px;
    }

    .market-catalog-page .market-results-toolbar > nav {
        gap: 6px;
    }

    .market-catalog-page .market-results-toolbar > nav a {
        flex: 0 0 auto;
    }

    .market-catalog-page .market-toolbar-action {
        margin-left: auto;
    }

    .market-catalog-page .market-product-collection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .market-catalog-page .market-page-heading {
        padding-top: 22px;
    }

    .market-catalog-page .market-page-heading > div {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .market-catalog-page .market-page-heading h1 {
        font-size: 28px;
    }

    .market-catalog-page .market-filter-mobile-toggle {
        color: var(--catalog-ink);
        font-size: 14px;
    }

    .market-catalog-page .market-filter-mobile-toggle .ui-icon {
        color: var(--catalog-accent);
    }

    .market-catalog-page .market-weekly-offer {
        min-height: 172px;
        padding: 22px;
    }

    .market-catalog-page .market-weekly-offer strong {
        font-size: 22px;
    }

    .market-catalog-page .market-product-collection {
        grid-template-columns: 1fr;
    }

    .market-catalog-page .market-product-card,
    .market-catalog-page .market-product-collection.is-list .market-product-card {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .market-catalog-page .market-product-media,
    .market-catalog-page .market-product-collection.is-list .market-product-media {
        min-height: 214px;
        aspect-ratio: auto;
    }

    .market-catalog-page .market-product-content {
        min-height: 214px;
        padding: 13px;
    }

    .market-catalog-page .market-product-content h2 {
        min-height: 58px;
        font-size: 14px;
        -webkit-line-clamp: 3;
    }

    .market-catalog-page .market-product-price {
        margin-top: 12px;
    }

    .market-catalog-page .market-product-content > footer {
        align-items: center;
        flex-direction: row;
    }

    .market-catalog-page .market-product-card-stats > span:last-child,
    .market-catalog-page .market-product-card-stats > i {
        display: none;
    }
}

html[data-color-scheme="dark"] .market-catalog-page {
    --catalog-ink: #f4f7fb;
    --catalog-copy: #d0d7e3;
    --catalog-muted: #98a4b6;
    --catalog-line: #344054;
    --catalog-subtle: #172033;
    background: #101722;
}

html[data-color-scheme="dark"] .market-catalog-page :is(.market-filter-panel, .market-filter-search > span, .market-price-filter input, .market-currency-filter select, .market-product-card, .market-product-content > footer > a) {
    background: #172033;
    color: var(--catalog-copy);
}

html[data-color-scheme="dark"] .market-catalog-page .market-weekly-offer {
    background: linear-gradient(105deg, #172033 0%, #1d2433 54%, #3a2027 100%);
}

/* Catalog price slider form-control isolation. */
.commerce-workspace .market-catalog-page .market-price-filter .market-price-slider > input[type="range"] {
    min-height: 0;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    line-height: normal;
}

.commerce-workspace .market-catalog-page .market-price-filter .market-price-slider > input[type="range"]:focus,
.commerce-workspace .market-catalog-page .market-price-filter .market-price-slider > input[type="range"]:focus-visible {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

/* Shared server-side table pagination */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0 2px;
    color: #64748b;
    font-size: .875rem;
}

.table-page-size-form,
.table-page-size-form label,
.table-pager nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-page-size-form select {
    width: auto;
    min-width: 78px;
    min-height: 38px;
    padding: 7px 30px 7px 11px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background-color: #fff;
    color: #172033;
    font: inherit;
    font-weight: 700;
}

.table-pager nav a,
.table-pager nav span,
.table-pager nav strong {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #fff;
    color: #263247;
    font: inherit;
    text-decoration: none;
}

.table-pager nav a:hover {
    border-color: #fdba74;
    color: #c2410c;
    background: #fff7ed;
}

.table-pager nav .disabled {
    color: #a8b2c2;
    background: #f8fafc;
    cursor: not-allowed;
}

.table-pager-summary {
    margin-left: auto;
}

@media (max-width: 720px) {
    .table-pager,
    .table-pager nav {
        width: 100%;
    }

    .table-pager-summary {
        margin-left: 0;
    }

    .table-pager nav {
        justify-content: space-between;
    }
}