:root {
  --ink: var(--m9-brand-navy);
  --ink-2: var(--m9-text);
  --line: var(--m9-border);
  --wash: var(--m9-page);
  --white: var(--m9-surface);
  --aqua: var(--m9-primary);
  --teal: var(--m9-primary);
  --violet: var(--m9-ai);
  --pink: var(--m9-primary);
  --gold: var(--m9-primary);
  --shadow: var(--m9-shadow-surface);
  --m9-navy: var(--m9-brand-navy);
  --m9-mint: var(--m9-primary);
  --m9-line: var(--m9-border);
  --m9-muted: var(--m9-text-muted);
  --m9-radius: var(--m9-radius-xl);
  --m9-shadow: var(--m9-shadow-surface);
}
/* Consumer uses the approved six-menu shell, not the Seller sidebar. */
html {
  overflow-x: clip;
  background: var(--m9-page);
}
body {
  background: var(--m9-page);
  color: var(--m9-text);
  font: var(--m9-type-body);
}
button,
input,
select,
textarea {
  font-family: var(--m9-font-sans);
}
button,
a,
input,
select,
textarea,
summary,
[tabindex] {
  touch-action: manipulation;
}
button:disabled {
  opacity: 1;
  background: var(--m9-disabled-bg);
  color: var(--m9-text-secondary);
  cursor: default;
}
h1 {
  font: var(--m9-type-page-title);
}
h2 {
  font: var(--m9-type-section-title);
}
h3 {
  font: var(--m9-type-card-title);
}
small {
  font: var(--m9-type-caption);
}
.topbar {
  height: var(--m9-topbar-height);
  min-height: var(--m9-topbar-height);
  background: var(--m9-surface);
  backdrop-filter: none;
  border-bottom: var(--m9-border-default);
  gap: var(--m9-space-3);
  grid-template-columns: 126px minmax(0, 1fr) auto;
}
.main-nav {
  align-items: center;
}
.main-nav .nav-item {
  min-width: 76px;
  height: calc(var(--m9-topbar-height) - var(--m9-space-4));
  padding: var(--m9-space-2);
  border-radius: var(--m9-radius-sm);
  font: var(--m9-type-ui);
  font-weight: 700;
  gap: var(--m9-space-1-5);
}
.main-nav .nav-item::after {
  bottom: var(--m9-space-1);
}
.nav-item:hover,
.nav-item.is-active {
  color: var(--m9-primary);
}
.nav-item.is-active::after {
  background: var(--m9-gradient-brand);
}
.top-actions {
  gap: var(--m9-space-2);
}
.avatar[data-open-account] {
  display: inline-flex;
  align-items: center;
  gap: var(--m9-space-2);
  width: auto;
  height: 40px;
  min-width: 40px;
  padding: 0 var(--m9-space-2);
  border-radius: var(--m9-radius-md);
  background: var(--m9-surface);
  color: var(--m9-text);
}
.avatar[data-open-account] > span {
  position: static;
  width: auto;
  height: auto;
  background: none;
  border: 0;
}
.avatar[data-open-account] .header-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--m9-radius-pill);
  display: grid;
  place-items: center;
  background: var(--m9-surface-accent);
  color: var(--m9-brand-navy);
}
.header-user-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--m9-type-ui);
}
.icon-btn,
.cart-btn {
  border-radius: var(--m9-radius-md);
  box-shadow: none;
  border: var(--m9-border-default);
}
.cart-btn b {
  background: var(--m9-primary);
}
.notification-btn b {
  display: none;
}
.brand img,
.footer-brand img {
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
}
.main-nav .m9-icon,
.mobile-nav .m9-icon {
  width: 24px;
  height: 24px;
}
.m9-icon {
  color: inherit;
  stroke: currentColor;
}
.m9-icon-slot.is-brand .m9-icon,
.is-active .m9-icon {
  stroke: currentColor;
  color: var(--m9-primary);
}
button:hover .m9-icon,
button:focus-visible .m9-icon,
a:hover .m9-icon,
a:focus-visible .m9-icon {
  stroke: currentColor;
}
.m9-button:not(.m9-button-outline):hover .m9-icon,
.btn-primary:hover .m9-icon {
  color: inherit;
}
.m9-icon-slot {
  width: 24px;
  height: 24px;
}
.btn,
.primary-wide,
.shop-search-submit {
  border-radius: var(--m9-radius-md);
  font: var(--m9-type-ui);
  font-weight: 700;
}
.btn-primary,
.primary-wide,
.home-search button,
.shop-search-submit {
  background: var(--m9-primary) !important;
  color: var(--m9-on-primary) !important;
  border: 1px solid var(--m9-primary);
  box-shadow: none;
}
.btn-ghost,
.btn-secondary {
  background: var(--m9-surface);
  color: var(--m9-brand-navy);
  border: var(--m9-border-default);
  box-shadow: none;
}
.filter-chips button.is-active,
.inline-chips button.is-active {
  background: var(--m9-gradient-selected);
  color: var(--m9-primary);
  border-color: var(--m9-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--m9-space-1);
}
.market-hero,
.tv-feature {
  border-radius: var(--m9-radius-3xl);
}
.market-hero-copy h1 {
  font: var(--m9-type-display-hero);
}
.market-hero-shade,
.short-shade {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--m9-brand-navy) 92%, transparent),
    color-mix(in srgb, var(--m9-brand-navy) 45%, transparent)
  );
}
.market-hero-copy,
.tv-feature-copy,
.short-copy {
  color: var(--m9-on-primary);
}
.market-hero-copy p,
.market-hero-copy span,
.tv-feature-copy p,
.tv-feature-copy span,
.short-copy small {
  color: var(--m9-on-primary);
}
.product-card,
.flash-card,
.official-product,
.context-panel,
.transaction-panel,
.wallet-card,
.checkout-panel,
.cart-line {
  border: var(--m9-border-default);
  border-radius: var(--m9-radius-xl);
  box-shadow: var(--m9-shadow-surface);
  background: var(--m9-surface);
}
.m9-surface {
  padding: var(--m9-space-4);
}
#productGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--m9-space-3);
  overflow: visible;
}
[data-api-catalog-status] {
  grid-column: 1/-1;
}
[data-api-catalog-status]:empty {
  display: none;
}
[data-real-card] {
  display: flex;
  flex-direction: column;
  gap: var(--m9-space-2);
  min-width: 0;
}
[data-real-card] .product-visual {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
[data-real-card] .product-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-real-card] h3 {
  margin: 0;
  font: var(--m9-type-card-title);
}
.product-name-link {
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
  padding: 0;
  color: var(--m9-brand-navy);
  overflow-wrap: anywhere;
}
[data-real-card] .product-store {
  margin: 0;
  color: var(--m9-text-secondary);
  font: var(--m9-type-caption);
}
.product-price b {
  color: var(--m9-brand-navy);
  font: var(--m9-type-card-title);
}
[data-real-card] .m9-button {
  margin-top: auto;
}
.m9-badge-neutral {
  color: var(--m9-neutral);
  background: var(--m9-neutral-bg);
}
.m9-stock {
  align-self: start;
}
.example-label {
  position: static;
  margin: var(--m9-space-1) 0;
  max-width: 100%;
  font: var(--m9-type-caption);
  display: inline-flex;
  white-space: normal;
}
.m9-preview-disclosure {
  margin: 0 0 var(--m9-space-4);
  font: var(--m9-type-caption);
  background: var(--m9-neutral-bg);
  color: var(--m9-neutral);
  border-radius: var(--m9-radius-sm);
  padding: var(--m9-space-2) var(--m9-space-3);
}
.m9-empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  align-content: center;
  gap: var(--m9-space-3);
  min-height: 190px;
  padding: var(--m9-space-6);
  background: var(--m9-surface);
  border: var(--m9-border-default);
  border-radius: var(--m9-radius-xl);
}
.m9-empty-state > .m9-icon {
  width: 48px;
  height: 48px;
  color: var(--m9-primary);
}
.m9-empty-state h3,
.m9-empty-state p {
  margin: 0;
}
.m9-empty-state p {
  color: var(--m9-text-secondary);
  font: var(--m9-type-ui);
}
.catalog-skeleton {
  height: 190px;
}
.product-description {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.product-detail.m9-product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m9-space-6);
  padding: var(--m9-space-4);
}
.m9-product-detail .pdp-image {
  min-width: 0;
  display: grid;
  place-items: center;
  background: var(--m9-surface-soft);
  border-radius: var(--m9-radius-xl);
}
.m9-product-detail .pdp-image img {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
}
.m9-product-art .m9-icon {
  width: 48px;
  height: 48px;
}
.pdp-copy {
  min-width: 0;
}
.m9-attributes {
  table-layout: fixed;
  text-align: left;
}
.m9-attributes caption {
  text-align: left;
  font: var(--m9-type-label);
  padding-block: var(--m9-space-2);
  color: var(--m9-brand-navy);
}
.m9-attributes thead {
  height: var(--m9-space-10);
}
.m9-attributes th,
.m9-attributes td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
.m9-attributes tbody th {
  background: var(--m9-surface);
  font: var(--m9-type-dense);
  font-weight: 700;
}
.mobile-nav button.is-active {
  border-top: 0;
}
.mobile-nav button.is-active::before {
  top: var(--m9-space-1);
  height: var(--m9-space-0-5);
  background: var(--m9-gradient-brand);
}
.cart-line {
  margin-bottom: var(--m9-space-3);
}
.cart-line-copy {
  display: grid;
  gap: var(--m9-space-2);
  min-width: 0;
}
.cart-line-copy b {
  overflow-wrap: anywhere;
}
.cart-summary .m9-button {
  width: 100%;
  margin-top: var(--m9-space-3);
}
.m9-inline-error {
  color: var(--m9-danger);
  font: var(--m9-type-ui);
}
.site-footer.market-footer {
  color: var(--m9-on-primary);
  background: var(--m9-brand-navy);
  border-color: var(--m9-border);
}
.market-footer p,
.market-footer span,
.market-footer .footer-section h2,
.market-footer .footer-section a,
.market-footer .footer-section button,
.market-footer .footer-marks-panel h2 {
  color: var(--m9-on-primary);
}
.market-footer .footer-social-icon {
  width: 24px;
  height: 24px;
  color: var(--m9-on-primary);
}

