/* One palette shared by discovery, product details and every account workspace. */
:root[data-theme="dark"] { color-scheme: dark; background: #18191b; }
:root[data-theme="light"] { color-scheme: light; background: #f7f7f8; }
:root[data-theme="light"] body.storefront.explore {
  --background: #f7f7f8;
  --surface: #fff;
  --surface-hover: #f0f1f3;
  --surface-selected: #fff0f1;
  --foreground: #202124;
  --secondary-foreground: #4e535d;
  --muted-foreground: #68707e;
  --muted: #68707e;
  --border: #dfe2e7;
  --border-strong: #bfc5cd;
  --accent: #cc2c38;
  --accent-hover: #b82430;
  --accent-text: #b92532;
  --accent-soft: #fff0f1;
  --accent-border: #edc3c8;
  --focus: #b92532;
  --reputation-gold: #87641d;
  --reputation-caption: #75643d;
  --reputation-rule: #ded0ae;
  --shadow-float: 0 18px 60px rgb(22 28 40 / 12%);
  --theme-panel: #fff;
  --theme-panel-alt: #f4f5f7;
  --theme-field: #fff;
  --theme-inset: #f4f5f7;
  --theme-raised: #eef0f3;
  --theme-text: #202124;
  --theme-secondary: #4e535d;
  --theme-muted: #68707e;
  --theme-border: #dfe2e7;
  --theme-border-strong: #bfc5cd;
  --theme-success: #23704b;
  --theme-success-bg: #eaf6ee;
  --theme-warning: #876110;
  --theme-warning-bg: #fff6df;
  --theme-danger: #b82632;
  --theme-danger-bg: #fff0f1;
  --theme-info: #345c94;
  --theme-info-bg: #edf3fd;
  --explore-theme-text: var(--theme-text);
  --explore-theme-secondary: var(--theme-secondary);
  --explore-theme-muted: var(--theme-muted);
  --explore-theme-border: var(--theme-border);
  --explore-theme-border-strong: var(--theme-border-strong);
  --explore-theme-panel: var(--theme-panel);
  --explore-theme-inset: var(--theme-inset);
  --explore-theme-raised: var(--theme-raised);
  --explore-theme-accent: var(--accent-text);
  --explore-theme-accent-soft: var(--accent-soft);
  --explore-theme-accent-border: var(--accent-border);
  --explore-theme-success: var(--theme-success);
  --explore-theme-success-bg: var(--theme-success-bg);
  --explore-theme-success-border: #aecfbc;
  --explore-theme-warning: var(--theme-warning);
  --explore-theme-warning-bg: var(--theme-warning-bg);
  --explore-theme-warning-border: #dec998;
  --explore-theme-info-bg: var(--theme-info-bg);
  --explore-theme-header: rgb(247 247 248 / 96%);
  --explore-theme-tooltip: #252a32;
  --explore-theme-tooltip-text: #fff;
  --explore-theme-on-accent: #fff;
  --explore-theme-headline: #8b513b;
  color-scheme: light;
}

/* The reference's three outlined icons share a pill, with one recessed selection. */
.appearance-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 4px;
  border: 1px solid #343b45;
  border-radius: 24px;
  color: #a9b0bb;
  background: #111418;
}
.appearance-switch > button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.appearance-switch > button svg { display: block; width: 21px; height: 21px; }
.appearance-switch > button:hover { color: #f3f5f7; background: #20252c; }
.appearance-switch > button[aria-checked="true"] { color: #f3f5f7; background: #242a32; }
.appearance-switch > button:focus-visible { outline: 2px solid var(--focus, #ff9b9f); outline-offset: 2px; }
.appearance-switch > button::after {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  left: 50%;
  width: max-content;
  padding: 6px 9px;
  border: 1px solid #424954;
  border-radius: 7px;
  color: #f3f5f7;
  background: #252a32;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  content: attr(aria-label);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
.appearance-switch > button:hover::after, .appearance-switch > button:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.explore .market-header .appearance-switch { margin-left: auto; }
.explore .market-header .mall-header-actions { margin-left: 0; }
:root[data-theme="light"] .appearance-switch { border-color: #cdd2da; color: #717a88; background: #fff; }
:root[data-theme="light"] .appearance-switch > button:hover { color: #262d38; background: #f0f2f5; }
:root[data-theme="light"] .appearance-switch > button[aria-checked="true"] { color: #202732; background: #e9edf2; }

/* Keep the wordmark's white lettering readable without changing the payment asset. */
:root[data-theme="light"] .account .growth-payment-logo { box-sizing: content-box; padding: 7px 10px; border-radius: 8px; background: #22252a; }

@media (max-width: 900px) {
  .explore .market-header .mall-header-inner { gap: 8px 16px; }
  .explore .market-header .mall-header-actions { flex: 1 1 100%; justify-content: flex-end; }
  .account .mall-header-inner { gap: 8px 16px; }
}
@media (max-width: 600px) {
  .explore .market-header .mall-header-actions { justify-content: flex-start; gap: 8px; }
  .explore .market-header .header-community { margin-left: auto; }
  .account .mall-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .account .mall-header-inner > .brand { grid-column: 1; grid-row: 1; margin-right: auto; }
  .account .mall-header-inner > .appearance-switch { grid-column: 2; grid-row: 1; margin-left: auto; }
  .account .mall-header-inner > .mall-nav { grid-column: 1; grid-row: 2; width: auto; margin-left: 0; justify-content: flex-start; gap: 12px; }
  .account .mall-header-inner > .mall-header-actions { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
  .account .mall-header-actions .account-header-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-switch > button, .appearance-switch > button::after { transition: none; }
}