.site-footer .footer-demo-note {
  color: var(--m9-on-primary);
}
.toast {
  background: var(--m9-brand-navy);
  color: var(--m9-on-primary);
  display: flex;
  gap: var(--m9-space-2);
  align-items: center;
}
.toast .m9-icon {
  color: inherit;
}
.modal-card {
  max-width: calc(100vw - 28px);
  border-radius: var(--m9-radius-xl);
  box-shadow: var(--m9-shadow-popover);
}
.modal-scrim,
.side-scrim {
  background: color-mix(in srgb, var(--m9-brand-navy) 50%, transparent);
}
.side-sheet {
  max-width: calc(100vw - 28px);
}
.side-sheet button[data-close-side],
.modal-close {
  min-width: 40px;
  min-height: 40px;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-radius: var(--m9-radius-md);
  min-height: var(--m9-control-min-height);
}
.m9-search-label {
  font: var(--m9-type-label);
}
.m9-table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font: var(--m9-type-dense);
}
th,
td {
  padding: var(--m9-space-2);
  border-bottom: 1px solid var(--m9-border-soft);
}
th {
  background: var(--m9-surface-soft);
  font: var(--m9-type-caption);
  font-weight: 800;
}
@media (max-width: 1380px) {
  .topbar {
    padding-inline: var(--m9-space-4);
    grid-template-columns: 115px minmax(0, 1fr) auto;
  }
  .main-nav .nav-item {
    min-width: 64px;
  }
  .brand {
    width: 115px;
  }
  .header-user-name {
    max-width: 100px;
  }
}
@media (max-width: 1120px) {
  .header-user-name {
    display: none;
  }
  .topbar {
    gap: var(--m9-space-2);
  }
  .footer-directory {
    gap: var(--m9-space-4);
  }
}
@media (max-width: 820px) {
  .main-nav {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr auto;
    padding-inline: var(--m9-space-3);
  }
  .top-actions {
    gap: var(--m9-space-1-5);
  }
  button,
  a[href],
  input:not([type="range"]),
  select,
  textarea,
  summary,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-inline: var(--m9-space-1-5);
    background: var(--m9-surface);
  }
  .mobile-nav button {
    min-width: 0;
    height: calc(var(--m9-space-12) + var(--m9-space-2));
    min-height: 56px;
    font: var(--m9-type-caption);
    padding: var(--m9-space-1);
  }
  .mobile-nav button.is-active {
    color: var(--m9-primary);
    background: var(--m9-gradient-selected);
  }
  #productGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-detail.m9-product-detail {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .m9-product-detail .pdp-image img {
    max-height: 300px;
  }
  .side-sheet button[data-close-side],
  .modal-close {
    min-height: 44px;
    min-width: 44px;
  }
  .shop-slide-arrow {
    min-width: 44px;
  }
  .shop-slide-controls {
    gap: var(--m9-space-1);
  }
  .shop-slide-controls > button {
    width: 44px;
    height: 44px;
  }
  .shop-search-submit {
    padding-inline: var(--m9-space-3);
  }
  .account-header-actions {
    gap: var(--m9-space-2);
  }
}
@media (max-width: 560px) {
  #productGrid {
    grid-template-columns: 1fr;
  }
  .home-search {
    flex-wrap: wrap;
  }
  .home-search label {
    width: 100%;
  }
  .home-search input {
    flex: 1 1 100%;
  }
  .home-search button {
    width: 100%;
  }
  .top-actions .notification-btn {
    display: none;
  }
  .brand {
    width: 110px;
  }
  .shop-search-area {
    max-width: 100%;
  }
  .shop-search-form {
    flex-wrap: wrap;
  }
  .shop-search-field {
    flex: 1 1 100%;
  }
  .shop-search-submit {
    flex: 1;
  }
  [data-real-card] .product-visual {
    height: 230px;
    aspect-ratio: auto;
  }
  .footer-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .account-header .back-home {
    font-size: 12px;
  }
  .market-hero-copy h1 {
    font: var(--m9-type-page-title);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.view > .m9-preview-disclosure {
  grid-column: 1/-1;
  width: 100%;
}
.m9-page-header {
  margin-bottom: var(--m9-space-4);
}
@media (max-width: 820px) {
  .home-search label {
    display: block !important;
  }
  .shop-search-field .m9-search-label {
    display: block;
    flex-basis: 100%;
  }
  .shop-search-field:has(.m9-search-label) {
    flex-wrap: wrap;
  }
}
.example-label {
  background: var(--m9-neutral-bg) !important;
  color: var(--m9-neutral) !important;
}
.hero-shop-card > span,
.hero-shop-card strong,
.hero-shop-card small {
  color: var(--m9-text-secondary);
}
.m9-icon-slot > .m9-icon {
  width: 20px !important;
  height: 20px !important;
}
.main-nav .m9-icon-slot > .m9-icon,
.mobile-nav .m9-icon-slot > .m9-icon {
  width: 24px !important;
  height: 24px !important;
}
.product-card:hover,
.flash-card:hover {
  transform: translateY(-2px);
}
body {
  min-width: 0;
}
button,
a[href],
summary,
[role="button"] {
  min-height: 40px;
}
.brand {
  min-height: 40px;
  align-items: center;
}
.shop-slide-pause > .m9-icon {
  width: 20px;
  height: 20px;
}
.m9-preview-disclosure {
  align-self: start;
}
.modal-scrim,
.side-scrim {
  backdrop-filter: none;
}
@media (max-width: 820px) {
  body button,
  body a[href],
  body input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea,
  body summary,
  body [role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  body .mobile-nav button {
    min-width: 44px !important;
    min-height: 56px !important;
  }
  body .market-footer .footer-section a,
  body .market-footer .footer-section button {
    min-height: 44px !important;
  }
}

/* Explicit contrast and type roles across inherited consumer components. */
.home-show-card .content-commerce-dot {
  background: var(--m9-info-bg);
  color: var(--m9-info);
}
.product-price del,
.shop-utility span,
.catalog-toolbar span,
.shop-asset-credit span,
.poster-info small {
  color: var(--m9-text-secondary);
}
.save-product.is-saved {
  background: var(--m9-primary);
  color: var(--m9-on-primary);
}
.m9-product-detail .m9-button {
  background: var(--m9-primary) !important;
  color: var(--m9-on-primary) !important;
}
.avatar[data-open-account] .header-avatar {
  font: var(--m9-type-ui);
  font-weight: 700;
}
.coin-mini {
  background: var(--m9-warning-bg);
  color: var(--m9-warning);
}
h2 {
  font: var(--m9-type-section-title);
}
h3 {
  font: var(--m9-type-card-title);
}
.hero-copy h1,
.tv-feature-copy h1,
.shop-hero h1 {
  font: var(--m9-type-display-hero);
}
@media (max-width: 560px) {
  .hero-copy h1,
  .tv-feature-copy h1,
  .shop-hero h1 {
    font: var(--m9-type-page-title);
  }
}
@media (max-width: 820px) {
  body input[type="range"] {
    min-height: 44px !important;
  }
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]),
  .switch {
    min-height: 44px;
    align-items: center;
  }
}

/* Legible media and financial surfaces: gradient stays an indicator. */
.wallet-hero {
  background: var(--m9-brand-navy) !important;
  color: var(--m9-on-primary);
}
.wallet-balance > span,
.wallet-substats {
  color: var(--m9-on-primary) !important;
}
.wallet-balance > span > button .m9-icon {
  color: var(--m9-on-primary);
}
.short-actions > button > span,
.sound-disc,
.poster-quality,
.scene-media > span {
  background: var(--m9-brand-navy);
  color: var(--m9-on-primary);
}
.short-actions .is-liked .m9-icon {
  color: var(--m9-on-primary);
  stroke: currentColor;
}
.player-stage::after {
  background: linear-gradient(0deg, var(--m9-brand-navy), transparent);
}
.official-editorial > span,
.official-editorial > small {
  color: var(--m9-on-primary);
}
.shop-trust-row small {
  color: var(--m9-text-secondary);
}
.conversation-item.is-active {
  background: var(--m9-gradient-selected);
  color: var(--m9-text);
  border-inline-start: 3px solid var(--m9-primary);
}
.conversation-item.is-active small,
.conversation-item.is-active .conversation-meta {
  color: var(--m9-text-secondary);
}

/* TV contrast belongs behind copy; the artwork remains visible on the right. */
.tv-feature-shade {
  background: linear-gradient(
    90deg,
    var(--m9-brand-navy),
    color-mix(in srgb, var(--m9-brand-navy) 78%, transparent) 35%,
    transparent 72%
  );
}
@media (max-width: 820px) {
  .tv-feature-image img {
    object-position: 60% 50%;
  }
  .tv-feature-shade {
    background: linear-gradient(
      0deg,
      var(--m9-brand-navy),
      color-mix(in srgb, var(--m9-brand-navy) 85%, transparent) 35%,
      transparent 80%
    );
  }
}

.tv-main .poster-card {
  display: flex;
  flex-direction: column;
}
.tv-main .poster-info {
  flex: 1;
  width: 100%;
}