:root,
:root[data-theme="light"] {
  --bg: #f7f5f2;
  --page: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f5f2ee;
  --surface-3: #fff7f1;
  --line: rgba(24, 32, 44, 0.11);
  --text: #111827;
  --muted: #657084;
  --soft: #374151;
  --accent: #ff5a1f;
  --accent-2: #ff8a1d;
  --accent-soft: rgba(255, 90, 31, 0.1);
  --accent-line: rgba(255, 90, 31, 0.28);
  --storefront-primary: var(--accent);
  --storefront-secondary: #2563eb;
  --storefront-brand-color: var(--accent);
  --storefront-secondary-color: var(--storefront-secondary);
  --storefront-accent: var(--accent-2);
  --storefront-primary-rgb: 255 90 31;
  --storefront-secondary-rgb: 37 99 235;
  --storefront-highlight-rgb: 255 138 29;
  --storefront-accent-rgb: 255 90 31;
  --api-token-bg: rgba(255, 90, 31, 0.11);
  --api-token-border: rgba(255, 90, 31, 0.32);
  --api-token-text: #b83b0f;
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --warning-soft: rgba(245, 158, 11, 0.13);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --shadow: 0 22px 55px rgba(31, 41, 55, 0.08);
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --sidebar-bg: rgba(255, 255, 255, 0.7);
  --input-bg: #ffffff;
}

:root[data-theme="dark"] {
  --bg: #071019;
  --page: #09131d;
  --surface: #101b27;
  --surface-2: #142232;
  --surface-3: #1c2635;
  --line: rgba(203, 213, 225, 0.13);
  --text: #f8fafc;
  --muted: #9aa9bc;
  --soft: #d7dee8;
  --accent: #ff6a1a;
  --accent-2: #ff8a22;
  --accent-soft: rgba(255, 106, 26, 0.14);
  --accent-line: rgba(255, 106, 26, 0.38);
  --storefront-primary: var(--accent);
  --storefront-secondary: #2563eb;
  --storefront-brand-color: var(--accent);
  --storefront-secondary-color: var(--storefront-secondary);
  --storefront-accent: var(--accent-2);
  --storefront-primary-rgb: 255 106 26;
  --storefront-secondary-rgb: 37 99 235;
  --storefront-highlight-rgb: 255 138 34;
  --storefront-accent-rgb: 255 106 26;
  --api-token-bg: rgba(255, 138, 34, 0.14);
  --api-token-border: rgba(255, 138, 34, 0.42);
  --api-token-text: #ffb46b;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.13);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.13);
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
  --topbar-bg: rgba(7, 16, 25, 0.9);
  --sidebar-bg: rgba(10, 22, 34, 0.72);
  --input-bg: #0b1621;
}

/* === CSS ownership index ===
 * Dashboard styles: public/store/modules/developer/dashboard.js
 * Products styles: public/store/modules/developer/products.js
 * Licensing styles: public/store/modules/developer/licensing.js
 * Email marketing styles: public/store/modules/developer/marketing.js
 * Marketplace styles: public/store/modules/developer/products.js
 * Library styles: public/store/modules/library/index.js
 * Storefront styles: public/store/modules/storefront/index.js
 * Checkout/auth styles: public/store/store.js
 * Shared shell, tokens, and controls: public/store/store.css
 */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page);
}

/* Website Builder connected-workspace redesign */
.developer-main:has(.website-builder-v1-form) {
  background:
    radial-gradient(circle at 24% 8%, rgba(0, 173, 181, 0.08), transparent 34rem),
    radial-gradient(circle at 82% 16%, rgba(255, 106, 26, 0.07), transparent 32rem),
    #07111b;
}

.website-builder-v1-form {
  color: #f7fbff;
}

.website-builder-v1-shell {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 18px 24px 28px;
}

.website-builder-v1-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(420px, auto);
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding: 14px 18px;
  border: 1px solid rgba(120, 151, 179, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 31, 46, 0.96), rgba(8, 20, 32, 0.96));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}

.website-builder-v1-store-summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.website-builder-v1-store-summary strong {
  font-size: 1rem;
  color: #f8fbff;
}

.website-builder-v1-store-summary span,
.website-builder-status-badge,
.website-builder-behavior-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid rgba(20, 184, 166, 0.55);
  border-radius: 999px;
  padding: 5px 12px;
  color: #27e6a6;
  background: rgba(20, 184, 166, 0.12);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.website-builder-v1-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.website-builder-v1-actions > span {
  color: #2fe08f;
  font-size: 0.82rem;
  font-weight: 800;
}

.website-builder-v1-device-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, 44px);
  overflow: hidden;
  border: 1px solid rgba(120, 151, 179, 0.28);
  border-radius: 8px;
  background: rgba(3, 12, 21, 0.72);
}

.website-builder-v1-device-tabs button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid rgba(120, 151, 179, 0.2);
  color: transparent;
  background: transparent;
  position: relative;
}

.website-builder-v1-device-tabs button:last-child {
  border-right: 0;
}

.website-builder-v1-device-tabs button::before {
  content: "";
  position: absolute;
  inset: 10px 14px;
  border: 1px solid #9fb1c4;
  border-radius: 3px;
}

.website-builder-v1-device-tabs button:nth-child(2)::before {
  inset: 9px 15px;
}

.website-builder-v1-device-tabs button:nth-child(3)::before {
  inset: 8px 17px;
}

.website-builder-v1-device-tabs button.active {
  background: rgba(255, 106, 26, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.5);
}

.website-builder-v1-avatar,
.website-builder-v1-avatar span,
.website-builder-v1-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.website-builder-v1-avatar {
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 151, 179, 0.3);
  background: rgba(12, 28, 44, 0.9);
}

.website-builder-v1-avatar span {
  display: block;
  background: linear-gradient(135deg, #f8fbff, #7f91a7);
}

.website-builder-v1-body {
  padding-top: 22px;
}

.website-builder-v1-page-header {
  max-width: 980px;
  margin-bottom: 22px;
}

.website-builder-v1-page-header h1 {
  margin: 8px 0 8px;
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: #f8fbff;
}

.website-builder-v1-page-header p {
  margin: 0;
  color: #9fb1c4;
  font-size: 1.02rem;
  line-height: 1.45;
}

.website-builder-pages-layout,
.website-builder-v1-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
}

.website-builder-pages-main,
.website-builder-v1-section > main {
  min-width: 0;
}

.website-builder-connected-card,
.website-builder-selected-page,
.website-builder-page-selector,
.website-template-page-panel,
.website-builder-usage-panel,
.website-builder-v1-sidepanel section,
.website-builder-summary-cards article,
.website-builder-navigation-preview,
.website-builder-navigation-list,
.website-builder-embedded-nav {
  border: 1px solid rgba(120, 151, 179, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(16, 33, 49, 0.95), rgba(9, 20, 32, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.website-builder-connected-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 22px;
  margin-bottom: 16px;
}

.website-builder-connected-card h2,
.website-builder-selected-page h2,
.website-builder-v1-panel-header h2 {
  margin: 10px 0 8px;
  color: #f8fbff;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: 0;
}

.website-builder-connected-card p,
.website-builder-selected-page p,
.website-builder-v1-panel-header span {
  color: #9fb1c4;
  line-height: 1.45;
}

.website-builder-connected-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.website-builder-connected-facts div,
.website-builder-usage-grid article,
.website-builder-route-links article {
  padding: 12px;
  border: 1px solid rgba(120, 151, 179, 0.18);
  border-radius: 8px;
  background: rgba(4, 15, 26, 0.58);
}

.website-builder-connected-facts dt,
.website-builder-usage-grid span,
.website-builder-route-links span {
  color: #7f91a7;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.website-builder-connected-facts dd,
.website-builder-usage-grid strong {
  margin: 5px 0 0;
  color: #dce8f4;
  font-weight: 800;
}

.website-builder-connected-actions,
.website-builder-selected-actions,
.website-builder-context-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.website-builder-page-selector {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.website-builder-page-group h3 {
  margin: 0 0 10px;
  color: #7f91a7;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.website-builder-page-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.website-builder-page-chip {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(120, 151, 179, 0.22);
  border-radius: 8px;
  color: #dce8f4;
  background: rgba(5, 18, 30, 0.72);
  text-decoration: none;
}

.website-builder-page-chip > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(120, 151, 179, 0.28);
  border-radius: 8px;
  color: #f8fbff;
  font-weight: 900;
}

.website-builder-page-chip strong,
.website-builder-page-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-page-chip small {
  color: #9fb1c4;
}

.website-builder-page-chip.is-active {
  border-color: rgba(255, 106, 26, 0.9);
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(19, 31, 45, 0.9));
  box-shadow: inset 4px 0 #ff6a1a;
}

.website-builder-selected-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 22px;
  margin-bottom: 14px;
}

.website-builder-selected-page code,
.website-builder-route-links code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9bdcff;
}

.website-builder-page-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(120, 151, 179, 0.24);
}

.website-builder-page-tabs a {
  padding: 12px 16px;
  color: #9fb1c4;
  font-weight: 850;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.website-builder-page-tabs a.active {
  color: #ff7a1f;
  border-bottom-color: #ff6a1a;
}

.website-template-page-panel {
  padding: 20px;
}

.website-template-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.website-template-page-header h2 {
  margin: 0 0 6px;
}

.website-home-template-gallery {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.website-builder-usage-panel {
  margin-top: 16px;
  padding: 18px;
}

.website-builder-usage-panel h3,
.website-builder-v1-sidepanel h3,
.website-builder-navigation-list h3,
.website-builder-embedded-nav h3 {
  margin: 0 0 12px;
  color: #f8fbff;
}

.website-builder-usage-grid,
.website-builder-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.website-builder-context-panel,
.website-builder-v1-sidepanel {
  display: grid;
  gap: 14px;
}

.website-builder-context-panel section {
  padding: 18px;
  border: 1px solid rgba(120, 151, 179, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(16, 33, 49, 0.94), rgba(8, 18, 30, 0.96));
}

.website-builder-context-panel p,
.website-builder-v1-sidepanel p,
.website-builder-context-panel dd {
  color: #9fb1c4;
  line-height: 1.45;
}

.website-builder-context-panel dl,
.website-builder-v1-sidepanel dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.website-builder-context-panel dl div,
.website-builder-v1-sidepanel dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.website-builder-context-panel dt,
.website-builder-v1-sidepanel dt {
  color: #dce8f4;
  font-weight: 850;
}

.website-builder-context-panel a {
  display: block;
  margin-top: 8px;
  color: #61d1ff;
}

.website-builder-v1-panel-header {
  margin-bottom: 18px;
}

.website-builder-summary-cards {
  margin-bottom: 16px;
}

.website-builder-summary-cards article {
  padding: 16px;
}

.website-builder-summary-cards span {
  display: block;
  color: #7f91a7;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.website-builder-summary-cards strong {
  display: block;
  margin-top: 6px;
  color: #f8fbff;
  font-size: 1.45rem;
}

.website-builder-product-head,
.website-builder-product-row {
  grid-template-columns: minmax(240px, 1.5fr) minmax(110px, 0.75fr) minmax(130px, 0.8fr) minmax(170px, 1fr) 90px minmax(190px, 1fr);
}

.website-builder-product-row {
  align-items: center;
}

.website-builder-toggle,
.website-builder-action-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.website-builder-toggle input,
.website-builder-action-toggle input {
  width: 42px;
  height: 24px;
  accent-color: #22c55e;
}

.website-builder-toggle strong,
.website-builder-action-toggle strong {
  color: #f8fbff;
}

.website-builder-product-placement select,
.website-builder-product-order input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(120, 151, 179, 0.28);
  border-radius: 8px;
  color: #f8fbff;
  background: rgba(5, 18, 30, 0.9);
}

.website-builder-navigation-preview {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  margin-bottom: 16px;
}

.website-builder-navigation-preview div,
.website-builder-navigation-preview nav,
.website-builder-compact-nav-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.website-builder-navigation-preview img,
.website-builder-navigation-preview div > span:first-child {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.website-builder-navigation-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 16px;
}

.website-builder-navigation-list,
.website-builder-embedded-nav {
  padding: 18px;
  margin-bottom: 16px;
}

.website-builder-navigation-row {
  display: grid;
  grid-template-columns: 34px 22px minmax(120px, 1fr) minmax(110px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(120, 151, 179, 0.18);
  border-radius: 8px;
  background: rgba(4, 15, 26, 0.52);
}

.website-builder-navigation-row + .website-builder-navigation-row,
.website-builder-action-toggle + .website-builder-action-toggle {
  margin-top: 8px;
}

.website-builder-navigation-row small,
.website-builder-action-toggle small,
.website-builder-embedded-nav p {
  color: #9fb1c4;
}

.website-builder-navigation-row > span:last-child {
  color: #7f91a7;
  font-weight: 850;
}

.website-builder-navigation-row > span.ready {
  color: #27e6a6;
}

.website-builder-action-toggle {
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(120, 151, 179, 0.18);
  border-radius: 8px;
  background: rgba(4, 15, 26, 0.52);
}

.website-builder-embedded-nav header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.website-builder-embedded-nav header > span {
  color: #27e6a6;
  font-weight: 850;
}

.website-builder-display-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.website-builder-display-modes label {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(120, 151, 179, 0.2);
  border-radius: 8px;
  background: rgba(4, 15, 26, 0.54);
}

.website-builder-display-modes label.active {
  border-color: rgba(255, 106, 26, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, 0.3);
}

.website-builder-display-modes code {
  color: #9bdcff;
}

.website-builder-compact-nav-preview {
  padding: 14px;
  border: 1px solid rgba(120, 151, 179, 0.2);
  border-radius: 8px;
  background: rgba(4, 15, 26, 0.7);
}

.website-builder-compact-nav-preview span,
.website-builder-compact-nav-preview strong {
  color: #f8fbff;
}

.website-builder-route-links {
  display: grid;
  gap: 8px;
}

.website-builder-route-links article {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1180px) {
  .website-builder-v1-topbar,
  .website-builder-pages-layout,
  .website-builder-v1-section,
  .website-builder-navigation-editor {
    grid-template-columns: 1fr;
  }

  .website-builder-v1-actions,
  .website-builder-connected-actions,
  .website-builder-selected-actions {
    justify-content: flex-start;
  }

  .website-builder-connected-facts,
  .website-builder-display-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .website-builder-v1-shell {
    padding: 12px;
  }

  .website-builder-connected-card,
  .website-builder-selected-page,
  .website-builder-navigation-preview {
    grid-template-columns: 1fr;
  }

  .website-builder-connected-facts,
  .website-builder-display-modes {
    grid-template-columns: 1fr;
  }

  .website-builder-product-head {
    display: none;
  }

  .website-builder-product-row,
  .website-builder-route-links article,
  .website-builder-navigation-row {
    grid-template-columns: 1fr;
  }
}

:root[data-soundsync-embed-app="true"],
:root[data-soundsync-embed-app="true"] body {
  background: transparent;
}

:root[data-soundsync-embed-app="true"] .store-topbar,
:root[data-soundsync-embed-shell="content"] .store-topbar {
  display: none !important;
}

:root[data-soundsync-embed-app="true"] .store-app {
  min-height: 100vh;
  padding: 0;
}

:root[data-soundsync-embed-app="true"] .store-app > :not(.developer-shell) {
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.store-topbar {
  align-items: center;
  backdrop-filter: blur(16px);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(18px, 3vw, 34px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.store-topbar[hidden] {
  display: none !important;
}

.store-brand {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  min-width: 0;
}

.store-brand-mark {
  align-items: center;
  background: transparent;
  border-radius: 10px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  width: 42px;
}

.store-brand-mark img {
  display: block;
  height: 34px;
  object-fit: contain;
  width: 34px;
}

.store-brand strong,
.store-brand small {
  display: block;
  line-height: 1.1;
}

.store-brand small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 4px;
  text-transform: uppercase;
}

.store-topbar-actions {
  align-items: center;
  display: flex;
  gap: 18px;
  min-width: 0;
}

.store-nav {
  align-items: center;
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}

.store-nav a {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  padding: 0;
}

.theme-toggle:focus-visible,
.store-button:focus-visible,
.store-avatar:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-toggle-track {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  display: inline-flex;
  height: 24px;
  padding: 2px;
  width: 44px;
}

.theme-toggle-track span {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(255, 90, 31, 0.26);
  display: block;
  height: 18px;
  transform: translateX(0);
  transition: transform 0.18s ease;
  width: 18px;
}

:root[data-theme="dark"] .theme-toggle-track span {
  transform: translateX(20px);
}

.store-avatar {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.store-app {
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 0;
}

[data-test-mode-banner-root]:empty {
  display: none;
}

.test-mode-banner,
.test-mode-inline-notice {
  align-items: center;
  background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface) 22%);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  color: var(--soft);
  display: flex;
  font-size: 13px;
  font-weight: 650;
  gap: 9px;
  line-height: 1.35;
  min-width: 0;
}

.test-mode-banner {
  border-left: 0;
  border-right: 0;
  justify-content: center;
  min-height: 36px;
  padding: 7px clamp(16px, 3vw, 34px);
  text-align: center;
}

.test-mode-inline-notice {
  border-radius: 8px;
  justify-content: flex-start;
  padding: 10px 12px;
}

.test-mode-banner-icon {
  align-items: center;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
  border-radius: 999px;
  color: var(--warning);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.test-data-label {
  align-items: center;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: 999px;
  color: var(--warning);
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  justify-self: start;
  letter-spacing: 0;
  line-height: 1;
  min-height: 24px;
  padding: 0 9px;
  text-transform: uppercase;
}

.store-hero {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 26px;
  min-width: 0;
}

.store-eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.store-hero h1,
.product-detail h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.08;
  margin: 0;
  max-width: 830px;
}

.store-hero p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 12px 0 0;
  max-width: 720px;
}

.store-summary {
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 190px;
  padding: 16px;
}

.store-summary strong {
  display: block;
  font-size: 28px;
}

.store-summary span {
  color: var(--muted);
  font-size: 13px;
}

.store-controls {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr 1fr 0.9fr 0.9fr auto;
  margin-bottom: 24px;
  padding: 14px;
}

.store-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.store-field label,
.store-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.store-field input,
.store-field select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  outline: none;
  padding: 0 12px;
  width: 100%;
}

.store-field input:focus,
.store-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.store-price-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.store-button {
  align-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(255, 90, 31, 0.18);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 780;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.store-button.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--text);
}

.store-button.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--soft);
}

.store-button:hover:not(:disabled) {
  border-color: var(--accent-line);
  box-shadow: 0 12px 26px rgba(255, 90, 31, 0.23);
  transform: translateY(-1px);
}

.store-button.secondary:hover:not(:disabled),
.store-button.ghost:hover:not(:disabled) {
  background: var(--accent-soft);
  box-shadow: none;
}

.store-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.store-actions {
  align-self: end;
  display: flex;
  gap: 8px;
}

.store-actions.center {
  align-self: center;
  justify-content: center;
}

.store-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 360px));
  justify-content: start;
  min-width: 0;
}

/* === Products domain styles ===
 * Owner: public/store/modules/developer/products.js
 * Notes: public marketplace product cards/details are shared with storefront compatibility renderers.
 */

.product-card {
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.product-card-media,
.product-detail-media {
  align-items: center;
  background: linear-gradient(135deg, #101826, #182438);
  color: rgba(244, 247, 251, 0.5);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-card-media {
  aspect-ratio: 16 / 10;
}

.product-card-media img,
.product-detail-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.product-card h2 {
  font-size: 20px;
  line-height: 1.18;
  margin: 0;
}

.product-card p,
.product-detail p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.product-meta {
  align-items: center;
  color: var(--soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.product-price {
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  margin-top: auto;
}

.store-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.store-pill {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  padding: 5px 9px;
}

.product-card-footer {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 4px;
}

.product-card-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Balanced storefront layout rules: repeated cards and split panels keep stable tracks
   so variable text does not move prices, buttons, or neighboring columns around. */
.storefront-public-site :is(.product-card, .v1-home-product-card, .v1-immersive-product-card, .showcase-product-card, .v1-deals-board article, .v1-review-card, .v1-dashboard-grid article, .v1-support-grid article, .v1-action-card-grid article, .v1-tight-metrics article) {
  height: 100%;
  min-width: 0;
}

.storefront-public-site .product-card {
  min-height: 520px;
}

.storefront-public-site .product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.storefront-public-site .product-card h2,
.storefront-public-site :is(.v1-home-product-card strong, .v1-immersive-product-card strong, .showcase-product-body h2, .v1-deals-board h2, .v1-review-card strong, .v1-dashboard-grid h2, .v1-support-grid h2, .v1-action-card-grid h2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storefront-public-site .product-card h2,
.storefront-public-site :is(.v1-deals-board h2, .v1-dashboard-grid h2, .v1-support-grid h2, .v1-action-card-grid h2) {
  -webkit-line-clamp: 2;
  min-height: 2.36em;
}

.storefront-public-site :is(.product-card-body > p, .v1-review-card p, .v1-dashboard-grid p, .v1-support-grid p, .v1-action-card-grid p, .showcase-product-body p) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storefront-public-site .product-card-body > p {
  -webkit-line-clamp: 4;
  min-height: 6.2em;
}

.storefront-public-site :is(.v1-review-card p, .v1-dashboard-grid p, .v1-support-grid p, .v1-action-card-grid p, .showcase-product-body p) {
  -webkit-line-clamp: 3;
  min-height: 4.35em;
}

.storefront-public-site .store-pills {
  align-content: start;
  max-height: 64px;
  min-height: 64px;
  overflow: hidden;
}

.storefront-public-site .store-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storefront-public-site .product-card-footer,
.storefront-public-site :is(.showcase-product-footer, .v1-home-card-price, .v1-immersive-product-card .v1-price) {
  margin-top: auto;
}

.storefront-public-site .product-card-actions {
  min-width: 136px;
}

.storefront-public-site :is(.v1-cinematic-hero, .v1-modern-split-hero, .v1-editorial-feature, .v1-generic-hero, .v1-checkout-layout, .v1-cart-drawer-preview, .showcase-hero, .showcase-split, .showcase-about-library, .flow-hero, .flow-about-library) {
  align-items: stretch;
}

.storefront-public-site :is(.v1-cinematic-copy, .v1-modern-split-hero > div:first-child, .v1-editorial-feature > div, .v1-generic-hero > div, .v1-checkout-layout > main, .v1-checkout-layout > aside, .v1-cart-drawer-preview > aside, .v1-cart-drawer-preview > main, .showcase-hero-copy, .showcase-guidance, .showcase-demo-center, .showcase-about-card, .showcase-library-card, .flow-hero-content, .flow-hero-panel) {
  align-content: start;
  min-height: 0;
  min-width: 0;
}

.storefront-public-site :is(.v1-cinematic-copy > p:not(.store-eyebrow), .v1-modern-split-hero p, .v1-editorial-feature p, .v1-generic-hero p, .v1-checkout-layout p, .v1-cart-drawer-preview p, .showcase-hero-copy > p:not(.store-eyebrow), .showcase-guidance p, .showcase-demo-center p, .showcase-about-card p, .showcase-library-card p, .flow-hero p) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storefront-public-site :is(.v1-cinematic-copy .storefront-site-actions, .v1-modern-split-hero .storefront-site-actions, .v1-editorial-feature .storefront-site-actions, .v1-generic-hero .storefront-site-actions, .v1-checkout-layout .store-button, .v1-cart-drawer-preview .store-button) {
  margin-top: auto;
}

.checkout-actions {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(86px, 0.55fr) 1fr 1fr;
  width: 100%;
}

.checkout-actions.compact {
  align-items: end;
  grid-template-columns: 76px minmax(94px, auto) minmax(94px, auto);
}

.checkout-quantity {
  display: grid;
  gap: 5px;
}

.checkout-quantity span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-quantity input {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  min-height: 40px;
  padding: 0 10px;
  width: 100%;
}

.checkout-actions.compact .checkout-quantity input {
  min-height: 36px;
}

.store-cart-bar {
  align-items: center;
  background: rgba(8, 15, 24, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  bottom: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  left: max(18px, env(safe-area-inset-left));
  padding: 14px;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  z-index: 60;
}

.store-cart-bar strong,
.store-cart-bar span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-cart-bar span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.store-link {
  color: var(--accent);
  font-weight: 800;
}

.store-button.compact {
  font-size: 13px;
  min-height: 36px;
  padding: 0 12px;
}

.store-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.store-pagination span {
  color: var(--muted);
  min-width: 128px;
  text-align: center;
}

.marketplace-developer-page {
  display: grid;
  gap: 24px;
}

.marketplace-developer-hero {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.16), rgba(24, 36, 56, 0.56)),
    rgba(15, 21, 32, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  overflow: hidden;
  padding: clamp(22px, 4vw, 42px);
}

.marketplace-developer-title {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 10px 0 12px;
  min-width: 0;
}

.marketplace-developer-title img,
.marketplace-developer-title .store-brand-mark {
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  flex: 0 0 auto;
  height: 72px;
  object-fit: cover;
  width: 72px;
}

.marketplace-developer-title h1 {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.95;
  margin: 0;
  overflow-wrap: anywhere;
}

.marketplace-developer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-pill.muted {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
  color: var(--soft);
}

.marketplace-developer-section {
  display: grid;
  gap: 14px;
}

.marketplace-developer-info {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-meta a {
  color: inherit;
  text-decoration: none;
}

.product-meta a:hover {
  color: var(--accent);
}

.store-state {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: 280px;
  padding: 32px;
  text-align: center;
}

.store-state h2 {
  color: var(--text);
  margin: 0;
}

.store-state p {
  margin: 0;
  max-width: 540px;
}

.store-spinner {
  animation: store-spin 0.9s linear infinite;
  border: 3px solid rgba(244, 247, 251, 0.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  height: 34px;
  width: 34px;
}

.store-error {
  color: var(--danger);
}

.product-detail {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.05fr) minmax(310px, 0.7fr);
  min-width: 0;
}

.product-detail.developer-detail {
  justify-self: start;
  max-width: 920px;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.product-detail-media {
  aspect-ratio: 16 / 11;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.product-detail-panel {
  align-self: start;
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 20px;
}

.product-page {
  display: grid;
  gap: 24px;
  margin: 0 auto;
  max-width: 1500px;
  padding: 28px clamp(24px, 3vw, 48px) 34px;
}

.product-back-link {
  justify-self: start;
  color: var(--accent);
  font-size: 14px;
  font-weight: 750;
}

.product-hero-premium {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(560px, 1.42fr) minmax(280px, 0.78fr) minmax(330px, 0.58fr);
}

.product-media-column,
.product-content-main,
.product-content-side,
.product-side-grid {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.product-media-column {
  grid-template-columns: 86px minmax(0, 1fr);
}

.product-media-stage {
  align-items: center;
  aspect-ratio: auto;
  background:
    radial-gradient(circle at 58% 28%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, transparent), transparent 34%),
    radial-gradient(circle at 30% 16%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 24%, transparent), transparent 32%),
    linear-gradient(135deg, #08111c, #101b2a 58%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 24%, #101b2a));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  display: flex;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  justify-content: center;
  min-height: 418px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.product-media-stage img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-media-stage span {
  color: rgba(248, 250, 252, 0.74);
  font-weight: 850;
}

.product-play-overlay {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  border: 0;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  color: var(--storefront-brand-color, var(--accent));
  display: inline-flex;
  font-size: 26px;
  height: 70px;
  justify-content: center;
  left: 50%;
  padding-left: 4px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  z-index: 2;
  cursor: pointer;
}

.product-inline-video {
  grid-column: 1 / -1;
  margin-top: 14px;
  width: 100%;
}

.product-media-stage .product-inline-video {
  background: #020617;
  inset: 0;
  margin: 0;
  position: absolute;
  z-index: 4;
}

.product-media-controls {
  align-items: center;
  bottom: 14px;
  color: #fff;
  display: grid;
  font-size: 13px;
  gap: 12px;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  left: 18px;
  position: absolute;
  right: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.product-media-controls i {
  background: linear-gradient(90deg, var(--storefront-brand-color, var(--accent)) 0 28%, rgba(255, 255, 255, 0.38) 28%);
  border-radius: 999px;
  display: block;
  height: 4px;
}

.product-audio-hero {
  background: rgba(7, 16, 25, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  bottom: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  left: 14px;
  padding: 12px;
  position: absolute;
  right: 14px;
}

.product-audio-hero strong {
  grid-column: 1 / -1;
}

.product-audio-hero audio,
.product-audio-row audio {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.product-media-thumbs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-column: 1;
  grid-row: 1;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}

.product-media-thumbs::-webkit-scrollbar {
  width: 0;
}

/* older horizontal media rail fallback for non-product contexts */
.product-media-thumbs.horizontal {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.product-media-thumb {
  align-items: center;
  background: rgba(17, 28, 42, 0.86);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 74px;
  height: 74px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.product-media-thumb.active {
  border-color: var(--storefront-brand-color, var(--accent));
  box-shadow:
    0 0 0 1px var(--storefront-brand-color, var(--accent)),
    0 14px 30px color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 14%, transparent);
}

.product-media-thumb b {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: var(--storefront-brand-color, var(--accent));
  display: inline-flex;
  font-size: 12px;
  height: 30px;
  justify-content: center;
  left: 50%;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  z-index: 1;
}

.product-media-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-identity {
  align-self: start;
  display: grid;
  gap: 18px;
  min-width: 0;
  padding-top: 28px;
}

.product-identity h1 {
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.04;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-developer-kicker,
.product-developer-card-title,
.product-rating,
.product-platform-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-developer-kicker {
  color: var(--soft);
  font-size: 12px;
  font-weight: 850;
  margin: 0;
  text-transform: uppercase;
}

.product-developer-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  text-transform: uppercase;
  width: 34px;
}

.product-developer-kicker b,
.product-developer-card-title b {
  align-items: center;
  background: var(--storefront-brand-color, var(--accent));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.product-subtitle {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.product-rating span {
  color: var(--storefront-brand-color, var(--accent));
  letter-spacing: 1px;
}

.product-rating strong,
.product-rating small {
  color: var(--soft);
  font-size: 14px;
}

.product-platform-badges span {
  align-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #dbe4ef;
  display: inline-flex;
  font-size: 22px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.product-buy-card {
  align-self: start;
  background: linear-gradient(180deg, rgba(16, 27, 39, 0.96), rgba(9, 19, 29, 0.96));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 20px;
  padding: 28px 26px;
  position: sticky;
  top: 96px;
}

.product-buy-card .product-price {
  font-size: 42px;
}

.product-buy-card .store-button {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 58%, transparent);
  justify-content: center;
  width: 100%;
}

.product-price-stack {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-price-stack s {
  color: var(--muted);
  font-weight: 700;
}

.product-buy-card p,
.product-highlight p,
.product-page-card p,
.product-audio-row p,
.product-included-grid p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.product-trust-list {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
}

.product-trust-list li {
  color: var(--soft);
  font-size: 14px;
}

.product-trust-list li::before {
  color: #c9d4e2;
  content: "\25CE ";
  font-weight: 900;
}

.product-support-mini {
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.product-support-mini a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.product-section-tabs {
  background: transparent;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 0;
  position: sticky;
  top: 76px;
  z-index: 9;
}

.product-section-tabs a {
  color: var(--soft);
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  padding: 20px 0 16px;
  position: relative;
}

.product-section-tabs a.active,
.product-section-tabs a:hover {
  color: var(--accent);
}

.product-section-tabs a.active::after,
.product-section-tabs a:hover::after {
  background: var(--accent);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.product-section-tabs span {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: var(--soft);
  display: inline-flex;
  font-size: 11px;
  margin-left: 4px;
  padding: 2px 6px;
}

.product-content-grid {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.product-page-card {
  background: linear-gradient(180deg, rgba(16, 27, 39, 0.92), rgba(10, 22, 34, 0.92));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 22px;
}

.product-page-card h2 {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.product-description {
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.product-description-feature-row {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.78fr);
}

.product-description-feature-row .product-page-card {
  border-radius: 0;
}

.product-description-feature-row .product-page-card:first-child {
  border-radius: 8px 0 0 8px;
}

.product-description-feature-row .product-page-card + .product-page-card {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.product-highlight-grid,
.product-included-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-highlight {
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 13px;
}

.product-highlight > span {
  color: var(--accent);
  font-weight: 900;
}

.product-demos-card {
  gap: 0;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  padding: 0;
}

.product-demo-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 24px;
}

.product-demo-panel + .product-demo-panel {
  border-left: 1px solid var(--line);
}

.product-demo-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.product-demo-panel h2 {
  align-items: center;
  display: flex;
  gap: 8px;
}

.product-demo-panel h2 span {
  color: var(--storefront-brand-color, var(--accent));
}

.product-demo-list {
  display: grid;
  gap: 0;
}

.product-demo-list.scroll {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.product-audio-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px 0;
}

.product-audio-row.active {
  box-shadow: none;
}

.product-demo-play {
  align-items: center;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding-left: 2px;
  width: 44px;
}

[data-audio-state="playing"] .product-demo-play {
  background: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, rgba(148, 163, 184, 0.16));
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 72%, transparent);
}

.product-wave {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  --wave-played: var(--storefront-brand-color, var(--accent));
  --wave-unplayed: rgba(148, 163, 184, 0.26);
  cursor: pointer;
  display: flex;
  gap: 2px;
  height: 26px;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.product-wave i {
  background: linear-gradient(90deg, var(--wave-played) 0 var(--bar-fill, 0%), var(--wave-unplayed) var(--bar-fill, 0%) 100%);
  border-radius: 999px;
  display: block;
  flex: 1 1 2px;
  min-width: 2px;
}

.waveform-status {
  align-items: center;
  color: var(--muted);
  display: none;
  font-size: 12px;
  font-weight: 750;
  inset: 0;
  justify-content: center;
  line-height: 1.25;
  padding: 0 8px;
  position: absolute;
  text-align: center;
}

[data-waveform-state="loading"] i {
  animation: waveform-loading 1.2s ease-in-out infinite;
  background: var(--wave-unplayed);
  opacity: 0.58;
}

[data-waveform-state="error"] i,
[data-waveform-state="unavailable"] i {
  display: none;
}

[data-waveform-state="error"] .waveform-status,
[data-waveform-state="unavailable"] .waveform-status {
  display: flex;
}

@keyframes waveform-loading {
  0%, 100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.72;
  }
}

.product-video-list {
  display: grid;
  gap: 18px;
}

.product-video-row,
.product-link-list {
  display: grid;
  gap: 9px;
}

.product-video-row {
  align-items: center;
  grid-template-columns: 112px minmax(0, 1fr);
}

.product-video-row > span,
.product-video-row > button {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.product-video-row img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-video-row b {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  color: var(--storefront-brand-color, var(--accent));
  display: inline-flex;
  height: 34px;
  justify-content: center;
  left: 50%;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
}

.product-video-row .storefront-inline-video {
  grid-column: 1 / -1;
}

.product-video-row strong {
  display: grid;
  gap: 5px;
}

.product-included-grid article {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.product-video-row small,
.product-included-grid span {
  color: var(--muted);
  font-size: 12px;
}

.product-card-row {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.product-spec-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin: 0;
}

.product-spec-grid div {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 9px 0;
}

.product-spec-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.product-spec-grid dd {
  color: var(--text);
  font-weight: 760;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.product-content-side {
  position: sticky;
  top: 140px;
}

.product-check-list {
  display: grid;
  gap: 13px;
}

.product-check-item {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.product-check-item > span {
  align-items: center;
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  height: 20px;
  justify-content: center;
  margin-top: 1px;
  width: 20px;
}

.product-check-item p {
  color: var(--muted);
  margin-top: 4px;
}

.product-developer-card-title h2 {
  text-transform: none;
}

.product-trust-strip {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 18px;
}

.product-detail-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.product-detail-main *,
.product-detail-panel * {
  min-width: 0;
}

.product-detail-main p,
.product-detail-panel p,
.developer-muted,
.checkout-note,
.developer-empty-note,
.library-file span,
.developer-stats dd {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.checkout-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: none;
  font-size: 14px;
  line-height: 1.45;
  padding: 12px;
}

.checkout-note.is-visible {
  display: block;
}

.auth-overlay {
  align-items: center;
  background: rgba(3, 6, 10, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 40;
}

.auth-panel {
  background: #0f1520;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  max-width: 440px;
  padding: 22px;
  position: relative;
  width: min(100%, 440px);
}

.auth-panel h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
}

.auth-copy,
.auth-fineprint,
.auth-message {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.auth-success {
  color: var(--success);
}

.auth-link {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-name-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form label {
  color: var(--soft);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}

.auth-form input {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  outline: none;
  padding: 0 12px;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.account-recovery {
  margin: 0 auto;
  max-width: 560px;
}

.account-recovery-form {
  max-width: 420px;
  width: min(100%, 420px);
}

@media (max-width: 520px) {
  .auth-name-grid {
    grid-template-columns: 1fr;
  }

  .store-actions.center {
    align-items: stretch;
    flex-direction: column;
    width: min(100%, 320px);
  }
}

.auth-close {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
}

.library-card .product-card-body {
  gap: 14px;
}

.library-files {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.library-file {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 46px;
  min-width: 0;
  padding: 8px 10px;
}

.library-license-panel {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.library-update-panel,
.library-review-panel {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.storefront-v1-site {
  --v1-brand-bg-top: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 42%, black);
  --v1-brand-bg-mid: color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 24%, black);
  --v1-brand-bg-bottom: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, black);
  --v1-surface: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 18%, rgba(0, 0, 0, 0.9));
  --v1-panel: color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 10%, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 20%, rgba(0, 0, 0, 0.86)));
  --v1-line: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 34%, rgba(255, 255, 255, 0.16));
  --v1-text: #f8fafc;
  --v1-muted: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 24%, #dbeafe);
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--storefront-primary-rgb, var(--storefront-accent-rgb, 255 106 26)), 0.18), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(var(--storefront-secondary-rgb, var(--storefront-accent-rgb, 37 99 235)), 0.16), transparent 30%),
    radial-gradient(circle at 70% 86%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.12), transparent 32%),
    linear-gradient(180deg, var(--v1-brand-bg-top) 0%, var(--v1-brand-bg-mid) 46%, var(--v1-brand-bg-bottom) 100%);
  color: var(--v1-text);
  min-height: 100vh;
}

.storefront-v1-site .storefront-site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
}

.storefront-v1-site :is(.v1-home-launch-hero, .v1-modern-hero, .v1-catalog-first-hero, .v1-product-banner, .v1-product-hero-split, .v1-product-marketplace, .v1-product-content-grid, .v1-generic-hero, .v1-visual-grid-head, .v1-catalog-layout, .v1-editorial-catalog, .v1-section, .v1-split-band, .v1-statement, .v1-dashboard-grid, .v1-support-grid, .v1-review-directory, .v1-deals-board, .v1-benefits-row, .v1-final-cta, .v1-tight-metrics, .v1-action-card-grid, .v1-compact-product-list, .v1-featured-deal, .v1-about-story, .v1-about-profile-hero, .v1-minimal-about, .v1-featured-review, .v1-review-product-list, .v1-contact-support-hero, .v1-docs-layout, .v1-support-search, .v1-portal-layout, .v1-library-manager, .v1-checkout-layout, .v1-cart-drawer-preview, .v1-thankyou-download) {
  margin-inline: auto;
  max-width: 1180px;
  width: min(100% - 32px, 1180px);
}

.v1-home-layout {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 18px 0 48px;
  width: min(100% - 32px, 1180px);
}

.v1-cinematic-hero,
.v1-modern-split-hero,
.v1-catalog-search-hero,
.v1-cinematic-demo-card,
.v1-cinematic-statement,
.v1-home-section,
.v1-modern-bundle,
.v1-modern-proof,
.v1-catalog-newsletter,
.v1-home-trust-row article,
.v1-home-product-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--v1-panel);
  border: 1px solid var(--v1-line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.v1-cinematic-hero {
  align-items: center;
  background:
    radial-gradient(circle at 78% 30%, rgba(var(--storefront-highlight-rgb, 135 224 0), 0.18), transparent 34%),
    radial-gradient(circle at 74% 68%, rgba(var(--storefront-accent-rgb, 255 106 26), 0.2), transparent 32%),
    linear-gradient(105deg, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 26%, rgba(0, 0, 0, 0.94)) 0%, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 18%, rgba(0, 0, 0, 0.86)) 48%, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 16%, rgba(0, 0, 0, 0.74)) 100%);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  min-height: 420px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
}

.v1-cinematic-copy {
  display: grid;
  gap: 11px;
  max-width: 460px;
}

.v1-cinematic-copy h1,
.v1-catalog-search-hero h1,
.v1-modern-split-hero h1 {
  color: #fff;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.95;
  margin: 0;
}

.v1-cinematic-copy > strong {
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
}

.v1-cinematic-copy p,
.v1-modern-split-hero p,
.v1-catalog-search-hero p,
.v1-cinematic-statement p,
.v1-modern-bundle p,
.v1-catalog-newsletter p {
  color: var(--v1-muted);
  line-height: 1.55;
  margin: 0;
}

.v1-cinematic-art-link,
.v1-modern-hero-art-link {
  display: block;
  min-width: 0;
  text-decoration: none;
}

.v1-cinematic-art,
.v1-modern-hero-art,
.v1-modern-bundle-art,
.v1-home-card-art {
  align-items: center;
  background:
    radial-gradient(circle at 58% 42%, rgba(var(--storefront-accent-rgb, 255 106 26), 0.22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, rgba(0, 0, 0, 0.84)), color-mix(in srgb, var(--storefront-accent, #ff6a1a) 26%, rgba(0, 0, 0, 0.94)));
  border: 1px solid var(--v1-line);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.v1-cinematic-art {
  border-radius: 8px;
  min-height: 340px;
}

.v1-modern-hero-art {
  border-radius: 8px;
  min-height: 260px;
}

.v1-modern-bundle-art {
  border-radius: 8px;
  min-height: 190px;
}

.v1-home-card-art {
  aspect-ratio: 16 / 10;
  border-radius: 7px;
}

.v1-cinematic-art img,
.v1-modern-hero-art img,
.v1-modern-bundle-art img,
.v1-home-card-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-cinematic-art span,
.v1-modern-hero-art span,
.v1-modern-bundle-art span,
.v1-home-card-art span {
  color: #fff;
  font-size: 30px;
  font-weight: 950;
}

.v1-home-format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

.v1-home-format-row span {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.v1-cinematic-demo-card {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr) auto;
  padding: 16px 18px;
}

.v1-cinematic-demo-card div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.v1-cinematic-demo-card i,
.v1-home-trust-row i,
.v1-cinematic-statement i {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 78%, #fff);
  border-radius: 999px;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.v1-cinematic-demo-card strong,
.v1-home-product-card strong,
.v1-home-trust-row strong,
.v1-cinematic-statement strong {
  color: #fff;
}

.v1-cinematic-demo-card > span {
  align-items: center;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.v1-cinematic-demo-card b {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.46), rgba(148, 163, 184, 0.12));
  border-radius: 999px;
  height: 22px;
}

.v1-cinematic-demo-card b:nth-child(2n) { height: 34px; }
.v1-cinematic-demo-card b:nth-child(3n) { height: 14px; }

.v1-cinematic-demo-card small,
.v1-home-product-card span,
.v1-home-trust-row span,
.v1-modern-proof span,
.v1-home-card-price {
  color: #a8b3c7;
}

.v1-cinematic-statement {
  display: grid;
  gap: 22px;
  padding: 28px;
  text-align: center;
}

.v1-cinematic-statement h2,
.v1-modern-bundle h2,
.v1-catalog-newsletter h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  margin: 0;
}

.v1-cinematic-statement > div,
.v1-home-trust-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-cinematic-statement > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v1-cinematic-statement article,
.v1-home-trust-row article {
  display: grid;
  gap: 7px;
  justify-items: start;
  padding: 16px;
  text-align: left;
}

.v1-home-section {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.v1-home-product-row,
.v1-home-catalog-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-home-product-card {
  min-width: 0;
  overflow: hidden;
}

.v1-home-product-card a {
  display: grid;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
}

.v1-home-product-card span {
  font-size: 12px;
}

.v1-home-product-card strong {
  font-size: 15px;
  line-height: 1.2;
}

.v1-home-card-price strong {
  color: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 82%, #fff);
  font-size: 15px;
}

.v1-modern-split-hero {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1fr);
  padding: clamp(24px, 4vw, 42px);
}

.v1-modern-split-hero > div:first-child {
  display: grid;
  gap: 14px;
}

.v1-modern-bundle {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  padding: 22px;
}

.v1-modern-bundle > div:first-child {
  display: grid;
  gap: 12px;
}

.v1-modern-bundle-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v1-modern-bundle-products span,
.v1-catalog-search-hero nav a {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
}

.v1-modern-proof {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 240px minmax(0, 1fr);
  padding: 20px;
}

.v1-modern-proof strong {
  color: #fff;
  display: block;
  font-size: 32px;
}

.v1-modern-proof blockquote {
  border-left: 1px solid rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0;
  padding-left: 18px;
}

.v1-catalog-search-hero {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: clamp(34px, 5vw, 60px) 28px 24px;
  text-align: center;
}

.v1-home-search {
  width: min(100%, 760px);
}

.v1-home-search input,
.v1-catalog-newsletter input {
  background: var(--v1-surface);
  border: 1px solid var(--v1-line);
  border-radius: 7px;
  color: #fff;
  min-height: 44px;
  padding: 0 14px;
  width: 100%;
}

.v1-catalog-search-hero nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.v1-catalog-newsletter {
  background:
    radial-gradient(circle at 30% 40%, rgba(var(--storefront-highlight-rgb, 135 224 0), 0.16), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 32%, rgba(0, 0, 0, 0.72)), color-mix(in srgb, var(--storefront-accent, #ff6a1a) 26%, rgba(0, 0, 0, 0.9)));
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 28px;
  text-align: center;
}

.v1-catalog-newsletter form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) auto;
  margin-top: 8px;
  width: min(100%, 460px);
}

.v1-home-immersive {
  gap: clamp(34px, 5vw, 72px);
  max-width: none;
  padding: 0 0 clamp(58px, 8vw, 100px);
  width: 100%;
}

.v1-home-immersive :is(.v1-immersive-trust-strip, .v1-immersive-section, .v1-immersive-community, .v1-immersive-shop-strip, .v1-immersive-benefits, .v1-immersive-video) {
  margin-inline: auto;
  width: min(100% - 56px, 1180px);
}

.v1-home-immersive .v1-immersive-trust-strip {
  width: min(100% - 84px, 1480px);
}

.v1-immersive-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0.96), rgba(2, 6, 14, 0.68) 44%, rgba(2, 6, 14, 0.92)),
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--storefront-accent, #9d55ff) 42%, transparent), transparent 34%),
    var(--v1-immersive-hero, linear-gradient(135deg, #050a12, #160a24 52%, #050a12));
  background-position: center;
  background-size: cover;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: min(100vh, 860px);
  overflow: hidden;
  padding: clamp(72px, 11vw, 148px) clamp(26px, 5vw, 72px) clamp(44px, 6vw, 76px);
  position: relative;
}

.v1-immersive-hero::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(circle at 72% 42%, color-mix(in srgb, var(--storefront-accent, #9d55ff) 30%, transparent), transparent 28%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.v1-immersive-benefits i {
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #9d55ff) 64%, rgba(255, 255, 255, 0.34));
  border-radius: 999px;
  display: inline-block;
  height: 38px;
  width: 38px;
}

.v1-immersive-copy {
  display: grid;
  gap: 24px;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.v1-immersive-copy h1 {
  color: #fff;
  font-size: clamp(54px, 8vw, 104px);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
}

.v1-immersive-copy p:not(.store-eyebrow) {
  color: #d7dce9;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}

.v1-immersive-trust-strip,
.v1-immersive-benefits {
  background:
    radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--storefront-accent, #9d55ff) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 10%, rgba(6, 8, 12, 0.92)), rgba(4, 6, 10, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.v1-immersive-trust-strip article,
.v1-immersive-benefits article {
  align-items: center;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  padding: 14px 18px;
  text-align: left;
}

.v1-immersive-trust-strip article {
  gap: 6px 16px;
  min-height: 118px;
  padding: 28px 34px;
}

.v1-immersive-trust-strip i {
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #9d55ff) 58%, rgba(255, 255, 255, 0.34));
  border-radius: 999px;
  display: inline-block;
  grid-row: 1 / span 2;
  height: 34px;
  position: relative;
  width: 34px;
}

.v1-immersive-trust-strip i::after {
  background: color-mix(in srgb, var(--storefront-accent, #9d55ff) 70%, #fff);
  border-radius: 999px;
  content: "";
  height: 10px;
  left: 11px;
  position: absolute;
  top: 11px;
  width: 10px;
}

.v1-immersive-trust-strip strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.v1-immersive-trust-strip span,
.v1-immersive-benefits span {
  color: #cbd5e1;
  font-size: 10px;
  line-height: 1.25;
}

.v1-immersive-trust-strip span {
  font-size: 14px;
  line-height: 1.35;
}

.v1-immersive-section {
  display: grid;
  gap: 24px;
}

.v1-immersive-heading {
  display: grid;
  gap: 8px;
}

.v1-immersive-heading.is-row {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.v1-immersive-heading h2,
.v1-immersive-community h2 {
  color: #fff;
  font-size: clamp(26px, 3.5vw, 48px);
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.v1-immersive-heading p,
.v1-immersive-community p {
  color: #aeb9cc;
  font-size: 16px;
  margin: 0;
}

.v1-immersive-experience-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-immersive-experience-card,
.v1-immersive-product-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(7, 13, 22, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  min-width: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.v1-immersive-experience-card:hover,
.v1-immersive-product-card:hover {
  border-color: color-mix(in srgb, var(--storefront-accent, #9d55ff) 70%, rgba(255, 255, 255, 0.2));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

.v1-immersive-experience-art,
.v1-immersive-product-art {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, color-mix(in srgb, var(--storefront-accent, #9d55ff) 28%, rgba(4, 6, 10, 0.9)), rgba(2, 6, 14, 0.94));
  overflow: hidden;
}

.v1-immersive-experience-art img,
.v1-immersive-product-art img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
  width: 100%;
}

.v1-immersive-experience-card:hover img,
.v1-immersive-product-card:hover img {
  transform: scale(1.04);
}

.v1-immersive-experience-card :is(strong, p, span),
.v1-immersive-product-card :is(strong, span, .v1-price) {
  margin-inline: 28px;
}

.v1-immersive-experience-card strong,
.v1-immersive-product-card strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

.v1-immersive-experience-card p {
  color: #b7c1d2;
  line-height: 1.5;
  margin-bottom: 24px;
  margin-top: 10px;
}

.v1-immersive-experience-card > span {
  color: color-mix(in srgb, var(--storefront-accent, #9d55ff) 70%, #fff);
  font-size: 28px;
  margin-bottom: 26px;
}

.v1-immersive-products {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.v1-immersive-product-card {
  padding-bottom: 22px;
}

.v1-immersive-product-card em {
  background: color-mix(in srgb, var(--storefront-accent, #9d55ff) 76%, #fff);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
  position: absolute;
  right: 12px;
  text-transform: uppercase;
  top: 12px;
  z-index: 1;
}

.v1-immersive-product-card .v1-price {
  margin-top: 10px;
}

.v1-immersive-community {
  background:
    linear-gradient(180deg, rgba(2, 6, 14, 0.1), rgba(2, 6, 14, 0.74)),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--storefront-accent, #9d55ff) 42%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 16%, #05070b), color-mix(in srgb, var(--storefront-accent, #9d55ff) 24%, #060913) 52%, #05070b);
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #9d55ff) 36%, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: clamp(42px, 6vw, 76px);
  text-align: center;
}

.v1-immersive-community form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) auto;
  width: min(100%, 520px);
}

.v1-immersive-community input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #fff;
  min-height: 54px;
  padding: 0 18px;
}

.v1-immersive-benefits article {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  text-align: left;
}

.v1-immersive-benefits strong {
  color: #fff;
}

.v1-immersive-shop-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-immersive-shop-strip a {
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--storefront-accent, #9d55ff) 22%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 12%, rgba(6, 8, 12, 0.92)), rgba(4, 6, 10, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 9px;
  min-height: 132px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  text-decoration: none;
}

.v1-immersive-shop-strip a::before {
  background: color-mix(in srgb, var(--storefront-accent, #9d55ff) 70%, #fff);
  content: "";
  height: 3px;
  left: 24px;
  position: absolute;
  right: 56%;
  top: 0;
}

.v1-immersive-shop-strip strong {
  font-size: 18px;
  line-height: 1.2;
}

.v1-immersive-shop-strip span {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.35;
}

.v1-immersive-shop-strip em {
  align-self: end;
  color: color-mix(in srgb, var(--storefront-accent, #9d55ff) 74%, #fff);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  margin-top: 10px;
}

.v1-immersive-video {
  display: grid;
  gap: 22px;
}

.v1-immersive-video-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 10%, rgba(6, 8, 12, 0.9)), rgba(4, 6, 10, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 18px 24px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(220px, 0.28fr);
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px);
}

.v1-immersive-video-frame {
  align-self: stretch;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, color-mix(in srgb, var(--storefront-accent, #9d55ff) 26%, rgba(4, 6, 10, 0.9)), rgba(0, 0, 0, 0.86));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  min-height: 280px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.v1-immersive-video-card > button,
.v1-immersive-video-frame > button {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  width: 100%;
}

.v1-immersive-video-card > button:disabled,
.v1-immersive-video-frame > button:disabled {
  cursor: default;
}

.v1-immersive-video-card > button img,
.v1-immersive-video-card > button .v1-immersive-video-art,
.v1-immersive-video-card > button .v1-immersive-video-art img,
.v1-immersive-video-frame > button img,
.v1-immersive-video-frame > button .v1-immersive-video-art,
.v1-immersive-video-frame > button .v1-immersive-video-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-immersive-video-card > button::after,
.v1-immersive-video-frame > button::after {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
  content: "";
  inset: 0;
  position: absolute;
}

.v1-immersive-video-card > button > span,
.v1-immersive-video-frame > button > span {
  align-items: center;
  display: grid;
  height: 100%;
  justify-items: center;
  place-content: center;
}

.v1-immersive-video-card b {
  background: linear-gradient(135deg, var(--storefront-accent, #9d55ff), color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 42%, var(--storefront-accent, #9d55ff)));
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  left: 50%;
  line-height: 1;
  padding: 18px 22px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.v1-immersive-video-card > div:not(.storefront-inline-video) {
  align-content: center;
  display: grid;
  gap: 10px;
}

.v1-immersive-video-card strong {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.08;
}

.v1-immersive-video-card span {
  color: #dbe4f2;
  font-size: 15px;
  line-height: 1.45;
}

.v1-immersive-video-frame .storefront-inline-video {
  border: 0;
  border-radius: 8px;
  inset: 0;
  position: absolute;
  z-index: 2;
}

.v1-immersive-video-frame .storefront-inline-video iframe,
.v1-immersive-video-frame .storefront-inline-video video {
  border-radius: 8px;
  height: 100%;
  width: 100%;
}

.v1-home-launch-hero,
.v1-product-banner {
  align-items: end;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 26%, rgba(0, 0, 0, 0.92)), color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 16%, rgba(0, 0, 0, 0.38))),
    var(--v1-hero-image, radial-gradient(circle at 72% 30%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.36), transparent 34%)),
    radial-gradient(circle at 18% 82%, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.24), transparent 34%),
    var(--v1-brand-bg-bottom);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--v1-line);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr);
  min-height: clamp(520px, 78vh, 760px);
  padding: clamp(34px, 7vw, 86px);
}

.v1-home-launch-hero h1,
.v1-product-banner h1,
.v1-modern-hero h1,
.v1-product-hero-split h1,
.v1-generic-hero h1 {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.95;
  margin: 10px 0 18px;
  max-width: 840px;
}

.v1-home-launch-hero p,
.v1-product-banner p,
.v1-modern-hero p,
.v1-generic-hero p,
.v1-product-hero-split p,
.v1-product-marketplace p {
  color: var(--v1-muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 680px;
}

.v1-launch-product-art,
.v1-feature-art,
.v1-product-art,
.v1-compact-art,
.v1-generic-art,
.v1-editorial-art,
.v1-deal-art,
.v1-strip-art {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(var(--storefront-secondary-rgb, 37 99 235), 0.12)),
    radial-gradient(circle at 74% 20%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.18), transparent 34%);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 30%, var(--v1-line));
  display: flex;
  justify-content: center;
  min-height: 220px;
  overflow: hidden;
}

.v1-launch-product-art img,
.v1-feature-art img,
.v1-product-art img,
.v1-compact-art img,
.v1-generic-art img,
.v1-editorial-art img,
.v1-deal-art img,
.v1-strip-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-product-art .v1-media-lightbox-trigger,
.v1-compact-art .v1-media-lightbox-trigger,
.v1-gallery-row .v1-media-lightbox-trigger,
.v1-product-compact-gallery span .v1-media-lightbox-trigger {
  height: 100%;
  min-height: inherit;
}

.v1-modern-hero,
.v1-product-hero-split,
.v1-product-marketplace,
.v1-generic-hero {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.58fr);
  padding-block: clamp(50px, 8vw, 96px);
}

.v1-feature-card,
.v1-purchase-card,
.v1-deal-strip,
.v1-sticky-buy,
.v1-filter-panel,
.v1-tight-metrics article,
.v1-action-card-grid article,
.v1-compact-product-list a,
.v1-page-hero-compact,
.v1-featured-deal,
.v1-flash-sale-hero,
.v1-about-profile-hero,
.v1-profile-card,
.v1-minimal-about,
.v1-featured-review,
.v1-review-product-list article,
.v1-contact-support-hero,
.v1-support-mini-form,
.v1-docs-layout,
.v1-support-search,
.v1-portal-layout,
.v1-library-manager,
.v1-library-manager article,
.v1-checkout-layout,
.v1-cart-drawer-preview,
.v1-thankyou-download,
.v1-dashboard-grid article,
.v1-support-grid article,
.v1-review-card,
.v1-deals-board article,
.v1-benefits-row article,
.v1-product-marketplace main,
.v1-product-marketplace aside {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 6%, transparent), transparent),
    var(--v1-panel);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 22%, var(--v1-line));
  border-radius: 8px;
}

.v1-feature-card,
.v1-review-card,
.v1-dashboard-grid article,
.v1-support-grid article,
.v1-deals-board article,
.v1-benefits-row article {
  padding: 22px;
}

.v1-feature-card h2,
.v1-deals-board h2 {
  font-size: 24px;
  margin: 16px 0 10px;
}

.v1-section,
.v1-split-band,
.v1-statement,
.v1-final-cta {
  padding-block: 54px;
}

.v1-section h2,
.v1-statement h2,
.v1-final-cta h2 {
  font-size: clamp(28px, 4vw, 48px);
  margin: 0 0 18px;
}

.v1-split-band,
.v1-statement,
.v1-final-cta {
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--storefront-primary-rgb, var(--storefront-accent-rgb, 255 106 26)), 0.2), transparent 30%),
    linear-gradient(135deg, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.16), rgba(var(--storefront-highlight-rgb, 255 106 26), 0.1)),
    var(--v1-panel);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 26%, var(--v1-line));
  margin-block: 42px;
  padding: 42px;
}

.v1-review-grid,
.v1-dashboard-grid,
.v1-support-grid,
.v1-deals-board,
.v1-benefits-row,
.v1-market-grid,
.v1-editorial-grid,
.v1-compact-product-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v1-review-section {
  display: grid;
  gap: 18px;
  margin-block: 24px;
}

.v1-review-section .storefront-section-heading {
  align-items: end;
  border-bottom: 1px solid var(--v1-line);
  padding-bottom: 14px;
}

.v1-review-summary {
  color: var(--v1-muted);
  display: grid;
  gap: 4px;
  justify-items: end;
}

.v1-review-summary strong {
  color: var(--storefront-accent, #ff6a1a);
  font-size: 24px;
}

.v1-review-card em {
  color: var(--storefront-accent, #ff6a1a);
  display: block;
  font-style: normal;
  font-weight: 800;
  margin-top: 12px;
}

.v1-review-controls {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.v1-review-card span,
.v1-deals-board article > span {
  color: var(--storefront-accent, #ff6a1a);
  font-weight: 800;
}

.v1-benefits-row article:nth-child(even),
.v1-dashboard-grid article:nth-child(even),
.v1-support-grid article:nth-child(even),
.v1-review-card:nth-child(even),
.v1-product-card:nth-child(even) {
  border-color: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 24%, var(--v1-line));
}

.v1-product-card h2,
.v1-feature-card h2,
.v1-product-section-heading p,
.v1-format-row span {
  color: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 70%, #fff);
}

.v1-catalog-first-hero,
.v1-visual-grid-head {
  padding-block: 42px 28px;
}

.v1-catalog-first-hero h1,
.v1-visual-grid-head h1 {
  font-size: clamp(36px, 5vw, 64px);
  margin: 8px 0 12px;
}

.v1-search-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 22px;
  max-width: 760px;
}

.v1-search-row :is(input, select) {
  background: var(--v1-surface);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 22%, var(--v1-line));
  border-radius: 8px;
  color: var(--v1-text);
  min-height: 46px;
  padding: 0 14px;
}

.v1-deal-strip,
.v1-sticky-buy {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  margin: 20px auto;
  padding: 14px;
  width: min(100% - 32px, 1180px);
}

.v1-strip-art {
  min-height: 76px;
}

.v1-catalog-layout {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: 260px minmax(0, 1fr);
  padding-block: 34px 60px;
}

.v1-filter-panel {
  display: grid;
  gap: 14px;
  padding: 22px;
  position: sticky;
  top: 96px;
}

.v1-filter-panel label {
  color: var(--v1-muted);
}

.v1-editorial-feature {
  align-items: center;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  margin-block: 42px;
  background:
    radial-gradient(circle at 10% 14%, rgba(var(--storefront-primary-rgb, var(--storefront-accent-rgb, 255 106 26)), 0.16), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, rgba(0, 0, 0, 0.44)), color-mix(in srgb, var(--storefront-accent, #ff6a1a) 22%, rgba(0, 0, 0, 0.68)));
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 32%, var(--v1-line));
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
}

.v1-editorial-feature h1 {
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1;
}

.storefront-v1-site :is(.product-card, .v1-editorial-feature, .v1-deal-strip, .v1-sticky-buy, .v1-filter-panel) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 16%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.16);
}

.storefront-v1-site .product-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 7%, transparent), transparent),
    var(--v1-panel);
  border-color: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 28%, var(--v1-line));
}

.storefront-v1-site .product-card:nth-child(odd) {
  border-color: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 28%, var(--v1-line));
}

.storefront-v1-site :is(.product-card-media, .product-card-image, .product-card img) {
  border-color: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 30%, var(--v1-line));
}

.v1-product-hero-split {
  align-items: stretch;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
}

.v1-product-art {
  min-height: 420px;
}

.v1-gallery-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
}

.v1-gallery-row span,
.v1-product-compact-gallery span {
  background: var(--v1-surface);
  border: 1px solid var(--v1-line);
  min-height: 76px;
  overflow: hidden;
}

.v1-gallery-row img,
.v1-product-compact-gallery span img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-product-tabs,
.v1-format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.v1-product-tabs {
  border-block: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 24%, var(--v1-line));
  justify-content: center;
  margin-block: 8px 30px;
  padding: 14px;
}

.v1-product-tabs a,
.v1-format-row span {
  color: var(--v1-muted);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.v1-product-tabs a:hover,
.v1-product-tabs a:focus-visible {
  color: var(--storefront-accent, #ff6a1a);
}

.v1-product-banner {
  max-width: none;
  min-height: clamp(360px, 54vh, 560px);
  width: 100%;
}

.v1-sticky-buy {
  position: sticky;
  top: 78px;
  z-index: 15;
}

.v1-full-media {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v1-full-media figure {
  background: var(--v1-panel);
  border: 1px solid var(--v1-line);
  min-height: 260px;
  overflow: hidden;
}

.v1-full-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-product-marketplace {
  align-items: start;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr) 280px;
}

.v1-product-marketplace main,
.v1-product-marketplace aside {
  padding: 24px;
}

.v1-marketplace-product-shell {
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.2), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.16), transparent 30%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.98), rgba(7, 9, 18, 0.98) 56%, rgba(3, 4, 10, 1));
  display: grid;
  gap: 28px;
  margin-inline: auto;
  max-width: 1480px;
  padding: clamp(18px, 3vw, 42px);
}

.v1-marketplace-breadcrumb {
  color: rgba(219, 228, 242, 0.72);
  font-size: 13px;
}

.v1-marketplace-breadcrumb span {
  color: var(--storefront-accent, #87e000);
  margin-inline: 8px;
}

.v1-marketplace-product-hero {
  align-items: stretch;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 0.86fr) minmax(280px, 0.48fr);
}

.v1-marketplace-gallery,
.v1-marketplace-purchase,
.v1-marketplace-feature-row article,
.v1-marketplace-overview-card,
.v1-marketplace-final-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(11, 13, 24, 0.82);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #6d45ff) 26%, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
}

.v1-marketplace-gallery {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
}

.v1-marketplace-gallery-main {
  align-items: center;
  aspect-ratio: 1.24;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.18), transparent 36%),
    radial-gradient(circle at 30% 70%, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.2), transparent 34%),
    rgba(3, 5, 11, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  justify-items: center;
  overflow: hidden;
  position: relative;
}

.v1-marketplace-gallery-main img {
  height: 100%;
  object-fit: contain;
  padding: clamp(16px, 4vw, 42px);
  width: 100%;
}

.v1-marketplace-count,
.v1-marketplace-gallery-arrow {
  background: rgba(4, 7, 15, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  position: absolute;
  z-index: 2;
}

.v1-marketplace-count {
  font-size: 12px;
  left: 14px;
  padding: 6px 10px;
  top: 14px;
}

.v1-marketplace-gallery-arrow {
  align-items: center;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
}

.v1-marketplace-gallery-arrow.next {
  left: auto;
  right: 16px;
}

.v1-marketplace-required-art,
.v1-marketplace-body-image.is-missing {
  align-content: center;
  color: #fff;
  display: grid;
  gap: 8px;
  height: 100%;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.v1-marketplace-required-art span,
.v1-marketplace-body-image.is-missing span {
  color: var(--v1-muted);
  line-height: 1.45;
}

.v1-marketplace-thumbs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.v1-marketplace-thumbs button {
  aspect-ratio: 1;
  background: rgba(4, 7, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.v1-marketplace-thumbs button.is-active {
  border-color: var(--storefront-accent, #87e000);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--storefront-accent, #87e000) 60%, transparent);
}

.v1-marketplace-thumbs img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-marketplace-summary {
  align-content: center;
  display: grid;
  gap: 18px;
}

.v1-marketplace-summary h1 {
  color: #fff;
  font-size: clamp(42px, 5vw, 76px);
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
}

.v1-marketplace-summary p {
  color: #c7d4e6;
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}

.v1-marketplace-purchase {
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 28px;
  position: sticky;
  top: 88px;
}

.v1-marketplace-purchase .store-button {
  justify-content: center;
  width: 100%;
}

.v1-marketplace-delivery {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 18px;
}

.v1-marketplace-delivery strong {
  color: #fff;
}

.v1-marketplace-delivery span {
  color: var(--v1-muted);
  line-height: 1.45;
}

.v1-marketplace-feature-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-marketplace-feature-row article {
  align-items: center;
  display: grid;
  gap: 5px 12px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 86px;
  padding: 16px;
}

.v1-marketplace-feature-row i,
.v1-marketplace-highlight-list i {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--storefront-accent, #87e000) 80%, #fff), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #87e000) 40%, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  height: 34px;
  width: 34px;
}

.v1-marketplace-feature-row strong {
  color: #fff;
}

.v1-marketplace-feature-row span {
  color: var(--v1-muted);
  font-size: 12px;
  grid-column: 2;
}

.v1-marketplace-tabs {
  background: rgba(8, 10, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.v1-marketplace-tabs a {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #dbe4f2;
  flex: 1 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 22px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.v1-marketplace-tabs a:first-child {
  color: var(--storefront-accent, #87e000);
  box-shadow: inset 0 -3px 0 var(--storefront-accent, #87e000);
}

.v1-marketplace-content-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-marketplace-overview-card {
  display: grid;
  gap: 28px;
  grid-column: span 3;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.8fr);
  min-height: 420px;
  padding: 34px;
}

.v1-marketplace-overview-card h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 42px);
  margin: 0 0 14px;
}

.v1-marketplace-overview-card p,
.v1-marketplace-overview-card li {
  color: var(--v1-muted);
  line-height: 1.65;
}

.v1-marketplace-overview-card ul,
.v1-marketplace-mini-card ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.v1-marketplace-overview-card li::before {
  color: var(--storefront-accent, #87e000);
  content: "+";
  font-weight: 900;
  margin-right: 10px;
}

.v1-marketplace-body-image {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

.v1-marketplace-body-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-marketplace-highlights,
.v1-marketplace-review-card {
  grid-column: span 1;
  min-height: 420px;
}

.v1-marketplace-highlight-list {
  display: grid;
  gap: 16px;
  max-height: 330px;
  overflow: auto;
}

.v1-marketplace-highlight-list article {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.v1-marketplace-highlight-list strong,
.v1-marketplace-mini-card strong {
  color: #fff;
}

.v1-marketplace-highlight-list span,
.v1-marketplace-mini-card em {
  color: var(--v1-muted);
  font-style: normal;
}

.v1-marketplace-content-grid > .v1-product-demo-card,
.v1-marketplace-content-grid > #gallery {
  grid-column: span 2;
  min-height: 340px;
}

.v1-marketplace-content-grid > #gallery .v1-photo-gallery {
  max-height: 420px;
}

.v1-marketplace-content-grid > .v1-product-demo-card .v1-audio-demo-list {
  max-height: 340px;
}

.v1-marketplace-review-card {
  overflow: auto;
}

.v1-marketplace-review-card .v1-review-card {
  background: transparent;
  border: 0;
  padding: 0;
}

.v1-marketplace-mini-card {
  grid-column: span 1;
  min-height: 280px;
  overflow: hidden;
}

.v1-marketplace-mini-card ul {
  max-height: 190px;
  overflow: auto;
}

.v1-marketplace-mini-card li {
  align-items: start;
  color: var(--v1-muted);
  display: grid;
  gap: 6px 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.v1-marketplace-mini-card li > span {
  color: var(--storefront-accent, #87e000);
}

.v1-marketplace-mini-card li em {
  grid-column: 2;
}

.v1-marketplace-final-cta {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  padding: 28px 36px;
}

.v1-marketplace-final-cta h2 {
  color: #fff;
  margin: 0 0 8px;
}

.v1-marketplace-final-cta p {
  color: var(--v1-muted);
  margin: 0;
}

.v1-full-banner-product-shell {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 22%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(3, 5, 12, 1), rgba(8, 10, 18, 0.98) 46%, rgba(2, 3, 8, 1));
  color: var(--v1-text);
  display: grid;
  gap: clamp(22px, 3vw, 42px);
  margin-inline: auto;
  max-width: 1600px;
  overflow: hidden;
}

.v1-full-banner-product-shell :is(h1, h2, strong) {
  color: #fff;
}

.v1-full-banner-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.92), rgba(3, 4, 10, 0.64) 42%, rgba(3, 4, 10, 0.18)),
    radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--storefront-accent, #87e000) 14%, transparent), transparent 32%),
    var(--v1-full-banner-hero, linear-gradient(135deg, #060711, #17111d 50%, #07080e));
  background-position: center;
  background-size: cover;
  display: grid;
  gap: clamp(28px, 4vw, 70px);
  grid-template-columns: minmax(360px, 0.86fr) minmax(360px, 0.9fr);
  min-height: clamp(680px, 92vh, 980px);
  padding: clamp(32px, 7vw, 100px);
}

.v1-full-banner-hero-copy {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.v1-full-banner-hero-copy h1 {
  font-size: clamp(56px, 7vw, 112px);
  letter-spacing: 0;
  line-height: 0.96;
  margin: 0;
}

.v1-full-banner-hero-copy > strong {
  font-size: clamp(19px, 2.2vw, 28px);
}

.v1-full-banner-hero-copy p:not(.store-eyebrow) {
  color: #d8e0ee;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
  margin: 0;
}

.v1-full-banner-render {
  align-self: stretch;
  background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--storefront-accent, #87e000) 15%, transparent), transparent 44%);
  border: 0;
  display: grid;
  min-height: 520px;
  place-items: center;
}

.v1-full-banner-render img {
  filter: drop-shadow(0 42px 70px rgba(0, 0, 0, 0.62));
  max-height: min(78vh, 780px);
  object-fit: contain;
  width: min(100%, 760px);
}

.v1-full-banner-render.is-missing,
.v1-full-banner-required {
  align-content: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed color-mix(in srgb, var(--storefront-accent, #87e000) 45%, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
}

.v1-full-banner-required span,
.v1-full-banner-render.is-missing span {
  color: var(--v1-muted);
}

.v1-full-banner-buybar {
  align-items: center;
  background: rgba(6, 8, 16, 0.94);
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 18px;
  grid-template-columns: 58px minmax(180px, 0.55fr) minmax(0, 1fr) auto auto;
  padding: 12px clamp(24px, 6vw, 96px);
  position: sticky;
  top: 0;
  z-index: 8;
}

.v1-full-banner-buybar img {
  border-radius: 6px;
  height: 48px;
  object-fit: cover;
  width: 58px;
}

.v1-full-banner-buybar nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.v1-full-banner-buybar nav a {
  color: #dbe4f2;
  font-size: 12px;
  font-weight: 900;
  padding: 10px 14px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.v1-full-banner-buybar nav a:first-child {
  color: var(--storefront-accent, #87e000);
  box-shadow: inset 0 -2px 0 var(--storefront-accent, #87e000);
}

.v1-full-banner-overview,
.v1-full-banner-story,
.v1-full-banner-experience,
.v1-full-banner-gallery,
.v1-full-banner-spec-grid,
.v1-full-banner-review,
.v1-full-banner-bundle,
.v1-full-banner-highlight-row,
.v1-full-banner-product-shell > .v1-immersive-trust-strip {
  margin-inline: clamp(24px, 6vw, 96px);
}

.v1-full-banner-overview {
  align-items: center;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 0.7fr) minmax(320px, 0.72fr);
}

.v1-full-banner-overview h2,
.v1-full-banner-story h2,
.v1-full-banner-experience h2,
.v1-full-banner-gallery h2,
.v1-full-banner-bundle h2 {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  margin: 0;
}

.v1-full-banner-overview p,
.v1-full-banner-story p,
.v1-full-banner-bundle p {
  color: var(--v1-muted);
  line-height: 1.65;
}

.v1-full-banner-overview ul {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.v1-full-banner-overview li {
  color: #dbe4f2;
  font-weight: 800;
}

.v1-full-banner-overview li::before {
  color: var(--storefront-accent, #87e000);
  content: "+";
  margin-right: 10px;
}

.v1-full-banner-overview-media,
.v1-full-banner-video,
.v1-full-banner-gallery-grid button,
.v1-full-banner-story-image {
  background: rgba(8, 10, 18, 0.86);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 30%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.v1-full-banner-overview-media {
  aspect-ratio: 16 / 9;
}

.v1-full-banner-overview-media img,
.v1-full-banner-gallery-grid img,
.v1-full-banner-story-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-full-banner-overview-media b {
  background: rgba(3, 5, 12, 0.82);
  border-radius: 999px;
  bottom: 14px;
  color: #fff;
  font-size: 12px;
  left: 14px;
  padding: 9px 12px;
  position: absolute;
  text-transform: uppercase;
}

.v1-full-banner-story {
  display: grid;
  gap: 24px;
}

.v1-full-banner-story article {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(320px, 0.74fr) minmax(0, 0.7fr);
}

.v1-full-banner-story article.is-reversed {
  grid-template-columns: minmax(0, 0.7fr) minmax(320px, 0.74fr);
}

.v1-full-banner-story article.is-reversed .v1-full-banner-story-image {
  order: 2;
}

.v1-full-banner-story-image {
  aspect-ratio: 16 / 9;
}

.v1-full-banner-highlight-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-full-banner-highlight-row article {
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(10, 12, 22, 0.86);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 28%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 22px;
  text-align: center;
}

.v1-full-banner-highlight-row i,
.v1-full-banner-product-shell .v1-immersive-trust-strip i {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--storefront-accent, #87e000) 75%, #fff), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #87e000) 45%, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  height: 42px;
  justify-self: center;
  width: 42px;
}

.v1-full-banner-highlight-row span {
  color: var(--v1-muted);
  line-height: 1.45;
}

.v1-full-banner-experience,
.v1-full-banner-gallery {
  display: grid;
  gap: 18px;
}

.v1-full-banner-audio-panel {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.72fr) minmax(320px, 0.72fr);
}

.v1-full-banner-audio-panel > .v1-audio-demo-list:only-child,
.v1-full-banner-audio-panel > .v1-full-banner-required:only-child {
  grid-column: 1 / -1;
}

.v1-full-banner-audio-panel .v1-audio-demo-list {
  background: rgba(10, 12, 22, 0.86);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 24%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 18px;
}

.v1-full-banner-video {
  display: grid;
  gap: 12px;
  max-height: 360px;
  min-height: 300px;
  padding: 14px;
}

.v1-full-banner-video .v1-video-demo-stage {
  min-height: 0;
}

.v1-full-banner-video .v1-video-demo-stage > button {
  aspect-ratio: 16 / 9;
  height: auto;
}

.v1-full-banner-video strong {
  align-self: end;
}

.v1-full-banner-gallery-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 540px;
  overflow: auto;
  padding-right: 4px;
}

.v1-full-banner-gallery-grid button {
  aspect-ratio: 1.18;
}

.v1-full-banner-gallery-grid button.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.v1-full-banner-spec-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-full-banner-spec-grid .v1-marketplace-mini-card {
  grid-column: span 1;
  min-height: 300px;
}

.v1-full-banner-spec-grid .v1-marketplace-mini-card ul {
  max-height: 205px;
}

.v1-full-banner-review {
  align-items: center;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 26%, transparent), transparent 42%),
    rgba(11, 13, 24, 0.88);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 34%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  max-height: 360px;
  overflow: hidden;
  padding: 28px;
}

.v1-full-banner-review .v1-review-card {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}

.v1-full-banner-review button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 42px;
}

.v1-full-banner-review button:first-of-type {
  order: -1;
}

.v1-full-banner-bundle {
  align-items: center;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 16%, transparent), rgba(255, 255, 255, 0.025)),
    rgba(9, 11, 20, 0.9);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #8b5cf6) 32%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  display: grid;
  gap: 24px;
  grid-template-columns: 260px minmax(0, 1fr) auto auto;
  padding: 24px;
}

.v1-full-banner-bundle .v1-strip-art {
  aspect-ratio: 2.4 / 1;
  border-radius: 8px;
  overflow: hidden;
}

.v1-full-banner-bundle .v1-strip-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-full-banner-product-shell > .v1-immersive-trust-strip {
  margin-bottom: clamp(24px, 6vw, 80px);
}

.v1-product-compact-gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v1-product-compact-gallery .v1-compact-art {
  grid-column: 1 / -1;
  min-height: 340px;
}

.v1-product-content-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-auto-flow: dense;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  padding-block: 22px 48px;
}

.v1-product-content-grid.is-banner,
.v1-product-content-grid.is-marketplace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v1-product-card {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 12%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--storefront-primary, var(--storefront-brand-color, #ff6a1a)) 5%, transparent), transparent),
    var(--v1-panel);
  border: 1px solid color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 20%, var(--v1-line));
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
}

.v1-product-card:empty {
  display: none;
}

.v1-product-overview-card,
.v1-product-demo-card,
.v1-product-content-grid > .v1-product-card:first-child {
  grid-column: span 1;
}

.v1-media-scroll-card {
  align-self: start;
}

.v1-product-section-heading {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.v1-product-section-heading h2 {
  font-size: 22px;
  margin: 0;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.v1-product-summary {
  color: var(--v1-text);
  font-size: 17px;
  line-height: 1.5;
}

.v1-product-copy {
  display: grid;
  gap: 10px;
}

.v1-product-copy p,
.v1-feature-list p,
.v1-access-list p,
.v1-included-grid p {
  color: var(--v1-muted);
  line-height: 1.55;
  margin: 0;
}

.v1-feature-list,
.v1-access-list,
.v1-included-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v1-feature-list article,
.v1-access-list article,
.v1-included-grid article {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 12%, rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.v1-feature-list article {
  grid-template-columns: auto minmax(0, 1fr);
}

.v1-feature-list article > span {
  color: var(--storefront-accent, #ff6a1a);
  font-weight: 900;
}

.v1-photo-gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.v1-photo-gallery figure {
  aspect-ratio: 1.2;
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 14%, rgba(0, 0, 0, 0.48));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.v1-photo-gallery figure:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.v1-photo-gallery img,
.v1-video-demo-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.v1-media-lightbox-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: zoom-in;
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  width: 100%;
}

.v1-photo-gallery b,
.v1-video-demo-grid b {
  align-items: center;
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 28%, rgba(0, 0, 0, 0.7));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
}

.v1-audio-demo-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.v1-audio-demo-row {
  align-items: center;
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 12%, rgba(0, 0, 0, 0.38));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
}

.v1-audio-demo-row > button,
.v1-video-demo-grid button {
  align-items: center;
  background: var(--storefront-accent, #ff6a1a);
  border: 0;
  border-radius: 999px;
  color: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 18%, #000);
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  overflow: hidden;
  width: 42px;
}

.v1-audio-demo-row > button {
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.v1-audio-demo-row > div {
  min-width: 0;
  overflow: hidden;
}

.v1-audio-demo-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v1-audio-demo-row small {
  white-space: nowrap;
}

.v1-waveform {
  align-items: end;
  background: transparent;
  border: 0;
  display: flex;
  gap: 3px;
  height: 28px;
  margin-top: 4px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.v1-waveform i {
  background: rgba(148, 163, 184, 0.44);
  border-radius: 999px;
  flex: 1 1 3px;
  max-width: 6px;
  min-width: 2px;
  overflow: hidden;
  position: relative;
}

.v1-waveform i::after {
  background: linear-gradient(90deg, var(--wave-played) 0 var(--bar-fill, 0%), transparent var(--bar-fill, 0%) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.v1-waveform .waveform-status {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.v1-video-demo-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  max-height: 380px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.v1-video-demo-grid article {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 12%, rgba(0, 0, 0, 0.38));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.v1-video-demo-stage {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0;
  min-height: 150px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.v1-video-demo-stage > button,
.v1-video-demo-stage .storefront-inline-video {
  border-radius: 0;
  height: 100%;
  inset: 0;
  margin: 0;
  position: absolute;
  width: 100%;
}

.v1-video-demo-grid article.is-playing [data-video-toggle] {
  display: none;
}

.v1-video-demo-grid strong {
  display: block;
  padding: 10px;
}

.v1-product-definition-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.v1-product-definition-grid div {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 12%, rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.v1-product-definition-grid dt,
.v1-included-grid span {
  color: var(--v1-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.v1-product-definition-grid dd {
  color: var(--v1-text);
  font-weight: 800;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.v1-support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.v1-spec-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

.v1-spec-grid article {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 14%, rgba(0, 0, 0, 0.42));
  border: 1px solid var(--v1-line);
  padding: 14px;
}

.v1-generic-hero {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.v1-generic-art {
  min-height: 300px;
}

.v1-about-story,
.v1-review-directory {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  margin: 36px auto;
  max-width: 1180px;
  width: min(100% - 32px, 1180px);
}

.v1-timeline {
  display: grid;
  gap: 12px;
}

.v1-timeline span {
  background: var(--v1-panel);
  border-left: 3px solid var(--storefront-accent, #ff6a1a);
  padding: 18px;
}

.v1-page-hero-compact {
  min-height: 320px;
  padding: clamp(24px, 4vw, 42px);
}

.v1-tight-metrics,
.v1-action-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 18px;
}

.v1-tight-metrics article,
.v1-action-card-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 16px;
}

.v1-tight-metrics strong {
  color: #fff;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1;
}

.v1-tight-metrics span,
.v1-action-card-grid p,
.v1-compact-product-list span,
.v1-profile-card span,
.v1-profile-card small,
.v1-library-manager span,
.v1-checkout-layout span,
.v1-docs-layout p,
.v1-support-search p,
.v1-thankyou-download p {
  color: var(--v1-muted);
}

.v1-action-card-grid h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
}

.v1-action-card-grid a,
.v1-docs-layout aside a,
.v1-portal-layout aside a,
.v1-review-product-list a {
  color: var(--storefront-accent, #ff6a1a);
  font-weight: 900;
  text-decoration: none;
}

.v1-compact-product-list {
  display: grid;
  gap: 10px;
}

.v1-compact-product-list a,
.v1-review-product-list article,
.v1-library-manager article {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
  text-decoration: none;
}

.v1-row-art {
  border-radius: 7px;
  min-height: 64px;
}

.v1-row-price {
  align-items: end;
  display: grid;
  gap: 2px;
  justify-items: end;
}

.v1-row-price strong {
  color: var(--storefront-accent, #ff6a1a);
  font-size: 18px;
}

.v1-flash-sale-hero {
  align-items: end;
  max-width: none;
  min-height: clamp(340px, 54vh, 520px);
  width: 100%;
}

.v1-featured-deal,
.v1-featured-review {
  margin-block: 26px 18px;
}

.v1-featured-deal .v1-editorial-art,
.v1-featured-review .v1-editorial-art {
  min-height: 320px;
}

.v1-about-profile-hero {
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 340px;
}

.v1-profile-card {
  align-self: stretch;
  display: grid;
  gap: 10px;
  padding: 24px;
}

.v1-profile-card strong {
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.v1-minimal-about,
.v1-thankyou-download {
  display: grid;
  gap: 16px;
  margin-block: 28px;
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
}

.v1-minimal-about h1,
.v1-thankyou-download h1,
.v1-support-search h1 {
  color: #fff;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  margin: 0;
}

.v1-minimal-about .storefront-site-actions,
.v1-thankyou-download .storefront-site-actions {
  justify-content: center;
}

.v1-review-product-list,
.v1-library-manager {
  display: grid;
  gap: 10px;
  margin-block: 20px 42px;
}

.v1-review-product-list article {
  grid-template-columns: 94px minmax(0, 1fr) auto;
}

.v1-contact-support-hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr);
}

.v1-support-mini-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.v1-support-mini-form label {
  color: var(--v1-muted);
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.v1-support-mini-form :is(input, select),
.v1-support-search input {
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--v1-line);
  border-radius: 8px;
  color: var(--v1-text);
  min-height: 44px;
  padding: 0 12px;
}

.v1-docs-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: 240px minmax(0, 1fr);
  margin-block: 28px 48px;
  padding: 18px;
}

.v1-docs-layout aside,
.v1-portal-layout aside {
  display: grid;
  gap: 8px;
  align-content: start;
}

.v1-docs-layout aside a,
.v1-portal-layout aside a {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  padding: 10px 12px;
}

.v1-support-search {
  display: grid;
  gap: 16px;
  margin-block: 28px 18px;
  padding: clamp(26px, 5vw, 54px);
  text-align: center;
}

.v1-support-search form {
  margin-inline: auto;
  max-width: 720px;
  width: 100%;
}

.v1-support-search input {
  width: 100%;
}

.v1-portal-layout,
.v1-checkout-layout,
.v1-cart-drawer-preview {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(0, 1fr);
  margin-block: 28px 48px;
  padding: 18px;
}

.v1-checkout-layout,
.v1-cart-drawer-preview {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.v1-checkout-layout main,
.v1-checkout-layout aside,
.v1-cart-drawer-preview aside,
.v1-cart-drawer-preview main,
.v1-portal-layout main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.v1-checkout-layout main > article {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  display: grid;
  gap: 4px;
  padding: 14px;
}

.v1-checkout-layout.is-branded {
  background:
    radial-gradient(circle at 78% 24%, rgba(var(--storefront-accent-rgb, 255 106 26), 0.18), transparent 30%),
    var(--v1-panel);
}

.v1-cart-drawer-preview aside {
  border-right: 1px solid var(--v1-line);
  padding-right: 18px;
}

.v1-library-manager {
  padding: 18px;
}

.v1-library-manager header {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.v1-library-manager h1 {
  margin: 0;
}

.v1-thankyou-download .v1-compact-product-list {
  margin-inline: auto;
  max-width: 820px;
  text-align: left;
  width: 100%;
}

@media (max-width: 920px) {
  .v1-home-launch-hero,
  .v1-modern-hero,
  .v1-product-hero-split,
  .v1-product-marketplace,
  .v1-full-banner-hero,
  .v1-full-banner-buybar,
  .v1-full-banner-overview,
  .v1-full-banner-story article,
  .v1-full-banner-story article.is-reversed,
  .v1-full-banner-audio-panel,
  .v1-full-banner-bundle,
  .v1-marketplace-product-hero,
  .v1-marketplace-overview-card,
  .v1-marketplace-final-cta,
  .v1-product-content-grid,
  .v1-product-content-grid.is-banner,
  .v1-product-content-grid.is-marketplace,
  .v1-generic-hero,
  .v1-catalog-layout,
  .v1-editorial-feature,
  .v1-about-story,
  .v1-review-directory,
  .v1-about-profile-hero,
  .v1-contact-support-hero,
  .v1-docs-layout,
  .v1-portal-layout,
  .v1-checkout-layout,
  .v1-cart-drawer-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .v1-review-grid,
  .v1-dashboard-grid,
  .v1-support-grid,
  .v1-deals-board,
  .v1-market-grid,
  .v1-editorial-grid,
  .v1-compact-product-grid,
  .v1-feature-list,
  .v1-access-list,
  .v1-included-grid,
  .v1-photo-gallery,
  .v1-video-demo-grid,
  .v1-product-definition-grid,
  .v1-full-media,
  .v1-tight-metrics,
  .v1-action-card-grid,
  .v1-full-banner-highlight-row,
  .v1-full-banner-gallery-grid,
  .v1-full-banner-spec-grid,
  .v1-marketplace-feature-row,
  .v1-marketplace-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .v1-marketplace-content-grid > .v1-product-card,
  .v1-marketplace-content-grid > .v1-marketplace-overview-card,
  .v1-marketplace-content-grid > .v1-product-demo-card,
  .v1-marketplace-content-grid > #gallery,
  .v1-marketplace-highlights,
  .v1-marketplace-review-card,
  .v1-marketplace-mini-card {
    grid-column: auto;
  }

  .v1-marketplace-purchase {
    position: static;
  }

  .v1-full-banner-hero {
    min-height: auto;
    padding: 36px 20px;
  }

  .v1-full-banner-render {
    min-height: 320px;
  }

  .v1-full-banner-buybar {
    position: static;
  }

  .v1-full-banner-story article.is-reversed .v1-full-banner-story-image {
    order: initial;
  }

  .v1-full-banner-gallery-grid button.is-featured {
    grid-column: auto;
    grid-row: auto;
  }

  .v1-full-banner-review {
    grid-template-columns: minmax(0, 1fr);
  }

  .v1-compact-product-list a,
  .v1-review-product-list article,
  .v1-library-manager article {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .v1-row-price,
  .v1-review-product-list a,
  .v1-library-manager .store-button {
    grid-column: 2;
    justify-self: start;
  }

  .v1-photo-gallery figure:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .v1-audio-demo-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .v1-audio-demo-row small {
    grid-column: 2;
  }

  .v1-deal-strip,
  .v1-sticky-buy {
    grid-template-columns: minmax(0, 1fr);
  }

  .v1-filter-panel,
  .v1-sticky-buy {
    position: static;
  }

  .website-template-editor-product-workspace,
  .website-template-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-template-editor-preview .website-home-template-scale {
    transform: translateX(-50%) scale(0.42);
    width: 1440px;
  }
}

.brand-domain-page {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.brand-domain-start-card,
.brand-smart-card,
.brand-current-task,
.brand-live-verification,
.brand-feature-card,
.brand-advanced-dns,
.brand-side-card {
  border-radius: 8px;
  min-width: 0;
}

.brand-domain-start-card {
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(22px, 4vw, 34px);
}

.brand-domain-kicker {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(255, 106, 26, 0.18));
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 999px;
  color: #c4b5fd;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 12px;
  padding: 5px 10px;
  text-transform: uppercase;
}

.brand-domain-start-card h2,
.brand-current-task h2,
.brand-smart-card h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.08;
  margin: 0 0 10px;
}

.brand-domain-start-card p,
.brand-current-task p,
.brand-smart-card p,
.brand-side-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.brand-domain-start-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.brand-domain-faq-strip,
.brand-domain-actions,
.brand-provider-select {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-domain-faq-strip span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.brand-domain-stepper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  overflow-x: auto;
  padding: 18px;
}

.brand-domain-step {
  align-items: center;
  color: var(--muted);
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 120px;
  position: relative;
  text-align: center;
}

.brand-domain-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 2px;
  left: calc(50% + 24px);
  position: absolute;
  top: 18px;
  width: calc(100% - 48px);
}

.brand-domain-step span {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 36px;
  justify-content: center;
  width: 36px;
  z-index: 1;
}

.brand-domain-step strong {
  color: var(--text);
  font-size: 13px;
}

.brand-domain-step small {
  font-size: 12px;
}

.brand-domain-step.is-complete span,
.brand-domain-status.is-complete,
.brand-live-dot.is-complete {
  background: var(--success-soft);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--success);
}

.brand-domain-step.is-progress span,
.brand-domain-status.is-progress,
.brand-live-dot.is-progress {
  background: var(--warning-soft);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--warning);
}

.brand-domain-step.is-error span,
.brand-domain-status.is-error,
.brand-live-dot.is-error {
  background: var(--danger-soft);
  border-color: rgba(251, 113, 133, 0.35);
  color: var(--danger);
}

.brand-domain-workflow {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.7fr) minmax(260px, 0.3fr);
}

.brand-domain-main,
.brand-domain-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.brand-smart-card,
.brand-current-task {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 3vw, 28px);
}

.brand-domain-complete {
  background:
    radial-gradient(circle at 16% 14%, rgba(52, 211, 153, 0.18), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255, 106, 26, 0.15), transparent 26%),
    linear-gradient(180deg, rgba(16, 185, 129, 0.09), rgba(255, 255, 255, 0.026));
  min-height: 520px;
  overflow: hidden;
  position: relative;
}

.brand-complete-confetti {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.brand-complete-confetti span {
  background: #34d399;
  border-radius: 2px;
  height: 12px;
  opacity: 0.8;
  position: absolute;
  transform: rotate(18deg);
  width: 7px;
}

.brand-complete-confetti span:nth-child(1) {
  left: 12%;
  top: 16%;
}

.brand-complete-confetti span:nth-child(2) {
  background: #a78bfa;
  left: 32%;
  top: 9%;
  transform: rotate(-28deg);
}

.brand-complete-confetti span:nth-child(3) {
  background: #ff7a1a;
  right: 24%;
  top: 14%;
  transform: rotate(42deg);
}

.brand-complete-confetti span:nth-child(4) {
  background: #60a5fa;
  right: 10%;
  top: 28%;
  transform: rotate(-14deg);
}

.brand-complete-confetti span:nth-child(5) {
  background: #fbbf24;
  bottom: 26%;
  left: 18%;
  transform: rotate(64deg);
}

.brand-complete-confetti span:nth-child(6) {
  background: #fb7185;
  bottom: 18%;
  right: 18%;
  transform: rotate(-46deg);
}

.brand-complete-hero,
.brand-complete-grid,
.brand-complete-actions {
  position: relative;
  z-index: 1;
}

.brand-complete-hero {
  align-self: center;
  display: grid;
  gap: 12px;
  max-width: 680px;
}

.brand-domain-complete h2 {
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1;
  margin: 0;
}

.brand-domain-complete p {
  font-size: 17px;
  max-width: 620px;
}

.brand-complete-domain {
  align-items: center;
  background: rgba(8, 13, 21, 0.58);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 14px 16px;
  width: min(100%, 520px);
}

.brand-complete-domain strong {
  color: var(--text);
  font-size: 18px;
}

.brand-complete-domain span {
  color: var(--success);
  font-size: 13px;
  font-weight: 900;
}

.brand-complete-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-complete-grid > div {
  background: rgba(8, 13, 21, 0.58);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
}

.brand-complete-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-complete-grid strong {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-complete-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-smart-card-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.brand-provider-detected-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

.brand-provider-detected-grid code,
.brand-provider-mini,
.brand-dns-copy-field code,
.brand-record-summary strong,
.brand-dns-table code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-provider-detected-grid code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
}

.brand-provider-logo,
.brand-provider-mini b {
  align-items: center;
  background: linear-gradient(135deg, #ff7a1a, #8b5cf6);
  border-radius: 8px;
  color: white;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.brand-current-header {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.brand-provider-status-row {
  align-content: start;
  background: rgba(8, 13, 21, 0.38);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.brand-provider-status-row strong,
.brand-provider-status-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-provider-status-row span {
  color: var(--muted);
  font-size: 12px;
}

.brand-current-action-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
}

.brand-record-panel,
.brand-provider-instructions {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.brand-record-panel {
  background: rgba(8, 13, 21, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.brand-record-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
}

.brand-record-summary > div {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 130px minmax(0, 1fr);
  padding: 12px 14px;
}

.brand-record-summary > div + div {
  border-top: 1px solid var(--line);
}

.brand-record-summary span,
.brand-dns-copy-field span {
  color: var(--muted);
  font-size: 12px;
}

.brand-record-summary strong,
.brand-dns-copy-field code,
.brand-dns-table code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.brand-provider-instructions {
  background: rgba(8, 13, 21, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.brand-provider-instructions h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.brand-provider-instructions p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.brand-provider-instructions ol {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.brand-dns-copy-field {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(86px, 110px) minmax(0, 1fr) auto;
  padding: 12px;
}

.brand-live-verification {
  align-items: center;
  background: rgba(16, 185, 129, 0.055);
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px;
}

.brand-live-verification > div {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.brand-live-dot {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
}

.brand-domain-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  width: max-content;
}

.brand-domain-warning,
.brand-domain-error,
.brand-domain-tip {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
}

.brand-domain-warning {
  background: var(--warning-soft);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--warning);
}

.brand-domain-error {
  background: var(--danger-soft);
  border: 1px solid rgba(251, 113, 133, 0.28);
  color: var(--danger);
}

.brand-domain-tip {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.brand-feature-health {
  display: grid;
  gap: 12px;
}

.brand-email-settings {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 24px);
}

.brand-email-settings.is-complete {
  background:
    radial-gradient(circle at 20% 16%, rgba(139, 92, 246, 0.16), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(52, 211, 153, 0.15), transparent 24%),
    linear-gradient(180deg, rgba(16, 185, 129, 0.075), rgba(255, 255, 255, 0.024));
  overflow: hidden;
  position: relative;
}

.brand-email-complete-head,
.brand-email-complete-summary,
.brand-email-settings.is-complete .brand-email-settings-grid,
.brand-email-settings.is-complete .brand-email-test-panel {
  position: relative;
  z-index: 1;
}

.brand-email-complete-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.brand-email-complete-head h2 {
  font-size: clamp(24px, 3.8vw, 38px);
  line-height: 1.05;
  margin: 0;
}

.brand-email-complete-head p {
  font-size: 16px;
  margin: 8px 0 0;
  max-width: 650px;
}

.brand-email-complete-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-email-complete-summary > div {
  background: rgba(8, 13, 21, 0.58);
  border: 1px solid rgba(52, 211, 153, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
}

.brand-email-complete-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-email-complete-summary strong {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-email-settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.brand-email-identity-panel,
.brand-email-test-panel {
  background: rgba(8, 13, 21, 0.48);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.brand-email-settings.is-complete .brand-email-identity-panel,
.brand-email-settings.is-complete .brand-email-test-panel {
  background: rgba(8, 13, 21, 0.58);
  border-color: rgba(52, 211, 153, 0.16);
}

.brand-email-identity-panel h3,
.brand-email-test-panel h3 {
  font-size: 15px;
  margin: 0;
}

.brand-email-test-panel {
  align-items: end;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto;
}

.brand-email-test-panel p {
  margin: 0;
}

.brand-email-settings .brand-sender-table input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  max-width: 150px;
  padding: 8px 10px;
  width: 100%;
}

.brand-email-settings .brand-sender-table code {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-feature-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-feature-card {
  display: grid;
  gap: 12px;
  min-height: 150px;
  padding: 18px;
}

.brand-feature-card h3,
.brand-side-card h3,
.brand-live-verification h3 {
  font-size: 15px;
  margin: 0;
}

.brand-feature-card p,
.brand-feature-card strong,
.brand-live-verification p,
.brand-live-verification small {
  margin: 0;
}

.brand-feature-card strong {
  color: var(--muted);
  font-size: 13px;
}

.brand-advanced-dns {
  display: grid;
  gap: 0;
  padding: 0;
}

.brand-advanced-dns > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  list-style: none;
  padding: 18px;
}

.brand-advanced-dns > summary::-webkit-details-marker {
  display: none;
}

.brand-advanced-dns > summary h2,
.brand-advanced-dns > summary p {
  margin: 0;
}

.brand-advanced-dns > summary span {
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
}

.brand-advanced-dns[open] > summary span {
  color: var(--accent);
}

.brand-advanced-dns-body {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.brand-dns-accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.brand-dns-accordion summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  padding: 14px;
}

.brand-dns-accordion summary small {
  color: var(--muted);
}

.brand-dns-table {
  display: grid;
  min-width: 0;
}

.brand-dns-table [role="row"] {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 80px minmax(110px, 0.8fr) minmax(180px, 1.5fr) 70px 110px;
  padding: 12px 14px;
}

.brand-dns-table [role="row"] + [role="row"] {
  border-top: 1px solid var(--line);
}

.brand-dns-table [role="columnheader"] {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-dns-table [role="cell"] {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.brand-dns-table button {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 0;
}

.brand-side-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.brand-guide-list {
  display: grid;
  gap: 12px;
}

.brand-guide-list span {
  border-left: 2px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 3px;
  padding-left: 12px;
}

.brand-guide-list strong,
.brand-guide-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.brand-guide-list strong {
  color: inherit;
}

.brand-guide-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-guide-list span.is-complete {
  border-color: var(--success);
  color: var(--success);
}

.brand-guide-list span.is-progress {
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.brand-guide-list span.is-error {
  border-color: var(--danger);
  color: var(--danger);
}

.brand-provider-mini {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.brand-provider-mini div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brand-provider-mini small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-button.ghost.danger {
  border-color: rgba(251, 113, 133, 0.35);
  color: var(--danger);
}

@media (max-width: 1100px) {
  .brand-domain-workflow,
  .brand-current-header,
  .brand-current-action-grid,
  .brand-email-complete-summary,
  .brand-email-settings-grid,
  .brand-email-test-panel {
    grid-template-columns: 1fr;
  }

  .brand-domain-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .brand-domain-start-form,
  .brand-record-summary > div,
  .brand-dns-copy-field {
    grid-template-columns: 1fr;
  }

  .brand-domain-side,
  .brand-feature-grid {
    grid-template-columns: 1fr;
  }

  .brand-smart-card-head,
  .brand-email-complete-head,
  .brand-live-verification {
    align-items: stretch;
    flex-direction: column;
  }

  .brand-dns-table [role="row"] {
    grid-template-columns: 1fr;
  }

  .brand-dns-table [role="columnheader"] {
    display: none;
  }

  .brand-dns-table [role="cell"]::before {
    color: var(--muted);
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }
}

.library-update-panel > div,
.library-review-form {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 10px;
  padding: 10px;
  width: 100%;
}

.library-review-form label {
  display: grid;
  gap: 6px;
}

.library-review-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.library-review-form input,
.library-review-form select,
.library-review-form textarea {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  padding: 10px 11px;
  width: 100%;
}

.library-review-form textarea {
  min-height: 104px;
  resize: vertical;
}

.library-review-form .form-grid.compact {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  width: 100%;
}

.library-update-panel p,
.library-update-panel span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.library-license-panel summary,
.library-review-panel summary {
  list-style: none;
}

.library-license-panel summary::-webkit-details-marker,
.library-review-panel summary::-webkit-details-marker {
  display: none;
}

.library-update-panel summary {
  list-style: none;
}

.library-update-panel summary::-webkit-details-marker {
  display: none;
}

.library-license-key {
  width: min(100%, 420px);
}

.library-status {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.customer-account-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.customer-account-tabs::-webkit-scrollbar {
  display: none;
}

.customer-account-tabs a {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  min-height: 38px;
  padding: 0 12px;
}

.customer-account-tabs a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text);
}

.customer-account-section {
  display: grid;
  gap: 16px;
  margin: 0 0 34px;
  min-width: 0;
  scroll-margin-top: 96px;
}

.customer-section-head {
  align-items: end;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.customer-section-head h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}

.customer-section-head p {
  color: var(--muted);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 760px;
}

.customer-section-head > strong {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-size: 22px;
  justify-content: center;
  min-height: 46px;
  min-width: 58px;
  padding: 0 14px;
}

.customer-portal-grid,
.customer-pref-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  min-width: 0;
}

.customer-portal-card {
  align-content: start;
  display: grid;
  gap: 12px;
}

.customer-portal-card h3,
.customer-account-grid h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.customer-portal-card p,
.customer-account-grid p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.customer-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.customer-receipt-panel {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.customer-receipt-panel summary {
  list-style: none;
}

.customer-receipt-panel summary::-webkit-details-marker {
  display: none;
}

.customer-receipt-panel > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 10px;
  width: 100%;
}

.customer-detail-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.customer-detail-list div {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
  min-width: 0;
}

.customer-detail-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.customer-detail-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-license-key {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.customer-license-key code {
  color: var(--text);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.customer-account-empty {
  min-height: 220px;
}

.developer-shell {
  display: grid;
  gap: 0;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 76px);
  min-width: 0;
}

.developer-mobile-bar,
.developer-sidebar-head,
.developer-drawer-backdrop {
  display: none;
}

.developer-sidebar {
  align-content: start;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 26px;
  grid-template-rows: auto auto 1fr;
  min-height: calc(100vh - 76px);
  min-width: 0;
  padding: 26px 22px;
  position: sticky;
  top: 76px;
}

.developer-sidebar-nav {
  display: grid;
  gap: 6px;
}

.developer-sidebar-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.developer-sidebar a:not(.developer-help-card) {
  align-items: center;
  border-radius: 8px;
  color: var(--soft);
  display: flex;
  gap: 10px;
  min-height: 42px;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.developer-sidebar a:not(.developer-help-card):hover,
.developer-sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.developer-sidebar a.active {
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 800;
}

.developer-sidebar-subnav {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 2px;
  margin: 0 0 8px 26px;
  padding-left: 10px;
}

.developer-sidebar-subnav a:not(.developer-help-card) {
  border-radius: 7px;
  font-size: 12px;
  min-height: 30px;
  padding: 6px 9px;
}

.developer-sidebar-subnav a.active {
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-icon {
  display: block;
  flex: 0 0 auto;
  height: 17px;
  max-height: 17px;
  max-width: 17px;
  width: 17px;
}

svg.nav-icon,
.developer-sidebar .nav-icon {
  height: 17px !important;
  width: 17px !important;
}

.developer-help-card .nav-icon {
  height: 22px !important;
  max-height: 22px;
  max-width: 22px;
  width: 22px !important;
}

.developer-help-card {
  align-items: center;
  align-self: end;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 16px;
}

.developer-help-card strong,
.developer-help-card small {
  display: block;
}

.developer-help-card small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.developer-main,
.developer-list,
.developer-form,
.developer-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.developer-main {
  align-content: start;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px) 56px;
  width: min(100%, 1480px);
}

.developer-main:has(.website-builder-v1-form) {
  overflow: hidden;
  padding: clamp(18px, 2vw, 28px);
  width: min(100%, 1480px);
}

.developer-shell:has([data-storefront-readiness]) .developer-main {
  max-width: 1080px;
  padding-left: clamp(28px, 3vw, 40px);
  padding-right: clamp(28px, 3vw, 40px);
  width: 100%;
}

.developer-section-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.developer-section-header h2 {
  font-size: 22px;
  line-height: 1.2;
}

.developer-hero h1 {
  font-size: clamp(32px, 3vw, 42px);
}

.developer-main > .store-hero {
  align-items: start;
  margin-bottom: 0;
  min-height: 0;
}

.developer-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.developer-toolbar span,
.developer-muted {
  color: var(--muted);
}

.developer-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr) auto;
  padding: 16px;
}

.developer-row h2,
.developer-section h2,
.developer-form-wrap h1 {
  margin: 0;
}

.email-sender-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
}

.email-local-control {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.email-local-control input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.email-local-control span {
  align-items: center;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  display: flex;
  padding: 0 12px;
  white-space: nowrap;
}

.developer-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.developer-stats.stacked {
  grid-template-columns: 1fr 1fr;
}

.developer-stats div,
.developer-metrics div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.developer-stats dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.developer-stats dd {
  color: var(--text);
  font-weight: 800;
  margin: 4px 0 0;
}

.developer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.developer-actions.wide {
  align-items: stretch;
  flex-direction: column;
}

/* === Shared developer status styles ===
 * Owners: public/store/modules/developer/dashboard.js, public/store/modules/developer/products.js,
 * public/store/modules/developer/licensing.js, public/store/modules/storefront/index.js
 */

.status-pill {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  border-radius: 999px;
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.status-pill.muted {
  background: rgba(159, 176, 200, 0.12);
  border-color: var(--line);
  color: var(--muted);
}

.status-pill.danger {
  background: rgba(255, 138, 154, 0.12);
  border-color: rgba(255, 138, 154, 0.28);
  color: var(--danger);
}

/* === Dashboard domain styles ===
 * Owner: public/store/modules/developer/dashboard.js
 * Notes: launch center and business command center styles stay in their existing cascade order.
 */

.developer-launch-center {
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.developer-launch-progress {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.developer-launch-progress > div {
  background: rgba(8, 13, 21, 0.88);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.developer-launch-progress span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  display: block;
  height: 100%;
}

.developer-next-action {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px;
}

.developer-next-action p {
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.developer-launch-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.developer-launch-grid div {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-height: 108px;
  padding: 10px;
}

.developer-launch-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.developer-launch-grid dd {
  color: var(--text);
  font-weight: 800;
  margin: 0;
  text-transform: capitalize;
}

.developer-launch-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.developer-launch-list li {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 54px;
  padding: 10px 12px;
}

.developer-launch-list span:not(.status-pill) {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
  text-transform: capitalize;
}

.developer-empty-note {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 6px;
  padding: 14px;
}

.developer-empty-note p {
  margin: 0;
}

.developer-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.developer-metrics strong {
  display: block;
  font-size: 28px;
}

.developer-metrics span {
  color: var(--muted);
}

/* === Dashboard business command center styles ===
 * Owner: public/store/modules/developer/dashboard.js
 */

.command-center,
.command-panel {
  display: grid;
  gap: 14px;
}

.dashboard-section {
  gap: 20px;
  margin-top: 24px;
}

.dashboard-section + .dashboard-section {
  margin-top: 34px;
}

.command-kpi-grid {
  display: grid;
  gap: 12px;
}

.command-kpi-row {
  display: grid;
  gap: 12px;
}

.command-kpi-row-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.command-kpi-row-secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.command-kpi {
  background: rgba(8, 13, 21, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 14px;
}

.command-icon {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.command-icon svg {
  display: block;
  height: 17px;
  width: 17px;
}

.command-kpi.unavailable {
  border-style: dashed;
}

.command-kpi span,
.command-money-list dt,
.command-usage-list dt,
.command-product-table [role="columnheader"] {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.command-kpi strong {
  align-self: end;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.command-kpi small,
.command-product-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.command-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  margin-bottom: 18px;
}

.command-money-list,
.command-usage-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.command-money-list div,
.command-usage-list div {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 10px 12px;
}

.command-money-list dd,
.command-usage-list dd {
  color: var(--text);
  font-weight: 850;
  margin: 0;
  text-align: right;
}

.command-money-list span {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1 / -1;
}

.command-usage-grid,
.command-attention-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.command-activity-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.command-activity-list li {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 12px;
}

.dashboard-attention-item,
.dashboard-all-clear {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.dashboard-all-clear {
  border-color: color-mix(in srgb, var(--success) 22%, var(--line));
}

.command-activity-list span,
.command-activity-list time {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.command-activity-list time {
  text-align: right;
}

.command-product-table {
  display: grid;
  gap: 7px;
  overflow-x: auto;
}

.command-product-table [role="row"] {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 1.35fr) repeat(5, minmax(86px, 0.75fr)) minmax(110px, 0.9fr);
  min-width: 820px;
  padding: 10px;
}

.command-product-table [role="row"]:first-child {
  background: transparent;
  border-color: transparent;
  min-height: auto;
  padding-bottom: 0;
}

.command-product-table [role="cell"] {
  color: var(--soft);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.command-product-table strong[role="cell"] {
  color: var(--text);
}

.dashboard-operations-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
}

.dashboard-operations-grid > .command-panel {
  align-content: start;
  grid-template-rows: 86px auto;
  min-width: 0;
}

.dashboard-operations-grid > .command-panel > .developer-section-header {
  align-items: flex-start;
  min-height: 86px;
}

.command-product-list {
  display: grid;
  gap: 10px;
}

.command-product-item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px;
}

.command-product-item strong,
.command-product-item span,
.command-product-item small {
  display: block;
}

.command-product-item span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.command-product-thumb {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  height: 46px;
  justify-content: center;
  overflow: hidden;
  width: 46px;
}

.command-product-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* === Developer product catalog styles ===
 * Owner: public/store/modules/developer/products.js
 */

.developer-catalog-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  min-width: min(100%, 520px);
}

.developer-catalog-summary div {
  background: rgba(8, 13, 21, 0.76);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 12px;
}

.developer-catalog-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.developer-catalog-summary dd {
  color: var(--text);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.developer-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.developer-catalog-filters a {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.developer-catalog-filters a.active,
.developer-catalog-filters a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.developer-catalog-filters span {
  color: var(--muted);
  font-size: 12px;
}

.developer-catalog-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-catalog-card {
  background: rgba(15, 21, 32, 0.92);
  border: 1px solid rgba(159, 176, 200, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100%;
  overflow: hidden;
}

.developer-catalog-art {
  align-items: center;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 12%, transparent)),
    var(--surface-2);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.developer-catalog-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.developer-catalog-art.placeholder::after {
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  content: "";
  height: 72%;
  position: absolute;
  width: 72%;
}

.developer-catalog-art.placeholder span {
  color: var(--accent);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 950;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}

.developer-catalog-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.developer-catalog-status,
.developer-catalog-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.developer-catalog-body h2 {
  font-size: 22px;
  line-height: 1.12;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.developer-catalog-body p:not(.store-eyebrow) {
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0 0;
}

.developer-catalog-price {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-catalog-price div {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 10px;
}

.developer-catalog-price .sale {
  border-color: var(--accent-line);
}

.developer-catalog-price span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.developer-catalog-price strong {
  color: var(--text);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.developer-catalog-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.developer-catalog-issues span {
  background: rgba(159, 176, 200, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  padding: 6px 8px;
}

.developer-catalog-issues span:not([data-product-issue="none"]) {
  background: rgba(255, 184, 107, 0.12);
  border-color: rgba(255, 184, 107, 0.3);
  color: #ffd7a8;
}

.developer-catalog-actions {
  border-top: 1px solid var(--line);
  padding: 14px 16px 16px;
}

.developer-catalog-actions .store-button:first-child {
  min-width: 92px;
}

.developer-catalog-listing-links {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.developer-catalog-listing-links .store-link:last-child {
  margin-left: auto;
  text-align: right;
}

.developer-form-wrap {
  display: grid;
  gap: 16px;
}

/* === Product command center styles === */
.product-command-center {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
  min-width: 0;
}

.product-command-topbar,
.product-command-actions,
.product-command-title-row,
.product-command-badges,
.product-command-meta,
.product-hise-layout,
.product-rest-card,
.product-command-bottom-grid {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.product-command-topbar {
  justify-content: space-between;
}

.product-command-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.product-command-hero,
.product-command-kpis,
.product-command-overview-grid,
.product-command-dashboard-grid,
.product-command-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.product-command-hero {
  grid-template-columns: 240px minmax(0, 1fr) 320px;
}

.product-command-artwork-card,
.product-health-card,
.product-kpi-card,
.product-command-center .developer-section {
  background: linear-gradient(145deg, rgba(13, 30, 45, 0.96), rgba(8, 18, 29, 0.94));
  border: 1px solid rgba(116, 142, 166, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.product-command-artwork-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.product-command-artwork {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
}

.product-command-artwork img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-command-identity {
  align-self: center;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.product-command-title-row {
  align-items: baseline;
  flex-wrap: wrap;
}

.product-command-title-row h1 {
  font-size: clamp(1.8rem, 2.4vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.product-command-identity p,
.product-command-center p {
  color: var(--muted);
  line-height: 1.55;
}

.product-command-badges,
.product-command-meta {
  flex-wrap: wrap;
}

.product-command-badge {
  align-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 6px;
  min-height: 26px;
  padding: 4px 10px;
  white-space: nowrap;
}

.product-command-badge.success {
  background: rgba(40, 199, 111, 0.12);
  border-color: rgba(40, 199, 111, 0.28);
  color: #45e08a;
}

.product-command-badge.info {
  background: rgba(45, 127, 249, 0.12);
  border-color: rgba(45, 127, 249, 0.3);
  color: #8ab9ff;
}

.product-command-badge.danger {
  background: rgba(255, 90, 90, 0.12);
  border-color: rgba(255, 90, 90, 0.34);
  color: #ff8a8a;
}

.product-command-badge.muted {
  color: var(--muted);
}

.product-command-meta {
  align-items: stretch;
}

.product-command-meta div {
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  display: grid;
  gap: 6px;
  min-width: 120px;
  padding-left: 14px;
}

.product-command-meta dt,
.product-rest-card dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.product-command-meta dd {
  margin: 0;
}

.product-command-meta button {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.product-health-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.product-health-body {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 130px 1fr;
}

.product-health-ring {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, #091827 58%, transparent 59%),
    conic-gradient(#45d782 calc(var(--health-score) * 1%), rgba(148, 163, 184, 0.16) 0);
  border-radius: 50%;
  display: grid;
  justify-items: center;
  padding: 18px;
}

.product-health-ring strong {
  font-size: 1.65rem;
  line-height: 1;
}

.product-health-ring span {
  color: var(--muted);
  font-size: 0.76rem;
}

.product-health-card ul,
.product-activity-card ul,
.product-files-card ul,
.product-version-card ol {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-health-card li,
.product-readiness-item,
.product-activity-card li,
.product-files-card li {
  align-items: center;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.product-health-card li {
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-command-check {
  align-items: center;
  background: rgba(245, 158, 11, 0.18);
  border-radius: 999px;
  color: #f7b955;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.product-command-check.complete,
.product-command-check.ready {
  background: rgba(40, 199, 111, 0.18);
  color: #45d782;
}

.product-command-check.blocking {
  background: rgba(255, 90, 90, 0.16);
  color: #ff7b7b;
}

.product-command-tabs {
  background: rgba(10, 24, 38, 0.92);
  border: 1px solid rgba(116, 142, 166, 0.22);
  border-radius: 8px;
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
}

.product-command-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  flex: 1 0 auto;
  font-weight: 700;
  min-width: 112px;
  padding: 16px 18px;
  text-align: center;
  text-decoration: none;
}

.product-command-tabs a.active {
  border-color: #ff6a1a;
  color: #ff8a3d;
}

.product-command-page,
.product-command-edit-shell {
  display: none;
}

.product-command-page.is-active,
.product-command-edit-shell.is-active {
  animation: product-command-page-slide 220ms ease-out;
  display: grid;
}

@keyframes product-command-page-slide {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.product-command-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-kpi-card {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 16px;
}

.product-kpi-icon {
  align-items: center;
  background: rgba(255, 106, 26, 0.14);
  border-radius: 8px;
  color: #ff9a57;
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.product-kpi-card strong {
  display: block;
  font-size: 1.3rem;
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.product-kpi-card p,
.product-kpi-card small {
  margin: 0;
}

.product-kpi-card small,
.product-kpi-card p {
  color: var(--muted);
}

.positive {
  color: #45d782;
}

.negative {
  color: #ff7b7b;
}

.product-command-overview-grid {
  align-items: start;
  grid-template-columns: 350px minmax(0, 1fr);
}

.product-command-dashboard-grid {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-command-left,
.product-command-right {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.product-command-center .developer-section {
  padding: 20px;
}

.product-command-center .developer-section h2 {
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.product-command-center .developer-section > .store-button,
.product-command-center .developer-section > .store-link {
  margin-top: 14px;
}

.product-command-compat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-command-compat span {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 3px 7px;
}

.product-readiness-bar {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.product-readiness-bar span {
  background: linear-gradient(90deg, #45d782, #39e596);
  display: block;
  height: 100%;
}

.product-readiness-grid {
  display: grid;
  gap: 16px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.product-readiness-item {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}

.product-readiness-item strong,
.product-activity-card strong,
.product-files-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.product-readiness-item p,
.product-activity-card small,
.product-version-card small {
  color: var(--muted);
  margin: 2px 0 0;
}

.product-hise-command-card {
  border-color: rgba(168, 85, 247, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 18px 50px rgba(0, 0, 0, 0.22) !important;
}

.product-hise-layout {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
}

.product-package-includes {
  border-left: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.product-package-includes span {
  color: var(--muted);
  font-size: 0.9rem;
}

.product-command-last {
  color: var(--muted);
  display: grid;
  font-size: 0.8rem;
  justify-items: end;
}

.product-rest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  padding: 20px;
}

.product-rest-card dl {
  border-left: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 22px;
}

.product-rest-card dd {
  margin: 4px 0 0;
}

.product-activity-card li {
  grid-template-columns: 28px minmax(0, 1fr);
}

.product-activity-card li > span {
  background: rgba(40, 199, 111, 0.14);
  border-radius: 50%;
  height: 28px;
  width: 28px;
}

.product-command-bottom-grid {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(260px, 0.95fr);
}

.product-files-card li {
  grid-template-columns: 36px minmax(0, 1.3fr) minmax(110px, 0.8fr) auto;
}

.file-icon {
  align-items: center;
  background: rgba(45, 127, 249, 0.14);
  border-radius: 6px;
  color: #9bc3ff;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.product-files-card small,
.product-files-card em {
  color: var(--muted);
  font-style: normal;
}

.product-version-card ol {
  counter-reset: version;
}

.product-version-card li {
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  display: grid;
  gap: 4px;
  padding-left: 16px;
  position: relative;
}

.product-version-card li::before {
  background: #091827;
  border: 2px solid #45d782;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: -5px;
  position: absolute;
  top: 4px;
  width: 8px;
}

.product-version-card li span {
  color: #45d782;
  font-size: 0.76rem;
}

.product-version-card p {
  margin: 0;
}

.product-quick-actions-card {
  align-content: start;
  display: grid;
  gap: 10px;
}

.product-quick-actions-card .store-button {
  justify-content: flex-start;
  width: 100%;
}

.store-button.danger,
.product-quick-actions-card .danger {
  border-color: rgba(255, 90, 90, 0.35);
  color: #ff7b7b;
}

@media (max-width: 1180px) {
  .product-command-hero {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .product-command-center > .product-command-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .product-health-card {
    grid-column: 1 / -1;
  }

  .product-command-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-command-overview-grid,
  .product-command-dashboard-grid,
  .product-command-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .product-command-topbar,
  .product-command-actions,
  .product-hise-layout,
  .product-rest-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .product-command-topbar,
  .product-command-actions {
    flex-direction: column;
  }

  .product-command-hero,
  .product-command-kpis,
  .product-command-overview-grid,
  .product-command-dashboard-grid,
  .product-readiness-grid,
  .product-hise-layout,
  .product-rest-card {
    grid-template-columns: 1fr;
  }

  .product-command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-command-center > .product-command-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-health-body,
  .product-files-card li {
    grid-template-columns: 1fr;
  }

  .product-package-includes,
  .product-rest-card dl {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 520px) {
  .product-command-kpis {
    grid-template-columns: 1fr;
  }

  .product-command-title-row h1 {
    font-size: 1.65rem;
  }
}

.product-catalog-row {
  grid-template-columns: 140px minmax(0, 1fr) minmax(190px, auto);
  grid-template-rows: auto;
}

.product-catalog-row .developer-catalog-art {
  aspect-ratio: 1 / 1;
  min-height: 140px;
}

.product-catalog-row .developer-catalog-actions {
  align-content: center;
  align-items: stretch;
  border-left: 1px solid var(--line);
  border-top: 0;
  flex-direction: column;
  min-width: 190px;
}

.product-catalog-row .developer-catalog-actions .store-button,
.product-catalog-row .developer-catalog-actions .store-link {
  justify-content: center;
  max-width: 100%;
  text-align: center;
  width: 100%;
}

.compact-product-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-product-meta span {
  background: rgba(8, 13, 21, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
}

.compact-product-meta b {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.product-command-header {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

.product-command-header .product-detail-media {
  margin: 0;
  min-height: 112px;
}

.product-command-actions,
.product-command-tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.product-command-tabs {
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
  margin: 4px 0 8px;
}

.product-command-tabs a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 0;
  text-decoration: none;
}

.product-command-tabs a:hover {
  color: var(--text);
}

.product-command-center > .product-command-tabs {
  background: rgba(10, 24, 38, 0.92);
  border: 1px solid rgba(116, 142, 166, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: flex-start;
  margin: 0;
  overflow: visible;
  position: sticky;
  top: 10px;
  z-index: 12;
}

.product-command-center > .product-command-tabs a {
  border-bottom: 2px solid transparent;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px 8px;
  text-align: center;
}

@media (min-width: 1400px) {
  .product-command-center > .product-command-tabs {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

.product-command-center > .product-command-tabs a.active {
  background: rgba(255, 106, 26, 0.1);
  border-color: #ff6a1a;
  color: #ff8a3d;
}

.code-link {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.developer-stats.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-stats code {
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.advanced-integration-credentials .store-actions,
.hise-package-panel .store-actions {
  align-items: center;
  flex-wrap: wrap;
}

.store-modal-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 80;
}

.store-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 16px;
  max-width: 620px;
  padding: 18px;
  width: min(100%, 620px);
}

.hise-package-modal .developer-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .product-catalog-row,
  .product-command-header {
    grid-template-columns: 1fr;
  }

  .product-catalog-row .developer-catalog-actions {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .compact-product-meta,
  .hise-package-modal .developer-form-grid,
  .developer-stats.compact {
    grid-template-columns: 1fr;
  }

  .product-command-actions {
    justify-content: flex-start;
  }

  .developer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

.developer-form {
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.developer-form.compact-form {
  padding: 14px;
}

.developer-form label,
.developer-check,
.tools-product-grid label {
  color: var(--soft);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}

.developer-form input,
.developer-form select,
.developer-form textarea,
.tools-product-grid select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  padding: 11px 12px;
  width: 100%;
}

.developer-form textarea {
  resize: vertical;
}

.developer-form input:focus,
.developer-form select:focus,
.developer-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.developer-form-grid,
.developer-file-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-form-section,
.developer-onboarding,
.developer-setup-panel {
  display: grid;
  gap: 14px;
}

.developer-key-list {
  display: grid;
  gap: 10px;
}

.developer-key-row {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.developer-key-row p,
.developer-key-row small {
  color: var(--muted);
  margin: 4px 0 0;
}

.developer-code-block {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  overflow-x: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.developer-code-block.compact {
  font-size: 12px;
  padding: 10px;
}

/* === Licensing domain styles ===
 * Owner: public/store/modules/developer/licensing.js
 */

.licensing-framework-shell,
.licensing-workspace {
  display: grid;
  gap: 14px;
}

.licensing-framework-selector {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.licensing-framework-selector.tools-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.licensing-framework-selector.api-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.licensing-framework-choice {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  justify-content: center;
  min-height: 76px;
  padding: 16px;
  text-decoration: none;
}

.licensing-framework-choice.active,
.licensing-framework-choice:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.licensing-framework-choice strong {
  font-size: 18px;
}

.licensing-credential-history {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.licensing-credential-history summary {
  cursor: pointer;
  font-weight: 800;
  list-style-position: inside;
  padding: 14px 16px;
}

.licensing-credential-list {
  border-top: 1px solid var(--line);
  display: grid;
}

.licensing-credential-row {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(130px, 0.9fr) minmax(110px, 0.8fr) auto;
  padding: 12px 16px;
}

.licensing-credential-row:first-child {
  border-top: 0;
}

.licensing-credential-row p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.tools-hub-card {
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  min-height: 178px;
  text-align: left;
}

.tools-hub-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.tools-hub-card .store-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.licensing-workspace-header,
.licensing-card {
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.licensing-workspace-header h2,
.licensing-card h3 {
  margin: 0;
}

.licensing-card {
  display: grid;
  gap: 14px;
}

.licensing-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.licensing-step-list {
  counter-reset: licensing-steps;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.licensing-step-list li {
  align-items: start;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 12px;
}

.licensing-step-list span {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.licensing-step-list p,
.licensing-card p {
  margin: 0;
}

.licensing-code-panel {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.licensing-code-card .developer-code-block {
  padding: 10px 12px;
}

.licensing-code-card .developer-section-header {
  align-items: center;
}

.licensing-details-list {
  display: grid;
  gap: 8px;
}

.licensing-details-list details {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.licensing-details-list summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.licensing-details-list p {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
}

.api-doc-page {
  gap: 16px;
}

.api-doc-info-grid,
.api-recipe-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.api-doc-info-card,
.api-recipe-card,
.api-endpoint-card,
.api-example-grid article {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.api-doc-info-card h3,
.api-recipe-card strong {
  display: block;
  margin: 0 0 8px;
}

.api-doc-info-card p,
.api-recipe-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.api-copy-row {
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto;
  margin-top: 12px;
  padding: 8px;
}

.api-copy-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.api-copy-row code,
.api-endpoint-summary code {
  overflow-wrap: anywhere;
}

.api-endpoint-summary code,
.api-copy-row code,
.api-doc-field-list code,
.api-inline-token {
  background: var(--api-token-bg);
  border: 1px solid var(--api-token-border);
  border-radius: 6px;
  color: var(--api-token-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  padding: 3px 6px;
}

.api-endpoint-summary code:hover,
.api-copy-row code:hover,
.api-doc-field-list code:hover,
.api-inline-token:hover,
.api-endpoint-summary code:focus-visible,
.api-copy-row code:focus-visible,
.api-doc-field-list code:focus-visible,
.api-inline-token:focus-visible {
  background: rgba(255, 138, 34, 0.22);
  border-color: var(--accent-2);
  outline: 2px solid rgba(255, 138, 34, 0.22);
  outline-offset: 2px;
}

.api-endpoint-summary code,
.api-copy-row code {
  font-size: 13px;
}

.api-copy-row code {
  min-width: 0;
}

.api-inline-token {
  display: inline-block;
  margin: 0 2px;
  vertical-align: baseline;
}

.api-build-demo {
  display: grid;
  gap: 14px;
}

.api-build-demo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
}

.api-build-demo-grid > article,
.api-build-demo-code,
.api-demo-panel {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.api-build-demo h4,
.api-build-demo-code strong {
  color: var(--text);
  margin: 0 0 10px;
}

.api-build-demo-list {
  color: var(--muted);
  display: grid;
  gap: 9px;
  line-height: 1.5;
  margin: 0;
  padding-left: 18px;
}

.api-build-demo-list li::marker {
  color: var(--accent-2);
  font-weight: 900;
}

.api-demo-panel {
  align-content: start;
  display: grid;
  gap: 12px;
}

.api-demo-panel-top {
  align-items: center;
  display: flex;
  gap: 10px;
}

.api-demo-panel-top strong,
.api-demo-product-card strong {
  color: var(--text);
}

.api-demo-panel-top small,
.api-demo-product-card small,
.api-demo-panel p,
.api-demo-panel-footer span {
  color: var(--muted);
}

.api-demo-logo {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 8px;
  display: inline-block;
  height: 38px;
  width: 38px;
}

.api-demo-panel label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  text-transform: uppercase;
}

.api-demo-panel input {
  background: var(--input-bg);
  border: 1px solid var(--api-token-border);
  border-radius: 8px;
  color: var(--api-token-text);
  font-weight: 900;
  min-height: 40px;
  padding: 9px 10px;
}

.api-demo-button-row,
.api-demo-panel-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api-demo-button-row button,
.api-demo-panel-footer button {
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 900;
  min-height: 34px;
  padding: 8px 10px;
}

.api-demo-product-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-demo-product-card {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
}

.api-demo-product-card span {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(255, 138, 34, 0.28));
  border: 1px solid var(--line);
  border-radius: 7px;
  display: block;
  min-height: 56px;
}

.api-demo-product-card b {
  color: var(--api-token-text);
}

.api-build-demo-code > div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.api-doc-filter-bar {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(130px, 1fr)) auto;
}

.api-doc-filter-bar label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
  text-transform: uppercase;
}

.api-doc-filter-bar input,
.api-doc-filter-bar select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 40px;
  padding: 9px 10px;
}

.api-endpoint-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.api-endpoint-list {
  display: grid;
  gap: 10px;
}

.api-endpoint-card {
  padding: 0;
  overflow: hidden;
}

.api-endpoint-card summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style-position: inside;
  padding: 14px;
}

.api-endpoint-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.api-endpoint-summary strong {
  color: var(--text);
}

.api-method-badge,
.api-status-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.api-method-badge {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.method-post {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.method-patch {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.method-delete {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.api-status-badge {
  background: rgba(161, 255, 0, 0.12);
  border: 1px solid rgba(161, 255, 0, 0.32);
  color: var(--accent);
}

.status-planned {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.32);
  color: var(--muted);
}

.status-deprecated {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: #fbbf24;
}

.status-internal {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.32);
  color: #fca5a5;
}

.api-endpoint-body {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 14px;
}

.api-endpoint-body > p,
.api-dev-notes p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.api-endpoint-meta,
.api-copy-grid,
.api-field-grid,
.api-example-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-endpoint-meta span {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.api-endpoint-meta strong,
.api-field-grid h4,
.api-example-grid strong,
.api-dev-notes strong {
  color: var(--text);
}

.api-field-grid > div,
.api-response-fields,
.api-dev-notes {
  background: rgba(15, 21, 32, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.api-response-fields {
  border-color: var(--api-token-border);
}

.api-response-fields h4 {
  color: var(--text);
  margin: 0;
}

.api-doc-field-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.api-doc-field-list li {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr);
}

.api-doc-field-list span {
  color: var(--muted);
}

.api-example-grid {
  grid-template-columns: 1fr;
}

.api-example-grid article > div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.licensing-flow-diagram {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(9, auto);
  justify-content: start;
  overflow-x: auto;
}

.licensing-flow-diagram span {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  font-weight: 800;
  padding: 10px 12px;
  white-space: nowrap;
}

.licensing-flow-diagram b {
  color: var(--accent);
}

.developer-check-grid,
.developer-empty-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-check.inline {
  align-content: center;
  min-height: 44px;
}

.developer-setup-steps {
  counter-reset: setup;
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.developer-setup-steps li {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 10px;
}

.developer-setup-steps li > span {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-weight: 850;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.developer-setup-steps strong {
  display: block;
}

.developer-setup-steps p {
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 0;
}

.developer-setup-steps.compact li {
  min-height: 48px;
}

.developer-upload-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-file-upload-panels {
  display: grid;
  gap: 14px;
}

.product-file-upload-panel {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.product-file-upload-panel[hidden] {
  display: none;
}

.product-file-upload-panel.is-dragging {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.product-file-upload-panel h3 {
  margin: 0 0 6px;
}

.product-link-upload-list {
  display: grid;
  gap: 10px;
}

.product-link-upload-row {
  align-items: end;
  background: rgba(15, 21, 32, 0.64);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1fr) auto;
  min-width: 0;
  padding: 10px;
}

.product-link-upload-row label {
  min-width: 0;
}

.product-link-upload-row input {
  overflow-wrap: anywhere;
}

.product-upload-widget {
  bottom: 18px;
  position: fixed;
  right: 18px;
  width: min(380px, calc(100vw - 36px));
  z-index: 80;
}

.product-upload-indicator {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
  width: 100%;
}

.product-upload-indicator strong {
  color: var(--accent);
}

.product-upload-drawer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  margin-top: 8px;
  max-height: min(480px, calc(100vh - 120px));
  overflow: auto;
  padding: 14px;
}

.product-upload-drawer[hidden] {
  display: none;
}

.product-upload-drawer-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.product-upload-drawer-header h2 {
  font-size: 16px;
  margin: 0;
}

.product-upload-list {
  display: grid;
  gap: 10px;
}

.product-upload-job {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.product-upload-job strong,
.product-upload-job span,
.product-upload-job p {
  display: block;
}

.product-upload-job span,
.product-upload-job p {
  color: var(--muted);
  font-size: 12px;
  margin: 3px 0 0;
}

.product-upload-job[data-state="failed"] {
  border-color: rgba(239, 68, 68, 0.55);
}

.product-upload-job progress {
  accent-color: var(--accent);
  height: 8px;
  width: 100%;
}

.upload-progress {
  background: rgba(8, 13, 21, 0.74);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 10px 12px;
}

.upload-progress[hidden] {
  display: none;
}

.upload-progress > div {
  align-items: center;
  color: var(--soft);
  display: flex;
  font-size: 12px;
  font-weight: 760;
  justify-content: space-between;
  gap: 12px;
}

.upload-progress progress {
  accent-color: var(--accent);
  height: 10px;
  width: 100%;
}

.upload-progress[data-state="complete"] progress {
  accent-color: #22c55e;
}

.upload-progress[data-state="error"] progress {
  accent-color: #ef4444;
}

.wizard-builder-stack {
  display: grid;
  gap: 16px;
}

.wizard-builder-card {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.wizard-builder-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.wizard-builder-header h3 {
  margin: 0 0 6px;
}

.wizard-builder-header p,
.wizard-helper-text {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.wizard-builder-header > span {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
  white-space: nowrap;
}

.wizard-artwork-uploader {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
}

.wizard-artwork-preview,
.wizard-media-thumb {
  align-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(8, 13, 21, 0.94));
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.wizard-artwork-preview {
  aspect-ratio: 1;
  min-height: 180px;
}

.wizard-artwork-preview img,
.wizard-media-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wizard-artwork-controls {
  display: grid;
  gap: 12px;
}

.wizard-upload-control {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wizard-file-input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.wizard-upload-control span {
  color: var(--muted);
  font-size: 13px;
}

.wizard-media-list {
  display: grid;
  gap: 10px;
}

.wizard-media-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 14px;
}

.wizard-media-card,
.wizard-asset-card {
  align-items: center;
  background: rgba(2, 8, 14, 0.44);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  padding: 10px;
}

.wizard-asset-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.wizard-media-card.is-featured {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.wizard-media-thumb {
  aspect-ratio: 1;
  font-size: 12px;
  font-weight: 850;
}

.wizard-media-card-body {
  min-width: 0;
}

.wizard-media-card-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.wizard-media-card-title span,
.wizard-asset-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
}

.wizard-media-card p,
.wizard-asset-card p {
  color: var(--muted);
  margin: 4px 0 0;
}

.wizard-media-meta,
.wizard-media-actions,
.wizard-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-media-meta span {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 12px;
  padding: 4px 8px;
}

.wizard-add-drawer {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

.wizard-add-drawer summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 850;
  list-style-position: inside;
  padding: 12px 14px;
}

.wizard-media-editor {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.wizard-featured-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-featured-option {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.wizard-featured-option span {
  color: var(--muted);
  font-size: 12px;
  text-transform: capitalize;
}

.wizard-featured-option.selected,
.wizard-featured-option:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.wizard-featured-preview {
  color: var(--muted);
}

.developer-check {
  align-items: center;
  display: inline-flex;
  grid-template-columns: auto 1fr;
}

.developer-check input {
  width: auto;
}

.developer-files {
  margin-top: 4px;
}

.developer-wizard-wrap {
  display: grid;
  gap: 20px;
}

.developer-wizard-hero {
  align-items: end;
  background: linear-gradient(135deg, rgba(15, 21, 32, 0.94), rgba(10, 18, 28, 0.86));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.28fr);
  padding: clamp(18px, 3vw, 28px);
}

.developer-wizard-hero h1 {
  font-size: clamp(32px, 5vw, 62px);
  line-height: 0.98;
  margin: 0;
}

.developer-wizard-hero p {
  color: var(--muted);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 760px;
}

.developer-wizard-time {
  background: rgba(223, 252, 247, 0.08);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.developer-wizard-time strong {
  display: block;
  font-size: 34px;
}

.developer-wizard-time span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.developer-wizard {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 230px minmax(0, 1fr);
}

.developer-wizard.product-wizard {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.developer-wizard-sidebar,
.developer-wizard-card {
  background: rgba(15, 21, 32, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-wizard-sidebar {
  padding: 16px;
  position: sticky;
  top: 92px;
}

.developer-wizard-sidebar ol {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-wizard-progress {
  max-width: 100%;
  overflow: hidden;
  padding: 10px;
  position: static;
  top: auto;
}

.product-wizard-progress .store-eyebrow {
  display: none;
}

.product-wizard-progress ol {
  align-items: stretch;
  gap: 8px;
  grid-template-columns: repeat(var(--wizard-step-count), minmax(106px, 1fr));
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.product-wizard-progress .wizard-progress-step {
  min-width: 0;
  padding: 0;
  position: relative;
}

.product-wizard-progress .wizard-progress-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  left: calc(100% - 10px);
  position: absolute;
  right: -8px;
  top: 22px;
}

.product-wizard-progress .wizard-progress-step button {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 46px;
  padding: 5px 6px;
  position: relative;
  z-index: 1;
}

.product-wizard-progress .wizard-progress-step button > div {
  min-width: 0;
}

.product-wizard-progress .wizard-progress-step span {
  border-radius: 999px;
  flex: 0 0 26px;
  font-size: 10px;
  height: 26px;
  width: 26px;
}

.product-wizard-progress .wizard-progress-step strong {
  color: var(--soft);
  font-size: 11px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.product-wizard-progress .wizard-progress-step small {
  font-size: 9px;
  line-height: 1.2;
  margin-top: 2px;
}

.product-wizard-progress .wizard-progress-step.current,
.product-wizard-progress .wizard-progress-step.complete {
  background: transparent;
}

.wizard-progress-step {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px;
}

.wizard-progress-step button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 0;
  text-align: left;
  width: 100%;
}

.wizard-progress-step button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.wizard-progress-step span {
  align-items: center;
  background: rgba(159, 176, 200, 0.12);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: inline-flex;
  font-weight: 850;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.wizard-progress-step strong,
.wizard-progress-step small {
  display: block;
}

.wizard-progress-step small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.wizard-progress-step.current {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.wizard-progress-step.current span,
.wizard-progress-step.complete span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.wizard-progress-step.in-progress span,
.wizard-progress-step.missing-required span,
.wizard-progress-step.saved-not-published span {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.38);
  color: #fbbf24;
}

.wizard-progress-step.optional span {
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
}

.wizard-progress-step.published span {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.36);
  color: #86efac;
}

.developer-wizard-card {
  min-height: 560px;
  padding: clamp(18px, 3vw, 30px);
}

.developer-wizard label {
  color: var(--soft);
  display: grid;
  font-size: 13px;
  font-weight: 760;
  gap: 7px;
}

.developer-wizard input,
.developer-wizard select,
.developer-wizard textarea {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  outline: none;
  padding: 11px 12px;
  width: 100%;
}

.developer-wizard textarea {
  resize: vertical;
}

.developer-wizard input:focus,
.developer-wizard select:focus,
.developer-wizard textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.developer-wizard-step {
  display: none;
  gap: 20px;
}

.developer-wizard-step.is-active {
  display: grid;
}

.developer-wizard-step-header h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
  margin: 0;
}

.developer-wizard-step-header p:not(.store-eyebrow) {
  color: var(--muted);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 760px;
}

.developer-wizard-step-body,
.developer-choice-grid,
.developer-wizard-info-grid,
.developer-wizard-summary,
.developer-channel-grid {
  display: grid;
  gap: 14px;
}

.developer-choice-grid,
.developer-wizard-info-grid,
.developer-wizard-summary,
.developer-channel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-choice,
.developer-wizard-info-grid article,
.developer-wizard-note,
.developer-wizard-summary article,
.developer-channel-grid article {
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 7px;
  padding: 14px;
}

.developer-choice {
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr);
}

.developer-choice.featured {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.developer-choice.selected,
.developer-choice:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.developer-choice input {
  margin-top: 4px;
}

.developer-choice strong,
.developer-choice span {
  grid-column: 2;
}

.developer-choice span,
.developer-wizard-note p,
.developer-wizard-info-grid p,
.developer-wizard-summary p,
.developer-channel-grid p,
.developer-wizard-subsection p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.product-type-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-type-choice {
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 11px 12px;
}

.product-type-choice input {
  margin-top: 0;
}

.product-type-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-type-copy strong {
  color: var(--text);
  font-size: 14px;
  grid-column: auto;
  line-height: 1.2;
}

.product-type-copy span {
  color: var(--muted);
  font-size: 12px;
  grid-column: auto;
  line-height: 1.35;
}

.developer-wizard-path {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.developer-wizard-path span {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  font-weight: 850;
  padding: 12px;
  text-align: center;
}

.developer-wizard-subsection {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.developer-wizard-subsection h3,
.developer-product-preview h3 {
  font-size: 24px;
  line-height: 1.18;
  margin: 0;
}

.access-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.developer-preview-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.developer-product-preview {
  background: linear-gradient(145deg, rgba(8, 13, 21, 0.96), rgba(20, 30, 44, 0.9));
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 16px;
}

.developer-product-preview p {
  color: var(--muted);
  line-height: 1.55;
  margin: 8px 0 14px;
}

.wizard-product-page-preview {
  align-items: start;
  background: linear-gradient(180deg, rgba(10, 18, 28, 0.96), rgba(6, 12, 20, 0.98));
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr) minmax(190px, 0.62fr);
  max-width: 100%;
  padding: 18px;
}

.wizard-product-page-preview .product-media-stage {
  min-height: 220px;
  position: relative;
}

.wizard-product-page-preview .product-identity {
  gap: 12px;
  padding-top: 0;
}

.wizard-product-page-preview .product-identity h1 {
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.08;
}

.wizard-product-page-preview .product-subtitle,
.wizard-product-page-preview .product-preview-long,
.wizard-product-page-preview .product-buy-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.wizard-product-page-preview .product-preview-long {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.wizard-product-page-preview .product-buy-card {
  min-width: 0;
  padding: 18px;
  position: static;
}

.wizard-product-page-preview .product-buy-card > strong {
  color: var(--text);
  display: block;
  font-size: 28px;
  line-height: 1;
}

.developer-preview-art {
  align-items: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 15%, transparent)), var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  display: flex;
  font-size: 42px;
  font-weight: 900;
  justify-content: center;
  overflow: hidden;
}

.developer-preview-art img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.developer-choice.disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.developer-wizard-note {
  border-color: var(--accent-line);
}

.developer-wizard-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 4px;
}

.storefront-readiness,
.storefront-products,
.storefront-preview {
  margin-top: 4px;
}

.developer-main > .store-hero.developer-hero {
  padding-bottom: 4px;
}

.developer-main > .store-hero.developer-hero h1 {
  max-width: 760px;
}

.developer-main > .store-hero.developer-hero p {
  max-width: 860px;
}

.storefront-readiness,
.storefront-products,
.storefront-preview,
.storefront-form .developer-form-section,
.email-sending-section,
.email-dns-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 84%, transparent)),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
}

.storefront-readiness .developer-launch-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-readiness .developer-empty-grid {
  margin-top: 12px;
}

.storefront-readiness .developer-launch-grid div {
  align-items: center;
  background: rgba(8, 13, 21, 0.58);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 86px;
  padding: 12px;
}

.storefront-icon {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.storefront-icon svg {
  display: block;
  height: 22px;
  width: 22px;
}

.storefront-readiness dt,
.email-sender-row label span,
.email-dns-section .developer-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.storefront-readiness dd {
  font-size: 15px;
  margin: 3px 0 6px;
}

.storefront-readiness .status-pill {
  justify-self: start;
}

.email-domain-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 0.55fr) auto;
}

.email-sending-section > .developer-muted,
.email-dns-section > .developer-muted {
  max-width: 760px;
}

.email-sender-list {
  gap: 0;
  margin-top: 6px;
}

.email-sender-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(210px, 1fr) minmax(160px, 0.65fr) minmax(190px, 0.85fr) auto auto;
  padding: 14px 0;
}

.email-sender-row:first-child {
  border-top: 0;
}

.email-sender-purpose {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.email-sender-purpose .storefront-icon {
  height: 36px;
  width: 36px;
}

.email-sender-purpose .storefront-icon svg {
  height: 18px;
  width: 18px;
}

.email-sender-purpose strong,
.email-sender-purpose p,
.email-domain-lock span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-sender-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.email-domain-lock {
  align-items: center;
  color: var(--soft);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.email-domain-lock .storefront-icon {
  background: transparent;
  border: 0;
  color: var(--muted);
  height: 18px;
  width: 18px;
}

.email-domain-lock .storefront-icon svg {
  height: 16px;
  width: 16px;
}

.email-row-chevron {
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.email-dns-section .developer-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.email-dns-section .developer-table {
  min-width: 780px;
  width: 100%;
}

.email-dns-section .developer-table th,
.email-dns-section .developer-table td {
  padding: 11px 12px;
}

.email-dns-section code {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dns-copy-cell {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.dns-copy-value {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.dns-copy-value:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.dns-copy-button {
  min-height: 28px;
  padding: 6px 10px;
}

.storefront-form {
  margin-top: 0;
}

.storefront-form .storefront-brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-brand-grid textarea {
  min-height: 84px;
}

.storefront-brand-grid input[readonly] {
  color: var(--soft);
}

.storefront-product-row {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr) minmax(150px, auto);
}

.storefront-visibility-guide {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-visibility-guide span {
  background: rgba(8, 13, 21, 0.48);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  padding: 10px;
}

.storefront-visibility-guide strong {
  color: var(--text);
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.storefront-product-controls {
  display: grid;
  gap: 10px;
  grid-template-columns: 0.9fr 0.5fr 1fr;
}

.storefront-product-controls label {
  color: var(--soft);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  text-transform: uppercase;
}

.storefront-product-controls label:nth-child(4),
.storefront-product-controls label:nth-child(5) {
  grid-column: span 3;
}

.storefront-product-controls input,
.storefront-product-controls select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 40px;
  outline: none;
  padding: 9px 10px;
  width: 100%;
}

.storefront-product-controls input:focus,
.storefront-product-controls select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.storefront-preview-panel {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 16px;
}

.storefront-featured-product {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(255, 106, 26, 0.12), rgba(14, 26, 39, 0.78)),
    var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  margin: 18px 0;
  overflow: hidden;
}

.storefront-featured-product.compact {
  margin-bottom: 4px;
}

.storefront-featured-media {
  align-items: center;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 16%, transparent)),
    var(--surface-2);
  display: flex;
  justify-content: center;
  min-height: 220px;
  overflow: hidden;
}

.storefront-featured-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.storefront-featured-media span {
  color: var(--accent);
  font-size: 34px;
  font-weight: 950;
}

.storefront-featured-copy {
  align-content: center;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 22px 0;
}

.storefront-featured-copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
}

.storefront-featured-copy p:not(.store-eyebrow) {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.storefront-featured-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.storefront-preview-panel h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.storefront-preview-panel p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
}

.storefront-logo {
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 72px;
  object-fit: cover;
  width: 72px;
}

.store-button.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.storefront-logo-preview {
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  min-height: 74px;
  padding: 8px;
}

.storefront-logo-preview .storefront-logo {
  height: 56px;
  width: 56px;
}

.storefront-banner-preview {
  align-items: center;
  background: rgba(15, 21, 32, 0.68);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  min-height: 120px;
  overflow: hidden;
}

.storefront-banner-preview img {
  aspect-ratio: 16 / 6;
  display: block;
  object-fit: cover;
  width: 100%;
}

.store-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
}

.storefront-public-hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.storefront-template-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 84%, transparent)),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.storefront-template-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-layout-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.storefront-template-choice {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr) 42px;
  min-height: 86px;
  padding: 10px;
  position: relative;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.storefront-template-choice:hover {
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 6%);
  border-color: color-mix(in srgb, var(--accent-line) 55%, var(--line));
  transform: translateY(-1px);
}

.storefront-template-choice:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 2px;
}

.storefront-template-choice.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 12px 28px rgba(0, 0, 0, 0.16);
}

.storefront-template-choice input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.storefront-choice-check {
  align-self: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  margin-top: 2px;
  width: 16px;
}

.storefront-template-choice.selected .storefront-choice-check {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.storefront-template-choice.selected .storefront-choice-check::after {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  content: "";
  height: 7px;
  margin-top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

.storefront-template-choice strong,
.storefront-template-choice small {
  display: block;
}

.storefront-template-choice small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
}

.storefront-choice-copy {
  min-width: 0;
}

.storefront-design-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
  margin-top: 18px;
}

.storefront-design-picker {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.storefront-design-tabs {
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5px;
}

.storefront-design-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-weight: 850;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 7px 9px;
}

.storefront-design-tabs button span {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.storefront-design-tabs button.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
}

.storefront-design-tabs button.active span {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.storefront-design-panel {
  display: grid;
  gap: 12px;
}

.storefront-design-panel[hidden] {
  display: none;
}

.storefront-design-panel-heading h3 {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
}

.storefront-template-detail-stack {
  min-height: 150px;
}

.storefront-template-detail {
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.storefront-template-detail[hidden] {
  display: none;
}

.storefront-template-detail h4 {
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  margin: 0;
}

.storefront-template-detail p {
  color: var(--soft);
  margin: 0;
}

.storefront-template-detail dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.storefront-template-detail dl div {
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 8px;
  padding: 10px;
}

.storefront-template-detail dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.storefront-template-detail dd {
  color: var(--text);
  font-weight: 800;
  margin: 4px 0 0;
}

.storefront-design-preview-panel {
  align-self: start;
  display: grid;
  gap: 10px;
  position: sticky;
  top: 18px;
}

.storefront-design-preview-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.storefront-design-preview-header h3 {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
}

.storefront-preview-toggle {
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.storefront-preview-toggle button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 30px;
  padding: 6px 10px;
}

.storefront-preview-toggle button.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--text);
}

.storefront-device-frame {
  background: #070b12;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  max-height: 680px;
  overflow: hidden;
}

.storefront-browser-bar {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 80%, #020617);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
}

.storefront-browser-bar span {
  background: var(--muted);
  border-radius: 999px;
  height: 8px;
  opacity: 0.56;
  width: 8px;
}

.storefront-browser-bar b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  margin-left: 8px;
  text-transform: uppercase;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] {
  margin-inline: auto;
  max-width: 430px;
  width: 100%;
}

@media (max-width: 1080px) {
  .storefront-design-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-design-preview-panel {
    position: static;
  }
}

@media (max-width: 1280px) {
  .website-builder-product-head {
    display: none;
  }

  .website-builder-product-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-builder-product-row .brand-row-actions {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 680px) {
  .storefront-design-picker,
  .storefront-template-section {
    padding: 12px;
  }

  .storefront-design-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-design-tabs button {
    justify-content: flex-start;
  }

  .storefront-template-choice,
  .storefront-style-choice,
  .storefront-nav-choice {
    grid-template-columns: 18px minmax(0, 1fr) 42px;
  }

  .storefront-style-choice .storefront-choice-preview,
  .storefront-nav-choice .nav-mode-mini {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .storefront-template-detail dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-design-preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .storefront-preview-toggle {
    justify-content: stretch;
    width: 100%;
  }

  .storefront-preview-toggle button {
    flex: 1;
  }
}

.storefront-template-preview {
  background: color-mix(in srgb, var(--bg) 62%, var(--surface));
  border: 0;
  border-radius: 0 0 8px 8px;
  margin: 0;
  max-height: 606px;
  min-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: relative;
  scrollbar-gutter: stable;
  --preview-scale: 1;
  --preview-scaled-width: 1280px;
  --preview-virtual-width: 1280px;
}

.storefront-template-preview [data-template-preview][hidden] {
  display: none;
}

.storefront-preview-scale-spacer {
  margin-inline: auto;
  min-height: 1px;
  position: relative;
  width: var(--preview-scaled-width);
}

.storefront-preview-scale-inner {
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  width: var(--preview-virtual-width);
}

.storefront-template-preview .storefront-public-site {
  margin: 0;
  max-width: none;
  pointer-events: auto;
  width: 100%;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-template-preview {
  --preview-virtual-width: 390px;
  min-height: 560px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  width: 100%;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template="spotlight"],
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template="showcase"],
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template="flow"] {
  margin: 0;
  padding: 0;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] *,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] *::before,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] *::after {
  box-sizing: border-box;
  min-width: 0;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] :is(h1, h2, h3, p, a, strong, small, span) {
  overflow-wrap: anywhere;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-nav-mode="leftRail"] {
  display: block;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-nav-mode="leftRail"] > :not(.storefront-left-rail) {
  grid-column: auto;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-left-rail {
  border-right: 0;
  min-height: 0;
  position: relative;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-floating-pill {
  border-radius: 8px;
  margin-top: 10px;
  position: relative;
  top: 0;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-nav,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-category-bar,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-brand,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-section-header,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-hero-purchase,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-about-card,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-masthead,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .rack-hero,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-opener,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-shelf-hero,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .deal-hero,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-product-spread,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .rack-detail,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-feature,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .rack-module,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-shelf,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-included > div,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-quick-access > div,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-stats,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-category-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-product-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-usecase-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-video-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-trust,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-footer-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-about-card,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-content-split,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-template-hero.product-company,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-catalog-row,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-metrics,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-catalog-actions,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-newsletter-band,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-newsletter-form,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-section-heading,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .store-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .store-grid.compact {
  grid-template-columns: minmax(0, 1fr);
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-links,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-account,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-utility-strip,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-actions,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-hero-actions,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-section-header,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-section-heading,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-product-footer {
  align-items: stretch;
  flex-direction: column;
  justify-content: start;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-site-actions,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-hero-actions,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] .store-button,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-public-site[data-storefront-template] .store-link {
  justify-content: center;
  max-width: 100%;
  text-align: center;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-hero {
  min-height: 0;
  padding: 28px 18px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .spotlight-hero h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-hero h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-masthead h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .rack-hero h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-opener h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-shelf-hero h1,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .deal-hero h1 {
  font-size: 34px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-product-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-product-grid,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .rack-list {
  padding: 0 20px 24px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-catalog-section .catalog-product-grid {
  padding: 0;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-catalog-section,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-chip-bar {
  padding-left: 20px;
  padding-right: 20px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-newsletter-form p,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-newsletter-form button,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .storefront-newsletter-status {
  grid-column: auto;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .catalog-deals,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .deal-contents,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .deal-checkout,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-story,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-more,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .retail-included,
.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .editorial-product-spread {
  margin: 0 20px 24px;
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-quick-tile {
  grid-template-columns: 54px minmax(0, 1fr);
}

.storefront-device-frame[data-storefront-preview-mode-state="mobile"] .showcase-quick-tile .showcase-price {
  grid-column: 2;
}

.storefront-template-preview .storefront-public-hero {
  min-height: 220px;
  padding: 22px;
}

.storefront-template-preview .storefront-site-nav,
.storefront-template-preview .storefront-content-band,
.storefront-template-preview .storefront-content-split {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.storefront-public-site {
  --wave-played: var(--storefront-brand-color, var(--accent));
  display: grid;
  gap: 24px;
}

.storefront-public-site .store-eyebrow,
.storefront-v1-site .store-eyebrow {
  color: var(--storefront-secondary-color, #2563eb);
}

.storefront-site-nav {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
}

.storefront-site-nav a {
  color: var(--soft);
  font-size: 14px;
  font-weight: 800;
}

.storefront-public-site :is(.store-link, .storefront-icon, .showcase-price, .catalog-price, .rack-price, .editorial-price, .retail-price, .deal-price, .spotlight-price) {
  color: var(--storefront-brand-color, var(--accent));
}

.storefront-public-site .storefront-feature-list li::before {
  color: var(--storefront-brand-color, var(--accent));
}

.storefront-public-site :is(.storefront-site-nav a:hover, .storefront-site-links a:hover, .storefront-site-links a[aria-current="page"], .showcase-usecase-grid span, .showcase-category-card span, .flow-path-card span, .flow-stage-card span) {
  color: var(--storefront-brand-color, var(--accent));
}

.storefront-public-site :is(.store-button, .showcase-video-thumb b, .spotlight-video-thumb b, .spotlight-play-button, .spotlight-demo-play) {
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 48%, transparent);
}

.storefront-v1-site .store-button {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-secondary-color, #2563eb));
  border-color: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 54%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, transparent);
}

.storefront-v1-site .store-button.secondary {
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 18%, rgba(0, 0, 0, 0.78));
  border-color: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 46%, transparent);
  color: var(--v1-text);
}

.storefront-public-site :is(.showcase-video-thumb b, .spotlight-video-thumb b) {
  color: var(--storefront-brand-color, var(--accent));
}

.storefront-public-site :is(.store-pill, .spotlight-badge, .catalog-chip-bar a, .flow-filter-chips button.active) {
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, transparent);
}

.storefront-site-logo {
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.storefront-template-hero {
  align-items: end;
  margin-bottom: 0;
}

.storefront-template-hero.solo-creator {
  min-height: 320px;
}

.storefront-template-hero.product-company {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
}

.storefront-template-hero.label-catalog {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}

.storefront-site-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.storefront-site-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.storefront-site-metrics div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.storefront-site-metrics dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.storefront-site-metrics dd {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  margin: 5px 0 0;
}

.storefront-company-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.storefront-content-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 22px;
}

.storefront-content-band h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
}

.storefront-content-band p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 820px;
}

.storefront-review-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.storefront-review-band article,
.storefront-faq-list details {
  background: rgba(2, 6, 12, 0.34);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.storefront-review-band article {
  display: grid;
  gap: 8px;
}

.storefront-review-band article > span {
  color: var(--storefront-brand-color, var(--accent));
  font-size: 13px;
  letter-spacing: 1px;
}

.storefront-review-band article strong {
  color: var(--text);
}

.storefront-review-band article small {
  color: var(--muted);
}

.storefront-newsletter-band {
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
}

.storefront-newsletter-form {
  background: rgba(2, 6, 12, 0.34);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.storefront-newsletter-form label,
.storefront-newsletter-form p,
.storefront-newsletter-status {
  min-width: 0;
}

.storefront-newsletter-form label {
  display: grid;
  gap: 6px;
}

.storefront-newsletter-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.storefront-newsletter-form input {
  background: rgba(2, 6, 12, 0.54);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  min-height: 42px;
  padding: 0 11px;
}

.storefront-newsletter-form p {
  font-size: 12px;
  grid-column: 1 / -1;
}

.storefront-newsletter-status {
  align-self: center;
  color: var(--success);
  font-size: 12px;
  font-weight: 850;
}

.storefront-faq-list {
  display: grid;
  gap: 10px;
}

.storefront-faq-list summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 850;
}

.storefront-faq-list p {
  margin-top: 10px;
}

.storefront-reviews-page {
  display: grid;
  gap: 18px;
}

.storefront-reviews-page .storefront-public-hero {
  min-height: 0;
  padding: clamp(22px, 4vw, 42px);
}

.storefront-review-score {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.storefront-review-score strong {
  font-size: 28px;
  line-height: 1;
}

.storefront-review-stars {
  background: rgba(255, 107, 31, 0.12);
  border: 1px solid rgba(255, 107, 31, 0.32);
  border-radius: 999px;
  color: var(--storefront-brand-color, #ff6b1f);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 7px 10px;
}

.storefront-review-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
}

.storefront-review-card > div {
  align-items: start;
  display: grid;
  gap: 8px;
}

.storefront-review-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.storefront-review-card small {
  color: var(--muted);
  font-weight: 800;
}

.storefront-review-form {
  max-width: 860px;
}

.storefront-content-split {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.storefront-catalog-list {
  display: grid;
  gap: 10px;
}

.storefront-catalog-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 12px;
}

.storefront-catalog-row h2 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.storefront-catalog-row p:not(.store-eyebrow) {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.storefront-catalog-media {
  align-items: center;
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.storefront-catalog-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.storefront-catalog-media span {
  color: var(--storefront-brand-color, var(--accent));
  font-weight: 900;
}

.storefront-catalog-actions {
  align-items: end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.storefront-public-site[data-storefront-template="spotlight"] {
  background:
    radial-gradient(circle at 58% 6%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 24%, transparent), transparent 28%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 20%, transparent), transparent 30%),
    linear-gradient(180deg, #02050a 0%, #06101a 56%, #03070d 100%);
  border: 0;
  color: #f8fafc;
  gap: 16px;
  margin: 0;
  min-height: 100vh;
  padding: 0;
  width: 100%;
}

#store-app > .storefront-public-site[data-storefront-template="spotlight"] {
  max-width: none;
  padding: 0;
  width: 100%;
}

.storefront-public-site[data-storefront-template="spotlight"] .storefront-site-nav {
  background: rgba(2, 6, 12, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1fr) minmax(260px, auto);
  padding: 12px 16px;
}

.storefront-site-brand,
.storefront-site-links,
.storefront-site-account {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.storefront-site-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storefront-site-links {
  justify-content: center;
}

.storefront-site-account {
  justify-content: end;
}

.storefront-public-site[data-storefront-template="spotlight"] .storefront-site-links a,
.storefront-login-link {
  color: #dbe6f4;
  font-size: 13px;
}

.storefront-public-site[data-storefront-template="spotlight"] .store-button {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 48%, transparent);
  color: #fff;
}

.storefront-public-site[data-storefront-template="spotlight"] .store-button.secondary {
  background: rgba(8, 14, 24, 0.62);
  border-color: rgba(203, 213, 225, 0.28);
}

.spotlight-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(3, 7, 14, 0.94), rgba(3, 7, 14, 0.74) 48%, rgba(3, 7, 14, 0.9)),
    radial-gradient(circle at 47% 44%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 36%, transparent), transparent 28%);
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0;
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  min-height: clamp(620px, calc(100vh - 90px), 920px);
  overflow: hidden;
  padding: clamp(44px, 6vw, 88px) clamp(28px, 7vw, 120px);
  position: relative;
}

.spotlight-hero-glow {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, transparent), transparent 58%),
    radial-gradient(circle, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 24%, transparent), transparent 62%);
  filter: blur(22px);
  inset: 12% 34% 6% 24%;
  opacity: 0.82;
  position: absolute;
}

.spotlight-hero-copy,
.spotlight-hero-card {
  position: relative;
  z-index: 1;
}

.spotlight-badge {
  border: 1px solid color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 64%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 72%, #fff);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0 0 22px;
  padding: 6px 10px;
  text-transform: uppercase;
}

.spotlight-hero h1 {
  color: #fff;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 0.96;
  margin: 0;
  max-width: 680px;
}

.spotlight-hero-copy > p:not(.spotlight-badge) {
  color: #bdc8d7;
  font-size: 17px;
  line-height: 1.72;
  margin: 22px 0 0;
  max-width: 560px;
}

.spotlight-mini-trust {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
}

.spotlight-mini-trust span {
  align-items: center;
  color: #d7dee8;
  display: grid;
  font-size: 12px;
  font-weight: 750;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
}

.spotlight-mini-trust .storefront-icon,
.spotlight-highlight-card .storefront-icon,
.spotlight-trust .storefront-icon {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 78%, #fff);
}

.spotlight-hero-card {
  background: rgba(4, 9, 17, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
  overflow: hidden;
}

.spotlight-hero-media {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #050b14;
  display: flex;
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.spotlight-hero-media img,
.spotlight-product-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.spotlight-hero-media.placeholder span {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 70%, #fff);
  font-size: 52px;
  font-weight: 950;
}

.spotlight-play-button,
.spotlight-demo-play {
  align-items: center;
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 62%, #fff);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0;
  justify-content: center;
}

.spotlight-play-button {
  height: 84px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
}

.spotlight-play-button::before,
.spotlight-demo-play::before {
  border-bottom: 10px solid transparent;
  border-left: 15px solid currentColor;
  border-top: 10px solid transparent;
  content: "";
  margin-left: 4px;
}

.spotlight-hero-product-copy {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
}

.spotlight-hero-product-copy h2 {
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 6px;
}

.spotlight-hero-product-copy p,
.spotlight-feature-list,
.spotlight-trust p,
.spotlight-about-card p,
.spotlight-library-card p,
.spotlight-footer p,
.spotlight-product-body p,
.spotlight-video-card span {
  color: #aebace;
}

.spotlight-feature-list {
  display: grid;
  gap: 9px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.spotlight-feature-list li {
  font-size: 13px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}

.spotlight-feature-list li::before {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 78%, #fff);
  content: "✓";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.spotlight-hero-purchase {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
}

.spotlight-price {
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 950;
  line-height: 1;
}

.spotlight-price strong {
  font-size: inherit;
}

.spotlight-price s {
  color: #7e8a9f;
  font-size: 16px;
  margin-top: 8px;
}

.spotlight-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.spotlight-section,
.spotlight-about-library,
.spotlight-footer {
  background: rgba(5, 13, 23, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: clamp(20px, 3vw, 30px);
}

.spotlight-section-header {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.spotlight-section h2,
.spotlight-about-library h2,
.spotlight-footer h3 {
  color: #fff;
  margin: 0;
}

.spotlight-demo-tabs {
  display: flex;
  gap: 22px;
  margin: -4px 0 18px;
}

.spotlight-demo-tabs span {
  color: #c6d0df;
  font-size: 13px;
  font-weight: 800;
}

.spotlight-demo-list {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  overflow: hidden;
}

.spotlight-demo-row {
  align-items: center;
  background: rgba(4, 10, 18, 0.52);
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
  display: grid;
  gap: 14px;
  grid-template-columns: 38px minmax(120px, 0.8fr) minmax(80px, 0.35fr) minmax(180px, 1.45fr) minmax(90px, 0.45fr) minmax(130px, 0.7fr);
  min-width: 0;
  padding: 10px 14px;
}

.spotlight-demo-row:last-child {
  border-bottom: 0;
}

.spotlight-demo-play {
  align-items: center;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.spotlight-demo-play::before {
  border-bottom-width: 7px;
  border-left-width: 11px;
  border-top-width: 7px;
}

.spotlight-demo-play span {
  font-size: 0;
}

.spotlight-demo-play span::before {
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  content: "";
  display: block;
  margin-left: 2px;
}

[data-audio-state="playing"] .spotlight-demo-play {
  background: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, rgba(148, 163, 184, 0.14));
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 74%, transparent);
}

[data-audio-state="playing"] .spotlight-demo-play span::before {
  border: 0;
  box-shadow: 6px 0 0 currentColor;
  height: 13px;
  margin-left: -6px;
  width: 4px;
}

.spotlight-demo-row strong {
  color: #fff;
  font-size: 13px;
}

.spotlight-waveform {
  align-items: center;
  background: transparent;
  border: 0;
  --wave-played: var(--storefront-brand-color, var(--accent));
  --wave-unplayed: #6f7f94;
  cursor: pointer;
  display: flex;
  gap: 2px;
  height: 38px;
  opacity: 0.76;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.spotlight-waveform i {
  background: linear-gradient(90deg, var(--wave-played) 0 var(--bar-fill, 0%), var(--wave-unplayed) var(--bar-fill, 0%) 100%);
  border-radius: 999px;
  display: block;
  flex: 1 1 0;
  min-width: 2px;
}

.spotlight-demo-row time {
  color: #dbe6f4;
  font-size: 13px;
}

.spotlight-demo-row audio {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.spotlight-demo-product {
  align-items: center;
  color: #cbd5e1;
  display: grid;
  gap: 9px;
  grid-template-columns: 32px minmax(0, 1fr);
  min-width: 0;
}

.spotlight-demo-product img,
.spotlight-demo-product span {
  background: #101826;
  border-radius: 4px;
  height: 32px;
  object-fit: cover;
  width: 32px;
}

.spotlight-demo-product span {
  align-items: center;
  color: var(--storefront-brand-color, var(--accent));
  display: flex;
  font-size: 11px;
  font-weight: 900;
  justify-content: center;
}

.spotlight-demo-more summary {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 76%, #fff);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  padding: 13px 14px;
}

.spotlight-video-grid,
.spotlight-highlight-grid,
.spotlight-trust-grid,
.spotlight-product-grid {
  display: grid;
  gap: 14px;
}

.spotlight-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.storefront-inline-video {
  aspect-ratio: 16 / 9;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: block;
  margin-top: 12px;
  overflow: hidden;
}

.storefront-inline-video[hidden] {
  display: none;
}

.storefront-inline-video iframe,
.storefront-inline-video video {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.storefront-media-lightbox {
  align-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.16), transparent 34%),
    rgba(0, 0, 0, 0.88);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: clamp(18px, 4vw, 54px);
  position: fixed;
  z-index: 10000;
}

.storefront-media-lightbox[hidden] {
  display: none;
}

.storefront-media-lightbox figure {
  display: grid;
  gap: 14px;
  margin: 0;
  max-height: min(84vh, 820px);
  max-width: min(92vw, 1180px);
  min-width: 0;
}

.storefront-media-lightbox img {
  background: #000;
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #ff6a1a) 28%, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
  display: block;
  max-height: 76vh;
  max-width: 100%;
  object-fit: contain;
}

.storefront-media-lightbox figcaption {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.storefront-media-lightbox-close,
.storefront-media-lightbox-nav {
  align-items: center;
  background: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 18%, rgba(2, 6, 12, 0.86));
  border: 1px solid color-mix(in srgb, var(--storefront-accent, #ff6a1a) 34%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  position: absolute;
  text-transform: uppercase;
}

.storefront-media-lightbox-close {
  right: clamp(18px, 3vw, 42px);
  top: clamp(18px, 3vw, 42px);
}

.storefront-media-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.storefront-media-lightbox-nav.previous {
  left: clamp(14px, 3vw, 34px);
}

.storefront-media-lightbox-nav.next {
  right: clamp(14px, 3vw, 34px);
}

.storefront-media-lightbox-open {
  overflow: hidden;
}

.spotlight-video-card,
.spotlight-highlight-card,
.spotlight-trust article,
.spotlight-library-card {
  background: rgba(8, 16, 27, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}

.spotlight-video-thumb {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #070e19;
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.spotlight-video-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.spotlight-video-thumb b {
  align-items: center;
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 11px;
  height: 46px;
  justify-content: center;
  position: absolute;
  width: 46px;
}

.spotlight-highlight-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spotlight-highlight-card {
  border-left-color: rgba(148, 163, 184, 0.22);
  display: grid;
  gap: 12px;
}

.spotlight-highlight-card h3,
.spotlight-trust h3,
.spotlight-product-body h3 {
  color: #fff;
  font-size: 15px;
  line-height: 1.28;
  margin: 0;
}

.spotlight-highlight-card p,
.spotlight-trust p {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.spotlight-product-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spotlight-product-card {
  background: rgba(8, 16, 27, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.spotlight-product-media {
  align-items: center;
  aspect-ratio: 1;
  background: #07101c;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.spotlight-product-media span {
  color: var(--storefront-brand-color, var(--accent));
  font-weight: 950;
}

.spotlight-product-body {
  display: grid;
  gap: 6px;
  padding: 12px;
  position: relative;
}

.spotlight-demo-badge {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 76%, #fff);
  font-size: 11px;
  font-weight: 900;
}

.spotlight-card-price {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 76%, #fff);
  display: inline-flex;
  gap: 7px;
  font-weight: 950;
}

.spotlight-card-price s {
  color: #728095;
  font-weight: 700;
}

.spotlight-trust h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 4px 0 24px;
}

.spotlight-trust-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.spotlight-trust article {
  background: transparent;
  border-color: transparent;
  display: grid;
  gap: 10px;
  padding: 0;
}

.spotlight-about-library {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
}

.spotlight-about-card {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: 140px minmax(0, 1fr);
}

.spotlight-about-card img {
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
}

.spotlight-about-card > .store-brand-mark {
  border-radius: 8px;
  height: 140px;
  width: 140px;
}

.spotlight-library-card {
  align-content: center;
  display: grid;
  gap: 12px;
}

.spotlight-footer {
  background: rgba(2, 6, 12, 0.88);
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  border-bottom: 0;
}

.spotlight-footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(110px, 0.72fr));
}

.spotlight-footer-brand,
.spotlight-footer-grid > div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.spotlight-footer a {
  color: #c8d2e1;
  font-size: 13px;
}

.spotlight-footer-bottom {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: #8b98ac;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 12px;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 18px;
}

.storefront-public-site[data-storefront-template="showcase"] {
  background:
    radial-gradient(circle at 64% 6%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, transparent), transparent 28%),
    radial-gradient(circle at 10% 28%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 12%, transparent), transparent 26%),
    linear-gradient(180deg, #03070c 0%, #07121d 46%, #02050a 100%);
  border: 1px solid rgba(148, 163, 184, 0.11);
  color: #f8fafc;
  gap: 18px;
  margin: -14px;
  min-height: 100vh;
  padding: clamp(16px, 3vw, 34px);
}

#store-app > .storefront-public-site[data-storefront-template="showcase"] {
  max-width: none;
  padding: clamp(16px, 3vw, 34px);
  width: 100%;
}

.storefront-public-site[data-storefront-template="showcase"] .storefront-site-nav {
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1fr) minmax(260px, auto);
  padding: 12px 16px;
}

.storefront-public-site[data-storefront-template="showcase"] .storefront-site-links a,
.storefront-public-site[data-storefront-template="showcase"] .storefront-login-link {
  color: #dbe6f4;
  font-size: 13px;
}

.storefront-public-site[data-storefront-template="showcase"] .store-button {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 42%, transparent);
  color: #fff;
}

.storefront-public-site[data-storefront-template="showcase"] .store-button.secondary {
  background: rgba(7, 14, 24, 0.82);
  border-color: rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

.showcase-hero {
  align-items: center;
  display: grid;
  gap: clamp(22px, 4vw, 54px);
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1fr);
  min-width: 0;
  padding: clamp(12px, 2vw, 18px) 0 4px;
}

.showcase-hero-copy {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.showcase-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  margin: 0;
  overflow-wrap: anywhere;
}

.showcase-hero-copy > p:not(.store-eyebrow) {
  color: #b7c3d4;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}

.showcase-search {
  display: grid;
  gap: 7px;
  max-width: 520px;
}

.showcase-search span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.showcase-search input {
  background: rgba(3, 8, 14, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #f8fafc;
  min-height: 48px;
  outline: none;
  padding: 0 15px;
  width: 100%;
}

.showcase-search input:focus {
  border-color: var(--storefront-brand-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, transparent);
}

.showcase-panel,
.showcase-section,
.showcase-guidance,
.showcase-demo-center,
.showcase-trust,
.showcase-about-card,
.showcase-library-card,
.showcase-footer {
  background: rgba(7, 14, 24, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  min-width: 0;
}

.showcase-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.showcase-visual {
  align-items: center;
  aspect-ratio: 16 / 5.2;
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 40%, transparent), transparent 20%),
    linear-gradient(135deg, #07101c, #111d2d 52%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 24%, #111d2d));
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.showcase-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.showcase-visual span {
  color: rgba(248, 250, 252, 0.8);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 950;
}

.showcase-stats {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.showcase-stats div {
  align-items: center;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 16px 10px;
  text-align: center;
}

.showcase-stats div:last-child {
  border-right: 0;
}

.showcase-stats .storefront-icon,
.showcase-category-card .storefront-icon,
.showcase-usecase-grid .storefront-icon,
.showcase-trust .storefront-icon {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 80%, #fff);
}

.showcase-stats dt {
  color: #9aa9bc;
  font-size: 11px;
  font-weight: 850;
  order: 3;
}

.showcase-stats dd {
  color: #f8fafc;
  font-size: 17px;
  font-weight: 950;
  margin: 0;
  order: 2;
}

.showcase-quick-access {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.showcase-quick-access > strong {
  font-size: 12px;
}

.showcase-quick-access > div {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.showcase-quick-tile {
  align-items: center;
  background: rgba(2, 6, 12, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  display: grid;
  gap: 9px;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 8px;
}

.showcase-thumb {
  aspect-ratio: 1;
  border-radius: 6px;
  color: var(--storefront-brand-color, var(--accent));
  display: grid;
  font-weight: 950;
  object-fit: cover;
  place-items: center;
  width: 56px;
}

.showcase-thumb.placeholder {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.showcase-quick-tile b,
.showcase-quick-tile small,
.showcase-product-body h2,
.showcase-product-body span,
.showcase-product-body p {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-quick-tile b,
.showcase-product-body h2 {
  color: #fff;
  white-space: nowrap;
}

.showcase-quick-tile small,
.showcase-product-body span,
.showcase-product-body p,
.showcase-demo-center p,
.showcase-guidance p,
.showcase-about-card p,
.showcase-library-card p,
.showcase-footer p {
  color: #9aa9bc;
}

.showcase-price {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 76%, #fff);
  font-weight: 950;
  white-space: nowrap;
}

.showcase-price s {
  color: #728095;
  font-weight: 700;
  margin-left: 6px;
}

.showcase-section {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.showcase-section-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.showcase-section-header .store-eyebrow {
  margin: 0;
}

.showcase-category-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.showcase-category-card {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 20%, transparent), transparent 42%),
    rgba(2, 6, 12, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 14px;
}

.showcase-category-card h2,
.showcase-guidance h2,
.showcase-demo-center h2,
.showcase-about-card h2,
.showcase-library-card h2 {
  margin: 0;
}

.showcase-category-card p {
  color: #aab6c7;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.showcase-category-card span {
  color: var(--storefront-brand-color, var(--accent));
  font-size: 13px;
  font-weight: 850;
  margin-top: auto;
}

.showcase-product-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.showcase-product-card {
  background: rgba(2, 6, 12, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.showcase-product-media {
  align-items: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #08111d, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, #162436));
  color: var(--storefront-brand-color, var(--accent));
  display: flex;
  font-weight: 950;
  justify-content: center;
  overflow: hidden;
}

.showcase-product-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.showcase-product-body {
  display: grid;
  flex: 1;
  gap: 8px;
  padding: 14px;
}

.showcase-badge {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 78%, #fff);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.showcase-product-body h2 {
  font-size: 18px;
}

.showcase-product-body p {
  line-height: 1.55;
  margin: 0;
  white-space: normal;
}

.showcase-product-footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: auto;
}

.showcase-split {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.showcase-guidance,
.showcase-demo-center {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.showcase-usecase-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.showcase-usecase-grid a {
  background: rgba(2, 6, 12, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 13px;
}

.showcase-usecase-grid small {
  color: #9aa9bc;
  line-height: 1.35;
}

.showcase-usecase-grid span {
  color: var(--storefront-brand-color, var(--accent));
  font-size: 13px;
  font-weight: 850;
  margin-top: auto;
}

.showcase-demo-center {
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
}

.showcase-video-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-video-tile {
  display: grid;
  gap: 6px;
}

.showcase-video-tile.primary {
  grid-column: 1 / -1;
}

.showcase-video-thumb {
  align-items: center;
  aspect-ratio: 16 / 7.6;
  background: #07101c;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.showcase-video-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.showcase-video-thumb b {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: var(--storefront-brand-color, var(--accent));
  display: inline-flex;
  font-size: 0;
  height: 42px;
  justify-content: center;
  position: absolute;
  width: 42px;
}

.showcase-video-thumb b::before {
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  content: "";
  margin-left: 3px;
}

.showcase-video-tile strong {
  color: #f8fafc;
  font-size: 13px;
}

.showcase-video-tile span {
  color: #9aa9bc;
  font-size: 12px;
}

.showcase-trust {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 18px;
}

.showcase-trust article {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.showcase-trust strong,
.showcase-trust small {
  display: block;
}

.showcase-trust small {
  color: #9aa9bc;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}

.showcase-about-library {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.showcase-about-card {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: 160px minmax(0, 1fr);
  padding: 18px;
}

.showcase-about-card img,
.showcase-about-card > .store-brand-mark {
  aspect-ratio: 1;
  border-radius: 8px;
  height: auto;
  object-fit: cover;
  width: 160px;
}

.showcase-library-card {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.75fr) minmax(150px, 1fr);
  padding: 18px;
}

.showcase-library-visual {
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 16px;
}

.showcase-library-visual span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 44%, transparent), color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 16%, rgba(148, 163, 184, 0.12)));
  border-radius: 999px;
  display: block;
  height: 12px;
}

.showcase-library-visual span:nth-child(2) {
  width: 74%;
}

.showcase-library-visual span:nth-child(3) {
  width: 52%;
}

.showcase-footer {
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  padding: 22px;
}

.showcase-footer-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(110px, 0.72fr));
}

.showcase-footer-brand,
.showcase-footer-grid > div {
  align-content: start;
  display: grid;
  gap: 8px;
}

.showcase-footer a {
  color: #c8d2e1;
  font-size: 13px;
}

.showcase-footer h3 {
  margin: 0;
}

[data-showcase-hidden="true"] {
  display: none !important;
}

.storefront-public-site[data-storefront-template="flow"] {
  background:
    radial-gradient(circle at 67% 3%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, transparent), transparent 27%),
    radial-gradient(circle at 8% 22%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 18%, transparent), transparent 26%),
    #03070d;
  color: #f8fbff;
  overflow-x: hidden;
}

#store-app > .storefront-public-site[data-storefront-template="flow"] {
  max-width: none;
  padding: clamp(16px, 3vw, 34px);
  width: 100%;
}

.storefront-public-site[data-storefront-template="flow"] .storefront-site-nav {
  background: rgba(3, 7, 13, 0.86);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
}

.flow-nav .storefront-site-brand {
  grid-template-columns: auto minmax(0, 1fr);
}

.flow-nav .storefront-site-brand span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.flow-nav .storefront-site-brand small {
  color: #94a3b8;
  display: block;
  font-size: 10px;
  font-weight: 800;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.flow-hero,
.flow-section,
.flow-trust,
.flow-about-library,
.flow-footer {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.flow-hero {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  min-height: 620px;
  overflow: hidden;
  padding: 78px 18px clamp(58px, 6vw, 88px);
  position: relative;
}

.flow-hero-visual {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  inset: 0 -4vw auto;
  height: 100%;
  min-height: 420px;
  opacity: 0.92;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

.flow-hero-visual img {
  height: 100%;
  object-fit: cover;
  opacity: 0.52;
  width: 100%;
}

.flow-hero-visual.placeholder {
  background:
    radial-gradient(circle at 62% 46%, transparent 0 58px, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 88%, transparent) 60px 63px, transparent 66px),
    linear-gradient(130deg, rgba(8, 13, 24, 0.1), color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 32%, rgba(2, 6, 23, 0.92)) 52%, rgba(2, 6, 23, 0.92)),
    linear-gradient(180deg, #09111d, #020617);
}

.flow-hero-visual::after {
  background:
    linear-gradient(90deg, #03070d 0%, rgba(3, 7, 13, 0.68) 37%, rgba(3, 7, 13, 0.18) 70%),
    linear-gradient(180deg, rgba(3, 7, 13, 0), #03070d 92%);
  content: "";
  inset: 0;
  position: absolute;
}

.flow-hero-content,
.flow-hero-panel,
.flow-goal-grid {
  position: relative;
  z-index: 1;
}

.flow-hero-content {
  align-self: start;
  max-width: 540px;
}

.flow-hero h1 {
  color: #fff;
  font-size: clamp(42px, 6vw, 66px);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0 0 18px;
}

.flow-hero h1 span {
  background: linear-gradient(90deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flow-hero p {
  color: #c5cede;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 24px;
}

.flow-search {
  align-items: center;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  display: grid;
  min-height: 56px;
  padding: 0 16px;
}

.flow-search span {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.flow-search input {
  background: transparent;
  border: 0;
  color: #f8fafc;
  font: inherit;
  outline: 0;
  width: 100%;
}

.flow-search:focus-within {
  border-color: var(--storefront-brand-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, transparent);
}

.flow-hero-panel {
  align-self: center;
  justify-self: end;
  max-width: 460px;
  width: 100%;
}

.flow-stats {
  background: rgba(5, 10, 22, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.flow-stats div {
  align-items: center;
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 7px;
  justify-items: center;
  min-height: 106px;
  padding: 14px;
  text-align: center;
}

.flow-stats div:first-child {
  border-left: 0;
}

.flow-stats .storefront-icon,
.flow-goal-card .storefront-icon,
.flow-trust .storefront-icon {
  color: var(--storefront-brand-color, var(--accent));
}

.flow-stats dt {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.flow-stats dd {
  color: #aab7c8;
  font-size: 12px;
  margin: 0;
}

.flow-goal-grid {
  align-self: end;
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flow-goal-card,
.flow-path-card,
.flow-stage-card,
.flow-setup-card,
.flow-finder-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.78));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  min-width: 0;
}

.flow-goal-card {
  color: #f8fafc;
  display: grid;
  gap: 10px;
  min-height: 172px;
  padding: 22px;
  text-decoration: none;
}

.flow-goal-card strong {
  font-size: 16px;
  line-height: 1.2;
}

.flow-goal-card small,
.flow-path-card p,
.flow-stage-card p,
.flow-setup-card small {
  color: #aab7c8;
  line-height: 1.55;
}

.flow-goal-card > span:last-child,
.flow-section-header .store-link,
.flow-stage-card .store-link {
  color: var(--storefront-brand-color, var(--accent));
  font-weight: 900;
}

.flow-section {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  margin-top: 16px;
  padding: 18px;
}

.flow-section-header {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 16px;
}

.flow-section-header h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0;
  margin: 3px 0 0;
}

.flow-path-grid,
.flow-stage-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-path-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.flow-path-card.purple {
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 42%, transparent);
}

.flow-path-card.orange {
  border-color: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 44%, transparent);
}

.flow-path-card.teal {
  border-color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 24%, var(--storefront-accent, var(--accent-2)));
}

.flow-path-card h3,
.flow-stage-card h3 {
  color: #fff;
  margin: 0;
}

.flow-path-card p,
.flow-stage-card p {
  margin: 0;
}

.flow-path-steps {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  position: relative;
}

.flow-path-product {
  color: #f8fafc;
  display: grid;
  gap: 8px;
  min-width: 0;
  position: relative;
  text-decoration: none;
}

.flow-path-step {
  align-items: center;
  background: #050a16;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--storefront-brand-color, var(--accent));
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.flow-product-thumb,
.flow-mini-thumb,
.flow-finder-thumb {
  aspect-ratio: 1;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  color: var(--storefront-brand-color, var(--accent));
  display: block;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}

.flow-product-thumb.placeholder,
.flow-mini-thumb.placeholder,
.flow-finder-thumb.placeholder {
  align-items: center;
  display: flex;
  font-weight: 950;
  justify-content: center;
}

.flow-path-product strong,
.flow-mini-product strong,
.flow-finder-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-path-product small,
.flow-finder-card span {
  color: #95a3b7;
  font-size: 12px;
}

.flow-stage-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.flow-stage-card > div {
  display: grid;
  gap: 10px;
}

.flow-mini-product {
  align-items: center;
  color: #f8fafc;
  display: grid;
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  text-decoration: none;
}

.flow-mini-product span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.flow-mini-price {
  color: var(--storefront-brand-color, var(--accent));
  font-weight: 900;
}

.flow-setup-steps {
  align-items: stretch;
  display: grid;
  gap: 60px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}

.flow-setup-steps::before {
  border-top: 1px dashed color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 58%, transparent);
  content: "";
  left: 28%;
  position: absolute;
  right: 28%;
  top: 50%;
}

.flow-setup-card {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 18px;
  position: relative;
  z-index: 1;
}

.flow-setup-card b {
  align-items: center;
  border: 1px solid var(--storefront-brand-color, var(--accent));
  border-radius: 999px;
  color: var(--storefront-brand-color, var(--accent));
  display: flex;
  font-size: 26px;
  height: 60px;
  justify-content: center;
  width: 60px;
}

.flow-setup-card span {
  display: grid;
  gap: 4px;
}

.flow-setup-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.flow-setup-card a,
.flow-filter-chips button {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 7px;
  color: #dbe6f4;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 12px;
  text-decoration: none;
}

.flow-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.flow-focus-note {
  align-items: center;
  background: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 32%, transparent);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 12px 14px;
}

.flow-focus-note[hidden] {
  display: none;
}

.flow-focus-note span {
  display: grid;
  gap: 3px;
}

.flow-focus-note strong {
  color: #f8fafc;
}

.flow-focus-note small {
  color: #aab7c8;
}

.flow-focus-note button {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  color: #dbe6f4;
  cursor: pointer;
  font-weight: 850;
  min-height: 36px;
  padding: 0 12px;
}

.flow-filter-chips button {
  cursor: pointer;
}

.flow-filter-chips button.active,
.flow-filter-chips button:focus-visible,
.flow-setup-card a:hover,
.flow-goal-card:hover,
.flow-finder-card:hover {
  border-color: var(--storefront-brand-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 14%, transparent);
}

.flow-filter-chips button.active {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  color: #fff;
}

.flow-product-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flow-finder-card {
  color: #f8fafc;
  display: grid;
  gap: 8px;
  padding: 12px;
  text-decoration: none;
}

.flow-finder-card > div {
  position: relative;
}

.flow-finder-card em {
  background: var(--storefront-brand-color, var(--accent));
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  left: 7px;
  padding: 3px 5px;
  position: absolute;
  top: 7px;
  z-index: 1;
}

.flow-finder-price {
  color: var(--storefront-brand-color, var(--accent));
  font-weight: 950;
}

.flow-path-card[data-flow-focus-active="true"],
.flow-stage-card[data-flow-focus-active="true"],
.flow-finder-card[data-flow-soft-match="true"] {
  border-color: var(--storefront-accent, var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 14%, transparent), 0 18px 60px color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 10%, transparent);
}

.flow-finder-card[data-flow-soft-dim="true"] {
  opacity: 0.52;
}

.flow-finder-card[data-flow-soft-dim="true"]:hover,
.flow-finder-card[data-flow-soft-dim="true"]:focus-visible {
  opacity: 0.92;
}

.flow-trust {
  margin-top: 16px;
}

.flow-about-library,
.flow-footer {
  margin-top: 16px;
}

[data-flow-hidden="true"] {
  display: none !important;
}

@media (max-width: 760px) {
  /* Public storefront mobile hardening: keep every storefront template inside the viewport. */
  #store-app > .storefront-public-site[data-storefront-template],
  .storefront-public-site[data-storefront-template] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    width: 100%;
  }

  #store-app > .storefront-public-site[data-storefront-template="showcase"],
  #store-app > .storefront-public-site[data-storefront-template="flow"] {
    margin: 0;
    padding: 14px;
  }

  .storefront-public-site[data-storefront-template] *,
  .storefront-public-site[data-storefront-template] *::before,
  .storefront-public-site[data-storefront-template] *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  .storefront-public-site[data-storefront-template] :is(h1, h2, h3, p, a, strong, small, span) {
    overflow-wrap: anywhere;
  }

  .storefront-public-site[data-storefront-template] .storefront-site-actions,
  .storefront-public-site[data-storefront-template] .spotlight-hero-actions,
  .storefront-public-site[data-storefront-template] .showcase-product-footer {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }

  .storefront-public-site[data-storefront-template] .store-button,
  .storefront-public-site[data-storefront-template] .store-link {
    justify-content: center;
    max-width: 100%;
    text-align: center;
  }
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template="spotlight"] {
  background:
    radial-gradient(circle at 58% 6%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 12%, transparent), transparent 28%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 8%, transparent), transparent 30%),
    linear-gradient(180deg, #fffdfb 0%, #f8fafc 56%, #f4f7fb 100%);
  color: #111827;
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template="showcase"] {
  background:
    radial-gradient(circle at 64% 6%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 11%, transparent), transparent 28%),
    radial-gradient(circle at 10% 28%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 8%, transparent), transparent 26%),
    linear-gradient(180deg, #fffdfb 0%, #f8fafc 46%, #f3f6fb 100%);
  border-color: rgba(24, 32, 44, 0.1);
  color: #111827;
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template="flow"] {
  background:
    radial-gradient(circle at 67% 3%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 13%, transparent), transparent 27%),
    radial-gradient(circle at 8% 22%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 9%, transparent), transparent 26%),
    #f8fafc;
  color: #111827;
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template] .storefront-site-nav {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(24, 32, 44, 0.11);
  box-shadow: 0 18px 50px rgba(31, 41, 55, 0.08);
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template] .storefront-site-links a,
:root[data-theme="light"] .storefront-public-site[data-storefront-template] .storefront-login-link,
:root[data-theme="light"] .storefront-public-site[data-storefront-template] .flow-nav .storefront-site-brand small {
  color: #475569;
}

:root[data-theme="light"] .storefront-public-site[data-storefront-template] .store-button.secondary,
:root[data-theme="light"] .storefront-public-site[data-storefront-template="spotlight"] .store-button.secondary,
:root[data-theme="light"] .storefront-public-site[data-storefront-template="showcase"] .store-button.secondary {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(24, 32, 44, 0.14);
  color: #111827;
}

:root[data-theme="light"] .spotlight-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78) 48%, rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at 47% 44%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, transparent), transparent 28%);
  border-bottom-color: rgba(24, 32, 44, 0.11);
}

:root[data-theme="light"] .spotlight-hero h1,
:root[data-theme="light"] .spotlight-hero-product-copy h2,
:root[data-theme="light"] .spotlight-price,
:root[data-theme="light"] .spotlight-section h2,
:root[data-theme="light"] .spotlight-about-library h2,
:root[data-theme="light"] .spotlight-footer h3,
:root[data-theme="light"] .spotlight-demo-row strong,
:root[data-theme="light"] .spotlight-highlight-card h3,
:root[data-theme="light"] .spotlight-trust h3,
:root[data-theme="light"] .spotlight-product-body h3,
:root[data-theme="light"] .showcase-hero h1,
:root[data-theme="light"] .showcase-quick-tile b,
:root[data-theme="light"] .showcase-product-body h2,
:root[data-theme="light"] .showcase-stats dd,
:root[data-theme="light"] .showcase-video-tile strong,
:root[data-theme="light"] .flow-hero h1,
:root[data-theme="light"] .flow-section-header h2,
:root[data-theme="light"] .flow-path-card h3,
:root[data-theme="light"] .flow-stage-card h3,
:root[data-theme="light"] .flow-stats dt,
:root[data-theme="light"] .flow-goal-card,
:root[data-theme="light"] .flow-path-product,
:root[data-theme="light"] .flow-mini-product,
:root[data-theme="light"] .flow-finder-card {
  color: #111827;
}

:root[data-theme="light"] .spotlight-hero-copy > p:not(.spotlight-badge),
:root[data-theme="light"] .spotlight-hero-product-copy p,
:root[data-theme="light"] .spotlight-feature-list,
:root[data-theme="light"] .spotlight-trust p,
:root[data-theme="light"] .spotlight-about-card p,
:root[data-theme="light"] .spotlight-library-card p,
:root[data-theme="light"] .spotlight-footer p,
:root[data-theme="light"] .spotlight-product-body p,
:root[data-theme="light"] .spotlight-video-card span,
:root[data-theme="light"] .spotlight-mini-trust span,
:root[data-theme="light"] .spotlight-demo-row time,
:root[data-theme="light"] .spotlight-demo-product,
:root[data-theme="light"] .spotlight-footer a,
:root[data-theme="light"] .spotlight-footer-bottom,
:root[data-theme="light"] .showcase-hero-copy > p:not(.store-eyebrow),
:root[data-theme="light"] .showcase-stats dt,
:root[data-theme="light"] .showcase-quick-tile small,
:root[data-theme="light"] .showcase-product-body span,
:root[data-theme="light"] .showcase-product-body p,
:root[data-theme="light"] .showcase-demo-center p,
:root[data-theme="light"] .showcase-guidance p,
:root[data-theme="light"] .showcase-about-card p,
:root[data-theme="light"] .showcase-library-card p,
:root[data-theme="light"] .showcase-footer p,
:root[data-theme="light"] .showcase-category-card p,
:root[data-theme="light"] .showcase-usecase-grid small,
:root[data-theme="light"] .showcase-video-tile span,
:root[data-theme="light"] .showcase-trust small,
:root[data-theme="light"] .showcase-footer a,
:root[data-theme="light"] .flow-hero p,
:root[data-theme="light"] .flow-stats dd,
:root[data-theme="light"] .flow-goal-card small,
:root[data-theme="light"] .flow-path-card p,
:root[data-theme="light"] .flow-stage-card p,
:root[data-theme="light"] .flow-setup-card small,
:root[data-theme="light"] .flow-path-product small,
:root[data-theme="light"] .flow-finder-card span {
  color: #5f6f84;
}

:root[data-theme="light"] .spotlight-hero-card,
:root[data-theme="light"] .spotlight-section,
:root[data-theme="light"] .spotlight-about-library,
:root[data-theme="light"] .spotlight-video-card,
:root[data-theme="light"] .spotlight-highlight-card,
:root[data-theme="light"] .spotlight-trust article,
:root[data-theme="light"] .spotlight-library-card,
:root[data-theme="light"] .spotlight-product-card,
:root[data-theme="light"] .showcase-panel,
:root[data-theme="light"] .showcase-section,
:root[data-theme="light"] .showcase-guidance,
:root[data-theme="light"] .showcase-demo-center,
:root[data-theme="light"] .showcase-trust,
:root[data-theme="light"] .showcase-about-card,
:root[data-theme="light"] .showcase-library-card,
:root[data-theme="light"] .showcase-footer,
:root[data-theme="light"] .showcase-quick-tile,
:root[data-theme="light"] .showcase-category-card,
:root[data-theme="light"] .showcase-product-card,
:root[data-theme="light"] .showcase-usecase-grid a,
:root[data-theme="light"] .flow-stats,
:root[data-theme="light"] .flow-goal-card,
:root[data-theme="light"] .flow-path-card,
:root[data-theme="light"] .flow-stage-card,
:root[data-theme="light"] .flow-setup-card,
:root[data-theme="light"] .flow-finder-card,
:root[data-theme="light"] .flow-section {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(24, 32, 44, 0.12);
  box-shadow: 0 18px 50px rgba(31, 41, 55, 0.07);
}

:root[data-theme="light"] .spotlight-footer {
  background: rgba(255, 255, 255, 0.88);
  border-top-color: rgba(24, 32, 44, 0.1);
}

:root[data-theme="light"] .spotlight-demo-list,
:root[data-theme="light"] .showcase-stats,
:root[data-theme="light"] .showcase-stats div,
:root[data-theme="light"] .showcase-library-visual,
:root[data-theme="light"] .showcase-video-thumb,
:root[data-theme="light"] .flow-product-thumb,
:root[data-theme="light"] .flow-mini-thumb,
:root[data-theme="light"] .flow-finder-thumb {
  border-color: rgba(24, 32, 44, 0.12);
}

:root[data-theme="light"] .spotlight-demo-row {
  background: rgba(248, 250, 252, 0.76);
  border-bottom-color: rgba(24, 32, 44, 0.1);
}

:root[data-theme="light"] .spotlight-hero-media,
:root[data-theme="light"] .spotlight-video-thumb,
:root[data-theme="light"] .spotlight-product-media,
:root[data-theme="light"] .spotlight-demo-product img,
:root[data-theme="light"] .spotlight-demo-product span,
:root[data-theme="light"] .showcase-product-media,
:root[data-theme="light"] .showcase-visual,
:root[data-theme="light"] .showcase-library-visual,
:root[data-theme="light"] .flow-product-thumb,
:root[data-theme="light"] .flow-mini-thumb,
:root[data-theme="light"] .flow-finder-thumb {
  background: linear-gradient(135deg, #f8fafc, #e8eef6);
}

:root[data-theme="light"] .spotlight-waveform i {
  --wave-unplayed: #a6b3c3;
}

:root[data-theme="light"] .showcase-search input,
:root[data-theme="light"] .flow-search,
:root[data-theme="light"] .flow-setup-card a,
:root[data-theme="light"] .flow-filter-chips button {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(24, 32, 44, 0.15);
  color: #111827;
}

:root[data-theme="light"] .flow-hero-visual.placeholder {
  background:
    radial-gradient(circle at 62% 46%, transparent 0 58px, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 38%, transparent) 60px 63px, transparent 66px),
    linear-gradient(130deg, rgba(255, 255, 255, 0.1), color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 14%, #eef2f7) 52%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 12%, #f8fafc)),
    linear-gradient(180deg, #f8fafc, #eef2f7);
}

:root[data-theme="light"] .flow-hero-visual::after {
  background:
    linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.7) 37%, rgba(248, 250, 252, 0.18) 70%),
    linear-gradient(180deg, rgba(248, 250, 252, 0), #f8fafc 92%);
}

:root[data-theme="light"] .flow-path-step {
  background: #fff;
}

:root[data-theme="light"] .flow-filter-chips button.active {
  background: linear-gradient(135deg, var(--storefront-brand-color, var(--accent)), var(--storefront-accent, var(--accent-2)));
  color: #fff;
}

@media (max-width: 1180px) {
  .flow-goal-grid,
  .flow-product-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flow-path-grid,
  .flow-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .flow-hero,
  .flow-section,
  .flow-trust {
    max-width: 100%;
    width: 100%;
  }

.flow-about-library,
  .flow-footer {
    max-width: 100%;
    width: 100%;
  }

  .flow-hero,
  .flow-section,
  .flow-trust,
  .flow-about-library,
  .flow-footer {
    max-width: 100%;
    width: 100%;
  }

  .flow-hero,
  .flow-section-header,
  .flow-path-grid,
  .flow-stage-grid,
  .flow-setup-steps,
  .flow-product-row,
  .flow-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-hero {
    min-height: 0;
    padding: 44px 4px 44px;
  }

  .flow-hero-panel {
    justify-self: stretch;
  }

  .flow-goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-goal-card {
    min-height: 142px;
    padding: 16px;
  }

  .flow-setup-steps {
    gap: 14px;
  }

  .flow-setup-steps::before {
    display: none;
  }

  .flow-focus-note {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .flow-goal-grid,
  .flow-product-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-hero h1 {
    font-size: 40px;
  }
}

/* === Website Builder redesign === */
.brand-page-header {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 0 18px;
}

.brand-page-header h1 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 3px 0 6px;
}

.brand-page-header p,
.brand-page-header small {
  color: var(--muted);
  display: block;
  line-height: 1.55;
}

.brand-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.brand-page-shell {
  width: 100%;
}

.brand-page-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.website-builder-wrap {
  background:
    radial-gradient(circle at 22% 0%, rgba(37, 99, 235, 0.13), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(255, 106, 26, 0.08), transparent 30%);
  gap: 16px;
}

.website-builder-hero {
  background: transparent;
  border: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
  padding: 0;
}

.website-builder-hero h1 {
  font-size: clamp(1.7rem, 2vw, 2.25rem);
  line-height: 1.12;
  margin: 4px 0 8px;
}

.website-builder-hero p {
  max-width: 820px;
}

.website-builder-autosave {
  background: rgba(15, 23, 42, 0.58);
  min-width: 220px;
  display: grid;
  gap: 4px;
  justify-self: end;
}

.website-builder-autosave small {
  color: var(--success);
  font-size: 12px;
  font-weight: 850;
}

.website-builder-wizard {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-topbar {
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 14px;
}

.website-builder-topbar-summary {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  min-width: 0;
}

.website-builder-score {
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  margin: 0;
  min-width: 0;
  padding: 12px;
}

.website-builder-score .store-eyebrow {
  margin: 0;
}

.website-builder-score strong {
  font-size: 26px;
  line-height: 1;
}

.website-builder-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.website-builder-score i {
  background: linear-gradient(90deg, var(--accent) var(--builder-progress), rgba(148, 163, 184, 0.18) var(--builder-progress));
  border-radius: 999px;
  display: block;
  height: 6px;
}

.website-builder-remaining {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
  padding: 12px;
}

.website-builder-remaining.complete {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.24);
}

.website-builder-remaining strong {
  color: var(--text);
  font-size: 13px;
}

.website-builder-remaining ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.website-builder-remaining li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.website-builder-stepbar {
  min-width: 0;
  overflow: hidden;
}

.website-builder-stepbar ol {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.website-builder-stepbar .wizard-progress-step {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  min-width: 0;
  padding: 6px;
}

.website-builder-stepbar .wizard-progress-step.current {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.website-builder-stepbar .wizard-progress-step button {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 24px minmax(0, 1fr);
  min-width: 0;
}

.website-builder-stepbar .wizard-progress-step span {
  border-radius: 999px;
  font-size: 11px;
  height: 24px;
  width: 24px;
}

.website-builder-stepbar .wizard-progress-step strong {
  color: var(--text);
  display: block;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-stepbar .wizard-progress-step small {
  display: none;
}

.website-builder-step-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(340px, 0.78fr) minmax(520px, 1.22fr);
}

.website-builder-step-layout-single {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.website-builder-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-builder-wide {
  grid-column: 1 / -1;
}

.website-builder-welcome,
.website-builder-upload-card,
.website-builder-support-grid article,
.website-builder-email-grid article,
.website-builder-review-grid article,
.website-builder-preview {
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 14px;
}

.website-builder-illustration {
  background:
    linear-gradient(135deg, rgba(255, 106, 26, 0.14), rgba(20, 184, 166, 0.1)),
    rgba(15, 23, 42, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 190px;
  padding: 16px;
}

.website-builder-illustration span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.website-builder-illustration span:first-child {
  grid-row: span 2;
}

.website-builder-upload-card {
  display: grid;
  gap: 12px;
}

.website-builder-upload-card p {
  line-height: 1.5;
  margin: 5px 0 0;
}

.website-builder-support-grid,
.website-builder-email-grid,
.website-builder-review-grid,
.website-builder-advanced-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-builder-support-grid article,
.website-builder-email-grid article,
.website-builder-review-grid article {
  display: grid;
  gap: 10px;
}

.website-builder-validation {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  gap: 7px;
}

.website-builder-validation b {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.website-builder-validation.valid b {
  background: var(--success-soft);
  color: var(--success);
}

.website-builder-validation.warning b {
  background: var(--warning-soft);
  color: var(--warning);
}

.website-builder-theme-grid,
.website-builder-nav-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.website-builder-theme-card {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 18px;
  min-height: 46px;
  padding: 9px 10px;
  transform-origin: center;
}

.website-builder-theme-card:hover,
.website-builder-theme-card.selected {
  transform: translateY(-1px);
}

.website-builder-theme-card .storefront-choice-check {
  grid-column: 2;
  grid-row: 1;
}

.website-builder-theme-card .storefront-choice-copy {
  min-width: 0;
}

.website-builder-theme-card .storefront-choice-copy strong,
.website-builder-wizard .storefront-style-choice .storefront-choice-copy strong,
.website-builder-wizard .storefront-nav-choice .storefront-choice-copy strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-wizard .storefront-style-grid,
.website-builder-wizard .storefront-nav-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.website-builder-wizard .storefront-style-choice,
.website-builder-wizard .storefront-nav-choice,
.website-builder-wizard .storefront-nav-item-choice {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 18px;
  min-height: 46px;
  padding: 9px 10px;
}

.website-builder-wizard .storefront-style-choice .storefront-choice-check,
.website-builder-wizard .storefront-nav-choice .storefront-choice-check,
.website-builder-wizard .storefront-nav-item-choice .storefront-choice-check {
  grid-column: 2;
  grid-row: 1;
}

.website-builder-wizard .storefront-choice-preview,
.website-builder-wizard .nav-mode-mini,
.website-builder-theme-card .storefront-choice-preview {
  display: none !important;
}

.website-builder-section-list {
  display: grid;
  gap: 10px;
}

.website-builder-section-list article {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  display: grid;
  gap: 12px;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-height: 58px;
  padding: 11px 12px;
}

.website-builder-section-list article.is-dragging {
  opacity: 0.48;
}

.website-builder-drag {
  color: var(--muted);
  font-weight: 900;
  letter-spacing: 1px;
}

.website-builder-switch {
  display: inline-flex !important;
}

.website-builder-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.website-builder-switch span {
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  height: 24px;
  padding: 2px;
  width: 44px;
}

.website-builder-switch span::before {
  background: var(--muted);
  border-radius: 999px;
  content: "";
  display: block;
  height: 18px;
  transition: transform 0.18s ease, background 0.18s ease;
  width: 18px;
}

.website-builder-switch input:checked + span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.website-builder-switch input:checked + span::before {
  background: var(--accent);
  transform: translateX(18px);
}

.website-builder-section-list small {
  color: var(--muted);
  font-size: 12px;
}

.website-builder-section-list em {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  grid-column: 3;
  line-height: 1.2;
  margin-top: -8px;
}

.website-builder-section-list [data-homepage-section-status] {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  display: inline-flex;
  font-weight: 800;
  grid-column: 3;
  justify-self: start;
  line-height: 1;
  padding: 5px 8px;
}

.website-builder-page-map {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.website-builder-page-map span {
  background: rgba(8, 13, 21, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.website-builder-page-map span.ready {
  border-color: var(--accent-line);
}

.website-builder-page-map span.muted {
  opacity: 0.62;
}

.website-builder-page-map b,
.website-builder-page-map small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-page-map b {
  color: var(--text);
  font-size: 12px;
}

.website-builder-page-map small {
  color: var(--muted);
  font-size: 10px;
}

.website-builder-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.26fr) minmax(0, 1fr);
}

.website-builder-page-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.website-builder-page-sidebar {
  align-self: start;
  background: rgba(4, 8, 14, 0.54);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 14px;
  position: sticky;
  top: 88px;
}

.website-builder-page-sidebar h3 {
  font-size: 18px;
  margin: 0;
}

.website-builder-page-sidebar label {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.website-builder-page-sidebar label:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
  transform: translateY(-1px);
}

.website-builder-page-sidebar strong,
.website-builder-page-sidebar small,
.website-builder-page-sidebar span {
  min-width: 0;
}

.website-builder-page-sidebar strong {
  color: var(--text);
  font-size: 14px;
}

.website-builder-page-sidebar small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.website-builder-page-sidebar span {
  color: var(--soft);
  font-size: 11px;
  font-weight: 850;
}

.website-builder-page-stage {
  min-width: 0;
}

.website-builder-page-panel {
  display: none;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.28fr);
  min-width: 0;
}

#builder-page-home:checked ~ .website-builder-page-sidebar [for="builder-page-home"],
#builder-page-catalog:checked ~ .website-builder-page-sidebar [for="builder-page-catalog"],
#builder-page-product_template:checked ~ .website-builder-page-sidebar [for="builder-page-product_template"],
#builder-page-bundle:checked ~ .website-builder-page-sidebar [for="builder-page-bundle"],
#builder-page-cart:checked ~ .website-builder-page-sidebar [for="builder-page-cart"],
#builder-page-checkout:checked ~ .website-builder-page-sidebar [for="builder-page-checkout"],
#builder-page-account_library:checked ~ .website-builder-page-sidebar [for="builder-page-account_library"],
#builder-page-library:checked ~ .website-builder-page-sidebar [for="builder-page-library"],
#builder-page-support:checked ~ .website-builder-page-sidebar [for="builder-page-support"],
#builder-page-landing:checked ~ .website-builder-page-sidebar [for="builder-page-landing"] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}

#builder-page-home:checked ~ .website-builder-page-stage [data-builder-page-panel="home"],
#builder-page-catalog:checked ~ .website-builder-page-stage [data-builder-page-panel="catalog"],
#builder-page-product_template:checked ~ .website-builder-page-stage [data-builder-page-panel="product_template"],
#builder-page-bundle:checked ~ .website-builder-page-stage [data-builder-page-panel="bundle"],
#builder-page-cart:checked ~ .website-builder-page-stage [data-builder-page-panel="cart"],
#builder-page-checkout:checked ~ .website-builder-page-stage [data-builder-page-panel="checkout"],
#builder-page-account_library:checked ~ .website-builder-page-stage [data-builder-page-panel="account_library"],
#builder-page-library:checked ~ .website-builder-page-stage [data-builder-page-panel="library"],
#builder-page-support:checked ~ .website-builder-page-stage [data-builder-page-panel="support"],
#builder-page-landing:checked ~ .website-builder-page-stage [data-builder-page-panel="landing"] {
  display: grid;
}

.website-builder-page-toolbar {
  align-items: center;
  background: rgba(4, 8, 14, 0.66);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 14px;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
}

.website-builder-page-toolbar h3 {
  font-size: 18px;
  margin: 0;
}

.website-builder-toolbar-groups {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.website-builder-toolbar-groups span {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  min-height: 34px;
  padding: 5px 9px;
}

.website-builder-toolbar-groups strong,
.website-builder-toolbar-groups small {
  font-size: 11px;
  white-space: nowrap;
}

.website-builder-toolbar-groups strong {
  color: var(--soft);
}

.website-builder-toolbar-groups small {
  color: var(--muted);
}

.website-builder-page-canvas,
.website-builder-page-properties {
  background: rgba(8, 13, 21, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

.website-builder-page-properties {
  align-content: start;
}

.website-builder-page-title {
  display: grid;
  gap: 8px;
}

.website-builder-page-title h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  margin: 0;
}

.website-builder-page-title p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 780px;
}

.website-builder-route-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.website-builder-route-line strong {
  color: var(--soft);
  font-size: 11px;
  text-transform: uppercase;
}

.website-builder-route-line code {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  padding: 6px 8px;
}

.website-builder-template-stage,
.website-builder-edit-stage {
  display: grid;
  gap: 14px;
}

.website-builder-template-options {
  display: grid;
  gap: 14px;
}

.website-builder-template-option {
  align-items: stretch;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr) auto;
  min-width: 0;
  padding: 14px;
}

.website-builder-template-option strong {
  color: var(--text);
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.website-builder-template-option p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.website-builder-template-preview {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(99, 102, 241, 0.12)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
}

.website-builder-template-preview span,
.website-builder-template-preview i,
.website-builder-template-preview b,
.website-builder-template-preview em {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  display: block;
}

.website-builder-template-preview span {
  min-height: 34px;
}

.website-builder-template-preview i {
  width: 70%;
}

.website-builder-template-preview b {
  width: 44%;
}

.website-builder-template-preview em {
  justify-self: end;
  width: 32%;
}

.website-builder-template-blocks,
.website-builder-binding-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.website-builder-template-blocks small,
.website-builder-binding-list code {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
}

.website-builder-edit-stage {
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr) minmax(220px, 0.25fr);
}

.website-builder-section-rail {
  display: grid;
  gap: 7px;
}

.website-builder-section-rail button {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: default;
  font-weight: 800;
  padding: 9px 10px;
  text-align: left;
}

.website-builder-section-rail button.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}

.website-builder-page-live-preview {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  min-height: 360px;
  padding: 16px;
}

.website-builder-page-live-top {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.website-builder-page-live-top span {
  color: var(--text);
  font-weight: 900;
}

.website-builder-page-live-top i {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  height: 26px;
  width: 120px;
}

.website-builder-page-live-hero {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
}

.website-builder-page-live-hero b,
.website-builder-page-live-hero span,
.website-builder-page-live-hero em,
.website-builder-page-live-grid span {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  display: block;
}

.website-builder-page-live-hero b {
  height: 42px;
  width: 70%;
}

.website-builder-page-live-hero span {
  height: 78px;
}

.website-builder-page-live-hero em {
  height: 34px;
  width: 34%;
}

.website-builder-page-live-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-builder-page-live-grid span {
  min-height: 74px;
}

.website-builder-properties-card,
.website-builder-page-properties section {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
}

.website-builder-properties-card h3,
.website-builder-page-properties h3 {
  font-size: 16px;
  margin: 0;
}

.website-builder-target-list {
  display: grid;
  gap: 8px;
}

.website-builder-target-list span {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
}

.website-builder-target-list span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.website-builder-target-list strong {
  color: var(--soft);
  font-size: 12px;
}

.website-builder-target-list small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.website-builder-page-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.website-builder-page-meta span {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
}

.website-builder-page-meta strong,
.website-builder-page-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-page-meta strong {
  color: var(--soft);
  font-size: 10px;
  text-transform: uppercase;
}

.website-builder-page-meta small {
  color: var(--muted);
  font-size: 11px;
}

.website-builder-page-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.website-builder-page-sections span {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
}

.website-builder-page-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.website-builder-page-editor-tabs span {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
}

.website-builder-publishing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.website-builder-publishing-badges span {
  background: rgba(34, 197, 94, 0.11);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 6px 8px;
}

.website-builder-publishing-badges span.muted {
  background: rgba(148, 163, 184, 0.09);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--muted);
}

.website-builder-publishing-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  margin-top: 8px;
  padding: 10px;
}

.website-builder-publishing-panel strong,
.website-builder-publishing-panel small {
  min-width: 0;
}

.website-builder-publishing-panel strong {
  color: var(--soft);
  font-size: 11px;
}

.website-builder-publishing-panel small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.website-builder-embed-code {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.website-builder-embed-code summary {
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.website-builder-embed-code .developer-code-block {
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
}

.website-builder-page-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.website-builder-page-actions .store-button {
  min-width: 0;
}

.storefront-builder-mini-page {
  min-height: 560px;
}

.storefront-builder-secure-page {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 42%),
    var(--page);
}

.website-builder-v1-form {
  background: #07111d;
  color: #eef4ff;
  margin: 0;
  min-height: 100vh;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.website-builder-v1-shell {
  background: #07111d;
  min-height: 100vh;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.website-builder-v1-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.website-builder-v1-topbar {
  align-items: center;
  background: rgba(5, 12, 20, 0.98);
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(150px, 200px) minmax(150px, 180px) 44px minmax(132px, 180px) minmax(0, auto);
  min-height: 66px;
  min-width: 0;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.website-builder-v1-logo,
.website-builder-v1-actions,
.website-builder-v1-device-tabs,
.website-builder-v1-store-card,
.website-template-brand {
  align-items: center;
  display: flex;
}

.website-builder-v1-logo {
  gap: 10px;
  min-width: 0;
}

.website-builder-v1-logo span,
.website-builder-v1-mainnav label > span {
  align-items: center;
  border: 1px solid #ff6a1a;
  border-radius: 7px;
  color: #ff6a1a;
  display: inline-flex;
  font-size: 12px;
  font-weight: 950;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.website-builder-v1-logo strong {
  color: #fff;
  font-size: 20px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-v1-store-select,
.website-builder-v1-open-link {
  background: rgba(9, 18, 30, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 7px;
  color: #f6faff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 38px;
  min-width: 0;
  overflow: hidden;
  padding: 0 13px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-v1-open-link {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.website-builder-v1-device-tabs {
  justify-content: center;
  min-width: 0;
}

.website-builder-v1-device-tabs button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(100, 116, 139, 0.28);
  color: #9fb0c6;
  font: inherit;
  font-size: 0;
  height: 34px;
  position: relative;
  width: 44px;
}

.website-builder-v1-device-tabs button::before {
  border: 1px solid currentColor;
  border-radius: 3px;
  content: "";
  display: block;
  height: 16px;
  margin: auto;
  width: 22px;
}

.website-builder-v1-device-tabs button:nth-child(2)::before {
  height: 18px;
  width: 15px;
}

.website-builder-v1-device-tabs button:nth-child(3)::before {
  height: 20px;
  width: 11px;
}

.website-builder-v1-device-tabs button.active {
  background: rgba(255, 106, 26, 0.16);
  border-color: rgba(255, 106, 26, 0.42);
  color: #ff7b2d;
}

.website-builder-v1-actions {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
  min-width: 0;
}

.website-builder-v1-actions > span {
  color: #37d46c;
  font-size: 12px;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-v1-avatar,
.website-builder-v1-avatar span {
  border-radius: 999px;
  height: 34px;
  overflow: hidden;
  width: 34px;
}

.website-builder-v1-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.website-builder-v1-avatar span {
  background: linear-gradient(135deg, #ffd6c2, #7dd3fc);
  display: block;
}

.website-builder-v1-body {
  display: block;
  min-height: calc(100vh - 66px);
}

.website-builder-v1-mainnav {
  background: rgba(5, 12, 20, 0.84);
  border-right: 1px solid rgba(100, 116, 139, 0.24);
  display: grid;
  gap: 18px;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 28px 16px 18px;
}

.website-builder-v1-mainnav > p,
.website-template-sidebar p {
  color: #91a4bd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.website-builder-v1-mainnav nav {
  display: grid;
  gap: 8px;
}

.website-builder-v1-mainnav label {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #edf4ff;
  cursor: pointer;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 50px;
  padding: 8px 11px;
}

.website-builder-v1-mainnav label strong,
.website-builder-v1-mainnav label small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-v1-mainnav label strong {
  font-size: 14px;
}

.website-builder-v1-mainnav label small {
  color: #9fb0c6;
  font-size: 12px;
}

#website-builder-area-pages:checked ~ .website-builder-v1-topbar ~ .website-builder-v1-body [data-builder-area-label="pages"],
#website-builder-area-products:checked ~ .website-builder-v1-topbar ~ .website-builder-v1-body [data-builder-area-label="products"],
#website-builder-area-navigation:checked ~ .website-builder-v1-topbar ~ .website-builder-v1-body [data-builder-area-label="navigation"] {
  background: linear-gradient(90deg, rgba(255, 106, 26, 0.24), rgba(255, 106, 26, 0.07));
  border-color: rgba(255, 106, 26, 0.42);
}

.website-builder-v1-store-card,
.website-builder-v1-card,
.website-builder-v1-sidepanel section {
  background: rgba(9, 18, 30, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.26);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.website-builder-v1-store-card {
  align-self: end;
  display: grid;
}

.website-builder-v1-store-card span,
.website-builder-v1-sidepanel p,
.website-builder-v1-panel-header span {
  color: #a8b7c9;
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.website-builder-v1-store-card strong {
  color: #ff7b2d;
  font-size: 14px;
}

.website-builder-v1-store-card a,
.website-builder-v1-sidepanel a {
  color: #7dc6ff;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.website-builder-v1-sidepanel h3,
.website-builder-v1-card h3 {
  color: #f7fbff;
  font-size: 16px;
  margin: 0;
}

.website-builder-v1-workspace {
  min-width: 0;
  padding: 18px 20px 28px;
}

.website-builder-v1-area {
  display: block;
}

.website-builder-v1-section {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.website-builder-v1-simple-panel main,
.website-builder-v1-products-panel main,
.website-builder-v1-sidepanel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.website-builder-v1-panel-header {
  display: grid;
  gap: 8px;
}

.website-builder-v1-panel-header p {
  color: #91a4bd;
  font-size: 12px;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}

.website-builder-v1-panel-header h2 {
  color: #f8fbff;
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
}

.website-builder-v1-sidepanel {
  align-self: start;
  position: sticky;
  top: 86px;
}

.website-builder-v1-brand-swatch {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-accent, #ff6a1a) 22%, transparent), transparent 42%),
    #050b12;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-height: 170px;
  place-items: center;
}

.website-builder-v1-brand-swatch img {
  max-height: 56px;
  max-width: 160px;
}

.website-builder-v1-brand-swatch strong {
  color: #fff;
}

.website-builder-v1-brand-swatch > span {
  background: var(--template-accent, #ff6a1a);
  border-radius: 999px;
  height: 52px;
  width: 52px;
}

.website-builder-v1-nav-preview {
  background: #050b12;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

.website-builder-v1-nav-preview strong {
  color: #fff;
  flex: 1 0 100%;
}

.website-builder-v1-nav-preview span {
  color: #c7d4e6;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1420px) {
  .website-builder-v1-body {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .website-templates-workspace {
    gap: 14px;
    grid-template-columns: minmax(170px, 16%) minmax(0, 1fr);
  }

  .website-home-template-frame {
    height: 390px;
  }

  .website-home-template-scale {
    transform: translateX(-50%) scale(0.2);
  }
}

@media (max-width: 980px) {
  .website-builder-v1-topbar {
    grid-template-columns: 1fr;
    padding: 12px;
    position: static;
  }

  .website-builder-v1-body,
  .website-builder-v1-section,
  .website-templates-workspace {
    grid-template-columns: 1fr;
  }

  .website-builder-v1-mainnav {
    border-bottom: 1px solid rgba(100, 116, 139, 0.24);
    border-right: 0;
    grid-template-rows: auto;
  }

  .website-builder-v1-mainnav nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-template-sidebar,
  .website-builder-v1-sidepanel {
    position: static;
  }
}

.website-template-designer {
  color: #eef4ff;
}

.website-templates-workspace {
  align-items: start;
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
  grid-template-columns: minmax(190px, 15%) minmax(0, 1fr);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.website-template-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  grid-template-rows: 64px minmax(0, 1fr);
  min-height: 900px;
}

.website-template-appbar {
  align-items: center;
  background: rgba(6, 13, 22, 0.96);
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(190px, 260px) minmax(190px, 1fr) auto;
  min-width: 0;
  padding: 10px 18px;
}

.website-template-store-select {
  align-items: center;
  background: rgba(9, 18, 30, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.36);
  border-radius: 8px;
  color: #f8fbff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  gap: 12px;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 14px;
}

.website-template-device-tabs,
.website-template-app-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.website-template-device-tabs {
  justify-content: center;
}

.website-template-device-tabs button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  color: #9fb0c6;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  min-height: 34px;
  padding: 0 11px;
}

.website-template-device-tabs button.active {
  background: rgba(255, 106, 26, 0.14);
  border-color: rgba(255, 106, 26, 0.42);
  color: #ffb381;
}

.website-template-app-actions {
  justify-content: flex-end;
}

.website-template-app-actions > span {
  color: #8da0ba;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.website-template-sidebar {
  background: #06101b;
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 10px;
  display: grid;
  gap: 18px;
  grid-row: auto;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  padding: 18px 16px;
}

.website-template-sidebar section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.website-template-sidebar p {
  color: #9fb0c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.website-template-sidebar button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #edf4ff;
  cursor: pointer;
  display: grid;
  font-family: inherit;
  gap: 2px 10px;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 50px;
  min-width: 0;
  padding: 7px 8px;
  text-align: left;
}

.website-template-sidebar button > span {
  align-items: center;
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 7px;
  color: #ccd7e6;
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  grid-row: span 2;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.website-template-sidebar strong,
.website-template-sidebar small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-template-sidebar strong {
  color: #f7fbff;
  font-size: 14px;
  line-height: 1.2;
}

.website-template-sidebar small {
  color: #93a4bb;
  font-size: 12px;
  line-height: 1.25;
}

.website-template-sidebar button:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(100, 116, 139, 0.24);
}

.website-template-sidebar button.is-active {
  background: linear-gradient(90deg, rgba(255, 106, 26, 0.22), rgba(255, 106, 26, 0.06));
  border-color: rgba(255, 106, 26, 0.45);
  box-shadow: inset 3px 0 0 #ff6a1a;
}

.website-template-progress-card {
  align-self: end;
  background: rgba(9, 18, 30, 0.9);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  padding: 14px;
}

.website-template-progress-card div {
  display: grid;
  gap: 6px;
}

.website-template-progress-card strong {
  color: #f8fbff;
  font-size: 15px;
}

.website-template-progress-card div span,
.website-template-progress-card small {
  color: #99aabe;
  font-size: 12px;
}

.website-template-progress-card i {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
}

.website-template-progress-card i::before {
  background: #ff6a1a;
  content: "";
  display: block;
  height: 100%;
  width: var(--template-progress, 0%);
}

.website-template-progress-card small.complete {
  color: #51d46f;
}

.website-template-main {
  background: #07111d;
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 10px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(16px, 1.7vw, 24px);
}

.website-template-page-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.website-template-page-header {
  border-bottom: 1px solid rgba(100, 116, 139, 0.28);
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.website-template-page-header h2 {
  color: #f8fbff;
  font-size: 29px;
  line-height: 1.12;
  margin: 0;
}

.website-template-page-header p {
  color: #a8b7c9;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 860px;
}

.website-template-page-header > :not(.website-template-page-actions) {
  grid-column: 1;
}

.website-template-page-actions {
  align-self: start;
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
}

.website-template-tabs {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.website-template-tabs span {
  border-bottom: 2px solid transparent;
  color: #b8c6d8;
  font-size: 14px;
  font-weight: 850;
  padding: 12px 0;
}

.website-template-tabs span.active {
  border-color: #ff6a1a;
  color: #ff7b2d;
}

.website-template-current-card {
  align-items: center;
  background: rgba(9, 18, 30, 0.78);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-width: 0;
  padding: 16px 18px;
}

.website-template-current-card p {
  color: #9eb0c6;
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 4px;
}

.website-template-current-card h3 {
  align-items: center;
  color: #f8fbff;
  display: flex;
  flex-wrap: wrap;
  font-size: 20px;
  gap: 10px;
  margin: 0;
}

.website-template-current-card h3 span,
.website-template-option em {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 6px;
  color: #64e07f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 4px 8px;
}

.website-template-browser {
  background: #050b12;
  border: 1px solid rgba(100, 116, 139, 0.32);
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  min-height: 560px;
  min-width: 0;
  overflow: hidden;
}

.website-template-preview-page {
  --template-preview-scale: 0.82;
  transform: scale(var(--template-preview-scale));
  transform-origin: top left;
  width: calc(100% / var(--template-preview-scale));
}

.website-template-browser-nav {
  align-items: center;
  background: rgba(2, 6, 12, 0.94);
  border-bottom: 1px solid rgba(100, 116, 139, 0.28);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(120px, 1fr) minmax(0, auto) minmax(80px, 0.75fr);
  min-height: 52px;
  min-width: 0;
  padding: 0 24px;
}

.website-template-browser-nav strong {
  color: #f9fbff;
  font-size: 15px;
  font-weight: 950;
}

.website-template-brand {
  gap: 9px;
  min-width: 0;
}

.website-template-brand img,
.website-template-brand > span {
  border-radius: 999px;
  height: 24px;
  object-fit: cover;
  width: 24px;
}

.website-template-brand > span {
  background: var(--template-accent, #87e000);
  display: inline-block;
}

.website-template-browser-nav nav {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.website-template-browser-nav nav span {
  color: #c5d2e2;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.website-template-browser-nav div {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.website-template-browser-nav div span {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  height: 16px;
  width: 16px;
}

.website-template-product-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  min-height: 394px;
  min-width: 0;
}

.website-template-product-media {
  background: radial-gradient(circle at 46% 44%, rgba(var(--template-accent-rgb, 48 140 255), 0.26), transparent 28%), linear-gradient(135deg, rgba(255, 106, 26, 0.11), transparent 38%), #07101a;
  border-right: 1px solid rgba(100, 116, 139, 0.2);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 28px 30px 22px;
}

.website-template-product-media img {
  align-self: center;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
  max-height: 310px;
  object-fit: cover;
  width: 100%;
}

.website-template-synth-art {
  align-self: center;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 46%, rgba(56, 189, 248, 0.5), transparent 9%), radial-gradient(circle at 22% 32%, rgba(255, 106, 26, 0.5), transparent 7%), linear-gradient(140deg, #111827, #05070c);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  min-height: 280px;
}

.website-template-gallery-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.website-template-gallery-row span {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 6px;
  height: 45px;
  width: 62px;
}

.website-template-gallery-row span.active {
  border-color: var(--template-accent, #87e000);
  box-shadow: 0 0 0 1px rgba(var(--template-accent-rgb, 135 224 0), 0.42);
}

.website-template-product-copy {
  display: grid;
  gap: 12px;
  padding: 46px 40px;
}

.website-template-product-copy p {
  color: var(--template-accent, #87e000);
  font-size: 12px;
  font-weight: 950;
  margin: 0;
  text-transform: uppercase;
}

.website-template-product-copy h3 {
  color: #fff;
  font-size: 34px;
  line-height: 1;
  margin: 0;
}

.website-template-product-copy > strong {
  color: #fff;
  font-size: 15px;
}

.website-template-product-copy > span {
  color: #becbe0;
  font-size: 15px;
  line-height: 1.55;
  max-width: 360px;
}

.website-template-rating,
.website-template-price,
.website-template-compat,
.website-template-product-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.website-template-rating b,
.website-template-price strong {
  color: var(--template-accent, #87e000);
}

.website-template-rating small,
.website-template-price small,
.website-template-compat span {
  color: #9fb0c6;
  font-size: 12px;
}

.website-template-price strong {
  font-size: 25px;
}

.website-template-price small {
  text-decoration: line-through;
}

.website-template-price em {
  background: rgba(var(--template-accent-rgb, 135 224 0), 0.14);
  border-radius: 5px;
  color: var(--template-accent, #87e000);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  padding: 5px 7px;
}

.website-template-product-actions button,
.website-template-generic-hero button {
  background: var(--template-accent, #87e000);
  border: 0;
  border-radius: 7px;
  color: #07110b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  min-height: 46px;
  min-width: 146px;
  padding: 0 18px;
  text-transform: uppercase;
}

.website-template-product-actions button + button {
  background: transparent;
  border: 1px solid rgba(203, 213, 225, 0.38);
  color: #eef4ff;
}

.website-template-browser[data-template-key="marketplace"] .website-template-preview-page {
  --template-preview-scale: 0.78;
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-preview {
  grid-template-columns: minmax(0, 1fr);
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-media {
  border-bottom: 1px solid rgba(100, 116, 139, 0.22);
  border-right: 0;
  min-height: 260px;
  padding: 24px 34px 18px;
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-media img,
.website-template-browser[data-template-key="marketplace"] .website-template-synth-art {
  max-height: 220px;
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-copy {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 24px 34px 30px;
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-copy > span,
.website-template-browser[data-template-key="marketplace"] .website-template-rating {
  grid-column: 1;
}

.website-template-browser[data-template-key="marketplace"] .website-template-price,
.website-template-browser[data-template-key="marketplace"] .website-template-product-actions {
  grid-column: 2;
  justify-content: flex-end;
}

.website-template-browser[data-template-key="marketplace"] .website-template-product-copy h3 {
  font-size: 30px;
}

.website-template-browser[data-template-key="minimal"] .website-template-preview-page {
  --template-preview-scale: 0.88;
}

.website-template-browser[data-template-key="minimal"] .website-template-product-preview {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
  min-height: 420px;
}

.website-template-browser[data-template-key="minimal"] .website-template-product-media {
  padding: 36px 28px;
}

.website-template-browser[data-template-key="minimal"] .website-template-gallery-row,
.website-template-browser[data-template-key="minimal"] .website-template-preview-tabs,
.website-template-browser[data-template-key="minimal"] .website-template-preview-lower {
  display: none;
}

.website-template-browser[data-template-key="minimal"] .website-template-product-copy {
  align-content: center;
  gap: 14px;
  padding: 34px;
}

.website-template-browser[data-template-key="minimal"] .website-template-product-copy h3 {
  font-size: 27px;
  line-height: 1.08;
}

.website-template-browser[data-template-key="minimal"] .website-template-product-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.website-template-browser[data-template-key="minimal"] .website-template-product-actions button {
  width: 100%;
}

.website-template-preview-tabs {
  background: rgba(2, 6, 12, 0.8);
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
  border-top: 1px solid rgba(100, 116, 139, 0.24);
  display: flex;
  gap: 28px;
  min-height: 50px;
  padding: 0 28px;
}

.website-template-preview-tabs span {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #b9c6d8;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.website-template-preview-tabs span.active {
  border-color: var(--template-accent, #87e000);
  color: var(--template-accent, #87e000);
}

.website-template-preview-lower {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  padding: 26px 30px;
}

.website-template-preview-lower h4 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 8px;
}

.website-template-preview-lower p {
  color: #b8c6d8;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.website-template-preview-lower > span {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 8px;
  min-height: 92px;
}

.website-template-browser.is-generic {
  min-height: 490px;
}

.website-template-browser[data-template-key="launch_page"],
.website-template-browser[data-template-key="flash_sale"],
.website-template-browser[data-template-key="featured_deal"],
.website-template-browser[data-template-key="branded_checkout"],
.website-template-browser[data-template-key="download_next"] {
  background:
    radial-gradient(circle at 70% 28%, rgba(var(--template-accent-rgb, 255 106 26), 0.28), transparent 30%),
    #050b12;
}

.website-template-browser[data-template-key="launch_page"] .website-template-generic-hero,
.website-template-browser[data-template-key="flash_sale"] .website-template-generic-hero,
.website-template-browser[data-template-key="featured_deal"] .website-template-generic-hero,
.website-template-browser[data-template-key="branded_checkout"] .website-template-generic-hero,
.website-template-browser[data-template-key="download_next"] .website-template-generic-hero {
  align-items: center;
  min-height: 330px;
  padding: 56px 48px;
}

.website-template-browser[data-template-key="launch_page"] .website-template-generic-hero h3,
.website-template-browser[data-template-key="flash_sale"] .website-template-generic-hero h3,
.website-template-browser[data-template-key="featured_deal"] .website-template-generic-hero h3,
.website-template-browser[data-template-key="branded_checkout"] .website-template-generic-hero h3,
.website-template-browser[data-template-key="download_next"] .website-template-generic-hero h3 {
  font-size: 34px;
}

.website-template-browser[data-template-key="sidebar_filters"] .website-template-generic-hero,
.website-template-browser[data-template-key="sidebar_account"] .website-template-generic-hero,
.website-template-browser[data-template-key="download_manager"] .website-template-generic-hero,
.website-template-browser[data-template-key="knowledge_base"] .website-template-generic-hero {
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
  padding: 30px;
}

.website-template-browser[data-template-key="sidebar_filters"] .website-template-generic-hero::before,
.website-template-browser[data-template-key="sidebar_account"] .website-template-generic-hero::before,
.website-template-browser[data-template-key="download_manager"] .website-template-generic-hero::before,
.website-template-browser[data-template-key="knowledge_base"] .website-template-generic-hero::before {
  background:
    linear-gradient(90deg, rgba(var(--template-accent-rgb, 255 106 26), 0.3), transparent 70%),
    linear-gradient(#172233 0 0) 18px 42px / 58% 10px no-repeat,
    linear-gradient(#172233 0 0) 18px 74px / 72% 10px no-repeat,
    linear-gradient(#172233 0 0) 18px 106px / 50% 10px no-repeat,
    rgba(8, 17, 29, 0.9);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  content: "";
  min-height: 250px;
}

.website-template-browser[data-template-key="sidebar_filters"] .website-template-generic-hero > div:first-child,
.website-template-browser[data-template-key="sidebar_account"] .website-template-generic-hero > div:first-child,
.website-template-browser[data-template-key="download_manager"] .website-template-generic-hero > div:first-child,
.website-template-browser[data-template-key="knowledge_base"] .website-template-generic-hero > div:first-child {
  grid-column: 2;
  grid-row: 1;
}

.website-template-browser[data-template-key="sidebar_filters"] .website-template-generic-visual,
.website-template-browser[data-template-key="sidebar_account"] .website-template-generic-visual,
.website-template-browser[data-template-key="download_manager"] .website-template-generic-visual,
.website-template-browser[data-template-key="knowledge_base"] .website-template-generic-visual {
  grid-column: 2;
}

.website-template-browser[data-template-key="minimal_brand"] .website-template-generic-hero,
.website-template-browser[data-template-key="compact_list"] .website-template-generic-hero,
.website-template-browser[data-template-key="minimal_about"] .website-template-generic-hero,
.website-template-browser[data-template-key="drawer_cart"] .website-template-generic-hero,
.website-template-browser[data-template-key="focused_checkout"] .website-template-generic-hero,
.website-template-browser[data-template-key="order_confirmation"] .website-template-generic-hero {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  padding: 34px;
}

.website-template-browser[data-template-key="minimal_brand"] .website-template-generic-visual,
.website-template-browser[data-template-key="compact_list"] .website-template-generic-visual,
.website-template-browser[data-template-key="minimal_about"] .website-template-generic-visual,
.website-template-browser[data-template-key="drawer_cart"] .website-template-generic-visual,
.website-template-browser[data-template-key="focused_checkout"] .website-template-generic-visual,
.website-template-browser[data-template-key="order_confirmation"] .website-template-generic-visual {
  max-width: 340px;
}

.website-template-browser[data-template-key="comparison"] .website-template-section-strip,
.website-template-browser[data-template-key="feature_stack"] .website-template-section-strip,
.website-template-browser[data-template-key="deals_grid"] .website-template-section-strip,
.website-template-browser[data-template-key="review_wall"] .website-template-section-strip,
.website-template-browser[data-template-key="product_reviews"] .website-template-section-strip,
.website-template-browser[data-template-key="download_grid"] .website-template-section-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-template-generic-hero {
  background: linear-gradient(135deg, rgba(var(--template-accent-rgb, 255 106 26), 0.16), transparent 44%), var(--template-page-image, none) center / cover no-repeat;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr);
  padding: 42px;
}

.website-template-generic-hero > div:first-child {
  display: grid;
  gap: 13px;
}

.website-template-generic-hero p {
  color: #ff8b48;
  font-size: 12px;
  font-weight: 950;
  margin: 0;
  text-transform: uppercase;
}

.website-template-generic-hero h3 {
  color: #fff;
  font-size: 34px;
  margin: 0;
}

.website-template-generic-hero span {
  color: #c1cedf;
  font-size: 15px;
  line-height: 1.55;
}

.website-template-section-strip {
  border-bottom: 1px solid rgba(100, 116, 139, 0.24);
  border-top: 1px solid rgba(100, 116, 139, 0.24);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 30px;
}

.website-template-section-strip span {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 999px;
  color: #c7d4e6;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
}

.website-template-section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.website-template-section-heading h3 {
  color: #f8fbff;
  font-size: 16px;
  margin: 0;
}

.website-template-options-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.is-home-template-panel {
  gap: 16px;
}

.website-home-template-card header > span {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 6px;
  color: #6ee787;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 7px;
}

.website-home-template-gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-home-template-card {
  background: rgba(7, 16, 28, 0.9);
  border: 1px solid rgba(100, 116, 139, 0.32);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto auto;
  min-width: 0;
  overflow: hidden;
}

.website-home-template-card:hover,
.website-home-template-card:focus-visible {
  border-color: rgba(255, 106, 26, 0.72);
  outline: none;
}

.website-home-template-card.is-active {
  border-color: #ff6a1a;
  box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.36);
}

.website-home-template-card header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 56px;
  padding: 14px 16px;
}

.website-home-template-card h3 {
  color: #ff7a22;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.website-home-template-card p {
  color: #b8c6d8;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.website-home-template-frame {
  background: #030812;
  border-block: 1px solid rgba(100, 116, 139, 0.26);
  height: 420px;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}

.website-home-template-scale {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%) scale(0.22);
  transform-origin: top center;
  width: 1440px;
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale {
  transform: translateX(-50%) scale(0.36);
  width: 820px;
}

.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale {
  transform: translateX(-50%) scale(0.72);
  width: 390px;
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-frame,
.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-frame {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.035)),
    #030812;
}

.website-home-template-scale .storefront-public-site {
  max-width: none;
  min-height: 2200px;
  width: 1440px;
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale .storefront-public-site {
  width: 820px;
}

.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale .storefront-public-site {
  width: 390px;
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale .storefront-site-nav,
.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale .storefront-site-nav {
  grid-template-columns: minmax(0, 1fr) auto;
}

.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale .storefront-site-nav {
  gap: 10px;
  min-height: 56px;
  padding-inline: 14px;
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale .storefront-site-links,
.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale .storefront-site-nav > nav,
.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale .storefront-site-links,
.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale .storefront-site-nav > nav {
  display: none;
}

.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale :is(.v1-cinematic-hero, .v1-modern-split-hero, .v1-catalog-search-hero, .v1-home-launch-hero, .v1-product-banner, .v1-product-hero-split, .v1-product-marketplace, .v1-generic-hero, .v1-catalog-layout, .v1-editorial-feature, .v1-about-story, .v1-review-directory, .v1-about-profile-hero, .v1-contact-support-hero, .v1-docs-layout, .v1-portal-layout, .v1-checkout-layout, .v1-cart-drawer-preview) {
  grid-template-columns: minmax(0, 1fr);
}

.website-template-designer[data-website-template-device-state="mobile"] .website-home-template-scale :is(.v1-home-product-row, .v1-home-catalog-grid, .v1-review-grid, .v1-dashboard-grid, .v1-support-grid, .v1-deals-board, .v1-market-grid, .v1-editorial-grid, .v1-compact-product-grid, .v1-tight-metrics, .v1-action-card-grid, .catalog-product-grid, .store-grid, .store-grid.compact) {
  grid-template-columns: minmax(0, 1fr);
}

.website-template-designer[data-website-template-device-state="tablet"] .website-home-template-scale :is(.v1-home-product-row, .v1-home-catalog-grid, .v1-review-grid, .v1-dashboard-grid, .v1-support-grid, .v1-deals-board, .v1-market-grid, .v1-editorial-grid, .v1-compact-product-grid, .catalog-product-grid, .store-grid, .store-grid.compact) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-home-template-scale .storefront-site-nav {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1fr) minmax(180px, auto);
  min-height: 64px;
  overflow: hidden;
  padding-block: 12px;
  position: relative;
}

.website-home-template-scale .storefront-site-brand {
  align-items: center;
  display: flex;
  min-height: 42px;
  overflow: hidden;
}

.website-home-template-scale .storefront-site-brand strong {
  font-size: 18px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-home-template-scale .storefront-site-logo,
.website-home-template-scale .store-brand-mark,
.website-home-template-scale .storefront-site-brand > img {
  background: transparent;
  border: 0;
  border-radius: 8px;
  flex: 0 0 auto;
  height: 42px;
  max-height: 42px;
  max-width: 42px;
  object-fit: contain;
  width: 42px;
}

.website-home-template-scale .storefront-site-links,
.website-home-template-scale .storefront-site-nav > nav {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.website-home-template-scale img {
  max-width: 100%;
}

.website-home-template-scale .storefront-site-actions {
  pointer-events: none;
}

.website-home-template-card footer {
  align-items: center;
  border-top: 1px solid rgba(100, 116, 139, 0.26);
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  min-height: 48px;
  padding: 12px 16px;
}

.website-home-template-card footer strong {
  align-items: center;
  color: #dbeafe;
  display: flex;
  flex: 1;
  gap: 8px;
  justify-content: flex-start;
  min-height: 24px;
}

.website-home-template-card.is-active footer strong {
  color: #ff7a22;
}

.website-home-template-note {
  color: #94a3b8;
  font-size: 12px;
  margin: 0;
  text-align: center;
}

.website-template-content-editor {
  background:
    linear-gradient(180deg, rgba(255, 106, 26, 0.07), transparent),
    rgba(8, 18, 31, 0.95);
  border: 1px solid rgba(255, 106, 26, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.website-template-content-editor:not([hidden]) {
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.62);
  inset: clamp(12px, 3vw, 34px);
  max-height: calc(100vh - clamp(24px, 6vw, 68px));
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  z-index: 120;
}

.website-template-content-editor[hidden] {
  display: none;
}

.website-template-content-editor-head,
.website-template-content-actions {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.website-template-content-editor h3 {
  color: #f8fbff;
  font-size: 18px;
  margin: 0 0 6px;
}

.website-template-content-editor p,
.website-template-content-actions span {
  color: #a8b7c9;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.website-template-editor-product-workspace {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(640px, 1fr) minmax(320px, 420px);
  min-height: min(720px, calc(100vh - 190px));
  min-width: 0;
  overflow: hidden;
}

.website-template-editor-preview {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  container-type: inline-size;
  height: min(720px, calc(100vh - 190px));
  min-height: 560px;
  min-width: 0;
  overflow: hidden;
}

.website-template-editor-preview .website-home-template-frame {
  border: 0;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 100%;
}

.website-template-editor-preview .website-home-template-scale {
  height: 1900px;
  left: 50%;
  pointer-events: none;
  position: relative;
  top: 0;
  transform: translateX(-50%) scale(0.74);
  transform-origin: top center;
  width: 1440px;
}

.website-template-editor-preview .website-home-template-scale .storefront-public-site {
  width: 1440px;
}

@container (min-width: 1120px) {
  .website-template-editor-preview .website-home-template-scale {
    transform: translateX(-50%) scale(0.8);
  }
}

@container (max-width: 860px) {
  .website-template-editor-preview .website-home-template-scale {
    transform: translateX(-50%) scale(0.58);
  }
}

@container (max-width: 700px) {
  .website-template-editor-preview .website-home-template-scale {
    transform: translateX(-50%) scale(0.48);
  }
}

.website-template-editor-status,
.website-template-asset-alert {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(8, 13, 23, 0.9);
  border: 1px solid rgba(255, 106, 26, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
}

.website-template-editor-status strong,
.website-template-asset-alert strong {
  color: #fff;
}

.website-template-editor-status p,
.website-template-asset-alert span {
  color: #a8b7c9;
  line-height: 1.45;
}

.website-template-editor-status ul,
.website-template-asset-alert ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.website-template-editor-status li,
.website-template-asset-alert li {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 8px;
  color: #dbeafe;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.website-template-editor-status li > span,
.website-template-asset-alert li > span {
  color: #ffb86b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.website-template-editor-status li.is-ready > span,
.website-template-asset-alert.is-ready strong {
  color: #6ee787;
}

.website-template-editor-status small {
  color: #94a3b8;
  line-height: 1.35;
}

.website-template-asset-alert {
  border-color: rgba(255, 184, 107, 0.4);
  margin: 0 14px 14px;
  max-height: 230px;
  overflow: auto;
}

.website-template-asset-alert.is-ready {
  border-color: rgba(110, 231, 135, 0.32);
}

.website-template-asset-alert.is-cannot-publish,
.website-template-editor-readiness.is-cannot-publish {
  border-color: rgba(255, 104, 104, 0.45);
}

.website-template-asset-alert.is-ready-optional,
.website-template-editor-readiness.is-ready-optional {
  border-color: rgba(255, 184, 107, 0.4);
}

.website-template-readiness-state,
.website-template-editor-readiness {
  display: grid;
  gap: 6px;
}

.website-template-readiness-state span,
.website-template-editor-readiness span,
.website-template-asset-alert small {
  color: #9fb0c6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.website-template-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.website-template-section-nav button {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 999px;
  color: #cbd5e1;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 7px 9px;
}

.website-template-section-nav button.is-active {
  background: rgba(255, 106, 26, 0.18);
  border-color: rgba(255, 106, 26, 0.5);
  color: #ffb381;
}

.website-template-copy-warnings {
  background: rgba(255, 184, 107, 0.08);
  border: 1px solid rgba(255, 184, 107, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.website-template-copy-warnings p {
  margin: 0;
}

.website-template-slot-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 720px);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.website-template-slot-field {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 8px;
  display: none;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.website-template-slot-field.is-selected-section {
  border-color: rgba(255, 106, 26, 0.55);
  display: grid;
  box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.14);
}

.website-template-slot-field.is-missing {
  border-color: rgba(255, 184, 107, 0.45);
}

.website-template-slot-field > span,
.website-template-slot-field > div {
  align-items: start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.website-template-slot-field strong {
  color: #f8fbff;
}

.website-template-slot-field em,
.website-template-slot-field small,
.website-template-slot-field code {
  color: #9fb0c6;
  font-size: 11px;
  font-style: normal;
}

.website-template-slot-field code {
  background: rgba(2, 6, 12, 0.54);
  border-radius: 6px;
  padding: 7px;
  white-space: normal;
}

.website-template-slot-field input,
.website-template-slot-field textarea {
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 7px;
  color: #f8fbff;
  font: inherit;
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

@media (max-width: 1180px) {
  .website-template-editor-product-workspace {
    grid-template-columns: 1fr;
  }

  .website-template-editor-status {
    max-height: none;
  }
}

.website-template-slot-field.is-locked {
  opacity: 0.86;
}

.website-template-content-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.website-template-content-grid label {
  color: #dbeafe;
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 7px;
}

.website-template-content-grid input,
.website-template-content-grid textarea {
  background: rgba(2, 6, 12, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 7px;
  color: #f8fbff;
  font: inherit;
  min-height: 40px;
  padding: 9px 11px;
  resize: vertical;
}

.website-template-content-grid input:focus,
.website-template-content-grid textarea:focus {
  border-color: #ff7a22;
  outline: 2px solid rgba(255, 106, 26, 0.18);
}

.website-template-upload-field {
  min-width: 0;
}

.website-template-upload-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-width: 0;
}

.website-template-wide {
  grid-column: 1 / -1;
}

.website-template-option {
  background: rgba(9, 18, 30, 0.78);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  font-family: inherit;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  text-align: left;
}

.website-template-option.is-active {
  border-color: var(--template-accent, #87e000);
  box-shadow: 0 0 0 1px rgba(var(--template-accent-rgb, 135 224 0), 0.2);
}

.website-template-option > div:last-child {
  align-items: center;
  display: grid;
  gap: 7px 8px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.website-template-radio-dot {
  border: 1px solid rgba(203, 213, 225, 0.56);
  border-radius: 999px;
  height: 16px;
  width: 16px;
}

.website-template-option.is-active .website-template-radio-dot {
  background: var(--template-accent, #87e000);
  border-color: var(--template-accent, #87e000);
  box-shadow: inset 0 0 0 4px #07111d;
}

.website-template-option strong {
  color: #f8fbff;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-template-option p {
  color: #a8b7c9;
  font-size: 13px;
  grid-column: 1 / -1;
  line-height: 1.45;
  margin: 0;
}

.website-template-thumb {
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.16), rgba(56, 189, 248, 0.08)), #07111d;
  border: 1px solid rgba(100, 116, 139, 0.26);
  border-radius: 7px;
  display: grid;
  gap: 7px;
  padding: 12px;
}

.website-template-thumb span,
.website-template-thumb i,
.website-template-thumb b,
.website-template-thumb em {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  display: block;
}

.website-template-thumb span { width: 58%; }
.website-template-thumb i { width: 80%; }
.website-template-thumb b { justify-self: end; width: 42%; }
.website-template-thumb em { width: 68%; }

.website-template-thumb.is-marketplace,
.website-template-thumb.is-launch_page,
.website-template-thumb.is-flash_sale,
.website-template-thumb.is-featured_deal,
.website-template-thumb.is-branded_checkout,
.website-template-thumb.is-download_next {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.website-template-thumb.is-marketplace span,
.website-template-thumb.is-launch_page span,
.website-template-thumb.is-flash_sale span,
.website-template-thumb.is-featured_deal span,
.website-template-thumb.is-branded_checkout span,
.website-template-thumb.is-download_next span {
  grid-column: 1 / -1;
  width: 100%;
}

.website-template-thumb.is-minimal,
.website-template-thumb.is-minimal_brand,
.website-template-thumb.is-minimal_about,
.website-template-thumb.is-drawer_cart,
.website-template-thumb.is-focused_checkout,
.website-template-thumb.is-order_confirmation {
  gap: 5px;
  padding: 14px 18px;
}

.website-template-thumb.is-minimal i,
.website-template-thumb.is-minimal_brand i,
.website-template-thumb.is-minimal_about i,
.website-template-thumb.is-drawer_cart i,
.website-template-thumb.is-focused_checkout i,
.website-template-thumb.is-order_confirmation i {
  width: 52%;
}

.website-template-thumb.is-sidebar_filters,
.website-template-thumb.is-sidebar_account,
.website-template-thumb.is-download_manager,
.website-template-thumb.is-knowledge_base {
  grid-template-columns: 34% minmax(0, 1fr);
}

.website-template-thumb.is-sidebar_filters span,
.website-template-thumb.is-sidebar_account span,
.website-template-thumb.is-download_manager span,
.website-template-thumb.is-knowledge_base span {
  grid-row: span 4;
  height: 100%;
  width: 100%;
}

.website-template-thumb.is-grid_catalog,
.website-template-thumb.is-comparison,
.website-template-thumb.is-feature_stack,
.website-template-thumb.is-deals_grid,
.website-template-thumb.is-review_wall,
.website-template-thumb.is-product_reviews,
.website-template-thumb.is-download_grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-template-thumb.is-grid_catalog span,
.website-template-thumb.is-comparison span,
.website-template-thumb.is-feature_stack span,
.website-template-thumb.is-deals_grid span,
.website-template-thumb.is-review_wall span,
.website-template-thumb.is-product_reviews span,
.website-template-thumb.is-download_grid span {
  width: 100%;
}

.website-template-mini-preview {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.14), rgba(56, 189, 248, 0.08)), #07111d;
  border: 1px solid rgba(100, 116, 139, 0.26);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.website-template-mini-preview span,
.website-template-mini-preview i,
.website-template-mini-preview b,
.website-template-mini-preview em {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  display: block;
}

.website-template-mini-preview b {
  min-height: 46px;
  width: 62%;
}

.website-template-mini-preview i {
  min-height: 84px;
}

.website-template-mini-preview span {
  min-height: 52px;
}

.website-template-mini-preview em {
  justify-self: end;
  min-height: 36px;
  width: 48%;
}

.website-builder-product-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  overflow: hidden;
}

.website-builder-product-board.is-compact {
  gap: 0;
  padding: 0;
}

.website-builder-product-head,
.website-builder-product-row {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(104px, 1.25fr) minmax(96px, 0.9fr) minmax(56px, 0.34fr) minmax(82px, 0.58fr);
  min-width: 0;
}

.website-builder-product-head {
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 7px 8px;
  text-transform: uppercase;
}

.website-builder-product-row {
  align-items: center;
  background: rgba(8, 13, 21, 0.62);
  border-top: 1px solid var(--line);
  min-height: 54px;
  padding: 6px 8px;
}

.website-builder-product-main {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.website-builder-product-main .brand-product-cell {
  min-width: 0;
}

.website-builder-product-main img,
.website-builder-product-main > span[aria-hidden="true"] {
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
}

.website-builder-product-main .brand-product-cell strong,
.website-builder-product-main .brand-product-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-product-main .status-pill {
  font-size: 9px;
  margin-top: 2px;
  padding: 3px 5px;
}

.website-builder-product-copy {
  display: grid;
  gap: 8px;
}

.website-builder-product-copy summary {
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.website-builder-product-copy label {
  gap: 4px;
}

.website-builder-product-placement {
  display: grid;
  gap: 8px;
}

.website-builder-product-placement select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.website-builder-visibility-picker {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.website-builder-visibility-picker button {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
  min-height: 24px;
  padding: 0 2px;
}

.website-builder-visibility-picker button.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--text);
}

.website-builder-product-order {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.website-builder-product-order input {
  font-size: 10px;
  max-width: 34px;
  min-height: 24px;
  padding: 0 2px;
  text-align: center;
}

.website-builder-product-row .brand-row-actions {
  align-items: stretch;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-builder-product-row .brand-row-actions .store-link {
  align-items: center;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  min-height: 24px;
}

.website-builder-product-row .brand-row-actions .store-button,
.website-builder-product-order .store-button {
  font-size: 9px;
  min-height: 24px;
  min-width: 0;
  padding: 0 4px;
}

.website-builder-product-row .brand-row-actions .copy-icon-button {
  min-width: 0;
}

.website-builder-domain-field {
  grid-column: 1 / -1;
}

.website-builder-email-grid article > div,
.website-builder-review-grid article > div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.website-builder-email-actions {
  grid-column: 1 / -1;
}

.website-builder-preview {
  position: sticky;
  top: 92px;
  width: 100%;
}

.website-builder-preview.expanded,
.website-builder-review-preview .website-builder-preview {
  position: static;
}

.website-builder-preview-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.website-builder-preview-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.website-builder-preview-targets button {
  font-size: 11px;
  min-width: 0;
  padding: 5px 7px;
}

.website-builder-preview h3 {
  margin: 0;
}

.website-builder-device {
  background: #050b12;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 760px;
  min-height: 620px;
  overflow: hidden;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] {
  margin: 0 auto;
  max-width: 340px;
  min-height: 0;
}

.website-builder-preview.expanded .website-builder-device,
.website-builder-review-preview .website-builder-device {
  max-height: 920px;
  min-height: 820px;
}

.website-builder-browser-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
}

.website-builder-browser-bar span {
  background: rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  height: 8px;
  width: 8px;
}

.website-builder-browser-bar b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  margin-left: auto;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-builder-site {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.website-builder-public-preview {
  background: #050b12;
  min-width: 0;
  width: 100%;
}

.website-builder-public-preview .storefront-public-site {
  min-height: 100%;
}

.website-builder-public-preview a,
.website-builder-public-preview button,
.website-builder-public-preview [data-template-preview-link],
.website-builder-public-preview [data-template-preview-checkout],
.website-builder-public-preview [data-template-preview-add-cart] {
  cursor: default;
  pointer-events: none;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-public-preview {
  min-width: 0;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-public-preview *,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-public-preview *::before,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-public-preview *::after {
  max-width: 100%;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .catalog-product-grid,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .retail-product-grid,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .store-grid,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .store-grid.compact {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-template-preview {
  max-height: 728px;
  min-height: 588px;
}

.website-builder-review-preview .website-builder-template-preview {
  max-height: 888px;
  min-height: 788px;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .storefront-site-nav,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .storefront-utility-strip {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .storefront-site-links,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .storefront-site-account {
  flex-wrap: wrap;
  justify-content: start;
}

.website-builder-review-preview {
  display: grid;
  min-width: 0;
}

.website-builder-site[data-builder-preview-nav="leftRail"] {
  grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);
}

.website-builder-site header {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.website-builder-site[data-builder-preview-nav="leftRail"] header {
  align-content: start;
  align-self: stretch;
  border-right: 1px solid var(--line);
  grid-row: span 2;
  grid-template-columns: minmax(0, 1fr);
  padding-right: 12px;
}

.website-builder-site-logo {
  align-items: center;
  background: color-mix(in srgb, var(--builder-brand) 16%, #111827);
  border: 1px solid color-mix(in srgb, var(--builder-brand) 42%, transparent);
  border-radius: 8px;
  color: var(--builder-brand);
  display: flex;
  font-size: 12px;
  font-weight: 950;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  width: 38px;
}

.website-builder-site-logo img {
  height: 100%;
  object-fit: contain;
  padding: 5px;
  width: 100%;
}

.website-builder-site nav {
  color: var(--muted);
  display: flex;
  font-size: 10px;
  gap: 8px;
}

.website-builder-site[data-builder-preview-nav="floatingPill"] nav {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
}

.website-builder-site[data-builder-preview-nav="categoryBar"] nav {
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 2px solid var(--builder-brand);
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 8px 10px;
}

.website-builder-site[data-builder-preview-nav="minimal"] nav span:not(:first-child):not(:nth-child(2)) {
  display: none;
}

.website-builder-site[data-builder-preview-nav="leftRail"] nav {
  display: grid;
  gap: 7px;
}

.website-builder-site-hero {
  background:
    radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--builder-brand) 42%, transparent), transparent 34%),
    linear-gradient(135deg, #101826, #182438);
  background-position: center;
  background-size: cover;
  border: 1px solid color-mix(in srgb, var(--builder-brand) 28%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 250px;
  padding: 24px;
}

.website-builder-site-hero p {
  color: var(--builder-brand);
  font-size: 11px;
  font-weight: 850;
  margin: 0;
  text-transform: uppercase;
}

.website-builder-site-hero h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  margin: 0;
}

.website-builder-site-hero span {
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.45;
}

.website-builder-site-hero button {
  background: var(--builder-brand);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 850;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
}

.website-builder-site-products {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-builder-site[data-builder-preview-template="spotlight"] .website-builder-site-hero {
  min-height: 310px;
}

.website-builder-site[data-builder-preview-template="showcase"] .website-builder-site-products,
.website-builder-site[data-builder-preview-template="catalog_store"] .website-builder-site-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.website-builder-site[data-builder-preview-template="flow"] .website-builder-site-products,
.website-builder-site[data-builder-preview-template="studio_rack"] .website-builder-site-products {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-site[data-builder-preview-template="flow"] .website-builder-site-products div,
.website-builder-site[data-builder-preview-template="studio_rack"] .website-builder-site-products div {
  align-items: center;
  grid-template-columns: 92px minmax(0, 1fr);
}

.website-builder-site[data-builder-preview-template="flow"] .website-builder-site-products div span,
.website-builder-site[data-builder-preview-template="studio_rack"] .website-builder-site-products div span {
  grid-column: 2;
}

.website-builder-site[data-builder-preview-template="editorial_magazine"] .website-builder-site-hero h2 {
  font-family: Georgia, "Times New Roman", serif;
}

.website-builder-site[data-builder-preview-template="deal_drop"] .website-builder-site-hero {
  border-top: 4px solid var(--builder-brand);
  min-height: 230px;
}

.website-builder-site[data-builder-preview-template="physical_retail"] .website-builder-site-products div {
  border-width: 2px;
}

.website-builder-site[data-builder-preview-style="clean_digital"] {
  background: linear-gradient(180deg, #07111f, #0d1724 58%, #08111f);
}

.website-builder-site[data-builder-preview-style="industrial_analog"],
.website-builder-site[data-builder-preview-style="realistic_panel"] {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #0b0b0a, #181713 58%, #090908);
}

.website-builder-site[data-builder-preview-style="industrial_analog"] .website-builder-site-products div,
.website-builder-site[data-builder-preview-style="realistic_panel"] .website-builder-site-products div {
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.website-builder-site[data-builder-preview-style="boutique_studio"] {
  background: linear-gradient(180deg, #16110f, #211915 52%, #130f0d);
}

.website-builder-site[data-builder-preview-style="underground_club"] {
  background:
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #050508, #111018 52%, #050505);
}

.website-builder-site[data-builder-preview-style="underground_club"] .website-builder-site-hero,
.website-builder-site[data-builder-preview-style="underground_club"] .website-builder-site-products div {
  border-radius: 2px;
}

.website-builder-site[data-builder-preview-style="physical_retail"],
.website-builder-site[data-builder-preview-style="minimal_light"] {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #0f172a;
}

.website-builder-site[data-builder-preview-style="physical_retail"] .website-builder-site-hero,
.website-builder-site[data-builder-preview-style="physical_retail"] .website-builder-site-products div,
.website-builder-site[data-builder-preview-style="minimal_light"] .website-builder-site-hero,
.website-builder-site[data-builder-preview-style="minimal_light"] .website-builder-site-products div {
  background-color: rgba(255, 255, 255, 0.86);
  color: #0f172a;
}

.website-builder-site[data-builder-preview-style="physical_retail"] .website-builder-site-hero span,
.website-builder-site[data-builder-preview-style="physical_retail"] .website-builder-site-products span,
.website-builder-site[data-builder-preview-style="minimal_light"] .website-builder-site-hero span,
.website-builder-site[data-builder-preview-style="minimal_light"] .website-builder-site-products span {
  color: #475569;
}

.website-builder-site[data-builder-preview-style="cinematic"] {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--builder-brand) 20%, transparent), transparent 42%),
    linear-gradient(180deg, #030712, #111827 52%, #050816);
}

.website-builder-site[data-builder-preview-style="futuristic_glass"] .website-builder-site-hero,
.website-builder-site[data-builder-preview-style="futuristic_glass"] .website-builder-site-products div {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.09);
}

.website-builder-site[data-builder-preview-style="waveform_audio"] {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #07131f, #101827 56%, #06111d);
}

.website-builder-site[data-builder-preview-style="soft_matte"] {
  background: linear-gradient(180deg, #14191f, #1f252d 52%, #11161c);
}

.website-builder-site-products div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}

.website-builder-site-products img,
.website-builder-site-products i {
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--builder-brand) 24%, #0f172a);
  border-radius: 7px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.website-builder-site-products span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-site header,
.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-site-products {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-site {
  grid-template-columns: minmax(0, 1fr);
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-site header {
  border-right: 0;
  grid-row: auto;
  padding-right: 0;
}

.website-builder-wizard .store-button,
.website-builder-wizard .store-button.compact {
  min-height: 42px;
  padding-inline: 16px;
}

.website-builder-device[data-storefront-preview-mode-state="mobile"] .website-builder-site nav {
  display: none;
}

.brand-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  min-width: 0;
  padding: 18px;
}

.brand-card h2,
.brand-card h3 {
  letter-spacing: 0;
  margin: 0;
}

.brand-status-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 12px;
}

.brand-status-item {
  align-items: center;
  background: rgba(8, 13, 21, 0.54);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 72px;
  padding: 11px;
}

.brand-status-item strong {
  color: var(--muted);
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.brand-status-ready {
  background: rgba(30, 185, 112, 0.12);
  border-color: rgba(30, 185, 112, 0.32);
  color: #61d99a;
}

.brand-status-warning {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.34);
  color: #f8c65a;
}

.brand-status-danger {
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(239, 68, 68, 0.34);
  color: #ff9b9b;
}

.brand-status-neutral {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--soft);
}

.brand-warning-row,
.brand-ready-row {
  align-items: center;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 14px;
  padding: 11px 12px;
}

.brand-warning-row {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: var(--soft);
}

.brand-ready-row {
  background: rgba(30, 185, 112, 0.08);
  border: 1px solid rgba(30, 185, 112, 0.28);
  grid-template-columns: auto minmax(0, 1fr);
}

.brand-overview {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
}

.brand-overview p {
  color: var(--muted);
  line-height: 1.62;
  margin: 9px 0 0;
}

.brand-checklist-table {
  border-left: 1px solid var(--line);
  display: grid;
  min-width: 0;
  padding-left: 16px;
}

.brand-checklist-table > div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto) minmax(126px, auto);
  min-height: 39px;
  min-width: 0;
}

.brand-checklist-table > div:last-child {
  border-bottom: 0;
}

.brand-table-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.brand-action-link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
  justify-self: start;
}

.brand-profile-summary {
  display: grid;
  gap: 22px;
  grid-template-columns: 150px minmax(0, 1fr);
  margin-top: 16px;
}

.brand-logo-block {
  align-items: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.brand-logo-frame {
  align-items: center;
  background: rgba(3, 7, 12, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  height: 124px;
  justify-content: center;
  overflow: hidden;
  width: 124px;
}

.brand-logo-frame .storefront-logo {
  border: 0;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  width: 100%;
}

.brand-logo-placeholder {
  color: var(--accent);
  font-size: 32px;
  font-weight: 950;
}

.brand-upload-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  padding: 4px;
}

.brand-detail-grid {
  display: grid;
  gap: 16px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.brand-detail-grid div {
  min-width: 0;
}

.brand-detail-grid dt,
.brand-field-copy > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.brand-detail-grid dd {
  color: var(--text);
  margin: 0;
  min-width: 0;
}

.brand-color-dot {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-block;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  width: 14px;
}

.brand-color-role-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.brand-color-role-grid article {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    rgba(8, 13, 21, 0.48);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.brand-color-role-grid strong {
  color: var(--text);
  font-size: 13px;
}

.brand-color-role-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.store-copy-value {
  align-items: center;
  background: rgba(8, 13, 21, 0.45);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  padding: 4px 4px 4px 9px;
  vertical-align: middle;
}

.store-copy-value > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-copy-value.mono > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.store-copy-value.empty > span {
  color: var(--muted);
}

.store-copy-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 0;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  position: relative;
  width: 24px;
}

.store-copy-icon::before {
  border: 1.6px solid currentColor;
  border-radius: 3px;
  content: "";
  height: 11px;
  width: 9px;
}

.store-copy-icon:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

.brand-edit-details {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.brand-edit-details > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 850;
}

.brand-profile-form {
  margin-top: 16px;
}

.brand-template-card .storefront-template-choice {
  gap: 8px;
  min-height: 80px;
  padding: 12px;
}

.brand-template-card .storefront-template-choice small {
  margin-top: 5px;
}

.brand-template-card .storefront-device-frame .storefront-template-preview {
  margin-top: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
}

.brand-template-card .storefront-public-site {
  font-size: 12px;
  gap: 8px;
}

.brand-template-card .storefront-public-hero {
  min-height: 170px;
  padding: 16px;
}

.brand-template-card .storefront-template-hero.product-company {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
}

.brand-template-card .storefront-site-nav,
.brand-template-card .storefront-content-band,
.brand-template-card .storefront-content-split {
  gap: 10px;
  padding: 10px;
}

.brand-template-card .store-grid.compact,
.brand-template-card .storefront-company-grid,
.brand-template-card .storefront-site-metrics,
.brand-template-card .storefront-catalog-actions {
  gap: 8px;
}

.brand-template-card .store-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.brand-template-card .storefront-company-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.brand-template-card .storefront-catalog-row {
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 10px;
}

.brand-template-card .storefront-catalog-row .store-actions {
  align-self: start;
  flex-wrap: wrap;
  grid-column: 2;
}

.brand-template-card .store-card {
  min-width: 0;
}

.brand-preview-caption {
  font-size: 12px;
  margin-top: 9px;
}

.brand-template-actions {
  justify-content: end;
  margin-top: 12px;
}

.brand-template-controls {
  display: grid;
  gap: 16px;
}

.brand-template-controls > div {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.brand-template-controls h3,
.storefront-design-subsection h3 {
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.storefront-design-subsection {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
}

.storefront-layout-subsection {
  margin-top: 16px;
}

.storefront-template-choice em {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  margin-top: 7px;
}

.storefront-choice-preview {
  align-self: start;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  height: 48px;
  position: relative;
  width: 64px;
}

.storefront-choice-preview::before,
.storefront-choice-preview::after {
  background: var(--accent);
  border-radius: 999px;
  content: "";
  left: 10px;
  opacity: 0.78;
  position: absolute;
  right: 10px;
}

.storefront-choice-preview::before {
  height: 5px;
  top: 11px;
}

.storefront-choice-preview::after {
  bottom: 11px;
  height: 16px;
}

.storefront-style-choice,
.storefront-nav-choice {
  grid-template-columns: 18px 48px minmax(0, 1fr);
  min-height: 78px;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch] {
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 14px;
  grid-template-rows: 1fr 8px;
  overflow: hidden;
  padding: 7px;
  position: relative;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch]::before {
  inset: 0;
  height: auto;
  left: 0;
  opacity: 1;
  right: 0;
  top: 0;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch]::after {
  bottom: 0;
  height: auto;
  left: 0;
  opacity: 0.28;
  right: 0;
  top: 0;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch] i,
.storefront-style-choice .storefront-choice-preview[data-style-swatch] em,
.storefront-style-choice .storefront-choice-preview[data-style-swatch] span {
  display: block;
  position: relative;
  z-index: 1;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch] i {
  background: color-mix(in srgb, var(--surface) 76%, rgba(255, 255, 255, 0.36));
  border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.22));
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch] em {
  background: color-mix(in srgb, var(--surface-2) 62%, rgba(255, 255, 255, 0.54));
  border-radius: 999px;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch] span {
  background: color-mix(in srgb, var(--accent) 84%, #fff);
  border-radius: 999px;
  grid-column: 1 / -1;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="clean_digital"]::before {
  background: linear-gradient(135deg, #f8fafc, #eef2f7 56%, #cbd5e1);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="clean_digital"]::after {
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.74), transparent 34%);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="industrial_analog"]::before {
  background: linear-gradient(135deg, #09090b, #27272a 58%, #111827);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="industrial_analog"]::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 5px);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="industrial_analog"] i,
.storefront-style-choice .storefront-choice-preview[data-style-swatch="industrial_analog"] em {
  background: rgba(15, 15, 14, 0.9);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.16));
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="boutique_studio"]::before {
  background: linear-gradient(135deg, #171412, #302a25 54%, #ded7ce);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="boutique_studio"] i {
  border-radius: 7px;
  box-shadow: 0 12px 24px rgba(24, 14, 6, 0.24);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="underground_club"]::before {
  background: linear-gradient(135deg, #050505, #111018 56%, #27272a);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="underground_club"]::after {
  background: repeating-linear-gradient(-12deg, rgba(255,255,255,0.32) 0 1px, transparent 1px 6px);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="underground_club"] i {
  border-radius: 2px;
  transform: rotate(-2deg);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="physical_retail"]::before {
  background: linear-gradient(135deg, #f7f2e8, #fffaf0 54%, #d6c8b8);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="physical_retail"]::after {
  background: repeating-linear-gradient(0deg, rgba(15,23,42,0.12) 0 1px, transparent 1px 7px);
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="physical_retail"] i {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.22);
  border-radius: 3px;
}

.storefront-style-choice .storefront-choice-preview[data-style-swatch="physical_retail"] em {
  border-radius: 2px;
}

.nav-mode-mini {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  height: 42px;
  padding: 7px;
  width: 58px;
}

.nav-mode-mini i,
.nav-mode-mini span,
.nav-mode-mini b {
  background: var(--accent);
  border-radius: 999px;
  display: block;
  min-height: 4px;
  opacity: 0.78;
}

.nav-mode-mini b {
  background: var(--soft);
  opacity: 0.46;
}

.nav-mode-mini[data-nav-mini="floatingPill"] {
  align-content: center;
  border-radius: 999px;
  grid-template-columns: 10px 1fr 1fr 10px;
}

.nav-mode-mini[data-nav-mini="leftRail"] {
  grid-template-columns: 10px 1fr;
}

.nav-mode-mini[data-nav-mini="leftRail"] i {
  grid-row: span 4;
}

.nav-mode-mini[data-nav-mini="minimal"] {
  grid-template-columns: 1fr 10px 10px;
}

.nav-mode-mini[data-nav-mini="categoryBar"] {
  grid-template-columns: 1fr 10px 10px;
}

.nav-mode-mini[data-nav-mini="categoryBar"] span {
  grid-column: 1 / -1;
}

.nav-mode-mini[data-nav-mini="none"] {
  align-content: end;
  grid-template-columns: 1fr 1fr;
}

.brand-template-card .storefront-choice-preview,
.brand-template-card .nav-mode-mini {
  height: 34px;
  width: 44px;
}

.storefront-public-site[data-visual-style="clean_digital"] {
  --style-bg:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, transparent), transparent 34%),
    linear-gradient(180deg, #07111f 0%, #0d1724 52%, #08111f 100%);
  --style-panel: rgba(255, 255, 255, 0.08);
  --style-section: rgba(8, 18, 31, 0.76);
  --style-card: rgba(12, 23, 38, 0.82);
  --style-line: rgba(148, 163, 184, 0.18);
  --style-text: #f8fafc;
  --style-muted: #b8c3d2;
  --style-radius: 8px;
  --style-image-radius: 8px;
  --style-button-radius: 999px;
  --style-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --style-media: rgba(2, 6, 12, 0.44);
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 14%, rgba(255, 255, 255, 0.08));
  --style-badge-radius: 999px;
  --style-card-padding: clamp(18px, 2.4vw, 26px);
  --style-nav-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  --style-image-padding: 0;
  --style-divider: 1px solid rgba(148, 163, 184, 0.18);
  --style-texture: radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.16), transparent 28%);
  --style-texture-opacity: 0.55;
}

.storefront-public-site[data-visual-style="industrial_analog"] {
  --style-bg:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #0b0b0a 0%, #181713 58%, #090908 100%);
  --style-panel: rgba(10, 10, 9, 0.88);
  --style-section: rgba(13, 13, 12, 0.92);
  --style-card: rgba(18, 18, 16, 0.94);
  --style-line: rgba(161, 161, 170, 0.24);
  --style-text: #f7f3e8;
  --style-muted: #c0b8a8;
  --style-radius: 4px;
  --style-image-radius: 3px;
  --style-button-radius: 4px;
  --style-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 46px rgba(0, 0, 0, 0.36);
  --style-media: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.26));
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 18%, rgba(0, 0, 0, 0.42));
  --style-badge-radius: 3px;
  --style-card-padding: clamp(14px, 1.7vw, 20px);
  --style-nav-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.46), 0 18px 42px rgba(0, 0, 0, 0.28);
  --style-image-padding: 4px;
  --style-divider: 1px solid rgba(161, 161, 170, 0.24);
  --style-texture: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 6px);
  --style-texture-opacity: 0.34;
}

.storefront-public-site[data-visual-style="boutique_studio"] {
  --style-bg:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #16110f 0%, #211915 52%, #130f0d 100%);
  --style-panel: rgba(31, 25, 22, 0.82);
  --style-section: rgba(29, 23, 20, 0.78);
  --style-card: rgba(36, 29, 25, 0.84);
  --style-line: rgba(245, 241, 235, 0.2);
  --style-text: #fffaf0;
  --style-muted: #d1c8ba;
  --style-radius: 10px;
  --style-image-radius: 10px;
  --style-button-radius: 999px;
  --style-shadow: 0 28px 90px rgba(17, 10, 6, 0.34);
  --style-media: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0,0,0,0.2));
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 10%, rgba(255, 255, 255, 0.08));
  --style-badge-radius: 999px;
  --style-card-padding: clamp(24px, 3.2vw, 38px);
  --style-nav-shadow: 0 28px 80px rgba(17, 10, 6, 0.3);
  --style-image-padding: 8px;
  --style-divider: 1px solid rgba(245, 241, 235, 0.2);
  --style-texture: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 38%, rgba(255,255,255,0.04));
  --style-texture-opacity: 0.48;
}

.storefront-public-site[data-visual-style="underground_club"] {
  --style-bg:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 34%, transparent), transparent 28%),
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #050508 0%, #111018 52%, #050505 100%);
  --style-panel: rgba(6, 6, 10, 0.86);
  --style-section: rgba(8, 8, 13, 0.9);
  --style-card: rgba(14, 12, 20, 0.9);
  --style-line: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 46%, rgba(255, 255, 255, 0.16));
  --style-text: #ffffff;
  --style-muted: #d5d8e4;
  --style-radius: 2px;
  --style-image-radius: 2px;
  --style-button-radius: 2px;
  --style-shadow: 8px 8px 0 rgba(255, 255, 255, 0.06), 0 22px 60px rgba(0, 0, 0, 0.42);
  --style-media: linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 22%, rgba(0,0,0,0.5)), rgba(0,0,0,0.58));
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 30%, rgba(255,255,255,0.08));
  --style-badge-radius: 2px;
  --style-card-padding: clamp(16px, 2vw, 24px);
  --style-nav-shadow: 8px 8px 0 rgba(255, 255, 255, 0.06), 0 22px 60px rgba(0, 0, 0, 0.36);
  --style-image-padding: 0;
  --style-divider: 2px solid color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 42%, rgba(255, 255, 255, 0.18));
  --style-texture: repeating-linear-gradient(-12deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 7px);
  --style-texture-opacity: 0.44;
}

.storefront-public-site[data-visual-style="physical_retail"] {
  --style-bg:
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #f7f2e8 0%, #faf7ef 55%, #ece3d2 100%);
  --style-panel: rgba(255, 252, 245, 0.94);
  --style-section: rgba(255, 252, 245, 0.92);
  --style-card: rgba(255, 255, 255, 0.94);
  --style-line: rgba(15, 23, 42, 0.15);
  --style-text: #111827;
  --style-muted: #475569;
  --style-radius: 6px;
  --style-image-radius: 3px;
  --style-button-radius: 4px;
  --style-shadow: 0 14px 0 rgba(15, 23, 42, 0.04), 0 28px 70px rgba(15, 23, 42, 0.12);
  --style-media: linear-gradient(180deg, #fff, #f3eadb);
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 16%, #fff8ed);
  --style-badge-radius: 4px;
  --style-card-padding: clamp(16px, 2.2vw, 24px);
  --style-nav-shadow: 0 12px 0 rgba(15, 23, 42, 0.04), 0 22px 56px rgba(15, 23, 42, 0.11);
  --style-image-padding: 8px;
  --style-divider: 1px dashed rgba(15, 23, 42, 0.2);
  --style-texture: repeating-linear-gradient(0deg, rgba(15,23,42,0.05) 0 1px, transparent 1px 8px);
  --style-texture-opacity: 0.26;
  color: #111827;
}

.storefront-public-site[data-visual-style="minimal_light"] {
  --style-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  --style-panel: rgba(255, 255, 255, 0.9);
  --style-section: rgba(255, 255, 255, 0.86);
  --style-card: rgba(255, 255, 255, 0.94);
  --style-line: rgba(15, 23, 42, 0.12);
  --style-text: #0f172a;
  --style-muted: #475569;
  --style-radius: 2px;
  --style-image-radius: 2px;
  --style-button-radius: 2px;
  --style-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --style-media: linear-gradient(180deg, #ffffff, #edf2f7);
  --style-badge-bg: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 14%, #ffffff);
  --style-badge-radius: 2px;
  --style-card-padding: clamp(18px, 2vw, 24px);
  --style-nav-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
  --style-image-padding: 0;
  --style-divider: 1px solid rgba(15, 23, 42, 0.12);
  --style-texture: linear-gradient(90deg, rgba(15,23,42,0.04), transparent 28%);
  --style-texture-opacity: 0.2;
  color: #0f172a;
}

.storefront-public-site[data-visual-style="cinematic"] {
  --style-bg:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 20%, transparent), transparent 42%),
    linear-gradient(180deg, #030712 0%, #111827 52%, #050816 100%);
  --style-panel: rgba(3, 7, 18, 0.88);
  --style-section: rgba(7, 12, 24, 0.88);
  --style-card: rgba(10, 17, 32, 0.9);
  --style-line: rgba(226, 232, 240, 0.16);
  --style-text: #f8fafc;
  --style-muted: #cbd5e1;
  --style-radius: 0;
  --style-image-radius: 0;
  --style-button-radius: 999px;
  --style-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --style-media: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.36));
  --style-badge-bg: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 16%, rgba(255,255,255,0.08));
  --style-badge-radius: 999px;
  --style-card-padding: clamp(22px, 3vw, 36px);
  --style-nav-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  --style-image-padding: 0;
  --style-divider: 1px solid rgba(226, 232, 240, 0.16);
  --style-texture: linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,0.06) 42% 43%, transparent 43% 100%);
  --style-texture-opacity: 0.34;
}

.storefront-public-site[data-visual-style="futuristic_glass"] {
  --style-bg:
    radial-gradient(circle at 76% 12%, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 26%, transparent), transparent 34%),
    linear-gradient(180deg, #06111a 0%, #0a1924 54%, #041019 100%);
  --style-panel: rgba(255, 255, 255, 0.09);
  --style-section: rgba(255, 255, 255, 0.07);
  --style-card: rgba(255, 255, 255, 0.08);
  --style-line: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 38%, rgba(255,255,255,0.16));
  --style-text: #f6fbff;
  --style-muted: #b8c8d8;
  --style-radius: 12px;
  --style-image-radius: 12px;
  --style-button-radius: 12px;
  --style-shadow: 0 28px 84px rgba(0, 0, 0, 0.28);
  --style-media: rgba(255, 255, 255, 0.07);
  --style-badge-bg: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 18%, rgba(255,255,255,0.08));
  --style-badge-radius: 12px;
  --style-card-padding: clamp(18px, 2.4vw, 28px);
  --style-nav-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --style-image-padding: 2px;
  --style-divider: 1px solid color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 34%, rgba(255,255,255,0.14));
  --style-texture: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16), transparent 22%);
  --style-texture-opacity: 0.44;
}

.storefront-public-site[data-visual-style="waveform_audio"] {
  --style-bg:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #07131f 0%, #101827 56%, #06111d 100%);
  --style-panel: rgba(6, 17, 29, 0.86);
  --style-section: rgba(8, 20, 34, 0.86);
  --style-card: rgba(9, 24, 40, 0.9);
  --style-line: rgba(148, 163, 184, 0.2);
  --style-text: #f8fafc;
  --style-muted: #bac7d5;
  --style-radius: 8px 8px 2px 2px;
  --style-image-radius: 8px 8px 2px 2px;
  --style-button-radius: 999px;
  --style-shadow: 0 22px 70px rgba(2, 6, 23, 0.32);
  --style-media: linear-gradient(90deg, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 14%, rgba(255,255,255,0.06)), rgba(255,255,255,0.04));
  --style-badge-bg: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 16%, rgba(255,255,255,0.08));
  --style-badge-radius: 999px;
  --style-card-padding: clamp(16px, 2.2vw, 26px);
  --style-nav-shadow: 0 22px 60px rgba(2, 6, 23, 0.26);
  --style-image-padding: 0;
  --style-divider: 1px solid rgba(148, 163, 184, 0.2);
  --style-texture: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 14px);
  --style-texture-opacity: 0.22;
}

.storefront-public-site[data-visual-style="realistic_panel"] {
  --style-bg:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #111315 0%, #1d2022 55%, #0d0f11 100%);
  --style-panel: rgba(17, 19, 21, 0.92);
  --style-section: rgba(20, 22, 24, 0.92);
  --style-card: rgba(24, 27, 30, 0.94);
  --style-line: rgba(203, 213, 225, 0.2);
  --style-text: #f4f4f5;
  --style-muted: #c4c7cc;
  --style-radius: 5px;
  --style-image-radius: 4px;
  --style-button-radius: 5px;
  --style-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.38), 0 20px 54px rgba(0,0,0,0.34);
  --style-media: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,0,0,0.3));
  --style-badge-bg: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 20%, rgba(0,0,0,0.34));
  --style-badge-radius: 4px;
  --style-card-padding: clamp(14px, 1.8vw, 22px);
  --style-nav-shadow: inset 0 -1px 0 rgba(0,0,0,0.44), 0 18px 42px rgba(0,0,0,0.3);
  --style-image-padding: 5px;
  --style-divider: 1px solid rgba(203, 213, 225, 0.2);
  --style-texture: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 5px);
  --style-texture-opacity: 0.28;
}

.storefront-public-site[data-visual-style="soft_matte"] {
  --style-bg:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 10%, transparent), transparent 30%),
    linear-gradient(180deg, #14191f 0%, #1f252d 52%, #11161c 100%);
  --style-panel: rgba(31, 37, 45, 0.86);
  --style-section: rgba(28, 34, 42, 0.86);
  --style-card: rgba(34, 41, 49, 0.9);
  --style-line: rgba(226, 232, 240, 0.14);
  --style-text: #f7f7f2;
  --style-muted: #c7cec9;
  --style-radius: 10px;
  --style-image-radius: 10px;
  --style-button-radius: 8px;
  --style-shadow: 0 22px 64px rgba(0, 0, 0, 0.22);
  --style-media: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,0,0,0.14));
  --style-badge-bg: color-mix(in srgb, var(--storefront-accent, var(--accent-2)) 12%, rgba(255,255,255,0.08));
  --style-badge-radius: 8px;
  --style-card-padding: clamp(20px, 2.6vw, 30px);
  --style-nav-shadow: 0 20px 54px rgba(0, 0, 0, 0.2);
  --style-image-padding: 6px;
  --style-divider: 1px solid rgba(226, 232, 240, 0.14);
  --style-texture: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 46%);
  --style-texture-opacity: 0.24;
}

.storefront-public-site[data-visual-style] {
  background: var(--style-bg);
  color: var(--style-text);
  isolation: isolate;
  position: relative;
}

.storefront-public-site[data-visual-style]::before {
  background: var(--style-texture);
  content: "";
  inset: 0;
  opacity: var(--style-texture-opacity, 0.3);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.storefront-public-site[data-visual-style] > * {
  position: relative;
  z-index: 1;
}

.storefront-public-site[data-visual-style] .storefront-site-nav,
.storefront-public-site[data-visual-style] .storefront-utility-strip,
.storefront-public-site[data-visual-style] .product-card,
.storefront-public-site[data-visual-style] .storefront-content-band,
.storefront-public-site[data-visual-style] .spotlight-section,
.storefront-public-site[data-visual-style] .spotlight-about-library,
.storefront-public-site[data-visual-style] .spotlight-footer,
.storefront-public-site[data-visual-style] .spotlight-hero-card,
.storefront-public-site[data-visual-style] .spotlight-video-card,
.storefront-public-site[data-visual-style] .spotlight-highlight-card,
.storefront-public-site[data-visual-style] .spotlight-product-card,
.storefront-public-site[data-visual-style] .showcase-hero,
.storefront-public-site[data-visual-style] .showcase-split,
.storefront-public-site[data-visual-style] .showcase-demo-center,
.storefront-public-site[data-visual-style] .showcase-about-card,
.storefront-public-site[data-visual-style] .showcase-library-card,
.storefront-public-site[data-visual-style] .showcase-video-tile,
.storefront-public-site[data-visual-style] .catalog-feature,
.storefront-public-site[data-visual-style] .rack-feature-module,
.storefront-public-site[data-visual-style] .editorial-product-spread,
.storefront-public-site[data-visual-style] .deal-price-card,
.storefront-public-site[data-visual-style] .retail-included article,
.storefront-public-site[data-visual-style] .catalog-deals,
.storefront-public-site[data-visual-style] .rack-detail,
.storefront-public-site[data-visual-style] .deal-contents,
.storefront-public-site[data-visual-style] .deal-checkout {
  background: var(--style-card, var(--style-panel));
  border-color: var(--style-line);
  border-radius: var(--style-radius, 8px);
  box-shadow: var(--style-shadow);
}

.storefront-public-site[data-visual-style] .storefront-content-band,
.storefront-public-site[data-visual-style] .spotlight-section,
.storefront-public-site[data-visual-style] .spotlight-about-library,
.storefront-public-site[data-visual-style] .spotlight-footer,
.storefront-public-site[data-visual-style] .spotlight-hero-card,
.storefront-public-site[data-visual-style] .spotlight-video-card,
.storefront-public-site[data-visual-style] .spotlight-highlight-card,
.storefront-public-site[data-visual-style] .spotlight-product-card,
.storefront-public-site[data-visual-style] .showcase-split,
.storefront-public-site[data-visual-style] .showcase-demo-center,
.storefront-public-site[data-visual-style] .showcase-about-card,
.storefront-public-site[data-visual-style] .showcase-library-card,
.storefront-public-site[data-visual-style] .showcase-video-tile,
.storefront-public-site[data-visual-style] .catalog-feature,
.storefront-public-site[data-visual-style] .rack-feature-module,
.storefront-public-site[data-visual-style] .editorial-product-spread,
.storefront-public-site[data-visual-style] .deal-price-card,
.storefront-public-site[data-visual-style] .retail-included article,
.storefront-public-site[data-visual-style] .catalog-deals,
.storefront-public-site[data-visual-style] .rack-detail,
.storefront-public-site[data-visual-style] .deal-contents,
.storefront-public-site[data-visual-style] .deal-checkout {
  padding: var(--style-card-padding, clamp(18px, 2.4vw, 26px));
}

.storefront-public-site[data-visual-style] .storefront-site-nav,
.storefront-public-site[data-visual-style] .storefront-utility-strip {
  background: var(--style-panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--style-nav-shadow, var(--style-shadow));
}

.storefront-public-site[data-visual-style] .store-button,
.storefront-public-site[data-visual-style] .spotlight-demo-play,
.storefront-public-site[data-visual-style] .product-demo-play,
.storefront-public-site[data-visual-style] .spotlight-play-button {
  border-radius: var(--style-button-radius, 999px);
  box-shadow: var(--style-button-shadow, none);
}

.storefront-public-site[data-visual-style] .store-pill,
.storefront-public-site[data-visual-style] .spotlight-badge,
.storefront-public-site[data-visual-style] .status-pill,
.storefront-public-site[data-visual-style] .catalog-chip-bar a {
  background: var(--style-badge-bg);
  border-color: var(--style-line);
  border-radius: var(--style-badge-radius, 999px);
}

.storefront-public-site[data-visual-style] .product-card-media,
.storefront-public-site[data-visual-style] .spotlight-hero-media,
.storefront-public-site[data-visual-style] .spotlight-product-media,
.storefront-public-site[data-visual-style] .spotlight-video-thumb,
.storefront-public-site[data-visual-style] .showcase-video-thumb,
.storefront-public-site[data-visual-style] .catalog-feature-media,
.storefront-public-site[data-visual-style] .rack-module-media,
.storefront-public-site[data-visual-style] .rack-detail-media,
.storefront-public-site[data-visual-style] .editorial-opener-media,
.storefront-public-site[data-visual-style] .retail-box-media,
.storefront-public-site[data-visual-style] .deal-media {
  background: var(--style-media);
  border-color: var(--style-line);
  border-radius: var(--style-image-radius, var(--style-radius, 8px));
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--style-line) 54%, transparent);
  padding: var(--style-image-padding, 0);
}

.storefront-public-site[data-visual-style] .spotlight-demo-list,
.storefront-public-site[data-visual-style] .product-demos-card,
.storefront-public-site[data-visual-style] .storefront-inline-video {
  background: var(--style-panel);
  border-color: var(--style-line);
  border-radius: var(--style-radius, 8px);
  box-shadow: var(--style-shadow);
}

.storefront-public-site[data-visual-style] .spotlight-demo-row,
.storefront-public-site[data-visual-style] .product-audio-row {
  background: color-mix(in srgb, var(--style-panel) 78%, transparent);
  border-color: var(--style-line);
}

.storefront-public-site[data-visual-style] .spotlight-demo-row + .spotlight-demo-row,
.storefront-public-site[data-visual-style] .product-audio-row + .product-audio-row,
.storefront-public-site[data-visual-style] .catalog-chip-bar,
.storefront-public-site[data-visual-style] .spotlight-demo-more summary {
  border-top: var(--style-divider);
}

.storefront-public-site[data-visual-style] .spotlight-waveform i,
.storefront-public-site[data-visual-style] .product-wave i {
  background: color-mix(in srgb, var(--style-muted) 34%, transparent);
}

.storefront-public-site[data-visual-style] :is(.product-card, .spotlight-product-card, .spotlight-video-card, .showcase-video-tile, .catalog-feature, .rack-feature-module) {
  overflow: hidden;
  position: relative;
}

.storefront-public-site[data-visual-style="industrial_analog"] .storefront-site-nav,
.storefront-public-site[data-visual-style="industrial_analog"] .spotlight-demo-row,
.storefront-public-site[data-visual-style="industrial_analog"] .product-card,
.storefront-public-site[data-visual-style="industrial_analog"] .spotlight-product-card,
.storefront-public-site[data-visual-style="industrial_analog"] .catalog-feature,
.storefront-public-site[data-visual-style="industrial_analog"] .rack-feature-module {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.46), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.storefront-public-site[data-visual-style="industrial_analog"] :is(.product-card, .spotlight-product-card, .spotlight-video-card, .catalog-feature, .rack-feature-module)::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 72%, transparent), rgba(255, 255, 255, 0.08));
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.storefront-public-site[data-visual-style="industrial_analog"] .store-button,
.storefront-public-site[data-visual-style="industrial_analog"] .spotlight-demo-play,
.storefront-public-site[data-visual-style="industrial_analog"] .product-demo-play {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 18px color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 24%, transparent);
  text-transform: uppercase;
}

.storefront-public-site[data-visual-style="boutique_studio"] .spotlight-section,
.storefront-public-site[data-visual-style="boutique_studio"] .showcase-split,
.storefront-public-site[data-visual-style="boutique_studio"] .product-card,
.storefront-public-site[data-visual-style="boutique_studio"] .spotlight-product-card {
  padding-block: clamp(22px, 3.4vw, 38px);
}

.storefront-public-site[data-visual-style="boutique_studio"] :is(.storefront-site-actions, .spotlight-hero-actions, .product-card-footer) {
  gap: 14px;
}

.storefront-public-site[data-visual-style="boutique_studio"] :is(.product-card-media, .spotlight-product-media, .spotlight-hero-media, .showcase-video-thumb) img {
  border-radius: calc(var(--style-image-radius, 10px) - 2px);
}

.storefront-public-site[data-visual-style="underground_club"] .store-hero h1,
.storefront-public-site[data-visual-style="underground_club"] .catalog-masthead h1,
.storefront-public-site[data-visual-style="underground_club"] .rack-hero h1,
.storefront-public-site[data-visual-style="underground_club"] .editorial-opener h1,
.storefront-public-site[data-visual-style="underground_club"] .retail-shelf-hero h1,
.storefront-public-site[data-visual-style="underground_club"] .deal-hero h1 {
  text-transform: uppercase;
}

.storefront-public-site[data-visual-style="underground_club"] .product-card,
.storefront-public-site[data-visual-style="underground_club"] .spotlight-product-card,
.storefront-public-site[data-visual-style="underground_club"] .spotlight-video-card,
.storefront-public-site[data-visual-style="underground_club"] .showcase-video-tile {
  transform: rotate(-0.35deg);
}

.storefront-public-site[data-visual-style="underground_club"] :is(.product-card, .spotlight-product-card, .spotlight-video-card, .showcase-video-tile, .deal-price-card) {
  border-top: 4px solid var(--storefront-brand-color, var(--accent));
}

.storefront-public-site[data-visual-style="physical_retail"] .store-button,
.storefront-public-site[data-visual-style="physical_retail"] .spotlight-price,
.storefront-public-site[data-visual-style="physical_retail"] .product-price,
.storefront-public-site[data-visual-style="physical_retail"] .deal-price-card {
  box-shadow: 0 5px 0 rgba(15, 23, 42, 0.1);
}

.storefront-public-site[data-visual-style="physical_retail"] .product-card,
.storefront-public-site[data-visual-style="physical_retail"] .spotlight-product-card,
.storefront-public-site[data-visual-style="physical_retail"] .catalog-feature {
  border-width: 2px;
}

.storefront-public-site[data-visual-style="physical_retail"] :is(.spotlight-price, .catalog-price, .retail-price, .deal-price) {
  background: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 16%, #fff8ed);
  border: 1px solid color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 38%, rgba(15, 23, 42, 0.16));
  border-radius: var(--style-badge-radius, 4px);
  color: var(--style-text, #111827);
  justify-self: start;
  padding: 8px 10px;
}

.storefront-public-site.storefront-v1-site {
  --v1-brand-bg-top: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 42%, black);
  --v1-brand-bg-mid: color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 24%, black);
  --v1-brand-bg-bottom: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, black);
  --v1-surface: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 18%, rgba(0, 0, 0, 0.9));
  --v1-panel: color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 10%, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 20%, rgba(0, 0, 0, 0.86)));
  --v1-line: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 34%, rgba(255, 255, 255, 0.16));
  --v1-muted: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 24%, #dbeafe);
  --style-bg:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 30%, transparent), transparent 30%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 28%, transparent), transparent 32%),
    radial-gradient(circle at 70% 88%, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 30%, transparent), transparent 34%),
    linear-gradient(180deg, var(--v1-brand-bg-top) 0%, var(--v1-brand-bg-mid) 48%, var(--v1-brand-bg-bottom) 100%);
  --style-panel: color-mix(in srgb, var(--storefront-accent, #ff6a1a) 20%, rgba(0, 0, 0, 0.84));
  --style-card: var(--v1-panel);
  --style-section: color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 14%, rgba(0, 0, 0, 0.82));
  --style-media: linear-gradient(135deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, rgba(0, 0, 0, 0.78)), color-mix(in srgb, var(--storefront-accent, #ff6a1a) 20%, rgba(0, 0, 0, 0.9)));
  --style-line: var(--v1-line);
  --style-text: var(--v1-text);
  --style-muted: var(--v1-muted);
  --style-badge-bg: color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 20%, rgba(0, 0, 0, 0.58));
  --style-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --style-nav-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  --style-texture: linear-gradient(135deg, color-mix(in srgb, var(--storefront-brand-color, #ff6a1a) 8%, transparent), transparent 42%);
  background: var(--style-bg);
}

.storefront-public-site.storefront-v1-site .storefront-site-nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    color-mix(in srgb, var(--storefront-accent, #ff6a1a) 22%, rgba(0, 0, 0, 0.84));
  border-color: var(--v1-line);
  box-shadow: var(--style-nav-shadow);
}

.storefront-public-site.storefront-v1-site :is(.v1-cinematic-hero, .v1-modern-split-hero, .v1-catalog-search-hero, .v1-cinematic-demo-card, .v1-cinematic-statement, .v1-home-section, .v1-modern-bundle, .v1-modern-proof, .v1-catalog-newsletter, .v1-home-trust-row article, .v1-home-product-card, .v1-feature-card, .v1-purchase-card, .v1-product-card, .v1-deal-strip, .v1-sticky-buy, .v1-filter-panel, .v1-tight-metrics article, .v1-action-card-grid article, .v1-compact-product-list a, .v1-profile-card, .v1-minimal-about, .v1-review-product-list article, .v1-support-mini-form, .v1-docs-layout, .v1-support-search, .v1-portal-layout, .v1-library-manager, .v1-library-manager article, .v1-checkout-layout, .v1-cart-drawer-preview, .v1-thankyou-download, .product-card) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 7%, transparent), transparent),
    var(--v1-panel);
  border-color: var(--v1-line);
}

.storefront-public-site.storefront-v1-site :is(.v1-cinematic-art, .v1-modern-hero-art, .v1-modern-bundle-art, .v1-home-card-art, .v1-launch-product-art, .v1-feature-art, .v1-product-art, .v1-compact-art, .v1-generic-art, .v1-editorial-art, .v1-deal-art, .v1-strip-art, .v1-row-art, .product-card-media, .product-card-image) {
  background:
    radial-gradient(circle at 58% 42%, rgba(var(--storefront-highlight-rgb, 255 106 26), 0.22), transparent 34%),
    var(--style-media);
  border-color: var(--v1-line);
}

.storefront-public-site.storefront-v1-site :is(input, select, textarea, .v1-gallery-row span, .v1-product-compact-gallery span, .v1-product-definition-grid div, .v1-spec-grid article, .v1-feature-list article, .v1-access-list article, .v1-included-grid article, .v1-docs-layout aside a, .v1-portal-layout aside a, .v1-checkout-layout main > article) {
  background: var(--v1-surface);
  border-color: var(--v1-line);
}

.storefront-public-site.storefront-v1-site :is(.v1-home-launch-hero, .v1-product-banner, .v1-editorial-feature, .v1-split-band, .v1-statement, .v1-final-cta, .v1-page-hero-compact, .v1-flash-sale-hero, .v1-about-profile-hero, .v1-featured-deal, .v1-featured-review, .v1-contact-support-hero) {
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--storefront-primary-rgb, var(--storefront-accent-rgb, 255 106 26)), 0.2), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(var(--storefront-secondary-rgb, 37 99 235), 0.22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--storefront-accent, #ff6a1a) 26%, rgba(0, 0, 0, 0.78)), color-mix(in srgb, var(--storefront-secondary-color, #2563eb) 18%, rgba(0, 0, 0, 0.72)));
  border-color: var(--v1-line);
}

.storefront-public-site[data-nav-mode="leftRail"] {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-areas:
    "nav main";
}

.storefront-public-site[data-nav-mode="leftRail"] > :not(.storefront-left-rail) {
  grid-column: 2;
}

.storefront-left-rail {
  align-content: start;
  align-self: stretch;
  border-bottom: 0;
  border-right: 1px solid var(--style-line, rgba(148, 163, 184, 0.16));
  display: grid;
  gap: 18px;
  grid-area: nav;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  padding: 22px;
  position: sticky;
  top: 0;
}

.storefront-left-rail .storefront-site-brand,
.storefront-left-rail .storefront-site-links,
.storefront-left-rail .storefront-site-account {
  align-items: stretch;
  flex-direction: column;
  justify-content: start;
}

.storefront-floating-pill {
  backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  margin: 18px auto 0;
  max-width: min(1040px, calc(100% - 28px));
  position: sticky;
  top: 12px;
  z-index: 4;
}

.storefront-minimal-nav .storefront-site-links a:not(:last-child) {
  display: none;
}

.storefront-category-bar {
  align-items: stretch;
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.2fr) minmax(230px, auto);
}

.storefront-category-bar .storefront-site-links {
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}

.storefront-utility-strip {
  align-items: center;
  background: rgba(2, 6, 12, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.16);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 12px;
  padding: 10px 14px;
}

.catalog-masthead,
.rack-hero,
.editorial-opener,
.retail-shelf-hero,
.deal-hero {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1fr);
  min-width: 0;
  padding: 34px;
}

.catalog-masthead h1,
.rack-hero h1,
.editorial-opener h1,
.retail-shelf-hero h1,
.deal-hero h1 {
  color: var(--style-text, #fff);
  font-size: 48px;
  line-height: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

.catalog-masthead p,
.rack-hero p,
.editorial-opener p,
.retail-shelf-hero p,
.deal-hero p,
.catalog-deals p,
.editorial-story p,
.deal-contents p {
  color: var(--style-muted, #b8c3d2);
  line-height: 1.65;
  margin: 0;
}

.catalog-feature,
.rack-feature-module,
.editorial-product-spread,
.deal-price-card,
.retail-included article,
.catalog-deals,
.rack-detail,
.deal-contents,
.deal-checkout {
  background: var(--style-panel, rgba(7, 14, 24, 0.76));
  border: 1px solid var(--style-line, rgba(148, 163, 184, 0.16));
  border-radius: var(--style-radius, 8px);
}

.catalog-feature {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(120px, 0.44fr) minmax(0, 1fr);
  padding: 14px;
}

.catalog-feature-media,
.rack-module-media,
.rack-detail-media,
.editorial-opener-media,
.retail-box-media,
.deal-media {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(2, 6, 12, 0.44);
  border: 1px solid var(--style-line, rgba(148, 163, 184, 0.16));
  border-radius: var(--style-radius, 8px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.catalog-feature-media img,
.rack-module-media img,
.rack-detail-media img,
.editorial-opener-media img,
.retail-box-media img,
.deal-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.catalog-chip-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 34px 18px;
}

.catalog-chip-bar a {
  background: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 12%, transparent);
  border: 1px solid var(--style-line, rgba(148, 163, 184, 0.16));
  border-radius: 999px;
  color: var(--style-text, #fff);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 11px;
}

.storefront-catalog-page {
  gap: 0;
}

.storefront-catalog-page > .storefront-site-nav {
  margin: 0;
  padding: 16px 24px;
}

.catalog-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 34px 24px;
}

.catalog-chip-bar.inline {
  padding: 0;
}

.storefront-catalog-section {
  display: grid;
  gap: 16px;
  padding: 0 34px 34px;
}

.storefront-section-heading {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
}

.storefront-section-heading h2 {
  color: var(--style-text, var(--text));
  margin: 0;
}

.storefront-section-heading span {
  color: var(--style-muted, var(--muted));
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

.catalog-feature-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
}

.catalog-product-grid,
.retail-product-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 340px));
  justify-content: start;
  padding: 0;
}

.catalog-deals,
.rack-detail,
.deal-contents,
.deal-checkout,
.editorial-story,
.editorial-more,
.retail-included {
  margin: 0 34px 34px;
  padding: 24px;
}

.rack-list {
  display: grid;
  gap: 10px;
  padding: 0 34px 34px;
}

.rack-module {
  align-items: center;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(3, 7, 18, 0.9));
  border: 1px solid var(--style-line, rgba(148, 163, 184, 0.22));
  border-radius: var(--style-radius, 4px);
  display: grid;
  gap: 14px;
  grid-template-columns: 48px 88px minmax(0, 1fr) minmax(160px, auto);
  padding: 12px;
}

.rack-module-index {
  color: color-mix(in srgb, var(--storefront-brand-color, var(--accent)) 78%, #fff);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
}

.rack-module h2,
.catalog-feature h2,
.editorial-product-spread h2,
.retail-included h2,
.deal-contents h2 {
  color: var(--style-text, #fff);
  margin: 0;
}

.rack-module p,
.catalog-feature p {
  color: var(--style-muted, #b8c3d2);
  margin: 0;
}

.rack-module-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.rack-detail {
  display: grid;
  gap: 20px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.editorial-opener {
  align-items: end;
  min-height: 520px;
}

.editorial-opener-media {
  aspect-ratio: 4 / 5;
}

.editorial-story {
  border-left: 3px solid var(--storefront-brand-color, var(--accent));
  max-width: 820px;
}

.editorial-product-spread {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  margin: 0 34px 34px;
  padding: 26px;
}

.editorial-product-spread aside,
.deal-price-card {
  align-content: center;
  display: grid;
  gap: 12px;
}

.retail-shelf {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.retail-shelf article {
  background: var(--style-panel, #fff);
  border: 1px solid var(--style-line, rgba(15, 23, 42, 0.15));
  border-radius: var(--style-radius, 6px);
  display: grid;
  gap: 9px;
  padding: 12px;
}

.retail-included > div {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deal-hero {
  align-items: center;
  min-height: 560px;
}

.deal-price {
  color: var(--style-text, #fff);
  display: flex;
  flex-wrap: wrap;
  font-size: 34px;
  font-weight: 950;
  gap: 8px;
}

.deal-price small,
.catalog-price small,
.rack-price small,
.editorial-price small,
.retail-price small {
  color: var(--style-muted, #b8c3d2);
  font-size: 14px;
}

.storefront-feature-list {
  color: var(--style-muted, #b8c3d2);
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.storefront-feature-list li {
  padding-left: 18px;
  position: relative;
}

.storefront-feature-list li::before {
  color: var(--storefront-brand-color, var(--accent));
  content: "+";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.brand-domain-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  margin-top: 14px;
}

.brand-side-card,
.brand-dns-card,
.brand-sender-table-wrap,
.brand-email-dns {
  background: rgba(8, 13, 21, 0.34);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 14px;
}

.brand-side-card {
  display: grid;
  gap: 12px;
}

.brand-field-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.brand-dns-card h3 {
  margin-bottom: 5px;
}

.brand-dns-table .store-copy-value,
.brand-sender-table .store-copy-value {
  width: 100%;
}

.brand-dns-footer {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
}

.storefront-advanced {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}

.storefront-advanced summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 850;
}

.brand-diagnostics-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.brand-diagnostics-list div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 8px 0;
}

.brand-sender-table input,
.brand-product-table input,
.brand-product-table select,
.brand-product-tools input,
.brand-product-tools select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  min-height: 34px;
  padding: 7px 8px;
  width: 100%;
}

.brand-locked-domain {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.brand-table-actions {
  justify-content: end;
  margin-top: 10px;
}

.brand-email-dns {
  margin-top: 14px;
}

.brand-product-tools {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) 190px;
  margin: 12px 0;
}

.brand-product-cell {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-width: 0;
}

.brand-product-cell img,
.brand-product-cell > span:first-child {
  align-items: center;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent);
  display: flex;
  font-size: 10px;
  font-weight: 950;
  height: 34px;
  justify-content: center;
  object-fit: cover;
  width: 34px;
}

.brand-product-cell strong,
.brand-product-cell small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-product-cell small {
  color: var(--muted);
  font-size: 12px;
}

.brand-hidden-description {
  margin-top: 5px;
}

.store-toggle {
  align-items: center;
  background: rgba(148, 163, 184, 0.24);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  padding: 2px;
  width: 44px;
}

.store-toggle span {
  background: var(--text);
  border-radius: 999px;
  display: block;
  height: 18px;
  transition: transform 0.16s ease;
  width: 18px;
}

.store-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
}

.store-toggle.active span {
  background: #fff;
  transform: translateX(18px);
}

.brand-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-product-table {
  min-width: 1060px;
}

.brand-product-table th,
.brand-product-table td,
.brand-sender-table th,
.brand-sender-table td,
.brand-dns-table th,
.brand-dns-table td {
  padding: 9px 10px;
  vertical-align: middle;
}

.brand-product-table td:nth-child(2) {
  min-width: 210px;
}

.brand-product-table td:nth-child(6) {
  min-width: 190px;
}

@media (max-width: 1180px) {
  .showcase-hero,
  .showcase-split,
  .showcase-demo-center,
  .showcase-about-library,
  .showcase-library-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-category-grid,
  .showcase-product-grid,
  .showcase-trust,
  .showcase-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-overview,
  .brand-domain-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-checklist-table {
    border-left: 0;
    padding-left: 0;
  }

  .brand-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .storefront-public-site[data-nav-mode="leftRail"] {
    display: block;
  }

  .storefront-public-site[data-nav-mode="leftRail"] > :not(.storefront-left-rail) {
    grid-column: auto;
  }

  .storefront-left-rail {
    border-right: 0;
    min-height: 0;
    position: relative;
  }

  .storefront-floating-pill {
    border-radius: 8px;
    margin-top: 10px;
    position: relative;
    top: 0;
  }

  .storefront-category-bar,
  .storefront-site-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-site-links,
  .storefront-site-account,
  .storefront-utility-strip {
    justify-content: start;
  }

  .storefront-utility-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-masthead,
  .rack-hero,
  .editorial-opener,
  .retail-shelf-hero,
  .deal-hero,
  .editorial-product-spread,
  .rack-detail {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .catalog-masthead h1,
  .rack-hero h1,
  .editorial-opener h1,
  .retail-shelf-hero h1,
  .deal-hero h1 {
    font-size: 34px;
  }

  .catalog-product-grid,
  .retail-product-grid,
  .rack-list {
    padding: 0 20px 24px;
  }

  .catalog-deals,
  .rack-detail,
  .deal-contents,
  .deal-checkout,
  .editorial-story,
  .editorial-more,
  .retail-included,
  .editorial-product-spread {
    margin: 0 20px 24px;
  }

  .catalog-feature,
  .rack-module,
  .retail-shelf,
  .retail-included > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .rack-module-actions {
    justify-items: stretch;
  }

  .storefront-public-site[data-storefront-template="showcase"] .storefront-site-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-public-site[data-storefront-template="showcase"] .storefront-site-links,
  .storefront-public-site[data-storefront-template="showcase"] .storefront-site-account {
    justify-content: start;
  }

  .showcase-hero h1 {
    font-size: 34px;
  }

  .showcase-quick-access > div,
  .showcase-stats,
  .showcase-category-grid,
  .showcase-product-grid,
  .showcase-usecase-grid,
  .showcase-video-grid,
  .showcase-trust,
  .showcase-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-quick-tile {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .showcase-quick-tile .showcase-price {
    grid-column: 2;
  }

  .showcase-stats div {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .showcase-stats div:last-child {
    border-bottom: 0;
  }

  .showcase-section-header,
  .showcase-product-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .showcase-about-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-about-card img,
  .showcase-about-card > .store-brand-mark {
    width: 112px;
  }

  .brand-page-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-header-actions,
  .brand-template-actions,
  .brand-table-actions {
    justify-content: stretch;
  }

  .brand-header-actions .store-button,
  .brand-template-actions .store-button,
  .brand-table-actions .store-button {
    justify-content: center;
    width: 100%;
  }

  .brand-status-strip,
  .brand-profile-summary,
  .brand-detail-grid,
  .brand-color-role-grid,
  .brand-product-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-status-item,
  .brand-warning-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .brand-warning-row .store-button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .brand-checklist-table > div {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 0;
  }

  .brand-diagnostics-list div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Developer customers domain styles ===
 * Owner: public/store/modules/developer/customers.js
 */

.customer-hub-tabs,
.customer-hub-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.customer-hub-subtabs {
  margin-top: 4px;
}

.customer-hub-controls {
  align-items: end;
  background: rgba(15, 21, 32, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.32fr) auto auto auto auto;
  margin: 0 0 20px;
  padding: 14px;
}

.customer-hub-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.customer-hub-table [role="row"] {
  display: grid;
  grid-template-columns: minmax(108px, 0.8fr) minmax(132px, 1fr) minmax(180px, 1.35fr) minmax(92px, 0.65fr) minmax(110px, 0.8fr) minmax(72px, 0.5fr);
  min-width: 0;
}

.customer-hub-table.serials [role="row"] {
  grid-template-columns: minmax(86px, 0.7fr) minmax(78px, 0.58fr) minmax(78px, 0.58fr) minmax(136px, 1.12fr) minmax(132px, 1.05fr) minmax(86px, 0.75fr) minmax(54px, 0.45fr) minmax(72px, 0.58fr) minmax(52px, 0.42fr) minmax(84px, 0.68fr) minmax(106px, 0.86fr);
  min-width: 0;
}

.customer-hub-table.purchases [role="row"] {
  grid-template-columns: minmax(112px, 0.9fr) minmax(74px, 0.55fr) minmax(104px, 0.8fr) minmax(170px, 1.3fr) minmax(150px, 1.12fr) minmax(72px, 0.5fr) minmax(82px, 0.58fr) minmax(96px, 0.72fr) minmax(104px, 0.78fr);
  min-width: 0;
}

.customer-hub-table.available [role="row"] {
  grid-template-columns: minmax(150px, 1.2fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) minmax(92px, 0.75fr) minmax(76px, 0.6fr) minmax(78px, 0.62fr) minmax(82px, 0.66fr) minmax(106px, 0.86fr);
  min-width: 0;
}

.customer-hub-table [role="columnheader"],
.customer-hub-table [role="cell"] {
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px;
}

.customer-hub-table [role="columnheader"] {
  background: rgba(202, 215, 232, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.customer-hub-table [role="row"]:last-child [role="cell"] {
  border-bottom: 0;
}

.customer-hub-table code {
  color: var(--accent);
  font-size: 12px;
}

.customer-copy-value {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  letter-spacing: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-copy-value.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.customer-copy-value:hover,
.customer-copy-value:focus-visible {
  color: #ff9b5f;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.customer-action-stack {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-hub-table [role="cell"][data-label="Actions"] {
  overflow: visible;
}

.customer-hub-table [role="cell"][data-label="Actions"] .store-button {
  min-height: 36px;
  padding-inline: 12px;
}

.customer-hub-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0 0;
}

.customer-hub-pagination span,
.customer-serial-group > header span {
  color: var(--muted);
}

.customer-hub-section {
  margin-top: 20px;
}

.customer-import-panel {
  max-height: min(86vh, 760px);
  max-width: 860px;
  overflow-y: auto;
  width: min(100%, 860px);
}

.customer-import-panel h2 {
  font-size: 26px;
}

.customer-import-summary {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 12px;
}

.customer-import-summary strong,
.customer-import-summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-import-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.customer-import-map {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-import-product-section {
  display: grid;
  gap: 10px;
}

.customer-import-product-map {
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.customer-import-product-map .developer-section-header {
  margin-bottom: 0;
}

.customer-import-product-map .auth-copy {
  margin: 0;
}

.customer-import-map-row {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 10px;
}

.customer-import-map-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-import-preview {
  display: grid;
  gap: 10px;
}

.customer-import-preview-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.customer-import-preview-table [role="row"] {
  display: grid;
  grid-auto-columns: minmax(130px, 1fr);
  grid-auto-flow: column;
  min-width: max-content;
}

.customer-import-preview-table [role="columnheader"],
.customer-import-preview-table [role="cell"] {
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px;
}

.customer-import-preview-table [role="columnheader"] {
  background: rgba(202, 215, 232, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.customer-import-preview-table [role="row"]:last-child [role="cell"] {
  border-bottom: 0;
}

.customer-import-actions {
  align-self: stretch;
  justify-content: end;
}

.customer-serial-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

.customer-serial-group > header {
  align-items: center;
  background: rgba(202, 215, 232, 0.06);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.customer-generator-form {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-generator-form .wide,
.customer-generator-form button {
  grid-column: 1 / -1;
}

.customer-generator-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.customer-generator-result {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  margin-top: 16px;
  padding: 14px;
}

/* === Developer workspace page styles ===
 * Owner: public/store/modules/developer/workspace.js
 */

.workspace-metric-grid,
.workspace-card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.workspace-metric {
  background: rgba(15, 21, 32, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.workspace-metric span,
.workspace-list span {
  color: var(--muted);
  font-size: 13px;
}

.workspace-metric strong {
  display: block;
  font-size: 28px;
  margin-top: 8px;
}

.workspace-metric p {
  color: var(--muted);
  line-height: 1.45;
  margin: 8px 0 0;
}

.workspace-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-section {
  min-width: 0;
}

.account-security-section {
  margin-bottom: 20px;
}

.workspace-security-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 16px;
}

.security-form {
  display: grid;
  gap: 12px;
}

.security-form .store-field {
  margin: 0;
}

.security-status-card {
  display: grid;
  gap: 12px;
}

.security-status-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-status-list span {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  padding: 10px;
}

.security-status-list b {
  color: var(--muted);
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.security-two-factor-grid {
  margin-bottom: 16px;
}

.security-secret-box {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px;
}

.security-secret-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-secret-box code,
.recovery-code-grid code {
  background: rgba(202, 215, 232, 0.08);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  overflow-wrap: anywhere;
  padding: 8px;
}

.recovery-code-panel {
  margin-top: 16px;
}

.recovery-code-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

@media (max-width: 780px) {
  .workspace-security-grid,
  .security-two-factor-grid,
  .recovery-code-grid {
    grid-template-columns: 1fr;
  }

  .security-status-list {
    grid-template-columns: 1fr;
  }

  .security-secret-box {
    grid-template-columns: 1fr;
  }
}

.workspace-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.workspace-table [role="row"] {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.75fr 0.75fr 0.9fr 1fr;
  min-width: 860px;
}

.workspace-table [role="columnheader"],
.workspace-table [role="cell"] {
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px;
}

.workspace-table [role="columnheader"] {
  background: rgba(202, 215, 232, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.workspace-table [role="row"]:last-child [role="cell"] {
  border-bottom: 0;
}

.workspace-list {
  display: grid;
  gap: 10px;
}

.workspace-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.payout-hero {
  margin-top: 0;
}

.payout-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.payout-summary-grid .workspace-metric strong {
  font-size: clamp(20px, 1.7vw, 28px);
}

.payout-status-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.payout-status-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.payout-status-list div {
  align-items: center;
  background: rgba(8, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  min-height: 42px;
  padding: 10px 12px;
}

.payout-status-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.payout-status-list dd {
  margin: 0;
  min-width: 0;
  text-align: right;
}

.payout-activity-table [role="row"] {
  grid-template-columns: minmax(118px, 0.72fr) minmax(130px, 0.75fr) minmax(220px, 1.4fr) minmax(150px, 0.82fr) minmax(120px, 0.7fr) minmax(160px, 0.9fr);
  min-width: 900px;
}

.payout-deduction-table [role="row"] {
  grid-template-columns: minmax(118px, 0.72fr) minmax(110px, 0.65fr) minmax(210px, 1.35fr) minmax(140px, 0.78fr) minmax(120px, 0.7fr) minmax(220px, 1.25fr);
  min-width: 920px;
}

.payout-statement-table [role="row"] {
  grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(130px, 0.8fr)) minmax(120px, 0.72fr) minmax(118px, 0.72fr) minmax(90px, 0.55fr);
  min-width: 980px;
}

.payout-hold-list article {
  grid-template-columns: minmax(120px, 0.6fr) minmax(150px, 0.8fr) minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(160px, 1fr);
}

.analytics-range-controls {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 18px;
  position: relative;
}

.analytics-custom-picker {
  position: relative;
}

.analytics-custom-picker summary {
  list-style: none;
}

.analytics-custom-picker summary::-webkit-details-marker {
  display: none;
}

.analytics-custom-range {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(13, 18, 28, 0.18);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 8px;
  min-width: 240px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 280px;
  z-index: 20;
}

.analytics-custom-range label {
  display: grid;
  gap: 6px;
}

.analytics-custom-range span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.analytics-custom-range input {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}

.analytics-chart-panel {
  overflow: hidden;
}

.analytics-chart-wide {
  margin-bottom: 16px;
}

.analytics-line-chart {
  display: block;
  height: auto;
  min-height: 190px;
  width: 100%;
}

.analytics-grid-line {
  fill: none;
  stroke: rgba(148, 163, 184, 0.18);
  stroke-width: 1;
}

.analytics-line-fill {
  fill: rgba(20, 184, 166, 0.12);
  stroke: none;
}

.analytics-line {
  fill: none;
  stroke: #14b8a6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.analytics-line-point {
  fill: #f59e0b;
  stroke: var(--surface);
  stroke-width: 2;
}

.analytics-line-chart text {
  fill: var(--muted);
  font-size: 11px;
}

.analytics-bar-list {
  display: grid;
  gap: 12px;
}

.analytics-bar-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(92px, 1fr) minmax(120px, 2fr) minmax(72px, auto);
}

.analytics-bar-row span,
.analytics-bar-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.analytics-bar-row span {
  color: var(--soft);
  font-size: 13px;
  font-weight: 750;
}

.analytics-bar-row strong {
  color: var(--text);
  font-size: 13px;
  text-align: right;
}

.analytics-bar-track {
  background: rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.analytics-bar-track i {
  background: linear-gradient(90deg, #f59e0b, #14b8a6);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.analytics-donut-wrap {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 142px minmax(0, 1fr);
}

.analytics-donut {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  justify-items: center;
  position: relative;
}

.analytics-donut::after {
  background: var(--surface);
  border-radius: 50%;
  content: "";
  height: 62%;
  position: absolute;
  width: 62%;
}

.analytics-donut span {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.analytics-legend {
  display: grid;
  gap: 9px;
}

.analytics-legend span {
  align-items: center;
  color: var(--soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
}

.analytics-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.analytics-legend strong {
  color: var(--text);
  margin-left: auto;
}

.analytics-empty {
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  min-height: 150px;
  padding: 18px;
  text-align: center;
}

/* === SoundSync orange design system overrides === */

.store-app > :not(.developer-shell) {
  margin: 0 auto;
  max-width: 1220px;
  min-width: 0;
  padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 52px) 64px;
}

.product-card,
.product-detail-panel,
.developer-launch-center,
.developer-next-action,
.developer-empty-note,
.developer-form,
.developer-form-wrap,
.developer-wizard-hero,
.developer-wizard-sidebar,
.developer-wizard-card,
.developer-setup-steps li,
.developer-choice,
.developer-wizard-info-grid article,
.developer-wizard-note,
.developer-wizard-summary article,
.developer-channel-grid article,
.developer-product-preview,
.storefront-preview-panel,
.workspace-metric,
.workspace-list article,
.licensing-workspace-header,
.licensing-card,
.licensing-framework-choice,
.licensing-credential-history,
.licensing-step-list li,
.licensing-details-list details,
.command-kpi,
.command-money-list div,
.command-usage-list div,
.command-activity-list li,
.command-product-table [role="row"],
.developer-catalog-summary div,
.developer-catalog-card,
.developer-catalog-price div,
.customer-hub-controls,
.customer-serial-group,
.customer-generator-result {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

/* Developer Onboarding V2 */

.developer-main:has([data-onboarding-page]) {
  gap: 22px;
  padding: 32px 32px 56px;
  width: min(100%, 1480px);
}

.onboarding-page,
.onboarding-main,
.onboarding-step-card,
.onboarding-step-section,
.onboarding-guide,
.onboarding-guide section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.onboarding-header {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.onboarding-header h1 {
  color: var(--text);
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.onboarding-header p:not(.store-eyebrow),
.onboarding-step-header p:not(.store-eyebrow),
.onboarding-section-heading p,
.onboarding-guide p,
.onboarding-select-card span,
.onboarding-select-card small,
.onboarding-summary-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.onboarding-header-actions,
.onboarding-transition-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.onboarding-rollout-note {
  margin: 0;
}

.onboarding-progress-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
  position: relative;
}

.onboarding-progress-current {
  display: none;
}

.onboarding-progress {
  background: var(--surface);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  overflow-x: auto;
  padding: 0;
  scroll-padding-inline: 12px;
}

.onboarding-progress-step {
  min-width: 0;
  position: relative;
}

.onboarding-progress-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  left: calc(50% + 18px);
  position: absolute;
  right: calc(-50% + 18px);
  top: 17px;
  z-index: 0;
}

.onboarding-progress-step a,
.onboarding-progress-step button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: default;
  display: grid;
  font: inherit;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  padding: 0 6px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 100%;
  z-index: 1;
}

.onboarding-progress-step a {
  cursor: pointer;
}

.onboarding-progress-step span {
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.onboarding-progress-step strong,
.onboarding-progress-step small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.onboarding-progress-step strong {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.2;
}

.onboarding-progress-step small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.onboarding-progress-step.current span,
.onboarding-progress-step.complete span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.onboarding-progress-step.complete strong,
.onboarding-progress-step.current strong {
  color: var(--text);
}

.onboarding-progress-step.attention span {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  color: var(--warning);
}

.onboarding-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, 0.95fr);
}

.onboarding-step-card,
.onboarding-guide,
.onboarding-summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.onboarding-guide {
  position: sticky;
  top: 16px;
}

.onboarding-step-header h2 {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
  margin: 0;
}

.onboarding-step-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.onboarding-section-heading h3,
.onboarding-guide h2,
.onboarding-guide h3 {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
}

.onboarding-launch-grid,
.onboarding-selling-grid {
  display: grid;
  gap: 12px;
}

.onboarding-launch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-selling-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-select-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 16px;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.onboarding-select-card:hover {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.onboarding-select-card input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.onboarding-select-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.onboarding-select-card.selected {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}

.onboarding-card-check {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.onboarding-card-check::after {
  color: var(--muted);
  content: "";
}

.onboarding-select-card.selected .onboarding-card-check {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.onboarding-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.onboarding-card-copy strong {
  color: var(--text);
  font-size: 16px;
}

.onboarding-card-copy em {
  color: var(--soft);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.onboarding-select-card ul {
  color: var(--soft);
  display: grid;
  gap: 7px;
  grid-column: 2;
  margin: 0;
  padding-left: 18px;
}

.onboarding-select-card small {
  grid-column: 2;
}

.onboarding-summary-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

.onboarding-summary-card.onboarding-completion-summary {
  background: color-mix(in srgb, var(--success) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 18%, var(--line));
}

.onboarding-summary-card .store-eyebrow {
  margin: 0;
}

.onboarding-footer-actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 16px;
}

.onboarding-save-state {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  min-height: 18px;
}

.onboarding-save-state.success {
  color: var(--success);
}

.onboarding-save-state.error {
  color: var(--danger);
}

.onboarding-guide {
  align-content: start;
}

.onboarding-guide section {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.onboarding-guide section:first-child {
  border-top: 0;
  padding-top: 0;
}

.onboarding-guide-checklist {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.onboarding-guide-checklist li {
  align-items: center;
  color: var(--soft);
  display: grid;
  gap: 9px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.onboarding-guide-checklist span {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.onboarding-guide-checklist .complete span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
}

.onboarding-guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.onboarding-guide-tags span,
.onboarding-status-chip {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
}

.onboarding-skeleton {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 22px;
}

.onboarding-skeleton span {
  animation: loadingPulse 1.4s ease-in-out infinite;
  background: rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: block;
  height: 28px;
}

.onboarding-skeleton span:nth-child(2) {
  width: 72%;
}

.onboarding-skeleton span:nth-child(3) {
  width: 48%;
}

.onboarding-resume-card .dashboard-callout {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.onboarding-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-wide {
  grid-column: 1 / -1;
}

.onboarding-color-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px minmax(0, 1fr);
}

.onboarding-color-control input[type="color"] {
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 40px;
  padding: 2px;
  width: 44px;
}

.onboarding-logo-upload {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 16px;
}

.onboarding-logo-upload p {
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 12px;
}

.onboarding-logo-preview {
  align-items: center;
  aspect-ratio: 1;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: inline-flex;
  font-size: 22px;
  font-weight: 900;
  justify-content: center;
  overflow: hidden;
  width: 92px;
}

.onboarding-logo-preview img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.onboarding-logo-fallback {
  align-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.onboarding-verification-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.onboarding-status-chip.complete {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
  color: var(--success);
}

.onboarding-status-chip.waiting {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  color: var(--warning);
}

.onboarding-status-chip.attention {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  color: var(--danger);
}

.onboarding-brand-preview {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
}

.onboarding-preview-store,
.onboarding-preview-email {
  background: color-mix(in srgb, var(--onboarding-secondary, #2563eb) 8%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.onboarding-preview-store header {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.onboarding-preview-store header img,
.onboarding-preview-store header > span {
  align-items: center;
  background: var(--onboarding-primary, #ff6a1a);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 42px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  object-fit: contain;
  width: 42px;
}

.onboarding-preview-store header .onboarding-logo-fallback,
.onboarding-mini-brand .onboarding-logo-fallback {
  flex: 0 0 auto;
}

.onboarding-preview-store h3,
.onboarding-preview-store p,
.onboarding-preview-email p {
  margin: 0;
  overflow-wrap: anywhere;
}

.onboarding-preview-store h3 {
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0;
}

.onboarding-preview-store p,
.onboarding-preview-email p,
.business-brand-requirements li {
  color: var(--muted);
  line-height: 1.45;
}

.onboarding-preview-store button {
  background: var(--onboarding-primary, #ff6a1a);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 900;
  justify-self: start;
  padding: 10px 14px;
}

.onboarding-preview-email {
  border-top: 4px solid var(--onboarding-accent, #22c55e);
}

.onboarding-preview-email small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.onboarding-completed-summaries,
.selling-summary-tiles,
.selling-page-status-grid,
.selling-surface-grid,
.selling-template-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-mini-summary,
.selling-channel-card,
.selling-summary-tiles article,
.selling-page-status-grid article,
.selling-page-group article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.onboarding-mini-summary.complete,
.selling-summary-tiles article.complete {
  border-color: color-mix(in srgb, var(--success) 22%, var(--line));
}

.onboarding-mini-summary.waiting,
.selling-summary-tiles article.waiting {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--line));
}

.selling-channel-card {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.onboarding-mini-summary a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.onboarding-mini-brand {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.onboarding-mini-brand img,
.onboarding-mini-brand span {
  align-items: center;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 34px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  object-fit: contain;
  width: 34px;
}

.selling-url {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.selling-template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.selling-template.onboarding-select-card {
  min-height: 128px;
}

.selling-page-status-grid article span,
.selling-summary-tiles article span,
.onboarding-mini-summary span,
.onboarding-mini-summary small {
  color: var(--muted);
  line-height: 1.4;
}

.selling-surface-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.selling-page-groups {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.selling-page-group {
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.selling-page-group h4 {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
  margin: 0;
}

.selling-page-group article {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

@keyframes loadingPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  html.developer-drawer-open,
  html.developer-drawer-open body {
    overflow: hidden;
  }

  .developer-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-mobile-bar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 56px;
    padding: 10px 16px;
    position: sticky;
    top: 76px;
    z-index: 12;
  }

  .developer-mobile-bar span {
    color: var(--soft);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .developer-sidebar {
    bottom: 0;
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.22);
    left: 0;
    max-width: min(340px, calc(100vw - 36px));
    min-height: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-104%);
    transition: transform 0.2s ease;
    width: min(340px, calc(100vw - 36px));
    z-index: 30;
  }

  .developer-shell.developer-menu-open .developer-sidebar {
    transform: translateX(0);
  }

  .developer-sidebar-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .developer-drawer-backdrop {
    background: rgba(2, 6, 12, 0.42);
    border: 0;
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 29;
  }

  .developer-main {
    padding-top: 18px;
  }

  .onboarding-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .onboarding-guide {
    position: static;
  }

  .onboarding-progress {
    grid-template-columns: repeat(7, minmax(118px, 1fr));
  }

  .selling-page-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .developer-main:has([data-onboarding-page]) {
    padding: 22px 16px 42px;
  }

  .onboarding-header,
  .onboarding-footer-actions,
  .onboarding-resume-card .dashboard-callout {
    grid-template-columns: 1fr;
  }

  .onboarding-header-actions,
  .onboarding-transition-actions {
    justify-content: flex-start;
  }

  .onboarding-launch-grid,
  .onboarding-selling-grid,
  .onboarding-form-grid,
  .onboarding-brand-preview,
  .onboarding-completed-summaries,
  .selling-summary-tiles,
  .selling-page-status-grid,
  .selling-page-groups,
  .selling-surface-grid,
  .selling-template-grid,
  .selling-channel-card {
    grid-template-columns: 1fr;
  }

  .onboarding-step-card,
  .onboarding-guide,
  .onboarding-summary-card {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .onboarding-header h1 {
    font-size: 26px;
  }

  .onboarding-step-header h2 {
    font-size: 21px;
  }

  .onboarding-progress {
    grid-template-columns: repeat(7, minmax(132px, 1fr));
  }

  .onboarding-progress-shell::after {
    background: linear-gradient(90deg, transparent, var(--surface));
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
  }

  .onboarding-progress-current {
    align-items: center;
    display: grid;
    gap: 3px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .onboarding-progress-current span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .onboarding-progress-current strong {
    color: var(--text);
    font-size: 16px;
  }

  .onboarding-progress-current small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    grid-column: 2;
    grid-row: 1 / span 2;
    text-transform: uppercase;
  }

  .onboarding-progress-step a,
  .onboarding-progress-step button {
    padding: 0 4px;
  }

  .onboarding-select-card {
    padding: 14px;
  }

  .onboarding-footer-actions .store-button,
  .onboarding-header-actions .store-button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .store-topbar {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    min-height: 64px;
    padding: 10px 14px;
  }

  .store-topbar-actions {
    gap: 10px;
  }

  .store-nav {
    display: none;
  }

  .theme-toggle-icon {
    display: none;
  }

  .store-brand small {
    display: none;
  }

  .developer-mobile-bar {
    top: 64px;
  }
}

@media (max-width: 1180px) {
  .developer-sidebar {
    background: var(--surface);
  }

  .developer-shell.developer-menu-open .developer-sidebar {
    transform: translateX(0) !important;
  }
}

@media (max-width: 1180px) {
  .developer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-sidebar {
    background: var(--surface);
    border-bottom: 0;
    border-right: 1px solid var(--line);
    bottom: 0;
    left: 0;
    max-width: min(340px, calc(100vw - 36px));
    min-height: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-104%);
    width: min(340px, calc(100vw - 36px));
    z-index: 30;
  }

  .developer-shell.developer-menu-open .developer-sidebar {
    transform: translateX(0);
  }

  .developer-main {
    padding-top: 18px;
  }
}

@media (max-width: 1180px) {
  .developer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-sidebar {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    bottom: 0;
    left: 0;
    max-width: min(340px, calc(100vw - 36px));
    min-height: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-104%);
    width: min(340px, calc(100vw - 36px));
    z-index: 30;
  }

  .developer-shell.developer-menu-open .developer-sidebar {
    transform: translateX(0);
  }

  .developer-main {
    padding-top: 18px;
  }
}

:root[data-theme="dark"] .store-topbar,
:root[data-theme="dark"] .developer-sidebar {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

.store-link {
  color: var(--accent);
  font-weight: 800;
}

.status-pill,
.store-pill {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
  color: var(--success);
}

.status-pill.muted,
.store-pill {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: var(--line);
  color: var(--muted);
}

.status-pill.danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}

.status-pill[data-marketplace-status="listed"],
.status-pill[data-product-status="published"],
.developer-catalog-issues span[data-product-issue="none"] {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  color: var(--success);
}

.developer-catalog-issues span:not([data-product-issue="none"]) {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  color: var(--warning);
}

input,
select,
textarea,
.developer-wizard input,
.developer-wizard select,
.developer-wizard textarea,
.developer-form input,
.developer-form select,
.developer-form textarea,
.storefront-product-controls input,
.storefront-product-controls select,
.customer-generator-form textarea {
  background: var(--input-bg);
  border-color: var(--line);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus,
.developer-wizard input:focus,
.developer-wizard select:focus,
.developer-wizard textarea:focus,
.developer-form input:focus,
.developer-form select:focus,
.developer-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.command-dashboard-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}

.money-setup-grid {
  align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.money-setup-grid > .command-panel {
  align-content: start;
  grid-template-rows: 86px minmax(0, 1fr) auto;
  min-height: 100%;
}

.money-setup-grid > .command-panel > .developer-section-header {
  align-items: flex-start;
  min-height: 86px;
}

.money-setup-grid > .command-panel > .store-button {
  align-self: end;
}

.command-kpi-grid {
  grid-template-columns: 1fr;
}

.command-kpi {
  min-height: 92px;
  padding: 16px;
}

.command-kpi::before {
  content: none;
}

.command-kpi strong {
  color: var(--text);
  font-size: 25px;
}

/* Developer dashboard command center v2 */

.developer-main:has([data-command-center]) {
  gap: 24px;
  padding: 32px 32px 56px;
  width: min(100%, 1480px);
}

.command-dashboard-header {
  align-items: center;
  gap: 24px;
}

.command-dashboard-header h1 {
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1.05;
}

.command-dashboard-header p {
  font-size: 14px;
  margin-top: 8px;
}

.dashboard-range-form {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.dashboard-range-form label {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.dashboard-range-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-range-form select,
.dashboard-goals-form input {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 36px;
  padding: 0 10px;
}

.dashboard-command-center {
  --dashboard-gap: 20px;
  --dashboard-section-gap: 24px;
  --dashboard-card-padding: 24px;
  display: grid;
  gap: var(--dashboard-section-gap);
  min-width: 0;
}

.dashboard-card,
.dashboard-kpi-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, #071826), color-mix(in srgb, var(--surface-2) 86%, #102033));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-card:hover,
.dashboard-kpi-card:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.dashboard-card {
  display: grid;
  gap: 16px;
  padding: var(--dashboard-card-padding);
}

.business-health-hero {
  align-items: center;
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
  gap: 24px;
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.45fr) auto;
  min-height: 224px;
  padding: 32px;
}

.business-health-hero.attention {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}

.business-health-hero.critical {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
}

.business-health-main {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

.business-health-main .store-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.business-health-main h2 {
  color: var(--success);
  font-size: 34px;
  line-height: 1;
  margin: 0 0 8px;
}

.business-health-hero.attention .business-health-main h2 {
  color: var(--warning);
}

.business-health-hero.critical .business-health-main h2 {
  color: var(--danger);
}

.business-health-main p,
.business-health-main small,
.dashboard-card-header p,
.dashboard-empty,
.dashboard-callout p {
  color: var(--muted);
  margin: 0;
}

.health-score-mark .command-icon {
  border-radius: 999px;
  color: var(--success);
  height: 112px;
  width: 112px;
}

.business-health-hero.attention .health-score-mark .command-icon {
  color: var(--warning);
}

.business-health-hero.critical .health-score-mark .command-icon {
  color: var(--danger);
}

.health-score-mark .command-icon svg {
  height: 56px;
  width: 56px;
}

.health-check-grid {
  display: grid;
  gap: 16px 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.health-check {
  align-items: center;
  display: grid;
  gap: 3px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.health-check span,
.developer-health-layout li span {
  align-items: center;
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 34%, transparent);
  border-radius: 999px;
  color: var(--success);
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.health-check.fail span,
.developer-health-layout li.pending span {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  color: var(--warning);
}

.health-check strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.health-check small {
  color: var(--muted);
  font-size: 12px;
  grid-column: 2;
}

.dashboard-kpi-row {
  display: grid;
  gap: var(--dashboard-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-kpi-card {
  align-content: start;
  display: grid;
  gap: 12px;
  min-height: 156px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.dashboard-kpi-label {
  align-items: center;
  display: flex;
  gap: 10px;
}

.dashboard-kpi-label .command-icon {
  height: 28px;
  width: 28px;
}

.dashboard-kpi-label span,
.dashboard-money-list dt,
.dashboard-goals-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-kpi-card strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.dashboard-kpi-meta {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.dashboard-kpi-meta small,
.dashboard-kpi-meta em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.dashboard-kpi-meta em {
  color: var(--success);
  font-weight: 850;
}

.dashboard-kpi-sparkline {
  align-self: end;
  background:
    linear-gradient(135deg, transparent 12%, currentColor 13% 15%, transparent 16% 28%, currentColor 29% 31%, transparent 32% 44%, currentColor 45% 47%, transparent 48% 60%, currentColor 61% 63%, transparent 64%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, currentColor 16%, transparent));
  border-bottom: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  color: var(--accent);
  display: block;
  height: 28px;
  margin-top: auto;
  opacity: 0.78;
  width: 100%;
}

.dashboard-card-grid {
  align-items: stretch;
  display: grid;
  gap: var(--dashboard-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-card-grid > .dashboard-card {
  align-content: start;
}

.dashboard-card-grid > .dashboard-card:nth-child(1),
.dashboard-card-grid > .dashboard-card:nth-child(2) {
  min-height: 336px;
}

.dashboard-card-grid > .dashboard-card:nth-child(3),
.dashboard-card-grid > .dashboard-card:nth-child(4) {
  min-height: 328px;
}

.dashboard-card-grid > .dashboard-card:nth-child(5),
.dashboard-card-grid > .dashboard-card:nth-child(6),
.dashboard-card-grid > .dashboard-card:nth-child(7) {
  min-height: 360px;
}

.dashboard-card-grid > .dashboard-card:nth-child(8),
.dashboard-card-grid > .dashboard-card:nth-child(9),
.dashboard-card-grid > .dashboard-card:nth-child(10) {
  min-height: 300px;
}

.dashboard-wide {
  grid-column: 1 / -1;
}

.dashboard-card-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
}

.dashboard-card-header > div {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.dashboard-card-header h2 {
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.dashboard-card-header p {
  font-size: 13px;
  margin-top: 8px;
}

.dashboard-pill {
  align-items: center;
  background: color-mix(in srgb, var(--muted) 11%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  min-height: 24px;
  padding: 4px 9px;
  white-space: nowrap;
}

.dashboard-command-center .store-button {
  min-height: 36px;
}

.dashboard-command-center .store-button.compact {
  min-height: 36px;
  padding-inline: 16px;
}

.dashboard-pill.success {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}

.dashboard-pill.warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning);
}

.dashboard-pill.danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}

.briefing-list,
.customer-snapshot-grid,
.quick-actions-grid {
  display: grid;
  gap: 16px;
}

.briefing-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.briefing-list div,
.customer-snapshot-grid div,
.dashboard-callout,
.dashboard-empty,
.briefing-top-product,
.dashboard-money-list div,
.goals-list div,
.integration-status-list a,
.recent-customer-list a {
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.briefing-list div {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 14px;
}

.briefing-list strong,
.customer-snapshot-grid strong {
  color: var(--text);
  display: block;
  font-size: 24px;
  line-height: 1.05;
}

.briefing-list small,
.customer-snapshot-grid small,
.recent-customer-list small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.dashboard-callout,
.dashboard-empty,
.briefing-top-product {
  padding: 16px;
}

.dashboard-empty.success {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
}

.dashboard-card-divider {
  background: var(--line);
  height: 1px;
  width: 100%;
}

.briefing-footer {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.briefing-top-product small,
.marketplace-trending small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 850;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.briefing-top-product strong {
  color: var(--text);
  display: block;
  font-size: 18px;
}

.briefing-top-product p {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.briefing-footer .dashboard-callout {
  align-content: start;
  display: grid;
  gap: 12px;
}

.dashboard-money-list,
.action-center-list,
.product-health-list,
.integration-status-list,
.goals-list,
.recent-customer-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.dashboard-money-list div {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 12px 16px;
}

.dashboard-money-list dd {
  color: var(--text);
  font-weight: 850;
  margin: 0;
}

.dashboard-money-list .strong dd {
  color: var(--success);
  font-size: 20px;
}

.action-center-list article,
.product-health-list article,
.dashboard-activity-feed li {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.action-center-list article:hover,
.product-health-list article:hover,
.dashboard-activity-feed li:hover,
.recent-customer-list a:hover,
.integration-status-list a:hover {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.action-center-list article {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
}

.action-center-list article.severity-high {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

.action-center-list article.severity-medium {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--line));
}

.action-center-list article.severity-low {
  border-color: color-mix(in srgb, #38bdf8 24%, var(--line));
}

.action-center-list strong,
.product-health-list strong,
.dashboard-activity-feed strong,
.recent-customer-list strong,
.integration-status-list span {
  color: var(--text);
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.action-center-list small,
.action-center-list p,
.product-health-list small,
.dashboard-activity-feed small,
.dashboard-activity-feed time {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin: 2px 0 0;
}

.product-health-list article {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.dashboard-product-thumb {
  align-items: center;
  background: color-mix(in srgb, var(--surface-3) 68%, #071826);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  overflow: hidden;
  width: 56px;
}

.dashboard-product-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-health-list progress,
.goals-list progress {
  accent-color: var(--success);
  height: 8px;
  width: 100%;
}

.product-health-list b,
.goals-list b {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.dashboard-activity-feed {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-activity-feed li {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.customer-snapshot-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-snapshot-grid div,
.recent-customer-list a {
  padding: 14px;
}

.recent-customer-list a {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.integration-status-list a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
}

.integration-status-list span {
  align-items: center;
  display: flex;
  gap: 8px;
}

.goals-list div {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.8fr) auto;
  padding: 14px;
}

.dashboard-goals-form {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.dashboard-goals-form label {
  display: grid;
  gap: 6px;
}

.developer-health-layout {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr);
}

.health-ring {
  align-items: center;
  background: conic-gradient(var(--success) calc(var(--score, 0) * 1%), color-mix(in srgb, var(--surface-3) 80%, transparent) 0);
  border-radius: 999px;
  display: grid;
  height: 176px;
  justify-items: center;
  place-content: center;
  position: relative;
  width: 176px;
}

.health-ring::after {
  background: var(--surface);
  border-radius: 999px;
  content: "";
  inset: 18px;
  position: absolute;
}

.health-ring strong,
.health-ring span {
  position: relative;
  z-index: 1;
}

.health-ring strong {
  color: var(--text);
  font-size: 36px;
}

.health-ring span {
  color: var(--muted);
  font-size: 13px;
}

.developer-health-layout ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.developer-health-layout li {
  align-items: center;
  color: var(--soft);
  display: flex;
  gap: 8px;
}

.opportunity-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.opportunity-grid article,
.quick-actions-grid a {
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.opportunity-grid article:hover,
.quick-actions-grid a:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.opportunity-grid article.green {
  border-color: color-mix(in srgb, var(--success) 24%, var(--line));
}

.opportunity-grid article.blue {
  border-color: color-mix(in srgb, #38bdf8 26%, var(--line));
}

.opportunity-grid article.amber {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
}

.opportunity-grid article.teal {
  border-color: color-mix(in srgb, #2dd4bf 28%, var(--line));
}

.opportunity-grid strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.opportunity-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.quick-actions-grid {
  gap: 20px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.quick-actions-grid a {
  align-content: center;
  color: var(--soft);
  justify-items: center;
  min-height: 112px;
  text-align: center;
}

.quick-actions-grid a:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

.quick-actions-grid span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.marketplace-trending {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 0.45fr);
  padding: 16px;
}

.marketplace-trending strong {
  color: var(--text);
  display: block;
  font-size: 16px;
}

.marketplace-trending em {
  color: var(--success);
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 6px;
}

.marketplace-trending i {
  background:
    linear-gradient(135deg, transparent 10%, var(--accent) 11% 13%, transparent 14% 25%, var(--accent) 26% 28%, transparent 29% 43%, var(--accent) 44% 46%, transparent 47% 62%, var(--accent) 63% 65%, transparent 66%),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--accent) 16%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  display: block;
  height: 48px;
  opacity: 0.9;
}

.dashboard-controls {
  align-items: end;
  display: grid;
  gap: 16px;
  justify-items: end;
}

.dashboard-ranges,
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
}

.setup-status-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-status-list li {
  align-items: center;
  color: var(--soft);
  display: flex;
  gap: 10px;
}

.setup-status-list strong,
.setup-status-list small {
  display: block;
}

.setup-status-list strong {
  color: var(--text);
  font-size: 14px;
}

.setup-status-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
}

.setup-status-list span {
  align-items: center;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: 999px;
  color: var(--warning);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.setup-status-list .complete span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}

.command-product-table {
  overflow-x: auto;
  max-width: 100%;
}

.command-product-table [role="row"] {
  min-width: 0;
  grid-template-columns: minmax(160px, 1.3fr) repeat(3, minmax(70px, 0.7fr)) minmax(80px, 0.7fr) minmax(88px, 0.7fr) minmax(105px, 0.8fr);
}

.developer-product-controls {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto;
  margin-bottom: 20px;
  min-width: 0;
}

.search-field input {
  padding-left: 38px;
}

.search-field {
  position: relative;
}

.search-field::after {
  border: 2px solid var(--muted);
  border-radius: 999px;
  bottom: 13px;
  content: "";
  height: 12px;
  left: 13px;
  position: absolute;
  width: 12px;
}

.search-field::before {
  background: var(--muted);
  bottom: 12px;
  content: "";
  height: 2px;
  left: 25px;
  position: absolute;
  transform: rotate(45deg);
  width: 7px;
  z-index: 1;
}

.developer-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  justify-content: start;
}

.developer-catalog-card {
  min-width: 0;
}

.developer-catalog-art {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface-2) 88%, var(--accent)));
}

.developer-catalog-art.placeholder span {
  color: var(--accent);
}

.developer-catalog-art.placeholder::after {
  border-color: var(--accent-line);
}

.developer-catalog-meta {
  color: var(--muted);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: 12px;
}

.developer-catalog-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-catalog-meta b {
  color: var(--soft);
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.developer-catalog-actions {
  align-items: center;
}

.developer-catalog-actions .store-link {
  margin-left: auto;
}

.customer-hub-controls {
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.6fr) auto auto auto auto;
  margin-bottom: 18px;
}

.marketing-overview div small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.marketing-two-column {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.marketing-builder,
.marketing-settings,
.marketing-suppressions,
.marketing-preview-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.marketing-builder-form,
.marketing-settings-form {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.marketing-builder-main,
.marketing-builder-form .wide,
.marketing-settings-form .wide,
.marketing-builder-form .checkout-note,
.marketing-builder-form .developer-actions,
.marketing-settings-form .checkout-note,
.marketing-settings-form .store-button,
.marketing-merge-tags {
  grid-column: 1 / -1;
}

.marketing-builder-main {
  display: grid;
  gap: 14px;
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-builder-main .wide,
.marketing-builder-main .checkout-note,
.marketing-builder-main .developer-actions,
.marketing-builder-main .marketing-merge-tags {
  grid-column: 1 / -1;
}

.marketing-builder-form textarea,
.marketing-settings-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 120px;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.marketing-merge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketing-merge-tags span,
.marketing-merge-tags button,
.marketing-editor-toolbar button {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 6px 10px;
}

.marketing-preview-panel iframe {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 420px;
  width: 100%;
}

.marketing-live-preview {
  align-self: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
  position: sticky;
  top: 12px;
}

.preview-toggle,
.marketing-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-toggle button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  min-height: 32px;
  padding: 0 10px;
}

.preview-toggle button.active,
.preview-toggle button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
}

.marketing-preview-envelope p {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 5px;
}

.marketing-email-preview-frame,
.marketing-plain-preview,
.marketing-rich-editor {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
}

.marketing-email-preview-frame,
.marketing-rich-editor {
  min-height: 260px;
  overflow: auto;
  padding: 14px;
}

.marketing-email-preview-frame[data-preview-mode="mobile"] {
  justify-self: center;
  max-width: 390px;
  width: 100%;
}

.marketing-rich-editor {
  line-height: 1.55;
}

.marketing-plain-preview {
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.preview-email-shell {
  background: #10151f;
  border: 1px solid rgba(202, 215, 232, 0.16);
  border-radius: 8px;
  color: #e5edf8;
  padding: 18px;
}

.preview-email-shell img {
  border-radius: 8px;
  display: block;
  height: auto;
  margin-bottom: 14px;
  max-width: 100%;
}

.preview-email-shell h3 {
  color: #fff;
  margin: 6px 0 12px;
}

.preview-preheader,
.preview-email-shell footer {
  color: #9aa9bc;
  font-size: 12px;
}

.preview-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 850;
  min-height: 38px;
  padding: 9px 14px;
  text-decoration: none;
}

.marketing-product-picker,
.marketing-import-mapping {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-product-picker label {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: flex;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
}

.marketing-file-drop {
  align-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--accent-line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.marketing-file-drop input {
  max-width: 180px;
}

.marketing-import-preview {
  display: grid;
  gap: 12px;
}

.marketing-contact-table [role="row"] {
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 1fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr) minmax(150px, 0.8fr);
  min-width: 820px;
}

.marketing-import-table [role="row"] {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  min-width: 760px;
}

.marketing-overview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marketing-campaign-table [role="row"] {
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.1fr) minmax(110px, 0.7fr) minmax(88px, 0.5fr) minmax(120px, 0.8fr) minmax(140px, 0.9fr) minmax(260px, 1.4fr);
  min-width: 1120px;
}

.marketing-suppression-table [role="row"] {
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 0.8fr) minmax(160px, 0.8fr);
  min-width: 640px;
}

.marketing-page-shell {
  display: grid;
  gap: 16px;
}

.marketing-page-shell-wizard {
  gap: 12px;
}

.marketing-page-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.marketing-page-header h1 {
  align-items: center;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  font-size: 28px;
  gap: 10px;
  letter-spacing: 0;
  margin: 4px 0 0;
}

.marketing-page-header h1 span {
  background: color-mix(in srgb, var(--muted) 13%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 8px;
}

.marketing-safety-strip,
.marketing-builder-card,
.marketing-live-preview,
.marketing-ready-checks {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.marketing-safety-strip {
  display: grid;
  gap: 0;
  overflow: visible;
}

.marketing-safety-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(128px, 0.8fr) repeat(7, minmax(92px, 1fr));
  padding: 16px 18px;
}

.marketing-safety-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.marketing-safety-grid small,
.marketing-safety-grid span:not(.marketing-safety-pill),
.marketing-safety-footer {
  color: var(--muted);
  font-size: 12px;
}

.marketing-safety-grid strong {
  color: var(--soft);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.marketing-safety-title .store-eyebrow {
  margin: 0;
}

.marketing-safety-pill {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  width: max-content;
}

.marketing-safety-pill.success,
.marketing-ready-checks .success {
  background: rgba(31, 185, 111, 0.13);
  border-color: rgba(31, 185, 111, 0.28);
  color: #45d993;
}

.marketing-safety-pill.warning,
.marketing-ready-checks .warning {
  background: rgba(255, 183, 59, 0.12);
  border-color: rgba(255, 183, 59, 0.28);
  color: #ffb73b;
}

.marketing-safety-pill.danger,
.marketing-ready-checks .danger {
  background: rgba(255, 90, 59, 0.12);
  border-color: rgba(255, 90, 59, 0.28);
  color: #ff724f;
}

.marketing-safety-pill.info {
  background: rgba(64, 156, 255, 0.12);
  border-color: rgba(64, 156, 255, 0.28);
  color: #72b8ff;
}

.marketing-safety-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 18px;
}

.marketing-settings-details {
  position: relative;
}

.marketing-settings-details summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  list-style: none;
  padding: 9px 12px;
  white-space: nowrap;
}

.marketing-settings-details summary::-webkit-details-marker {
  display: none;
}

.marketing-settings-details[open] {
  flex-basis: 100%;
  grid-column: 1 / -1;
  width: 100%;
}

.marketing-settings-details[open] .marketing-settings-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  padding: 14px;
}

.marketing-page-shell .marketing-builder-form {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(520px, 1fr) minmax(380px, 0.58fr);
}

.marketing-campaign-wizard {
  margin-top: 2px;
}

.marketing-campaign-wizard-wrap {
  max-width: 1180px;
}

.marketing-campaign-wizard-hero .developer-wizard-time span {
  display: block;
}

.marketing-wizard-health-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-wizard-health-strip div {
  background: rgba(15, 21, 32, 0.74);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
}

.marketing-wizard-health-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marketing-wizard-health-strip strong {
  color: var(--text);
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-builder-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 16px;
}

.marketing-campaign-builder-header h1 {
  align-items: center;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  gap: 10px;
  line-height: 1.1;
  margin: 10px 0 8px;
}

.marketing-campaign-builder-header p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.marketing-campaign-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.marketing-campaign-toolbar .active {
  border-color: var(--accent);
  color: var(--accent);
}

.marketing-campaign-wizard {
  grid-template-columns: minmax(0, 1fr);
}

.marketing-horizontal-progress {
  align-items: center;
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  overflow-x: auto;
  padding: 10px;
}

.marketing-horizontal-progress .wizard-progress-step {
  min-width: 120px;
  padding: 0;
  position: relative;
}

.marketing-horizontal-progress .wizard-progress-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  left: calc(100% - 20px);
  position: absolute;
  right: 10px;
  top: 18px;
}

.marketing-horizontal-progress .wizard-progress-step button {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 40px;
  padding: 4px 8px;
  position: relative;
  z-index: 1;
}

.marketing-horizontal-progress .wizard-progress-step span {
  align-items: center;
  background: rgba(15, 21, 32, 0.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 11px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
}

.marketing-horizontal-progress .wizard-progress-step strong {
  color: var(--soft);
  display: block;
  font-size: 13px;
}

.marketing-horizontal-progress .wizard-progress-step small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 1px;
}

.marketing-campaign-wizard .developer-wizard-sidebar,
.marketing-campaign-wizard .developer-wizard-card {
  background: rgba(15, 21, 32, 0.92);
  border-color: var(--line);
}

.marketing-campaign-wizard .developer-wizard-card {
  min-height: 640px;
}

.marketing-campaign-wizard .wizard-progress-step.current {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: var(--accent-line);
}

.marketing-horizontal-progress .wizard-progress-step.current,
.marketing-horizontal-progress .wizard-progress-step.complete {
  background: transparent;
}

.marketing-campaign-wizard .wizard-progress-step.current span,
.marketing-campaign-wizard .wizard-progress-step.complete span {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: var(--accent-line);
  color: var(--accent);
}

.marketing-wizard-step .developer-wizard-step-body {
  align-content: start;
}

.marketing-wizard-step h3 {
  color: var(--soft);
  font-size: 13px;
  letter-spacing: 0;
  margin: 4px 0 0;
}

.marketing-wizard-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-wizard-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.marketing-form-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}

.marketing-builder-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

.marketing-builder-card h2,
.marketing-ready-checks h3 {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
}

.marketing-date-grid,
.marketing-promo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-promo-grid .wide,
.marketing-settings-form .wide {
  grid-column: 1 / -1;
}

.marketing-product-filter {
  display: grid;
  gap: 10px;
}

.marketing-product-filter[hidden] {
  display: none;
}

.marketing-selected-products {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
}

.marketing-selected-products button {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  min-height: 26px;
  padding: 4px 9px;
}

.marketing-selected-products > span {
  color: var(--muted);
  font-size: 12px;
}

.marketing-selected-muted {
  color: var(--muted);
}

.marketing-product-scroll {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  max-height: 302px;
  overflow: auto;
}

.marketing-product-row {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 28px minmax(190px, 1.25fr) minmax(110px, 0.7fr) minmax(90px, 0.5fr);
  min-height: 56px;
  padding: 8px 12px;
}

.marketing-product-row:last-child {
  border-bottom: 0;
}

.marketing-product-row input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.marketing-product-row:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--soft);
}

.marketing-product-row:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.marketing-product-head {
  background: var(--surface);
  color: var(--muted);
  cursor: default;
  font-size: 11px;
  font-weight: 850;
  grid-template-columns: minmax(190px, 1.25fr) minmax(110px, 0.7fr) minmax(90px, 0.5fr);
  min-height: 36px;
  padding-left: 50px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.marketing-product-check {
  border: 1px solid var(--line);
  border-radius: 5px;
  display: block;
  height: 18px;
  width: 18px;
}

.marketing-product-row:has(input:checked) .marketing-product-check {
  background: var(--accent);
  border-color: var(--accent);
}

.marketing-product-row:has(input:checked) .marketing-product-check::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  display: block;
  height: 9px;
  margin: 2px 0 0 6px;
  transform: rotate(45deg);
  width: 5px;
}

.marketing-product-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.marketing-product-title strong {
  color: var(--soft);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-product-filter .marketing-product-title {
  padding-left: 2px;
}

.marketing-product-title img,
.marketing-product-placeholder {
  border-radius: 6px;
  flex: 0 0 auto;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.marketing-product-placeholder {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  justify-content: center;
}

.marketing-list-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.marketing-list-meta button {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.marketing-featured-product-picker {
  display: grid;
  gap: 10px;
}

.marketing-featured-product-scroll {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 254px;
  min-width: 0;
  overflow: auto;
  padding-right: 3px;
}

.marketing-featured-product-card {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 72px;
  padding: 10px;
  position: relative;
}

.marketing-featured-product-card input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.marketing-featured-product-card:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: var(--accent-line);
}

.marketing-featured-product-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.marketing-featured-product-card:has(input:checked)::after {
  background: var(--accent);
  border-radius: 999px;
  content: "";
  height: 9px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 9px;
}

.marketing-featured-product-card img,
.marketing-featured-placeholder {
  border-radius: 7px;
  height: 52px;
  object-fit: cover;
  width: 52px;
}

.marketing-featured-placeholder {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  justify-content: center;
}

.marketing-featured-product-card span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.marketing-featured-product-card strong,
.marketing-featured-product-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-featured-product-card strong {
  color: var(--soft);
  font-size: 13px;
}

.marketing-featured-product-card small {
  color: var(--muted);
  font-size: 12px;
}

.marketing-featured-product-card[hidden] {
  display: none;
}

.marketing-audience-estimate {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(130px, 0.8fr)) minmax(0, 1.4fr) auto;
  padding: 14px;
}

.marketing-audience-estimate > div {
  display: grid;
  gap: 2px;
}

.marketing-audience-estimate strong {
  color: var(--text);
  font-size: 24px;
}

.marketing-audience-estimate small,
.marketing-audience-estimate dt,
.marketing-audience-estimate dd {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.marketing-audience-estimate dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
}

.marketing-estimate-icon {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.marketing-estimate-icon.success {
  background: rgba(31, 185, 111, 0.12);
  color: #45d993;
}

.marketing-estimate-icon.danger {
  background: rgba(255, 90, 59, 0.12);
  color: #ff724f;
}

.marketing-upload-drop {
  align-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--accent-line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 13px;
}

.marketing-upload-drop input {
  max-width: 220px;
}

.marketing-upload-drop span {
  display: grid;
  gap: 3px;
}

.marketing-upload-drop small {
  color: var(--muted);
}

.marketing-email-content-card .marketing-rich-editor {
  min-height: 320px;
}

.marketing-right-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 14px;
}

.marketing-live-preview {
  align-self: start;
  display: grid;
  gap: 13px;
  padding: 18px;
  position: static;
  top: auto;
}

.marketing-email-preview-frame {
  max-height: none;
  min-height: 620px;
  padding: 16px;
}

.preview-email-shell {
  background: #0c121b;
  border-color: rgba(202, 215, 232, 0.16);
  padding: 24px;
}

.preview-email-shell img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.preview-cta {
  justify-content: center;
  min-width: 210px;
}

.marketing-ready-checks {
  display: grid;
  gap: 0;
  padding: 18px;
}

.marketing-ready-checks h3 {
  margin-bottom: 10px;
}

.marketing-ready-checks > div:not(.marketing-before-send) {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 42px;
}

.marketing-ready-checks span {
  color: var(--soft);
  font-size: 13px;
}

.marketing-ready-checks strong {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 8px;
}

.marketing-before-send {
  border: 1px solid rgba(255, 183, 59, 0.42);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 14px;
}

.marketing-before-send strong {
  color: var(--text);
}

.marketing-before-send span {
  color: var(--muted);
  line-height: 1.5;
}

.marketing-action-bar {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  bottom: 12px;
  display: flex;
  gap: 16px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 12px 14px;
  position: sticky;
  z-index: 5;
}

.marketing-action-bar > span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 8px;
}

.marketing-action-bar i {
  background: #45d993;
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.marketing-action-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .marketing-safety-grid,
  .marketing-page-shell .marketing-builder-form,
  .marketing-campaign-wizard,
  .marketing-visual-email-builder,
  .marketing-review-layout {
    grid-template-columns: 1fr;
  }

  .marketing-right-rail {
    position: static;
  }

  .marketing-email-preview-frame {
    min-height: 420px;
  }

  .marketing-audience-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-audience-estimate dl,
  .marketing-audience-estimate .store-button {
    grid-column: 1 / -1;
  }

  .marketing-campaign-wizard .developer-wizard-sidebar {
    position: static;
  }

  .marketing-wizard-health-strip {
    grid-template-columns: 1fr;
  }

  .marketing-signal-window-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .marketing-page-header,
  .marketing-safety-footer,
  .marketing-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-page-header .developer-actions,
  .marketing-action-bar > div {
    width: 100%;
  }

  .marketing-page-header .developer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .marketing-page-header .developer-actions .store-button,
  .marketing-action-bar .store-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .marketing-settings-details[open] .marketing-settings-form,
  .marketing-date-grid,
  .marketing-promo-grid,
  .marketing-audience-estimate,
  .marketing-audience-estimate dl,
  .marketing-review-layout,
  .marketing-template-library,
  .marketing-canvas-hero-tools,
  .marketing-canvas-cta,
  .marketing-template-choice-grid,
  .marketing-delivery-options,
  .marketing-exclusion-grid,
  .marketing-review-grid,
  .marketing-delivery-grid,
  .marketing-trigger-card .developer-form-grid,
  .marketing-flow {
    grid-template-columns: 1fr;
  }

  .marketing-product-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .marketing-product-row > span:nth-last-child(-n + 2),
  .marketing-product-head {
    display: none;
  }

  .marketing-featured-product-scroll {
    grid-template-columns: 1fr;
    max-height: 300px;
  }
}

.marketing-page-shell {
  gap: 14px;
  max-width: 100%;
}

.marketing-page-header {
  background: linear-gradient(180deg, rgba(8, 21, 31, 0.92), rgba(8, 24, 36, 0.72));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
}

.marketing-page-header h1 {
  font-size: 26px;
  line-height: 1.15;
}

.marketing-workspace-tabs {
  align-items: center;
  background: rgba(8, 18, 27, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding: 5px;
  scrollbar-width: thin;
}

.marketing-workspace-tabs a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  flex: 1 0 108px;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.marketing-workspace-tabs a:hover,
.marketing-workspace-tabs a.is-active {
  background: rgba(255, 111, 0, 0.13);
  border-color: rgba(255, 111, 0, 0.32);
  color: var(--text);
}

.marketing-dashboard-grid,
.marketing-audience-grid,
.marketing-automation-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
}

.marketing-automation-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
}

.marketing-dashboard-main,
.marketing-dashboard-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.marketing-overview-panel,
.marketing-quick-actions,
.marketing-campaign-list-section,
.marketing-health,
.marketing-contacts,
.marketing-suppressions,
.marketing-automation-grid > .developer-section,
.marketing-preview-panel {
  background: linear-gradient(180deg, rgba(10, 28, 40, 0.92), rgba(8, 22, 33, 0.86));
  border-color: rgba(118, 147, 172, 0.22);
}

.marketing-overview {
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marketing-overview div {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 92px;
  padding: 12px;
}

.marketing-overview dd {
  font-size: 25px;
  line-height: 1.1;
}

.marketing-dashboard-side .marketing-safety-strip {
  overflow: hidden;
}

.marketing-dashboard-side .marketing-safety-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.marketing-dashboard-side .marketing-safety-footer {
  align-items: stretch;
  flex-direction: column;
  padding: 12px 14px;
}

.marketing-action-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-action-grid .store-button {
  justify-content: center;
  min-height: 42px;
}

.marketing-page-shell .marketing-builder-form {
  gap: 14px;
  grid-template-columns: 190px minmax(0, 1.08fr) minmax(340px, 0.92fr);
}

.marketing-wizard-steps {
  background: rgba(4, 13, 21, 0.24);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  align-self: start;
  padding: 10px;
  position: sticky;
  top: 14px;
}

.marketing-wizard-steps a {
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 11px;
  font-weight: 900;
  gap: 4px;
  min-height: 46px;
  padding: 8px 10px;
  text-decoration: none;
}

.marketing-wizard-steps a:hover {
  background: rgba(255, 111, 0, 0.12);
  border-color: rgba(255, 111, 0, 0.26);
  color: var(--text);
}

.marketing-wizard-steps span {
  color: var(--soft);
  font-size: 12px;
}

.marketing-builder-card {
  box-shadow: none;
  padding: 16px;
}

.marketing-builder-card h2 {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 34px;
  padding-bottom: 10px;
}

.marketing-builder-card h3 {
  color: var(--soft);
  font-size: 13px;
  letter-spacing: 0;
  margin: 4px 0 0;
}

.marketing-inbox-preview,
.marketing-trigger-card,
.marketing-review-grid article {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.marketing-inbox-preview span,
.marketing-review-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marketing-inbox-preview strong,
.marketing-review-grid strong {
  color: var(--text);
  font-size: 13px;
}

.marketing-inbox-preview p {
  color: var(--muted);
  margin: 0;
}

.marketing-template-choice-grid,
.marketing-delivery-options,
.marketing-exclusion-grid,
.marketing-review-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-template-choice-grid label,
.marketing-template-choice-grid article,
.marketing-delivery-options label {
  background: rgba(4, 13, 21, 0.24);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 12px;
}

.marketing-template-choice-grid label:has(input:checked),
.marketing-delivery-options label:has(input:checked) {
  background: rgba(255, 111, 0, 0.12);
  border-color: rgba(255, 111, 0, 0.34);
}

.marketing-template-choice-grid .disabled {
  opacity: 0.55;
}

.marketing-template-choice-grid strong,
.marketing-delivery-options strong {
  color: var(--text);
  font-size: 13px;
}

.marketing-template-choice-grid span,
.marketing-delivery-options span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.marketing-template-library {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-template-card {
  background: rgba(4, 13, 21, 0.24);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 12px;
}

.marketing-template-card input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.marketing-template-card:has(input:checked) {
  background: rgba(255, 111, 0, 0.12);
  border-color: rgba(255, 111, 0, 0.34);
}

.marketing-template-card strong {
  color: var(--text);
  font-size: 13px;
}

.marketing-template-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.marketing-email-builder {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.marketing-email-builder-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketing-email-builder-toolbar span {
  flex: 1 1 24px;
}

.marketing-email-builder-toolbar button {
  background: rgba(15, 21, 32, 0.8);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 0 10px;
}

.marketing-email-builder-toolbar button:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.marketing-email-canvas {
  background: rgba(2, 8, 15, 0.52);
  border: 1px solid rgba(118, 147, 172, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.marketing-email-canvas-envelope {
  background: rgba(15, 21, 32, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.marketing-email-canvas-envelope span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marketing-email-canvas-envelope strong,
.marketing-email-canvas-envelope small {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-email-design-surface {
  background: #10151f;
  border: 1px solid rgba(202, 215, 232, 0.16);
  border-radius: 8px;
  color: #e5edf8;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.marketing-canvas-hero-tools,
.marketing-canvas-cta {
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(202, 215, 232, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.55fr);
  padding: 12px;
}

.marketing-canvas-hero-tools label,
.marketing-canvas-cta label {
  color: #cbd7e8;
}

.marketing-canvas-hero-tools input,
.marketing-canvas-cta input {
  background: rgba(5, 10, 18, 0.86);
}

.marketing-canvas-hero {
  align-items: center;
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, rgba(255, 111, 0, 0.18), rgba(64, 156, 255, 0.12));
  border: 1px solid rgba(202, 215, 232, 0.16);
  border-radius: 8px;
  color: #cbd7e8;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.marketing-canvas-hero img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.marketing-email-body-canvas {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(202, 215, 232, 0.18);
  color: #e5edf8;
  min-height: 220px;
}

.marketing-email-body-canvas:focus {
  border-color: rgba(255, 111, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.14);
  outline: none;
}

.marketing-email-design-surface footer {
  border-top: 1px solid rgba(202, 215, 232, 0.16);
  color: #8ea0b8;
  display: grid;
  font-size: 12px;
  gap: 4px;
  padding-top: 12px;
}

.marketing-plain-text-details {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding-top: 12px;
}

.marketing-plain-text-details summary {
  color: var(--soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.marketing-plain-text-details textarea {
  min-height: 320px;
  resize: vertical;
}

.marketing-visual-email-builder {
  align-items: stretch;
  background: rgba(4, 13, 21, 0.32);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(190px, 220px) minmax(540px, 1fr) minmax(240px, 280px);
}

.marketing-block-sidebar,
.marketing-email-inspector {
  background: rgba(15, 21, 32, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.marketing-block-sidebar {
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-block-sidebar > div,
.marketing-email-inspector > div:first-child,
.marketing-email-builder-topbar > div:first-child {
  display: grid;
  gap: 4px;
}

.marketing-block-sidebar > div:first-child {
  grid-column: 1 / -1;
}

.marketing-block-sidebar strong,
.marketing-email-inspector strong,
.marketing-email-builder-topbar strong {
  color: var(--text);
  font-size: 14px;
}

.marketing-block-sidebar button {
  align-items: center;
  background: rgba(4, 13, 21, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: grab;
  display: flex;
  font-size: 11px;
  gap: 7px;
  justify-content: flex-start;
  line-height: 1.2;
  min-height: 38px;
  min-width: 0;
  overflow: hidden;
  padding: 7px 8px;
  text-align: left;
  text-overflow: ellipsis;
}

.marketing-block-sidebar button:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.marketing-block-sidebar button span {
  align-items: center;
  background: rgba(255, 111, 0, 0.13);
  border: 1px solid rgba(255, 111, 0, 0.28);
  border-radius: 6px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.marketing-email-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.marketing-email-builder-topbar {
  align-items: center;
  background: rgba(15, 21, 32, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px 12px;
}

.marketing-email-mode-toggle {
  background: rgba(4, 13, 21, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  padding: 3px;
}

.marketing-email-mode-toggle button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 28px;
  padding: 0 10px;
}

.marketing-email-mode-toggle button.active {
  background: rgba(255, 111, 0, 0.16);
  color: var(--accent);
}

.marketing-autosave-state {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  min-width: 72px;
  text-align: right;
}

.marketing-email-canvas-shell {
  background:
    radial-gradient(circle at top, rgba(255, 111, 0, 0.08), transparent 34%),
    rgba(2, 8, 15, 0.62);
  border: 1px solid rgba(118, 147, 172, 0.18);
  border-radius: 8px;
  min-height: 680px;
  overflow: auto;
  padding: 28px 18px;
}

.marketing-visual-email-builder .marketing-email-canvas {
  background: #eef2f7;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  color: #111827;
  margin: 0 auto;
  max-width: 600px;
  min-height: 620px;
  overflow: visible;
  padding: 0;
  width: 100%;
}

.marketing-email-canvas-inner {
  background: #ffffff;
  border-radius: 8px;
  display: grid;
  gap: 0;
  min-height: 620px;
  padding: 28px;
}

.email-canvas-block {
  border: 1px solid transparent;
  border-radius: 8px;
  min-width: 0;
  padding: 10px;
  position: relative;
}

.email-canvas-block:hover {
  border-color: rgba(255, 111, 0, 0.28);
}

.email-canvas-block.is-selected {
  border-color: rgba(255, 111, 0, 0.88);
  box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.12);
}

.email-canvas-block.is-dragging {
  opacity: 0.48;
}

.email-block-controls {
  background: rgba(10, 16, 26, 0.94);
  border: 1px solid rgba(255, 111, 0, 0.42);
  border-radius: 8px;
  display: none;
  gap: 4px;
  padding: 4px;
  position: absolute;
  right: 8px;
  top: -18px;
  z-index: 5;
}

.email-canvas-block.is-selected .email-block-controls,
.email-canvas-block:hover .email-block-controls {
  display: flex;
}

.email-block-controls button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #f8fafc;
  cursor: pointer;
  font-size: 12px;
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
}

.email-block-controls button:hover {
  background: rgba(255, 111, 0, 0.18);
}

.email-canvas-block [contenteditable="true"] {
  border-radius: 6px;
  outline: none;
}

.email-canvas-block [contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 111, 0, 0.38);
}

.email-canvas-block h2 {
  color: #111827;
  line-height: 1.1;
  margin: 0;
}

.email-canvas-block p {
  line-height: 1.55;
  margin: 0 0 10px;
}

.email-block-header {
  align-items: center;
  display: flex;
  gap: 10px;
}

.email-block-header img {
  border-radius: 8px;
  height: 38px;
  object-fit: cover;
  width: 38px;
}

.email-block-image img {
  aspect-ratio: 16 / 9;
  display: inline-block;
  max-width: 100%;
  object-fit: cover;
}

[data-email-image-empty] {
  background: #f3f4f6;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  display: block;
  padding: 34px 16px;
  text-align: center;
}

.email-block-button a,
.email-block-product a,
.email-block-callout a {
  display: inline-block;
  font-weight: 850;
  text-decoration: none;
}

.email-block-product,
.email-block-callout,
.email-block-testimonial {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.email-block-product {
  grid-template-columns: 92px minmax(0, 1fr);
}

.email-block-product img {
  border-radius: 8px;
  height: 92px;
  object-fit: cover;
  width: 92px;
}

.email-block-callout strong {
  color: #ff6f00;
  font-size: 20px;
}

.email-block-features {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.email-block-testimonial {
  border-left: 4px solid #ff6f00;
}

.email-block-testimonial cite {
  color: #64748b;
  font-style: normal;
  font-weight: 850;
}

.email-block-footer,
.email-block-social,
.email-compliance-footer {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

.email-compliance-footer {
  border-top: 1px solid #e5e7eb;
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 16px 10px 2px;
  position: relative;
}

.email-compliance-footer::before {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #64748b;
  content: attr(data-lock-label);
  display: inline-block;
  font-size: 10px;
  font-weight: 850;
  justify-self: start;
  line-height: 1;
  margin-bottom: 4px;
  min-height: 0;
  padding: 5px 8px;
  text-transform: uppercase;
}

.email-compliance-footer[data-lock-label=""]::before {
  display: none;
}

.email-compliance-footer img {
  border-radius: 6px;
  height: 28px;
  object-fit: contain;
  width: 28px;
}

.email-compliance-footer strong {
  color: #374151;
}

.email-compliance-footer a {
  color: #ff6f00;
  text-decoration: underline;
}

.marketing-email-inspector label {
  color: var(--soft);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
}

.marketing-email-inspector input,
.marketing-email-inspector select,
.marketing-email-inspector textarea {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  min-height: 32px;
  padding: 6px 8px;
  width: 100%;
}

.marketing-inspector-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-inspector-actions button {
  background: rgba(4, 13, 21, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  min-height: 30px;
  min-width: 0;
  padding: 0 7px;
}

.marketing-inspector-actions button:first-child {
  grid-column: 1 / -1;
}

.marketing-inspector-actions button:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.marketing-inspector-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.marketing-inspector-upload {
  display: grid;
  gap: 6px;
}

.marketing-inspector-upload button {
  background: rgba(255, 111, 0, 0.12);
  border: 1px solid rgba(255, 111, 0, 0.32);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 32px;
}

.marketing-visual-email-builder[data-email-mode="preview"] .marketing-block-sidebar,
.marketing-visual-email-builder[data-email-mode="preview"] .marketing-email-inspector,
.marketing-visual-email-builder[data-email-mode="mobile"] .marketing-block-sidebar,
.marketing-visual-email-builder[data-email-mode="mobile"] .marketing-email-inspector,
.marketing-visual-email-builder[data-email-mode="preview"] .email-block-controls,
.marketing-visual-email-builder[data-email-mode="mobile"] .email-block-controls {
  display: none;
}

.marketing-visual-email-builder[data-email-mode="preview"],
.marketing-visual-email-builder[data-email-mode="mobile"] {
  grid-template-columns: minmax(0, 1fr);
}

.marketing-visual-email-builder[data-email-mode="preview"] .email-canvas-block,
.marketing-visual-email-builder[data-email-mode="mobile"] .email-canvas-block {
  border-color: transparent;
  box-shadow: none;
}

.marketing-visual-email-builder[data-email-mode="mobile"] .marketing-email-canvas {
  max-width: 390px;
}

.marketing-exclusion-grid label {
  align-items: start;
  background: rgba(4, 13, 21, 0.22);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 40px;
  padding: 9px 10px;
}

.marketing-delivery-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-trigger-card .developer-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-flow {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
}

.promotions-command-center {
  display: grid;
  gap: 18px;
}

.promotions-hero {
  background:
    linear-gradient(135deg, rgba(255, 111, 0, 0.12), transparent 34%),
    var(--panel);
}

.promotions-hero .developer-section-header h1 {
  color: var(--text);
  font-size: 34px;
  line-height: 1.05;
  margin: 0;
}

.promotions-hero .developer-section-header p:not(.store-eyebrow) {
  color: var(--soft);
  margin: 7px 0 0;
  max-width: 760px;
}

.promotions-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.promotions-create-grid,
.promotions-content-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promotions-create-card,
.promotions-list-card,
.promotions-automation-card {
  min-width: 0;
}

.promotions-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promotions-form .wide,
.promotions-form button[type="submit"] {
  grid-column: 1 / -1;
}

.promotions-offer-form {
  display: grid;
  gap: 14px;
}

.promotion-product-picker {
  background: rgba(2, 6, 12, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  padding: 14px;
}

.promotion-product-picker h3,
.promotion-product-picker p {
  margin: 0;
}

.promotion-product-picker h3 {
  color: var(--text);
  font-size: 15px;
}

.promotion-product-picker p,
.promotion-builder-note {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.45;
}

.promotion-product-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promotion-product-choice {
  align-items: center;
  background: rgba(11, 21, 32, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 58px;
  padding: 10px;
}

.promotion-product-choice input {
  accent-color: var(--accent);
  height: 16px;
  width: 16px;
}

.promotion-product-choice strong,
.promotion-product-choice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-product-choice strong {
  color: var(--text);
  font-size: 12px;
}

.promotion-product-choice small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.promotion-builder-note {
  background: rgba(255, 111, 0, 0.08);
  border: 1px solid rgba(255, 111, 0, 0.22);
  border-radius: 8px;
  padding: 12px;
}

.promotion-builder-note strong {
  color: var(--accent);
}

.promotion-type-guide {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promotion-type-guide section {
  background: rgba(4, 13, 21, 0.32);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 12px;
}

.promotion-type-guide h3 {
  color: var(--text);
  font-size: 13px;
  margin: 0 0 10px;
}

.promotion-type-guide section > div {
  display: grid;
  gap: 8px;
}

.promotion-type-guide article {
  background: rgba(11, 21, 32, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.promotion-type-guide span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.promotion-type-guide p {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.42;
  margin: 0;
}

.promotions-offer-list {
  min-width: 0;
}

.promotion-offer-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, 0.52fr) auto;
}

.promotions-card-list {
  display: grid;
  gap: 10px;
}

.promotion-row {
  align-items: center;
  background: rgba(4, 13, 21, 0.36);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(170px, 0.7fr) auto;
  padding: 12px;
}

.promotion-row > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.promotion-row strong {
  color: var(--text);
}

.promotion-row p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.promotion-code {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.promotion-row dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.promotion-row dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.promotion-row dd {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  margin: 2px 0 0;
}

.promotion-row-actions {
  align-items: end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.promotion-playbook-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promotion-playbook-grid article {
  background: rgba(4, 13, 21, 0.36);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 12px;
}

.promotion-playbook-grid span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.promotion-playbook-grid strong {
  color: var(--text);
}

.promotion-playbook-grid p {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 1180px) {
  .marketing-campaign-builder-header {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .marketing-campaign-toolbar {
    justify-content: flex-start;
  }

  .promotions-stats,
  .promotion-playbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promotions-create-grid,
  .promotions-content-grid {
    grid-template-columns: 1fr;
  }

  .promotion-product-picker,
  .promotion-type-guide,
  .promotion-offer-row {
    grid-template-columns: 1fr;
  }

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

  .promotion-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .promotion-row-actions {
    align-items: stretch;
    justify-items: stretch;
  }
}

@media (max-width: 720px) {
  .marketing-horizontal-progress {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }

  .promotions-stats,
  .promotions-form,
  .promotion-product-grid,
  .promotion-row dl,
  .promotion-playbook-grid {
    grid-template-columns: 1fr;
  }
}

.marketing-flow span {
  background: rgba(64, 156, 255, 0.1);
  border: 1px solid rgba(64, 156, 255, 0.24);
  border-radius: 8px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 850;
  min-height: 42px;
  padding: 9px;
  text-align: center;
}

.analytics-command-center {
  --analytics-gap: 20px;
  color: var(--text);
  display: grid;
  gap: 24px;
  margin: 0 auto;
  max-width: 1220px;
  min-width: 0;
  padding: 0;
}

.analytics-page-header {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.analytics-breadcrumb {
  color: var(--soft);
  font-size: 13px;
  font-weight: 750;
  margin: 0 0 10px;
}

.analytics-page-header h1 {
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.analytics-page-header p:not(.analytics-breadcrumb) {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 0;
}

.analytics-header-actions {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.analytics-header-actions .analytics-range-controls {
  margin: 0;
}

.analytics-filter-shell {
  align-items: center;
  background: rgba(8, 18, 29, 0.72);
  border: 1px solid rgba(116, 142, 166, 0.22);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  min-height: 56px;
  padding: 10px 12px;
}

.analytics-product-filter select {
  background: rgba(3, 10, 18, 0.74);
  border: 1px solid rgba(116, 142, 166, 0.28);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  min-height: 38px;
  min-width: 180px;
  padding: 8px 36px 8px 12px;
}

.analytics-tabs {
  border-bottom: 1px solid rgba(116, 142, 166, 0.26);
  display: flex;
  gap: 18px;
  min-width: 0;
  overflow-x: auto;
}

.analytics-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--soft);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  padding: 0 0 13px;
  text-decoration: none;
}

.analytics-tabs a:hover,
.analytics-tabs a.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.analytics-tab-view {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.billing-command-center {
  color: var(--text);
}

.billing-tab-view {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.analytics-tab-view.is-switching-out,
.billing-tab-view.is-switching-out {
  animation: analyticsTabOut 140ms ease both;
}

.analytics-tab-view.is-switching-in,
.billing-tab-view.is-switching-in {
  animation: analyticsTabIn 220ms ease both;
}

@keyframes analyticsTabOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-18px);
  }
}

@keyframes analyticsTabIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-tab-view.is-switching-out,
  .analytics-tab-view.is-switching-in,
  .billing-tab-view.is-switching-out,
  .billing-tab-view.is-switching-in {
    animation: none;
  }
}

.billing-live-shell {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.billing-live-shell dl {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
}

.billing-live-shell div {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.billing-live-shell dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.billing-live-shell dd {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  margin: 0;
}

.billing-live-pill {
  background: rgba(49, 212, 107, 0.14);
  border: 1px solid rgba(49, 212, 107, 0.32);
  color: #31d46b;
}

.billing-live-pill {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 950;
  padding: 6px 10px;
  text-transform: uppercase;
}

.billing-kpi-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}

.billing-kpi-actions .analytics-kpi-info {
  cursor: help;
}

.billing-kpi-detail {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.billing-status-card {
  background: rgba(3, 10, 18, 0.42);
  border: 1px solid rgba(116, 142, 166, 0.2);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.billing-status-card.ready {
  border-color: rgba(49, 212, 107, 0.28);
}

.billing-status-card.warning {
  border-color: rgba(249, 115, 22, 0.34);
}

.billing-status-card.danger {
  border-color: rgba(255, 107, 107, 0.35);
}

.billing-status-card strong {
  color: var(--text);
  font-size: 15px;
}

.billing-status-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.billing-command-card {
  align-content: start;
  display: grid;
  gap: 14px;
}

.billing-summary-list {
  margin-top: 2px;
}

.billing-section-heading {
  display: grid;
  gap: 4px;
}

.billing-section-heading h2 {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
  margin: 0;
}

.billing-mini-list {
  display: grid;
  gap: 10px;
}

.billing-mini-list article {
  background: rgba(3, 10, 18, 0.4);
  border: 1px solid rgba(116, 142, 166, 0.18);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.billing-mini-list strong {
  color: var(--text);
  font-size: 15px;
}

.billing-mini-list span {
  color: var(--soft);
  font-size: 13px;
  font-weight: 850;
}

.billing-mini-list small,
.billing-mini-list p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.analytics-insight-banner,
.analytics-card,
.analytics-kpi-card {
  background:
    linear-gradient(145deg, rgba(13, 31, 46, 0.96), rgba(7, 18, 30, 0.94));
  border: 1px solid rgba(116, 142, 166, 0.24);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  min-width: 0;
}

.analytics-insight-banner {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 56px;
  padding: 14px 18px;
}

.analytics-insight-banner span,
.analytics-kpi-icon,
.analytics-insight-list article > span,
.analytics-activity-list article > span {
  align-items: center;
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.analytics-insight-banner p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.analytics-insight-banner strong {
  color: var(--text);
  display: inline-block;
  margin-right: 8px;
}

.analytics-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-kpi-card {
  display: grid;
  gap: 10px;
  min-height: 142px;
  padding: 18px;
}

.analytics-kpi-top,
.analytics-kpi-foot,
.analytics-card-header {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.analytics-kpi-top {
  justify-content: space-between;
}

.analytics-kpi-label {
  color: var(--soft);
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}

.analytics-kpi-info {
  align-items: center;
  background: rgba(8, 21, 34, 0.72);
  border: 1px solid rgba(116, 142, 166, 0.32);
  border-radius: 50%;
  color: var(--muted);
  cursor: help;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 18px;
}

.analytics-kpi-info:hover,
.analytics-kpi-info:focus-visible {
  border-color: rgba(249, 115, 22, 0.64);
  color: var(--accent);
  outline: none;
}

.analytics-kpi-info-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.analytics-kpi-tooltip {
  background: rgba(3, 12, 22, 0.98);
  border: 1px solid rgba(249, 115, 22, 0.42);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 4px;
  line-height: 1.42;
  max-width: min(280px, calc(100vw - 48px));
  min-width: 220px;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  visibility: hidden;
  z-index: 25;
}

.analytics-kpi-tooltip::before {
  background: rgba(3, 12, 22, 0.98);
  border-left: 1px solid rgba(249, 115, 22, 0.42);
  border-top: 1px solid rgba(249, 115, 22, 0.42);
  content: "";
  height: 8px;
  position: absolute;
  right: 5px;
  top: -5px;
  transform: rotate(45deg);
  width: 8px;
}

.analytics-kpi-card .analytics-kpi-tooltip strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.analytics-kpi-info-wrap:hover .analytics-kpi-tooltip,
.analytics-kpi-info-wrap:focus-within .analytics-kpi-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.analytics-kpi-card strong {
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.analytics-kpi-foot {
  color: var(--muted);
  font-size: 12px;
  justify-content: space-between;
}

.analytics-kpi-delta {
  font-weight: 900;
}

.analytics-kpi-delta.positive {
  color: #31d46b;
}

.analytics-kpi-delta.negative {
  color: #ff6b6b;
}

.analytics-kpi-delta.neutral {
  color: var(--muted);
}

.analytics-sparkline {
  height: 38px;
  width: 100%;
}

.analytics-sparkline polyline {
  fill: none;
  stroke: #2d7ff9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.analytics-sparkline.is-empty {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04));
  border-radius: 8px;
  height: 38px;
}

.analytics-main-grid,
.analytics-two-grid,
.analytics-three-grid {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.analytics-main-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.analytics-two-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-three-grid {
  grid-template-columns: 1.05fr .95fr 1.1fr;
}

.analytics-card {
  padding: 20px;
}

.analytics-card-header {
  justify-content: space-between;
  margin-bottom: 16px;
}

.analytics-card-header h2 {
  font-size: 16px;
  letter-spacing: 0;
  margin: 3px 0 0;
}

.analytics-chart-mode {
  background: rgba(3, 10, 18, 0.74);
  border: 1px solid rgba(116, 142, 166, 0.26);
  border-radius: 8px;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.analytics-table {
  border: 1px solid rgba(116, 142, 166, 0.22);
  border-radius: 10px;
  overflow: auto;
}

.analytics-table [role="row"] {
  display: grid;
  grid-template-columns: var(--analytics-table-columns, minmax(170px, 1.2fr) repeat(4, minmax(90px, .7fr)));
  min-width: 680px;
}

.analytics-table [role="columnheader"],
.analytics-table [role="cell"] {
  border-bottom: 1px solid rgba(116, 142, 166, 0.18);
  color: var(--soft);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 11px 12px;
}

.analytics-table [role="columnheader"] {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.analytics-table [role="row"]:last-child [role="cell"] {
  border-bottom: 0;
}

.analytics-empty-card {
  background: rgba(3, 10, 18, 0.42);
  border: 1px solid rgba(116, 142, 166, 0.2);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 18px;
  place-content: center;
}

.analytics-empty-card strong {
  color: var(--text);
  font-size: 14px;
}

.analytics-empty-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.analytics-funnel {
  display: grid;
  gap: 12px;
}

.analytics-funnel-row {
  background: rgba(3, 10, 18, 0.42);
  border: 1px solid rgba(116, 142, 166, 0.18);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 12px;
  position: relative;
}

.analytics-funnel-row i {
  background: linear-gradient(90deg, rgba(45, 127, 249, 0.36), rgba(249, 115, 22, 0.34));
  border-radius: inherit;
  bottom: 0;
  left: 0;
  opacity: .9;
  position: absolute;
  top: 0;
  z-index: 0;
}

.analytics-funnel-row span,
.analytics-funnel-row strong,
.analytics-funnel-row small {
  position: relative;
  z-index: 1;
}

.analytics-funnel-row span {
  font-weight: 850;
}

.analytics-funnel-row small {
  color: var(--muted);
  grid-column: 1 / -1;
}

.analytics-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.analytics-summary-list div {
  align-items: center;
  border-bottom: 1px solid rgba(116, 142, 166, 0.16);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}

.analytics-summary-list dt {
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.analytics-summary-list dd {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
  text-align: right;
}

.analytics-activity-list,
.analytics-insight-list {
  display: grid;
  gap: 10px;
}

.analytics-activity-list article,
.analytics-insight-list article {
  align-items: center;
  background: rgba(3, 10, 18, 0.4);
  border: 1px solid rgba(116, 142, 166, 0.18);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.analytics-activity-list strong,
.analytics-insight-list strong {
  color: var(--text);
  display: block;
  font-size: 13px;
}

.analytics-activity-list p,
.analytics-insight-list p,
.analytics-activity-list time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 3px 0 0;
}

.analytics-insight-list article.positive > span {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.3);
  color: #31d46b;
}

.analytics-insight-list article.warning > span {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

@media (max-width: 1180px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-main-grid,
  .analytics-two-grid,
  .analytics-three-grid {
    grid-template-columns: 1fr;
  }

  .analytics-page-header {
    grid-template-columns: 1fr;
  }

  .analytics-header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .analytics-command-center {
    gap: 18px;
  }

  .analytics-page-header h1 {
    font-size: 28px;
  }

  .analytics-header-actions,
  .analytics-header-actions .analytics-range-controls,
  .analytics-filter-shell {
    align-items: stretch;
    width: 100%;
  }

  .billing-live-shell {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-live-shell dl {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .analytics-header-actions .store-button,
  .analytics-product-filter,
  .analytics-product-filter select {
    width: 100%;
  }

  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card,
  .analytics-kpi-card {
    padding: 16px;
  }

  .analytics-tabs {
    gap: 14px;
  }

  .analytics-insight-banner,
  .analytics-activity-list article,
  .analytics-insight-list article {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .analytics-activity-list time,
  .analytics-insight-list .store-link {
    grid-column: 2;
  }
}

.marketing-review-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
}

.marketing-review-layout .marketing-right-rail {
  position: static;
}

.marketing-review-layout .marketing-email-preview-frame {
  min-height: 460px;
}

.marketing-filter-bar {
  align-items: center;
  background: rgba(4, 13, 21, 0.26);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
}

.marketing-filter-bar a,
.marketing-filter-bar span {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding: 7px 10px;
  text-decoration: none;
}

.marketing-filter-bar a.is-active,
.marketing-filter-bar a:hover,
.marketing-filter-bar span:first-child {
  background: rgba(255, 111, 0, 0.12);
  border-color: rgba(255, 111, 0, 0.32);
  color: var(--text);
}

.marketing-suppression-digest,
.marketing-activity-page,
.marketing-analytics-page,
.marketing-templates-page {
  grid-column: 1 / -1;
}

.marketing-contact-card.compact {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.35fr);
}

.marketing-activity-list {
  display: grid;
  gap: 10px;
}

.marketing-activity-list article {
  align-items: center;
  background: rgba(4, 13, 21, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 12px;
}

.marketing-activity-list strong,
.marketing-activity-list p,
.marketing-activity-list time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-activity-list strong {
  color: var(--text);
  font-size: 13px;
  text-transform: capitalize;
}

.marketing-activity-list p {
  color: var(--muted);
  font-size: 12px;
  margin: 3px 0 0;
}

.marketing-activity-list time {
  color: var(--soft);
  font-size: 12px;
  text-align: right;
}

.marketing-activity-dot {
  background: #45d993;
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.marketing-activity-dot.warning {
  background: #ffb73b;
}

.marketing-email-preview-frame {
  max-height: 580px;
  min-height: 420px;
}

.marketing-live-preview,
.marketing-ready-checks {
  box-shadow: none;
}

.marketing-audience-estimate {
  grid-template-columns: repeat(2, minmax(110px, 0.62fr)) minmax(0, 1fr);
}

.marketing-audience-estimate .store-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.marketing-audience-estimate dl {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marketing-contacts {
  grid-column: 1 / -1;
}

.marketing-contacts .developer-form-grid {
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-audience-health-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.marketing-audience-health-grid div {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
}

.marketing-audience-health-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.marketing-audience-health-grid dd {
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.1;
  margin: 0;
}

.marketing-contact-controls {
  background: rgba(4, 13, 21, 0.24);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 12px;
}

.marketing-contacts .checkout-note {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.marketing-contact-list {
  display: grid;
  gap: 10px;
}

.marketing-contact-card {
  align-items: center;
  background: linear-gradient(180deg, rgba(13, 31, 45, 0.94), rgba(8, 22, 33, 0.9));
  border: 1px solid rgba(118, 147, 172, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(230px, 1.05fr) minmax(132px, 0.58fr) minmax(180px, 0.88fr) minmax(190px, 0.82fr) minmax(210px, 0.9fr);
  min-width: 0;
  padding: 14px;
}

.marketing-contact-card:hover {
  border-color: rgba(255, 111, 0, 0.32);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.marketing-contact-identity {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-width: 0;
}

.marketing-contact-avatar {
  align-items: center;
  background: rgba(64, 156, 255, 0.12);
  border: 1px solid rgba(64, 156, 255, 0.28);
  border-radius: 8px;
  color: #72b8ff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.marketing-contact-identity h3,
.marketing-contact-identity p,
.marketing-contact-products strong,
.marketing-contact-dates strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-contact-identity h3 {
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0;
  margin: 0 0 4px;
}

.marketing-contact-identity p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.marketing-contact-status,
.marketing-contact-products,
.marketing-contact-dates {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.marketing-contact-status > span:not(.status-pill),
.marketing-contact-products span,
.marketing-contact-dates span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marketing-contact-products strong,
.marketing-contact-dates strong {
  color: var(--soft);
  font-size: 13px;
}

.marketing-contact-dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-contact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.marketing-contact-actions .store-button {
  min-height: 32px;
  padding-inline: 10px;
}

.marketing-flow-overview,
.marketing-growth-flows-list,
.marketing-growth-flow-queue {
  grid-column: 1 / -1;
}

.marketing-flow-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-flow-summary article {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid rgba(118, 147, 172, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.marketing-flow-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.marketing-flow-summary strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.marketing-flow-summary small {
  color: var(--soft);
  font-size: 11px;
}

.marketing-automation-settings .developer-form-grid,
.marketing-automation-create .developer-form-grid {
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-automation-create .developer-section-header,
.marketing-automation-settings .developer-section-header {
  margin-bottom: 10px;
}

.marketing-automation-playbooks {
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

.marketing-automation-playbooks article {
  gap: 5px;
  min-height: 104px;
  padding: 10px;
}

.growth-flows-page {
  color: var(--text);
  display: grid;
  gap: 16px;
  min-width: 0;
}

.growth-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(64, 156, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(10, 28, 42, 0.94), rgba(6, 18, 29, 0.92));
  border: 1px solid rgba(118, 147, 172, 0.25);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  min-width: 0;
  padding: 16px;
}

.growth-panel-head,
.growth-active-head {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
  min-width: 0;
}

.growth-panel-head .store-eyebrow {
  color: var(--accent);
  margin: 0;
}

.growth-panel-head select,
.growth-search input {
  background: rgba(4, 13, 21, 0.58);
  border: 1px solid rgba(118, 147, 172, 0.32);
  border-radius: 7px;
  color: var(--text);
  min-height: 36px;
}

.growth-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.growth-kpi-grid article {
  background: rgba(5, 17, 29, 0.64);
  border: 1px solid rgba(118, 147, 172, 0.22);
  border-radius: 7px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 98px;
  padding: 14px;
}

.growth-kpi-icon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  text-transform: uppercase;
  width: 34px;
}

.growth-kpi-icon.blue,
.growth-flow-icon.winback,
.growth-flow-icon.product_update {
  background: rgba(37, 99, 235, 0.24);
  color: #7db4ff;
}

.growth-kpi-icon.purple,
.growth-flow-icon.cart_recovery {
  background: rgba(124, 58, 237, 0.26);
  color: #c4a7ff;
}

.growth-kpi-icon.green,
.growth-flow-icon.product_onboarding,
.growth-flow-icon.cross_sell_upsell {
  background: rgba(16, 185, 129, 0.18);
  color: #35e09c;
}

.growth-kpi-icon.gold,
.growth-flow-icon.review_request,
.growth-flow-icon.promo_follow_up,
.growth-flow-icon.special_promotion {
  background: rgba(245, 158, 11, 0.2);
  color: #ffc35a;
}

.growth-flow-icon.new_product_release {
  background: rgba(239, 68, 68, 0.2);
  color: #ff7b6e;
}

.growth-kpi-grid small,
.growth-kpi-grid strong,
.growth-kpi-grid em {
  grid-column: 2;
}

.growth-kpi-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.growth-kpi-grid strong {
  color: var(--text);
  font-size: 25px;
  line-height: 1.1;
  margin-top: 5px;
}

.growth-kpi-grid em {
  color: var(--success);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.growth-main-grid {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr);
}

.growth-card-title h2 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.growth-card-title p {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}

.growth-popular-list {
  display: grid;
  gap: 4px;
  margin: 14px 0;
}

.growth-popular-row {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 50px;
  padding: 8px 10px;
  text-decoration: none;
}

.growth-popular-row a {
  align-items: center;
  color: var(--text);
  display: grid;
  gap: 11px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-width: 0;
  text-decoration: none;
}

.growth-popular-row strong small {
  color: var(--success);
  display: block;
  font-size: 10px;
  font-weight: 850;
  margin-top: 2px;
  text-transform: uppercase;
}

.growth-popular-row + .growth-popular-row {
  border-top-color: rgba(118, 147, 172, 0.13);
}

.growth-popular-row.is-selected,
.growth-popular-row:hover {
  background: rgba(26, 92, 142, 0.16);
  border-color: rgba(34, 211, 238, 0.36);
}

.growth-flow-icon,
.growth-flow-hero-icon {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  text-transform: uppercase;
  width: 32px;
}

.growth-toggle {
  background: rgba(71, 85, 105, 0.58);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 22px;
  padding: 2px;
  width: 42px;
}

.growth-toggle span {
  background: #f8fafc;
  border-radius: 50%;
  display: block;
  height: 18px;
  transition: transform 0.16s ease;
  width: 18px;
}

.growth-toggle.is-on {
  background: linear-gradient(135deg, #0ea76d, #34d399);
}

.growth-toggle.is-on span {
  transform: translateX(20px);
}

.growth-create-line,
.growth-template-cta {
  background: rgba(4, 13, 21, 0.36);
  border: 1px solid rgba(118, 147, 172, 0.34);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-weight: 850;
  min-height: 40px;
  width: 100%;
}

.growth-journey-card {
  border: 1px solid rgba(118, 147, 172, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  margin-top: 14px;
  padding: 16px;
}

.growth-journey-card header {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
}

.growth-flow-hero-icon {
  border-radius: 9px;
  font-size: 12px;
  height: 56px;
  width: 56px;
}

.growth-journey-card h3 {
  font-size: 19px;
  margin: 0 0 6px;
}

.growth-journey-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.growth-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.growth-badges span,
.growth-status-badge {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(118, 147, 172, 0.28);
  border-radius: 999px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 850;
  padding: 5px 9px;
}

.growth-badges span:first-child,
.growth-status-badge.success {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.26);
  color: #35e09c;
}

.growth-status-badge.warning {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

.growth-status-badge.muted {
  color: var(--muted);
}

.growth-timeline {
  border-bottom: 1px solid rgba(118, 147, 172, 0.18);
  border-top: 1px solid rgba(118, 147, 172, 0.18);
  display: grid;
  gap: 10px;
  padding: 14px 0;
}

.growth-email-node {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 24px 50px minmax(0, 1fr) minmax(160px, 0.32fr);
  position: relative;
}

.growth-step-number {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.growth-email-icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(14, 165, 233, 0.38));
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 8px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  text-transform: uppercase;
  width: 44px;
}

.growth-email-node strong {
  color: var(--text);
}

.growth-email-node dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.growth-email-node dt {
  color: var(--muted);
  font-size: 11px;
}

.growth-email-node dd {
  color: var(--text);
  font-weight: 850;
  margin: 3px 0 0;
}

.growth-delay-node {
  align-items: center;
  display: grid;
  grid-template-columns: 24px auto;
  margin-left: 0;
}

.growth-event-node {
  align-items: center;
  border-left: 2px solid rgba(251, 146, 60, 0.62);
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  margin-left: 11px;
  padding: 5px 0 5px 12px;
}

.growth-event-node span {
  background: rgba(251, 146, 60, 0.22);
  border: 1px solid rgba(251, 146, 60, 0.42);
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.growth-event-node strong {
  color: var(--text);
}

.growth-event-node p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.growth-reward-node .growth-step-number {
  background: #0ea76d;
}

.growth-reward-node .growth-email-icon {
  background: linear-gradient(135deg, rgba(14, 167, 109, 0.82), rgba(245, 158, 11, 0.3));
  border-color: rgba(52, 211, 153, 0.42);
}

.growth-delay-node em {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(118, 147, 172, 0.28);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  padding: 7px 14px;
}

.growth-journey-card footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.growth-journey-card footer > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.growth-footer-actions {
  justify-content: flex-end;
}

.growth-active-panel {
  padding: 0;
}

.growth-active-head {
  margin: 0;
  padding: 16px;
}

.growth-search {
  display: block;
  max-width: 360px;
  min-width: 260px;
  position: relative;
  width: 38%;
}

.growth-search input {
  padding-right: 34px;
  width: 100%;
}

.growth-search span {
  color: var(--muted);
  position: absolute;
  right: 12px;
  top: 9px;
}

.growth-flow-table {
  overflow-x: auto;
}

.growth-flow-table [role="row"] {
  align-items: center;
  border-top: 1px solid rgba(118, 147, 172, 0.17);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, 1.3fr) minmax(84px, 0.55fr) minmax(130px, 0.85fr) minmax(96px, 0.65fr) minmax(96px, 0.65fr) minmax(90px, 0.6fr) minmax(74px, 0.42fr);
  min-width: 860px;
  padding: 12px 16px;
}

.growth-flow-table [role="columnheader"] {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.growth-flow-table [data-label="Flow name"] {
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 36px minmax(0, 1fr);
}

.growth-flow-table [data-label="Flow name"] .growth-flow-icon {
  grid-row: span 2;
}

.growth-flow-table strong {
  color: var(--text);
}

.growth-flow-table small {
  color: var(--muted);
}

.growth-action-menu {
  position: relative;
}

.growth-action-menu summary {
  align-items: center;
  border: 1px solid rgba(118, 147, 172, 0.32);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  list-style: none;
  width: 42px;
}

.growth-action-menu summary::-webkit-details-marker {
  display: none;
}

.growth-action-menu div {
  background: rgba(5, 17, 29, 0.98);
  border: 1px solid rgba(118, 147, 172, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  display: grid;
  min-width: 150px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 10;
}

.growth-action-menu button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--soft);
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.growth-action-menu button:hover {
  background: rgba(118, 147, 172, 0.12);
  color: var(--text);
}

.growth-action-menu .danger {
  color: #f87171;
}

.growth-template-cta {
  color: var(--text);
  min-height: 56px;
}

.growth-flow-dialog {
  background: linear-gradient(180deg, #071826, #06111d);
  border: 1px solid rgba(118, 147, 172, 0.32);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--text);
  max-height: calc(100vh - 40px);
  max-height: min(760px, calc(100dvh - 40px));
  max-width: 760px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  width: min(760px, calc(100vw - 28px));
}

.growth-flow-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.growth-dialog-close {
  background: transparent;
  border: 1px solid rgba(118, 147, 172, 0.3);
  border-radius: 7px;
  color: var(--soft);
  cursor: pointer;
  float: right;
  min-height: 32px;
}

.store-modal-backdrop[data-growth-flow-inline-modal] {
  align-items: center;
  overflow: auto;
}

.store-modal-backdrop[data-growth-flow-inline-modal] .store-modal {
  box-sizing: border-box;
  max-height: calc(100vh - 40px);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
  overscroll-behavior: contain;
}

.growth-flow-preview-modal,
.growth-flow-edit-modal {
  max-width: 820px;
  width: min(820px, calc(100vw - 40px));
}

.growth-template-grid,
.growth-flow-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.growth-template-grid article {
  background: rgba(4, 13, 21, 0.38);
  border: 1px solid rgba(118, 147, 172, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.growth-template-grid h3 {
  margin: 0;
}

.growth-template-grid p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.growth-flow-form label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
}

.growth-flow-form .wide,
.growth-flow-form button {
  grid-column: 1 / -1;
}

.growth-incentive-fields {
  background: rgba(4, 13, 21, 0.32);
  border: 1px solid rgba(118, 147, 172, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.growth-promo-quick-create {
  background: rgba(12, 24, 36, 0.58);
  border: 1px dashed rgba(118, 147, 172, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.72fr) minmax(120px, 0.72fr) auto;
  padding: 12px;
}

.growth-promo-quick-create > div,
.growth-promo-quick-create > span {
  grid-column: 1 / -1;
}

.growth-promo-quick-create strong {
  color: var(--text);
  display: block;
  font-size: 13px;
}

.growth-promo-quick-create small,
.growth-promo-quick-create > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.growth-promo-quick-create > span[data-state="success"] {
  color: var(--success);
}

.growth-promo-quick-create > span[data-state="danger"] {
  color: #f87171;
}

.growth-promo-quick-create .store-button {
  align-self: end;
  grid-column: auto;
}

.growth-check-row {
  align-items: center;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr);
}

.growth-check-row input {
  margin: 0;
}

.growth-check-row strong,
.growth-check-row small {
  display: block;
}

.growth-check-row strong {
  color: var(--text);
}

.growth-check-row small {
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}

.growth-trigger-note {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 7px;
  color: var(--muted);
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.growth-trigger-note strong {
  color: var(--text);
  font-size: 12px;
}

.growth-trigger-note span {
  font-size: 12px;
}

.growth-trigger-note code {
  color: #7dd3fc;
  font-size: 11px;
}

@media (max-width: 980px) {
  .growth-main-grid,
  .growth-kpi-grid {
    grid-template-columns: 1fr;
  }

  .growth-journey-card footer,
  .growth-footer-actions {
    justify-content: flex-start;
  }

  .growth-search {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .growth-active-head,
  .growth-journey-card footer {
    align-items: stretch;
    flex-direction: column;
  }

  .growth-kpi-grid,
  .growth-template-grid,
  .growth-flow-form,
  .growth-incentive-fields,
  .growth-promo-quick-create,
  .growth-journey-card header,
  .growth-email-node {
    grid-template-columns: 1fr;
  }

  .growth-email-node dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .growth-badges,
  .growth-footer-actions {
    justify-content: flex-start;
  }

  .growth-panel {
    padding: 12px;
  }
}

.marketing-automation-settings .wide,
.marketing-automation-create .wide,
.marketing-automation-settings .store-button,
.marketing-automation-create .store-button {
  grid-column: 1 / -1;
}

.marketing-smart-signals {
  min-width: 0;
}

.marketing-signal-window-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.marketing-signal-window-grid article {
  background: rgba(4, 13, 21, 0.28);
  border: 1px solid rgba(118, 147, 172, 0.2);
  border-radius: 8px;
  min-width: 0;
  padding: 10px;
}

.marketing-signal-window-grid span,
.marketing-signal-window-grid small {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
}

.marketing-signal-window-grid strong {
  color: var(--text);
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.1;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.marketing-signal-table [role="cell"] small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
}

.marketing-settings-details[open] .marketing-settings-form {
  box-shadow: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-settings-form .store-button {
  grid-column: auto;
  justify-self: start;
}

.marketing-campaign-list {
  display: grid;
  gap: 12px;
}

.marketing-campaign-card {
  align-items: center;
  background: linear-gradient(180deg, rgba(13, 31, 45, 0.94), rgba(8, 22, 33, 0.9));
  border: 1px solid rgba(118, 147, 172, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1.25fr) minmax(360px, 1.35fr) minmax(190px, 0.78fr) minmax(230px, 0.9fr);
  min-width: 0;
  padding: 14px;
}

.marketing-campaign-card:hover {
  border-color: rgba(255, 111, 0, 0.36);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.marketing-campaign-main {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
}

.marketing-campaign-icon {
  align-items: center;
  background: rgba(255, 111, 0, 0.12);
  border: 1px solid rgba(255, 111, 0, 0.28);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-size: 16px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.marketing-campaign-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.marketing-campaign-title > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.marketing-campaign-title h3 {
  flex: 1 1 140px;
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-title p {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
}

.marketing-campaign-metrics div {
  background: rgba(4, 13, 21, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 58px;
  min-width: 0;
  padding: 9px 10px;
}

.marketing-campaign-metrics dt,
.marketing-campaign-timing span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.marketing-campaign-metrics dd {
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-timing {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.marketing-campaign-timing div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.marketing-campaign-timing strong {
  color: var(--soft);
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-campaign-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.marketing-campaign-actions .store-button {
  min-height: 32px;
  padding-inline: 11px;
}

.marketing-campaign-table,
.marketing-recent-table,
.marketing-contact-table,
.marketing-suppression-table,
.marketing-workflow-table,
.marketing-rules-table,
.marketing-queue-table,
.marketing-audit-table {
  overflow-x: auto;
}

.marketing-campaign-table [role="row"],
.marketing-recent-table [role="row"],
.marketing-contact-table [role="row"],
.marketing-suppression-table [role="row"],
.marketing-workflow-table [role="row"],
.marketing-rules-table [role="row"],
.marketing-queue-table [role="row"],
.marketing-audit-table [role="row"] {
  gap: 8px;
  min-width: 0;
}

.marketing-campaign-table [role="row"] {
  grid-template-columns: minmax(118px, 0.9fr) minmax(150px, 1.15fr) minmax(72px, 0.48fr) minmax(92px, 0.58fr) minmax(104px, 0.72fr) minmax(116px, 0.8fr) minmax(124px, 0.8fr) minmax(190px, 1.35fr);
}

.marketing-recent-table [role="row"] {
  grid-template-columns: minmax(160px, 1.2fr) minmax(96px, 0.7fr) repeat(4, minmax(78px, 0.55fr));
}

.marketing-contact-table [role="row"] {
  grid-template-columns: minmax(170px, 1.12fr) minmax(120px, 0.78fr) minmax(106px, 0.7fr) minmax(118px, 0.78fr) minmax(130px, 0.82fr) minmax(108px, 0.72fr) minmax(104px, 0.68fr) minmax(190px, 1.18fr);
}

.marketing-suppression-table [role="row"] {
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.78fr) minmax(118px, 0.76fr) minmax(110px, 0.72fr) minmax(116px, 0.75fr) minmax(104px, 0.68fr) minmax(96px, 0.62fr);
}

.marketing-workflow-table [role="row"] {
  grid-template-columns: minmax(170px, 1.25fr) minmax(132px, 0.95fr) minmax(88px, 0.58fr) minmax(74px, 0.5fr) minmax(120px, 0.84fr) minmax(116px, 0.78fr);
}

.marketing-rules-table [role="row"],
.marketing-audit-table [role="row"] {
  grid-template-columns: minmax(140px, 1fr) minmax(110px, 0.72fr) minmax(170px, 1.2fr) minmax(110px, 0.72fr);
}

.marketing-queue-table [role="row"] {
  grid-template-columns: minmax(170px, 1.15fr) minmax(96px, 0.62fr) minmax(94px, 0.62fr) minmax(120px, 0.78fr) minmax(150px, 1fr);
}

.marketing-signal-table [role="row"] {
  grid-template-columns: minmax(150px, 1.08fr) minmax(120px, 0.78fr) minmax(130px, 0.86fr) minmax(96px, 0.66fr) minmax(116px, 0.72fr);
}

.marketing-campaign-table [role="cell"],
.marketing-recent-table [role="cell"],
.marketing-contact-table [role="cell"],
.marketing-suppression-table [role="cell"],
.marketing-workflow-table [role="cell"],
.marketing-rules-table [role="cell"],
.marketing-queue-table [role="cell"],
.marketing-signal-table [role="cell"],
.marketing-audit-table [role="cell"] {
  min-width: 0;
}

.marketing-campaign-table [data-label="Actions"] .developer-actions,
.marketing-contact-table [data-label="Actions"] .developer-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.marketing-campaign-table [data-label="Actions"] .store-button,
.marketing-contact-table [data-label="Actions"] .store-button,
.marketing-suppression-table [data-label="Actions"] .store-button {
  min-height: 30px;
  padding-inline: 9px;
}

@media (max-width: 1180px) {
  .marketing-dashboard-grid,
  .marketing-audience-grid,
  .marketing-automation-grid,
  .marketing-page-shell .marketing-builder-form {
    grid-template-columns: 1fr;
  }

  .marketing-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-automation-grid > .developer-section,
  .marketing-contacts {
    grid-column: auto;
  }

  .marketing-campaign-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-contact-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-campaign-actions,
  .marketing-contact-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .marketing-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-overview,
  .marketing-dashboard-side .marketing-safety-grid,
  .marketing-action-grid,
  .marketing-contacts .developer-form-grid,
  .marketing-flow-summary,
  .marketing-automation-playbooks,
  .marketing-automation-settings .developer-form-grid,
  .marketing-automation-create .developer-form-grid,
  .marketing-settings-details[open] .marketing-settings-form {
    grid-template-columns: 1fr;
  }

  .marketing-campaign-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-campaign-actions .store-button {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  .marketing-audience-health-grid,
  .marketing-contact-controls,
  .marketing-contact-dates {
    grid-template-columns: 1fr;
  }

  .marketing-contact-actions .store-button {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

.checkbox-field {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.checkbox-field input {
  height: 18px;
  margin-top: 2px;
  min-height: 18px;
  width: 18px;
}

.marketing-opt-in-field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px;
}

.customer-hub-table,
.workspace-table {
  background: var(--surface);
  border-color: var(--line);
  max-width: 100%;
  overflow-x: hidden;
}

.customer-hub-table [role="row"] {
  grid-template-columns: minmax(108px, 0.8fr) minmax(132px, 1fr) minmax(180px, 1.35fr) minmax(92px, 0.65fr) minmax(110px, 0.8fr) minmax(72px, 0.5fr);
  min-width: 0;
}

.customer-hub-table.purchases [role="row"] {
  grid-template-columns: minmax(98px, 0.84fr) minmax(66px, 0.5fr) minmax(96px, 0.76fr) minmax(150px, 1.18fr) minmax(132px, 1fr) minmax(62px, 0.45fr) minmax(74px, 0.54fr) minmax(88px, 0.66fr) minmax(94px, 0.7fr);
  min-width: 0;
}

.dashboard-customer-table [role="row"] {
  min-width: 720px;
}

.customer-hub-table [role="columnheader"],
.customer-hub-table [role="cell"],
.workspace-table [role="columnheader"],
.workspace-table [role="cell"] {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-hub-table [role="columnheader"],
.workspace-table [role="columnheader"] {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}

.customer-hub-table [role="cell"],
.workspace-table [role="cell"] {
  color: var(--soft);
  font-size: 13px;
}

.truncate-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.licensing-framework-selector.tools-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tools-hub-card {
  min-height: 280px;
  padding: 26px 22px;
}

.tool-card-icon {
  color: var(--accent);
  display: inline-flex;
  margin-bottom: 16px;
}

.tool-card-icon svg {
  height: 42px;
  width: 42px;
}

.tools-helper-note {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
}

.tools-helper-note span {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.checkout-note {
  background: var(--surface);
}

@keyframes store-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1180px) {
  .storefront-public-site[data-storefront-template="spotlight"] .storefront-site-nav,
  .spotlight-hero,
  .spotlight-about-library {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-site-links,
  .storefront-site-account {
    justify-content: start;
  }

  .spotlight-highlight-grid,
  .spotlight-product-grid,
  .spotlight-trust-grid,
  .spotlight-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .spotlight-demo-row {
    grid-template-columns: 38px minmax(120px, 0.9fr) minmax(86px, 0.4fr) minmax(130px, 1fr) 54px;
  }

  .spotlight-demo-product {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .storefront-public-site[data-storefront-template="spotlight"] {
    margin: 0;
    padding: 0;
  }

  .storefront-public-site[data-storefront-template="spotlight"] .storefront-site-nav,
  .storefront-site-brand,
  .storefront-site-links,
  .storefront-site-account,
  .spotlight-section-header,
  .spotlight-hero-purchase,
  .spotlight-about-card {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-site-brand,
  .storefront-site-links,
  .storefront-site-account,
  .spotlight-section-header {
    flex-direction: column;
  }

  .spotlight-hero {
    min-height: 0;
    padding: 28px 18px;
  }

  .spotlight-hero h1 {
    font-size: clamp(36px, 12vw, 54px);
  }

  .spotlight-mini-trust,
  .spotlight-feature-list,
  .spotlight-video-grid,
  .spotlight-highlight-grid,
  .spotlight-product-grid,
  .spotlight-trust-grid,
  .spotlight-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spotlight-hero-actions {
    justify-content: start;
  }

  .spotlight-demo-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .spotlight-demo-row .store-pill,
  .spotlight-waveform {
    grid-column: 2 / -1;
  }

  .spotlight-demo-row time {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 520px) {
  .spotlight-mini-trust,
  .spotlight-video-grid,
  .spotlight-highlight-grid,
  .spotlight-product-grid,
  .spotlight-trust-grid,
  .spotlight-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spotlight-hero-card,
  .spotlight-section,
  .spotlight-about-library {
    padding: 16px;
  }

  .spotlight-hero-card {
    padding: 0;
  }

  .spotlight-about-card > .store-brand-mark,
  .spotlight-about-card img {
    height: 96px;
    width: 96px;
  }
}

@media (max-width: 980px) {
  /* Responsive ownership marker: dashboard/products selectors remain in existing cascade order. */

  .store-hero,
  .product-detail,
  .developer-shell,
  .developer-row,
  .developer-key-row,
  .developer-wizard,
  .developer-wizard-hero,
  .marketplace-developer-hero,
  .marketplace-developer-info {
    grid-template-columns: 1fr;
  }

  .developer-sidebar,
  .developer-wizard-sidebar {
    position: static;
  }

  .product-wizard-progress {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .product-wizard-progress ol {
    grid-template-columns: repeat(var(--wizard-step-count), minmax(108px, 1fr));
  }

  .wizard-product-page-preview {
    grid-template-columns: 1fr;
  }

  .wizard-product-page-preview .product-media-stage {
    min-height: 180px;
  }

  .store-summary {
    max-width: 260px;
  }

  /* Dashboard/products responsive grid styles. */

  .store-controls,
  .command-kpi-grid,
  .command-kpi-row,
  .business-health-hero,
  .dashboard-card-grid,
  .briefing-footer,
  .marketplace-trending,
  .opportunity-grid,
  .quick-actions-grid,
  .command-two-column,
  .command-usage-grid,
  .command-attention-list,
  .workspace-metric-grid,
  .workspace-card-grid,
  .workspace-two-column,
  .customer-generator-form,
  .developer-metrics,
  .developer-catalog-grid,
  .developer-catalog-summary,
  .developer-launch-grid,
    .developer-check-grid,
    .developer-empty-grid,
    .developer-form-grid,
    .developer-file-fields,
    .developer-choice-grid,
    .developer-wizard-info-grid,
    .developer-wizard-summary,
    .developer-channel-grid,
    .developer-preview-layout,
    .integration-choice-grid,
    .storefront-product-row,
    .customer-hub-controls,
    .storefront-product-controls,
    .storefront-readiness .developer-launch-grid,
    .storefront-form .developer-form-grid,
    .email-sending-section .developer-form-grid,
    .email-sender-row,
    .marketing-two-column,
    .marketing-builder-form,
    .marketing-builder-main,
    .marketing-settings-form,
    .storefront-featured-product,
    .storefront-template-grid,
    .storefront-content-split,
    .storefront-template-hero.product-company,
    .storefront-catalog-row,
    .storefront-visibility-guide {
      grid-template-columns: 1fr 1fr;
  }

  .dashboard-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .health-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-goals-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-goals-form .store-button {
    grid-column: 1 / -1;
  }

  .dashboard-card-grid > .dashboard-card {
    min-height: 0;
  }

  .storefront-featured-copy {
    padding: 18px 18px 18px 0;
  }

  .store-actions {
    grid-column: 1 / -1;
  }

  .store-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 340px));
  }

  .storefront-product-controls label:nth-child(4),
  .storefront-product-controls label:nth-child(5) {
    grid-column: auto;
  }

  .analytics-donut-wrap {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .payout-status-grid {
    grid-template-columns: 1fr;
  }

  .checkout-actions,
  .checkout-actions.compact {
    grid-template-columns: minmax(78px, 0.45fr) 1fr 1fr;
  }

}

@media (max-width: 640px) {
  .store-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .checkout-actions,
  .checkout-actions.compact,
  .store-cart-bar {
    grid-template-columns: 1fr;
  }

  .store-cart-bar {
    bottom: 10px;
  }

  .store-controls,
  .store-grid {
    grid-template-columns: 1fr;
  }

  .developer-main:has([data-command-center]) {
    padding: 24px 16px 40px;
  }

  .command-dashboard-header h1 {
    font-size: 30px;
  }

  /* Products responsive action styles. */

  .store-price-fields,
  .product-card-footer,
  .product-card-actions,
  .store-pagination,
  .developer-toolbar,
  .developer-section-header,
  .developer-actions,
  .developer-next-action,
  .developer-launch-list li,
  .developer-upload-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  /* Dashboard/products/licensing responsive grid styles. */

  .developer-stats,
  .developer-stats.stacked,
  .command-kpi-grid,
  .command-kpi-row,
  .business-health-hero,
  .business-health-main,
  .health-check-grid,
  .dashboard-kpi-row,
  .dashboard-card-grid,
  .briefing-list,
  .briefing-footer,
  .customer-snapshot-grid,
  .marketplace-trending,
  .product-health-list article,
  .action-center-list article,
  .dashboard-activity-feed li,
  .developer-health-layout,
  .goals-list div,
  .dashboard-goals-form,
  .opportunity-grid,
  .quick-actions-grid,
  .command-two-column,
  .command-usage-grid,
  .command-attention-list,
  .workspace-metric-grid,
  .workspace-card-grid,
  .workspace-two-column,
  .customer-generator-form,
  .developer-metrics,
  .developer-catalog-grid,
  .developer-catalog-summary,
  .developer-catalog-price,
  .developer-launch-grid,
  .licensing-framework-selector,
  .licensing-credential-row,
  .licensing-product-grid,
  .developer-check-grid,
  .developer-empty-grid,
    .developer-form-grid,
    .developer-file-fields,
    .developer-choice-grid,
    .developer-wizard-info-grid,
    .developer-wizard-summary,
    .developer-channel-grid,
    .developer-preview-layout,
    .developer-wizard-path,
    .integration-choice-grid,
    .storefront-product-row,
    .customer-hub-controls,
    .storefront-product-controls,
    .storefront-readiness .developer-launch-grid,
    .storefront-form .developer-form-grid,
    .email-sending-section .developer-form-grid,
    .email-sender-row,
    .marketing-two-column,
    .marketing-builder-form,
    .marketing-builder-main,
    .marketing-settings-form,
    .storefront-featured-product,
    .storefront-template-grid,
    .storefront-content-split,
    .storefront-template-hero.product-company,
    .storefront-catalog-row,
    .storefront-visibility-guide,
    .store-grid.compact,
  .storefront-preview-panel {
    grid-template-columns: 1fr;
  }

  .dashboard-controls,
  .dashboard-actions,
  .dashboard-range-form,
  .dashboard-card-header,
  .recent-customer-list a,
  .integration-status-list a {
    align-items: stretch;
    flex-direction: column;
    justify-items: stretch;
  }

  .dashboard-range-form label,
  .dashboard-range-form .store-button,
  .dashboard-actions .store-button,
  .business-health-hero > .store-button,
  .action-center-list .store-button,
  .product-health-list .store-button {
    width: 100%;
  }

  .storefront-site-metrics {
    grid-template-columns: 1fr;
  }

  .storefront-catalog-actions {
    align-items: stretch;
    justify-items: stretch;
  }

  .analytics-bar-row {
    grid-template-columns: 1fr;
  }

  .analytics-custom-range {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 32px));
  }

  .analytics-bar-row strong {
    text-align: left;
  }

  .analytics-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .payout-hold-list article,
  .payout-status-list div {
    grid-template-columns: 1fr;
  }

  .payout-status-list dd {
    text-align: left;
  }

  .analytics-donut {
    width: 132px;
  }

  .storefront-featured-copy {
    padding: 0 16px 18px;
  }

  .storefront-featured-media {
    min-height: 180px;
  }

  .storefront-product-controls label:nth-child(4),
  .storefront-product-controls label:nth-child(5) {
    grid-column: auto;
  }

  .developer-setup-steps li {
    align-items: stretch;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .developer-setup-steps .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Licensing domain responsive styles. */

  .licensing-flow-diagram {
    grid-template-columns: 1fr;
  }

  .licensing-flow-diagram b {
    text-align: center;
    transform: rotate(90deg);
  }

  .licensing-code-panel {
    height: 280px;
  }

  .api-doc-info-grid,
  .api-recipe-grid,
  .api-build-demo-grid,
  .api-demo-product-grid,
  .api-doc-filter-bar,
  .api-endpoint-meta,
  .api-copy-grid,
  .api-field-grid {
    grid-template-columns: 1fr;
  }

  .api-copy-row,
  .api-doc-field-list li {
    grid-template-columns: 1fr;
  }

  .api-endpoint-card summary {
    align-items: stretch;
    flex-direction: column;
  }

  .store-button,
  .store-actions .store-button,
  .developer-wizard-actions .store-button {
    width: 100%;
  }

  .developer-wizard-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .library-file {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1120px) {
  .developer-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .developer-sidebar {
    padding: 22px 16px;
  }

  .money-setup-grid,
  .dashboard-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .store-topbar {
    align-items: flex-start;
    gap: 14px;
  }

  .store-topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .developer-shell {
    display: block;
  }

  .developer-sidebar {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
    position: static;
  }

  .developer-help-card {
    align-self: auto;
  }

  .developer-main {
    padding: 28px 18px 48px;
  }

  .store-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-controls {
    justify-items: start;
  }

  .dashboard-ranges,
  .dashboard-actions {
    justify-content: flex-start;
  }

  .developer-product-controls,
  .customer-hub-controls,
  .command-dashboard-grid,
  .dashboard-operations-grid {
    grid-template-columns: 1fr;
  }

  .customer-hub-controls .store-button,
  .developer-product-controls .store-button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .store-brand strong {
    font-size: 15px;
  }

  .store-nav {
    gap: 12px;
    overflow-x: auto;
    max-width: 100%;
  }

  .theme-toggle-icon {
    display: none;
  }

  .developer-sidebar {
    gap: 18px;
  }

  .developer-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-sidebar-nav .store-eyebrow {
    grid-column: 1 / -1;
  }

  .developer-sidebar a:not(.developer-help-card) {
    font-size: 13px;
  }

  .money-setup-grid,
  .developer-catalog-meta,
  .developer-catalog-price {
    grid-template-columns: 1fr;
  }

  .developer-catalog-actions .store-button,
  .developer-catalog-actions .store-link {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .customer-hub-tabs .store-button,
  .customer-hub-subtabs .store-button,
  .dashboard-ranges .store-button,
  .dashboard-actions .store-button {
    flex: 1 1 auto;
  }
}

/* === Mobile platform hardening ownership: public/store customer, checkout, and developer mobile web === */
@media (max-width: 760px) {
  html,
  body,
  .store-app,
  .developer-main {
    max-width: 100%;
    overflow-x: hidden;
  }

  button,
  .store-button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  pre,
  code {
    max-width: 100%;
  }

  pre {
    overflow-x: auto;
  }

  .store-topbar {
    position: sticky;
    top: 0;
  }

  .store-topbar-actions {
    align-items: stretch;
    display: grid;
    gap: 10px;
    width: 100%;
  }

  .store-nav {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .store-nav a {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 42px;
    padding: 10px 12px;
    text-align: center;
  }

  .store-topbar[data-store-chrome="storefront"] {
    gap: 10px;
    min-height: 0;
    padding: 10px 14px;
  }

  .store-topbar[data-store-chrome="storefront"] .store-brand {
    gap: 10px;
  }

  .store-topbar[data-store-chrome="storefront"] .store-brand-mark {
    height: 34px;
    width: 34px;
  }

  .store-topbar[data-store-chrome="storefront"] .store-brand-mark img {
    height: 28px;
    width: 28px;
  }

  .store-topbar[data-store-chrome="storefront"] .store-brand small {
    font-size: 10px;
    margin-top: 2px;
  }

  .store-topbar[data-store-chrome="storefront"] .store-topbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: hidden;
    padding-bottom: 2px;
    width: 100%;
  }

  .store-topbar[data-store-chrome="storefront"] .store-nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .store-topbar[data-store-chrome="storefront"] .store-nav::-webkit-scrollbar {
    display: none;
  }

  .store-topbar[data-store-chrome="storefront"] .store-nav a {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .store-topbar[data-store-chrome="storefront"] .theme-toggle {
    flex: 0 0 auto;
  }

  .store-topbar[data-store-chrome="storefront"] .theme-toggle-track {
    height: 22px;
    width: 40px;
  }

  .store-topbar[data-store-chrome="storefront"] .theme-toggle-track span {
    height: 16px;
    width: 16px;
  }

  :root[data-theme="dark"] .store-topbar[data-store-chrome="storefront"] .theme-toggle-track span {
    transform: translateX(18px);
  }

  .store-topbar[data-store-chrome="storefront"] .store-avatar {
    flex: 0 0 auto;
    font-size: 11px;
    height: 34px;
    width: 34px;
  }

  .developer-main {
    padding: 20px 14px 96px;
  }

  .developer-sidebar {
    border-bottom: 1px solid var(--line);
    gap: 14px;
    padding: 16px 14px;
  }

  .developer-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-sidebar-nav .store-eyebrow {
    grid-column: 1 / -1;
  }

  .developer-sidebar a:not(.developer-help-card) {
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 13px;
    justify-content: flex-start;
    min-height: 46px;
  }

  .developer-help-card {
    align-self: stretch;
  }

  .store-hero h1,
  .product-detail h1,
  .developer-hero h1 {
    font-size: 30px;
    overflow-wrap: anywhere;
  }

  .store-summary {
    max-width: none;
    width: 100%;
  }

  .customer-hub-table,
  .workspace-table,
  .command-product-table,
  .marketing-campaign-table,
  .marketing-suppression-table {
    border: 0;
    display: grid;
    gap: 12px;
    overflow: visible !important;
  }

  .customer-hub-table [role="row"],
  .customer-hub-table.serials [role="row"],
  .customer-hub-table.available [role="row"],
  .dashboard-customer-table [role="row"],
  .workspace-table [role="row"],
  .command-product-table [role="row"],
  .marketing-campaign-table [role="row"],
  .marketing-suppression-table [role="row"] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    padding: 12px;
  }

  .customer-hub-table [role="row"]:first-child,
  .workspace-table [role="row"]:first-child,
  .command-product-table [role="row"]:first-child,
  .marketing-campaign-table [role="row"]:first-child,
  .marketing-suppression-table [role="row"]:first-child {
    display: none;
  }

  .customer-hub-table [role="cell"],
  .workspace-table [role="cell"],
  .command-product-table [role="cell"],
  .marketing-campaign-table [role="cell"],
  .marketing-suppression-table [role="cell"] {
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(94px, 0.34fr) minmax(0, 1fr);
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    padding: 0;
    text-overflow: initial !important;
    white-space: normal !important;
  }

  .customer-hub-table [role="cell"][data-label]::before,
  .workspace-table [role="cell"][data-label]::before,
  .command-product-table [role="cell"][data-label]::before,
  .marketing-campaign-table [role="cell"][data-label]::before,
  .marketing-suppression-table [role="cell"][data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .customer-hub-table [role="cell"] > *,
  .workspace-table [role="cell"] > *,
  .command-product-table [role="cell"] > *,
  .marketing-campaign-table [role="cell"] > *,
  .marketing-suppression-table [role="cell"] > * {
    min-width: 0;
  }

  .customer-hub-table [role="cell"][data-label="Actions"],
  .workspace-table [role="cell"][data-label="Actions"],
  .command-product-table [role="cell"][data-label="Actions"],
  .marketing-campaign-table [role="cell"][data-label="Actions"],
  .marketing-suppression-table [role="cell"][data-label="Actions"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-hub-table [role="cell"] .store-button,
  .workspace-table [role="cell"] .store-button,
  .command-product-table [role="cell"] .store-button,
  .marketing-campaign-table [role="cell"] .store-button {
    width: 100%;
  }

  .customer-hub-table code,
  .workspace-table code,
  .command-product-table code,
  .marketing-campaign-table code,
  .marketing-suppression-table code {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .customer-import-overlay {
    align-items: end;
    padding: 0;
  }

  .customer-import-panel {
    border-radius: 8px 8px 0 0;
    max-height: 92vh;
    max-width: none;
    width: 100%;
  }

  .customer-import-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-import-summary,
  .customer-import-actions {
    align-items: stretch;
    flex-direction: column;
  }

  /* Website Builder mobile ownership: keep branding, domain, DNS, and preview controls inside the viewport. */
  .storefront-form,
  .storefront-form *,
  .storefront-template-section,
  .storefront-template-section *,
  .storefront-domain-section,
  .storefront-domain-section *,
  .email-sending-section,
  .email-sending-section *,
  .email-dns-section,
  .email-dns-section *,
  .storefront-products,
  .storefront-products *,
  .storefront-preview,
  .storefront-preview * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .storefront-form .developer-form-section,
  .storefront-template-section,
  .storefront-domain-section,
  .email-sending-section,
  .email-dns-section,
  .storefront-products,
  .storefront-preview {
    overflow: hidden;
    padding: 14px;
  }

  .storefront-form .developer-section-header,
  .storefront-template-section .developer-section-header,
  .storefront-domain-section .developer-section-header,
  .email-sending-section .developer-section-header,
  .email-dns-section .developer-section-header {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .storefront-form .developer-field-actions,
  .storefront-template-section .developer-field-actions,
  .storefront-domain-section .developer-field-actions,
  .email-sending-section .developer-field-actions,
  .email-dns-section .developer-field-actions,
  .storefront-form .store-actions {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .storefront-form .store-button,
  .storefront-template-section .store-button,
  .storefront-domain-section .store-button,
  .email-sending-section .store-button,
  .email-dns-section .store-button,
  .storefront-products .store-button {
    justify-content: center;
    width: 100%;
  }

  .email-domain-row {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .email-sender-row {
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px;
  }

  .email-sender-purpose,
  .email-domain-lock {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .email-sender-purpose strong,
  .email-sender-purpose p,
  .email-domain-lock span {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: initial;
    white-space: normal;
  }

  .email-row-chevron {
    display: none;
  }

  .email-dns-section .developer-table-wrap {
    border: 0;
    overflow: visible;
  }

  .storefront-domain-section .developer-table-wrap {
    border: 0;
    overflow: visible;
  }

  .email-dns-section .developer-table,
  .email-dns-section .developer-table thead,
  .email-dns-section .developer-table tbody,
  .email-dns-section .developer-table tr,
  .email-dns-section .developer-table td,
  .storefront-domain-section .developer-table,
  .storefront-domain-section .developer-table thead,
  .storefront-domain-section .developer-table tbody,
  .storefront-domain-section .developer-table tr,
  .storefront-domain-section .developer-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .email-dns-section .developer-table,
  .storefront-domain-section .developer-table {
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .email-dns-section .developer-table thead,
  .storefront-domain-section .developer-table thead {
    display: none;
  }

  .email-dns-section .developer-table tr,
  .storefront-domain-section .developer-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
  }

  .email-dns-section .developer-table td,
  .storefront-domain-section .developer-table td {
    border: 0;
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(94px, 0.34fr) minmax(0, 1fr);
    overflow-wrap: anywhere;
    padding: 7px 0;
    white-space: normal;
  }

  .email-dns-section .developer-table td[data-label]::before,
  .storefront-domain-section .developer-table td[data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
  }

  .email-dns-section code,
  .storefront-domain-section code,
  .dns-copy-value code {
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: initial;
    white-space: normal;
  }

  .dns-copy-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .dns-copy-button {
    justify-self: stretch;
  }

  .storefront-template-preview {
    max-height: none;
    overflow-x: hidden;
    padding: 10px;
  }

  .storefront-device-frame .storefront-template-preview {
    max-height: 560px;
    min-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }

  .storefront-device-frame .storefront-template-preview .storefront-public-site {
    width: 100%;
  }

  .storefront-template-preview .storefront-public-site,
  .storefront-template-preview .storefront-public-hero,
  .storefront-template-preview .storefront-site-nav,
  .storefront-template-preview .storefront-content-band,
  .storefront-template-preview .storefront-content-split,
  .storefront-template-preview .showcase-hero,
  .storefront-template-preview .showcase-split,
  .storefront-template-preview .showcase-demo-center,
  .storefront-template-preview .showcase-about-library,
  .storefront-template-preview .showcase-about-card,
  .storefront-template-preview .showcase-library-card,
  .storefront-template-preview .storefront-catalog-row,
  .storefront-template-preview .store-grid,
  .storefront-template-preview .storefront-company-grid,
  .storefront-template-preview .showcase-category-grid,
  .storefront-template-preview .showcase-product-grid,
  .storefront-template-preview .showcase-usecase-grid,
  .storefront-template-preview .showcase-video-grid,
  .storefront-template-preview .showcase-trust,
  .storefront-template-preview .showcase-footer-grid,
  .storefront-template-preview .showcase-quick-access > div,
  .storefront-template-preview .showcase-stats,
  .storefront-template-preview .flow-hero,
  .storefront-template-preview .flow-stats,
  .storefront-template-preview .flow-goal-grid,
  .storefront-template-preview .flow-section-header,
  .storefront-template-preview .flow-path-grid,
  .storefront-template-preview .flow-stage-grid,
  .storefront-template-preview .flow-setup-steps,
  .storefront-template-preview .flow-product-row,
  .storefront-template-preview .storefront-site-metrics,
  .storefront-template-preview .storefront-site-actions,
  .storefront-template-preview .storefront-catalog-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .storefront-product-row,
  .storefront-product-controls,
  .storefront-visibility-guide,
  .storefront-featured-product,
  .storefront-template-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .storefront-featured-copy {
    padding: 0 0 14px;
  }

  .storefront-featured-media {
    min-height: 160px;
  }

  .developer-wizard-sidebar {
    border-right: 0;
  }

  .developer-wizard-actions {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top: 1px solid var(--line);
    bottom: 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.16);
    left: 0;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    position: sticky;
    right: 0;
    z-index: 10;
  }

  .product-detail-panel {
    position: static;
  }

  .product-page {
    padding: 18px 14px 64px;
  }

  .product-hero-premium,
  .product-content-grid,
  .product-demos-card,
  .product-card-row,
  .product-description-feature-row,
  .product-highlight-grid,
  .product-included-grid,
  .product-spec-grid {
    grid-template-columns: 1fr;
  }

  .product-media-column {
    grid-template-columns: 1fr;
  }

  .product-media-stage,
  .product-media-thumbs {
    grid-column: 1;
  }

  .product-media-stage {
    grid-row: 1;
    height: auto;
    min-height: 0;
  }

  .product-media-thumbs {
    flex-direction: row;
    grid-row: 2;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px;
  }

  .product-media-thumb {
    flex-basis: 74px;
    height: 64px;
  }

  .product-buy-card,
  .product-content-side,
  .product-section-tabs {
    position: static;
  }

  .product-demo-panel + .product-demo-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .product-description-feature-row .product-page-card,
  .product-description-feature-row .product-page-card:first-child,
  .product-description-feature-row .product-page-card + .product-page-card {
    border-left: 1px solid var(--line);
    border-radius: 8px;
  }

  .product-identity {
    align-self: start;
  }

  .product-identity h1 {
    font-size: 32px;
  }

  .product-audio-row {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .product-audio-row small {
    grid-column: 2;
  }

  .auth-overlay {
    align-items: end;
    padding: 0;
  }

  .auth-panel {
    border-radius: 8px 8px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    width: 100%;
  }

  .library-file,
  .product-card-footer,
  .developer-catalog-actions,
  .store-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .library-file .store-button,
  .product-card-actions .store-button,
  .product-detail-panel .store-button {
    width: 100%;
  }

  .v1-cinematic-hero,
  .v1-modern-split-hero,
  .v1-modern-bundle,
  .v1-modern-proof,
  .v1-cinematic-demo-card,
  .v1-immersive-hero,
  .v1-immersive-video-card {
    grid-template-columns: 1fr;
  }

  .v1-home-product-row,
  .v1-home-catalog-grid,
  .v1-cinematic-statement > div,
  .v1-home-trust-row,
  .v1-immersive-trust-strip,
  .v1-immersive-benefits,
  .v1-immersive-shop-strip,
  .v1-immersive-experience-grid,
  .v1-immersive-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v1-immersive-hero {
    min-height: 680px;
  }

  .v1-immersive-heading.is-row {
    align-items: start;
    display: grid;
  }

  .v1-immersive-video-card > button {
    min-height: 220px;
  }

  .website-home-template-gallery {
    grid-template-columns: 1fr;
  }

  .website-home-template-scale {
    transform: translateX(-50%) scale(0.19);
  }
}

@media (max-width: 430px) {
  .developer-sidebar-nav,
  .store-nav {
    grid-template-columns: 1fr;
  }

  .store-app > :not(.developer-shell) {
    padding-left: 14px;
    padding-right: 14px;
  }

  .store-hero,
  .developer-section-header,
  .dashboard-ranges,
  .dashboard-actions,
  .customer-hub-tabs,
  .customer-hub-subtabs {
    align-items: stretch;
  }

  .v1-home-immersive :is(.v1-immersive-trust-strip, .v1-immersive-section, .v1-immersive-community, .v1-immersive-shop-strip, .v1-immersive-benefits, .v1-immersive-video) {
    width: min(100% - 28px, 1180px);
  }

  .v1-immersive-trust-strip,
  .v1-immersive-benefits,
  .v1-immersive-shop-strip,
  .v1-immersive-experience-grid,
  .v1-immersive-products,
  .v1-immersive-community form {
    grid-template-columns: 1fr;
  }

  .v1-immersive-hero {
    min-height: 600px;
    padding-inline: 18px;
  }

  .v1-immersive-copy h1 {
    font-size: 44px;
  }
}
/* === Owner command center === */
.owner-shell .developer-main {
  gap: 18px;
}

.owner-sidebar .developer-sidebar-nav a {
  min-height: 38px;
}

.owner-hero {
  align-items: flex-start;
  gap: 18px;
}

.owner-search {
  display: flex;
  gap: 8px;
  align-items: center;
  width: min(100%, 430px);
}

.owner-search input {
  min-width: 0;
  flex: 1;
}

.owner-search-results {
  width: min(100%, 430px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.owner-search-results section + section {
  margin-top: 10px;
}

.owner-search-results ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.owner-search-results li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--border-subtle);
}

.owner-section {
  margin-top: 0;
}

.owner-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-kpi.risk {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.owner-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.owner-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.owner-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.owner-table th,
.owner-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.owner-table th {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-muted);
}

.owner-table tr:last-child td {
  border-bottom: 0;
}

.owner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.owner-link {
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 54%, transparent);
  text-underline-offset: 3px;
  transition: color 0.16s ease, text-decoration-color 0.16s ease, background-color 0.16s ease;
}

.owner-link:hover {
  color: color-mix(in srgb, var(--accent-2) 82%, var(--text));
  text-decoration-color: currentColor;
}

.owner-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  text-decoration-color: currentColor;
}

.owner-link.external::after {
  content: "↗";
  display: inline-block;
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1;
  margin-left: 5px;
  transform: translateY(-1px);
}

.owner-storefront-actions,
.owner-preview-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.owner-muted,
.owner-unavailable {
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}

.owner-unavailable {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.82rem;
  font-weight: 650;
}

.owner-preview-notice {
  margin: 0;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.owner-admin-preview {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.owner-admin-preview .storefront-public-site {
  min-height: 70vh;
}

.owner-badge.owner,
.owner-badge.admin,
.owner-badge.ok,
.owner-badge.live {
  color: #166534;
  border-color: rgba(22, 101, 52, 0.25);
  background: rgba(34, 197, 94, 0.1);
}

.owner-badge.test,
.owner-badge.medium,
.owner-badge.monitoring {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.12);
}

.owner-badge.risk,
.owner-badge.high,
.owner-badge.critical,
.owner-badge.missing {
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.1);
}

.owner-config-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
}

.owner-muted {
  margin: 14px 0 0;
  color: var(--muted);
}

.owner-support-group + .owner-support-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.owner-watchlist-form {
  display: grid;
  gap: 10px;
}

.owner-watchlist-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 700;
}

.payment-issue-filters {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 0.8fr)) auto;
  min-width: min(100%, 860px);
}

.payment-issue-filters label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-width: 0;
}

.payment-issue-filters input,
.payment-issue-filters select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 38px;
  padding: 0 10px;
  width: 100%;
}

.owner-booking-filters {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(140px, 0.45fr) minmax(220px, 1fr) auto;
  min-width: min(100%, 620px);
}

.owner-booking-filters label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
  min-width: 0;
  text-transform: uppercase;
}

.owner-booking-filters input,
.owner-booking-filters select {
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 38px;
  padding: 0 10px;
  width: 100%;
}

.owner-booking-kpis.owner-kpi-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-booking-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-booking-detail-toggle {
  min-width: 0;
}

.owner-booking-detail-toggle summary {
  cursor: pointer;
  list-style: none;
}

.owner-booking-detail-toggle summary::-webkit-details-marker {
  display: none;
}

.owner-booking-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  min-width: min(460px, 72vw);
  padding: 12px;
  white-space: normal;
}

.owner-booking-details div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
}

.owner-booking-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.owner-booking-details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.payment-issue-table td {
  vertical-align: top;
}

.payment-issue-details {
  min-width: 0;
}

.payment-issue-details summary {
  cursor: pointer;
  list-style: none;
}

.payment-issue-details summary::-webkit-details-marker {
  display: none;
}

.payment-issue-detail-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  min-width: min(720px, 78vw);
  padding: 14px;
  white-space: normal;
}

.payment-issue-detail-grid h3 {
  font-size: 13px;
  margin: 0 0 8px;
}

.payment-issue-detail-grid p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.payment-issue-facts {
  display: grid;
  gap: 7px;
  margin: 0;
}

.payment-issue-facts div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
}

.payment-issue-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.payment-issue-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.payment-issue-mini-list {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.payment-issue-mini-list li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding-top: 7px;
}

.payment-issue-mini-list span,
.payment-issue-table small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

@media (max-width: 980px) {
  .website-builder-step-layout,
  .website-builder-card-grid,
  .website-builder-support-grid,
  .website-builder-email-grid,
  .website-builder-review-grid,
  .website-builder-advanced-grid,
  .website-builder-page-grid,
  .website-builder-theme-grid,
  .website-builder-nav-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-builder-workspace,
  .website-builder-page-panel,
  .website-builder-edit-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-builder-page-sidebar {
    position: static;
  }

  .website-builder-page-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .website-builder-toolbar-groups {
    justify-content: flex-start;
  }

  .website-builder-template-option {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-builder-preview {
    position: static;
  }

  .website-builder-preview-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .website-template-designer {
    min-height: auto;
  }

  .website-templates-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-template-sidebar,
  .website-template-main {
    position: static;
  }

  .website-template-page-header {
    grid-template-columns: 1fr;
  }

  .website-template-page-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .website-template-device-tabs,
  .website-template-app-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .website-template-sidebar {
    border-bottom: 1px solid rgba(100, 116, 139, 0.24);
    border-right: 0;
    max-height: none;
  }

  .website-template-sidebar section:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-template-sidebar section:first-child p {
    grid-column: 1 / -1;
  }

  .website-template-product-preview,
  .website-template-generic-hero,
  .website-template-preview-lower,
  .website-template-options-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-kpi-row,
  .owner-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-issue-filters,
  .payment-issue-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .website-template-preview-page {
    transform: none;
    width: 100%;
  }

  .website-builder-page-meta,
  .website-builder-page-actions,
  .website-builder-publishing-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-builder-page-live-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-template-main,
  .website-template-product-copy,
  .website-template-product-media,
  .website-template-generic-hero {
    padding: 16px;
  }

  .website-template-sidebar section:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .website-template-browser-nav,
  .website-template-preview-tabs,
  .website-template-gallery-row,
  .website-template-product-actions,
  .website-template-app-actions {
    overflow-x: auto;
  }

  .website-template-browser-nav {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 16px;
  }

  .website-template-browser-nav nav {
    justify-content: flex-start;
  }

  .website-template-current-card,
  .website-template-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-kpi-row,
  .owner-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .owner-search {
    width: 100%;
    flex-wrap: wrap;
  }

  .owner-search button {
    width: 100%;
  }

  .payment-issue-filters {
    min-width: 0;
    width: 100%;
  }

  .payment-issue-filters .store-button,
  .owner-booking-filters .store-button {
    width: 100%;
  }

  .payment-issue-detail-grid {
    min-width: 0;
  }

  .owner-booking-filters,
  .owner-booking-kpis.owner-kpi-row {
    grid-template-columns: 1fr;
  }

  .owner-bookings-table-wrap {
    border: 0;
    overflow: visible;
  }

  .owner-bookings-table {
    min-width: 0;
  }

  .owner-bookings-table thead {
    display: none;
  }

  .owner-bookings-table,
  .owner-bookings-table tbody,
  .owner-bookings-table tr,
  .owner-bookings-table td {
    display: block;
    width: 100%;
  }

  .owner-bookings-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
  }

  .owner-bookings-table td {
    border: 0;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
    overflow-wrap: anywhere;
    padding: 7px 0;
    white-space: normal;
  }

  .owner-bookings-table td[data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
  }

  .owner-booking-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-booking-actions .store-button {
    width: 100%;
  }

  .owner-booking-details {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .product-link-upload-row {
    grid-template-columns: 1fr;
  }
}

.partner-hub-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.partner-hub-header h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  margin: 4px 0 0;
}

.partner-hub-metrics,
.partner-hub-layout,
.partner-hub-detail-grid {
  display: grid;
  gap: 14px;
}

.partner-hub-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.partner-hub-layout,
.partner-hub-detail-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  margin-bottom: 18px;
}

.partner-hub-metric,
.partner-hub-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.partner-hub-metric {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
}

.partner-hub-metric span,
.partner-hub-metric small,
.partner-hub-panel-head p,
.partner-hub-list-item small,
.partner-hub-row small {
  color: var(--muted);
}

.partner-hub-metric strong {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.partner-hub-panel {
  min-width: 0;
  padding: 18px;
}

.partner-hub-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.partner-hub-panel-head h2 {
  font-size: 20px;
  margin: 0;
}

.partner-hub-panel-head p {
  margin: 4px 0 0;
}

.partner-hub-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.partner-hub-row {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.35fr) minmax(90px, 0.5fr) minmax(80px, 0.35fr) minmax(100px, 0.45fr) minmax(100px, 0.45fr);
  min-height: 58px;
  padding: 12px 14px;
  text-decoration: none;
}

.compact-table .partner-hub-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(90px, 0.5fr) minmax(120px, 0.7fr) minmax(100px, 0.45fr) minmax(90px, 0.35fr);
}

.partner-hub-row + .partner-hub-row {
  border-top: 1px solid var(--line);
}

.partner-hub-row-head {
  background: var(--surface-muted, rgba(15, 23, 42, 0.04));
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  min-height: 0;
  text-transform: uppercase;
}

.partner-hub-row span,
.partner-hub-list-item span {
  min-width: 0;
}

.partner-hub-row strong,
.partner-hub-row small,
.partner-hub-list-item strong,
.partner-hub-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-hub-form {
  display: grid;
  gap: 12px;
}

.partner-hub-inline-form {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  padding-top: 16px;
}

.partner-hub-inline-form.tight {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

.partner-hub-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner-hub-form label,
.partner-hub-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.partner-hub-form label span,
.partner-hub-form-grid label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.partner-hub-form input,
.partner-hub-form select,
.partner-hub-form textarea {
  min-width: 0;
  width: 100%;
}

.partner-hub-check {
  align-items: center;
  display: flex !important;
  gap: 8px;
}

.partner-hub-check input {
  width: auto;
}

.partner-hub-check-grid,
.partner-hub-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partner-hub-stack-item {
  align-items: flex-start;
  gap: 10px;
}

.partner-hub-stack-item > span {
  min-width: min(100%, 260px);
}

.partner-hub-wide {
  grid-column: 1 / -1;
}

.partner-status {
  align-items: center;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 999px;
  color: #0f766e;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  text-transform: capitalize;
  white-space: nowrap;
}

.partner-status-paused,
.partner-status-pending,
.partner-status-open {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.26);
  color: #92400e;
}

.partner-status-suspended,
.partner-status-ended,
.partner-status-revoked,
.partner-status-refunded {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.22);
  color: #991b1b;
}

.partner-hub-terms dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.partner-hub-terms div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.partner-hub-terms dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.partner-hub-terms dd {
  margin: 4px 0 0;
}

.partner-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.partner-relationship-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  min-width: 0;
}

.partner-relationship-breadcrumb {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
}

.partner-relationship-breadcrumb a,
.partner-relationship-breadcrumb strong {
  color: inherit;
  text-decoration: none;
}

.partner-relationship-hero-main {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.partner-avatar.hero {
  background: rgba(124, 58, 237, 0.34);
  border-color: rgba(167, 139, 250, 0.35);
  color: #fff;
  font-size: 24px;
  height: 66px;
  width: 66px;
}

.partner-relationship-title {
  min-width: 0;
}

.partner-relationship-title > div:first-child {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.partner-relationship-title h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
  margin: 0;
}

.partner-relationship-title p,
.partner-relationship-title small {
  color: var(--muted);
  display: block;
  margin-top: 6px;
}

.partner-relationship-title > small:not(.partner-relationship-meta) {
  display: none;
}

.partner-relationship-meta {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.partner-relationship-meta span {
  color: var(--muted);
}

.partner-relationship-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.partner-relationship-badges span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 9px;
}

.partner-relationship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

.partner-relationship-actions form {
  margin: 0;
}

.partner-relationship-metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.partner-relationship-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  min-width: 0;
  overflow-x: auto;
}

.partner-relationship-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  padding: 0 0 12px;
  text-decoration: none;
}

.partner-relationship-tabs a.active,
.partner-relationship-tabs a:hover {
  border-color: var(--accent, #ff6a00);
  color: var(--accent, #ff6a00);
}

.partner-relationship-overview {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.relationship-profile-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
}

.relationship-main-column,
.relationship-side-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.relationship-kpi-strip {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.relationship-health-body {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 160px minmax(0, 1fr);
  margin-bottom: 16px;
}

.relationship-health-ring {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, var(--surface, #071522) 58%, transparent 59%),
    conic-gradient(#22c55e calc(var(--health, 0) * 1%), rgba(148, 163, 184, 0.18) 0);
  border-radius: 999px;
  display: grid;
  justify-items: center;
  place-content: center;
}

.relationship-health-ring strong {
  font-size: 30px;
  line-height: 1;
}

.relationship-health-ring small {
  color: #22c55e;
  font-weight: 800;
}

.relationship-health-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relationship-health-metrics div {
  border-left: 2px solid rgba(148, 163, 184, 0.3);
  padding-left: 10px;
}

.relationship-health-metrics div.is-green { border-color: #22c55e; }
.relationship-health-metrics div.is-blue { border-color: #38bdf8; }
.relationship-health-metrics div.is-amber { border-color: #f59e0b; }

.relationship-health-metrics span,
.relationship-side-list dt,
.partner-financial-grid span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
}

.relationship-health-metrics strong,
.relationship-side-list dd {
  display: block;
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relationship-attention-list,
.relationship-quick-actions,
.relationship-customer-list,
.relationship-timeline {
  display: grid;
  gap: 8px;
}

.relationship-attention-list a,
.relationship-quick-actions a,
.relationship-customer-list a,
.relationship-timeline > div {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
}

.relationship-attention-list a {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.relationship-attention-list i {
  align-items: center;
  background: rgba(245, 158, 11, 0.14);
  border-radius: 7px;
  color: #f59e0b;
  display: inline-flex;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.relationship-attention-list a.is-critical i {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.relationship-attention-list a.is-message i {
  background: rgba(139, 92, 246, 0.16);
  color: #a78bfa;
}

.relationship-side-list {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.relationship-side-list div {
  min-width: 0;
}

.relationship-side-list dd {
  margin: 2px 0 0;
}

.relationship-side-amount {
  display: block;
  font-size: 28px;
  margin-bottom: 4px;
}

.relationship-quick-actions a,
.relationship-customer-list a {
  grid-template-columns: minmax(0, 1fr) auto;
}

.relationship-quick-actions span {
  color: var(--muted);
}

.relationship-timeline > div {
  grid-template-columns: 88px minmax(0, 1fr);
}

.relationship-timeline time {
  color: var(--muted);
  font-size: 12px;
}

.partner-financial-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-financial-grid div {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.partner-financial-grid strong {
  display: block;
  font-size: 20px;
  margin-top: 6px;
}

.partner-relationship-summary dl {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.partner-relationship-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.partner-relationship-summary dd {
  margin: 4px 0 0;
}

.partner-setup-panel progress,
.relationship-product-rank progress,
.partner-api-rows progress {
  accent-color: #22c55e;
  width: 100%;
}

.relationship-checklist {
  margin-top: 14px;
}

.relationship-checklist > div,
.relationship-activity-list > div,
.relationship-product-rank > div,
.partner-campaign-list > div,
.partner-campaign-list > a {
  align-items: center;
  border-top: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  text-decoration: none;
}

.relationship-checklist > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.relationship-checklist b {
  align-items: center;
  background: rgba(148, 163, 184, 0.13);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.relationship-checklist b.done {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
}

.relationship-activity-list > div {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.relationship-activity-list i {
  align-items: center;
  background: rgba(255, 106, 0, 0.12);
  border-radius: 7px;
  color: var(--accent, #ff6a00);
  display: inline-flex;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.relationship-activity-list time,
.partner-conversation-card time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.relationship-product-rank > div {
  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.8fr) auto;
}

.relationship-product-rank span,
.relationship-activity-list span,
.relationship-checklist span,
.partner-campaign-list span {
  min-width: 0;
}

.relationship-product-rank strong,
.relationship-product-rank small,
.relationship-activity-list strong,
.relationship-activity-list small,
.relationship-checklist strong,
.relationship-checklist small,
.partner-campaign-list strong,
.partner-campaign-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-campaign-list > div,
.partner-campaign-list > a {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.partner-hub-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.partner-hub-row-actions form {
  margin: 0;
}

.partner-hub-reply-form {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) auto;
  min-width: min(100%, 340px);
}

.partner-hub-reply-form input {
  min-width: 0;
  width: 100%;
}

.partner-assets-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-assets-grid div {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.partner-assets-grid small {
  color: var(--muted);
}

.partner-api-health-panel {
  margin-bottom: 0;
}

.partner-conversation-card.compact {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
}

.partner-hub-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.partner-hub-list-item {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  min-height: 58px;
  padding: 12px 14px;
}

.partner-hub-list-item > .partner-hub-form,
.partner-hub-list-item > .partner-hub-reply-form {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.partner-hub-list-item > .partner-hub-inline-form.tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner-hub-list-item + .partner-hub-list-item {
  border-top: 1px solid var(--line);
}

.partner-token-reveal,
.partner-hub-empty {
  background: var(--surface-muted, rgba(15, 23, 42, 0.04));
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px;
}

.partner-token-reveal {
  display: grid;
  gap: 8px;
}

.partner-token-reveal code,
.partner-hub-list-item code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.partner-api-docs {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.partner-api-docs code,
.partner-api-example {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.partner-api-docs code {
  padding: 10px 12px;
}

.partner-api-example {
  margin: 0;
  padding: 14px;
}

.partner-hub-header > div:first-child {
  max-width: 780px;
}

.partner-hub-header p:not(.store-eyebrow) {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 0;
}

.partner-hub-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.partner-hub-hero-actions b {
  align-items: center;
  background: var(--accent, #ff6a00);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  margin-left: 6px;
  min-height: 20px;
  min-width: 20px;
  padding: 0 6px;
}

.partner-hub-metrics {
  grid-template-columns: repeat(8, minmax(132px, 1fr));
  overflow-x: auto;
  padding-bottom: 2px;
}

.partner-hub-metric {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    var(--surface);
  color: inherit;
  min-height: 118px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.partner-hub-metric:hover {
  border-color: rgba(255, 106, 0, 0.42);
  transform: translateY(-1px);
}

.partner-hub-metric i {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.partner-hub-metric.is-purple i { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
.partner-hub-metric.is-amber i { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.partner-hub-metric.is-green i { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
.partner-hub-metric.is-blue i { background: rgba(14, 165, 233, 0.14); color: #38bdf8; }

.partner-hub-command-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
  margin-bottom: 18px;
}

.partner-hub-wide-panel {
  min-width: 0;
}

.partner-link {
  color: var(--accent, #ff6a00);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.partner-link:hover {
  text-decoration: underline;
}

.partner-hub-discovery,
.partner-directory-page {
  min-width: 0;
  overflow: hidden;
}

.partner-discovery-filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 16px;
  min-width: 0;
}

.partner-discovery-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.partner-discovery-filters label:first-child {
  grid-column: span 2;
}

.partner-discovery-filters span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.partner-discovery-filters input,
.partner-discovery-filters select {
  box-sizing: border-box;
  font-size: 14px;
  min-height: 38px;
  min-width: 0;
  width: 100%;
}

.partner-discovery-grid {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: stretch;
  min-width: 0;
}

.partner-discovery-card,
.partner-request-card,
.partner-conversation-card,
.partner-api-summary,
.partner-cta-card {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.partner-discovery-card {
  background: rgba(15, 25, 38, 0.72);
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 260px;
  min-height: 300px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  width: 100%;
}

.partner-discovery-card * {
  box-sizing: border-box;
  min-width: 0;
  word-break: normal;
}

.partner-card-top {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
}

.partner-card-title {
  min-width: 0;
  overflow: hidden;
}

.partner-card-top h3 {
  display: -webkit-box;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 3px;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.partner-card-top small {
  font-size: 13px;
  line-height: 1.2;
}

.partner-card-top small,
.partner-card-meta small,
.partner-card-url,
.partner-region,
.partner-discovery-card p,
.partner-tags span,
.partner-request-card small,
.partner-conversation-card small,
.partner-api-summary small,
.partner-api-rows small,
.partner-checklist small,
.partner-workflow small,
.partner-hub-empty span {
  color: var(--muted);
}

.partner-discovery-card p {
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  min-height: calc(13px * 1.35 * 3);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.partner-card-meta {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.partner-card-meta small {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-card-status {
  min-width: 0;
  overflow: hidden;
}

.partner-card-status .partner-status {
  font-size: 11px;
  min-height: 24px;
  max-width: 78px;
  overflow: hidden;
  padding: 3px 8px;
  text-overflow: ellipsis;
}

.partner-avatar {
  align-items: center;
  background: #050a12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  letter-spacing: 0;
  width: 44px;
}

.partner-avatar.mini {
  font-size: 11px;
  height: 26px;
  margin-right: 8px;
  width: 26px;
}

.partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.partner-tags span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-sizing: border-box;
  flex: 0 1 auto;
  font-size: 11px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-tags span:nth-child(n+4) {
  display: none;
}

.partner-card-url {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-card-actions,
.partner-request-actions,
.partner-hub-empty-actions,
.partner-hub-cta > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partner-card-actions {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  min-width: 0;
  width: 100%;
}

.partner-card-actions .store-button,
.partner-card-actions form,
.partner-card-actions button {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.partner-card-actions .store-button,
.partner-card-actions button {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-request-list,
.partner-conversation-list,
.partner-api-rows,
.partner-checklist {
  display: grid;
  gap: 10px;
}

.partner-request-card {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.partner-request-actions {
  grid-column: 1 / -1;
}

.partner-command-table,
.partner-orders-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.partner-command-row,
.partner-orders-row {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 12px;
  min-width: 920px;
  padding: 13px 14px;
  text-decoration: none;
}

.partner-command-row {
  grid-template-columns: minmax(170px, 1.35fr) 92px 72px 112px 104px 104px 98px 100px 24px;
}

.partner-orders-row {
  grid-template-columns: 110px 140px minmax(160px, 1fr) minmax(140px, 0.9fr) 80px 96px 90px 110px;
}

.partner-command-row + .partner-command-row,
.partner-orders-row + .partner-orders-row {
  border-top: 1px solid var(--line);
}

.partner-command-row:not(.partner-command-head):hover,
.partner-orders-row:not(.partner-command-head):hover {
  background: rgba(255, 106, 0, 0.045);
}

.partner-command-head {
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.partner-command-row span,
.partner-orders-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-health {
  border-radius: 999px;
  display: inline-flex;
  font-style: normal;
  font-weight: 900;
  padding: 4px 8px;
}

.partner-health.is-good {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.partner-health.is-warn {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}

.partner-health.is-bad {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.partner-health.is-neutral {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}

.partner-conversation-card {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 12px;
  text-decoration: none;
}

.partner-conversation-card span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.partner-conversation-card strong,
.partner-conversation-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-unread {
  align-items: center;
  background: var(--accent, #ff6a00);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.partner-api-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  padding: 14px;
}

.partner-api-summary > div,
.partner-api-rows > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.partner-api-rows > div {
  align-items: center;
  grid-template-columns: minmax(130px, 1fr) auto minmax(80px, 0.8fr) auto;
}

.partner-api-rows progress {
  accent-color: #22c55e;
  width: 100%;
}

.partner-workflow {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.partner-workflow div {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 18px;
  text-align: center;
}

.partner-workflow span {
  align-items: center;
  background: rgba(255, 106, 0, 0.13);
  border-radius: 999px;
  color: var(--accent, #ff6a00);
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  justify-self: center;
  width: 44px;
}

.partner-checklist a {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  text-decoration: none;
}

.partner-checklist b {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent, #ff6a00);
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.partner-checklist span {
  display: grid;
  gap: 3px;
}

.partner-hub-cta {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 106, 0, 0.09), rgba(255, 106, 0, 0.02)),
    var(--surface);
  border: 1px solid rgba(255, 106, 0, 0.42);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 18px;
  padding: 22px;
}

.partner-hub-cta h2 {
  margin: 0 0 4px;
}

.partner-hub-cta p {
  color: var(--muted);
  margin: 0;
}

@media (max-width: 1080px) {
  .partner-hub-metrics {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }

  .partner-hub-layout,
  .partner-hub-detail-grid,
  .partner-hub-command-grid,
  .relationship-profile-grid {
    grid-template-columns: 1fr;
  }

  .partner-relationship-hero-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .partner-relationship-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .partner-relationship-metrics {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .relationship-health-body {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .partner-assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .partner-hub-header,
  .partner-hub-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .partner-relationship-hero-main {
    grid-template-columns: 1fr;
  }

  .partner-avatar.hero {
    height: 54px;
    width: 54px;
  }

  .partner-relationship-actions,
  .partner-relationship-actions .store-button,
  .partner-relationship-actions form,
  .partner-relationship-actions button {
    width: 100%;
  }

  .partner-hub-metrics,
  .partner-hub-form-grid,
  .partner-hub-inline-form,
  .partner-hub-inline-form.tight,
  .partner-hub-terms dl,
  .partner-relationship-metrics,
  .partner-relationship-summary dl,
  .relationship-health-body,
  .relationship-health-metrics,
  .partner-financial-grid,
  .partner-assets-grid,
  .partner-discovery-grid,
  .partner-discovery-filters,
  .partner-api-summary,
  .partner-workflow,
  .partner-hub-cta {
    grid-template-columns: 1fr;
  }

  .partner-discovery-filters label:first-child {
    grid-column: auto;
  }

  .partner-discovery-card {
    max-width: none;
  }

  .partner-hub-hero-actions,
  .partner-card-actions,
  .partner-request-actions,
  .partner-hub-cta > div:last-child {
    justify-content: flex-start;
  }

  .partner-hub-table {
    border: 0;
    overflow: visible;
  }

  .partner-hub-row,
  .compact-table .partner-hub-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    grid-template-columns: 1fr;
    margin-bottom: 10px;
  }

  .partner-hub-row-head {
    display: none;
  }

  .partner-hub-list-item {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .partner-command-table,
  .partner-orders-table {
    border: 0;
    overflow: visible;
  }

  .partner-command-row,
  .partner-orders-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    grid-template-columns: 1fr;
    margin-bottom: 10px;
    min-width: 0;
  }

  .partner-command-head {
    display: none;
  }

  .partner-conversation-card,
  .partner-api-rows > div,
  .relationship-activity-list > div,
  .relationship-product-rank > div,
  .relationship-timeline > div,
  .partner-campaign-list > div,
  .partner-campaign-list > a,
  .partner-hub-reply-form {
    grid-template-columns: 1fr;
  }

  .relationship-activity-list time,
  .partner-conversation-card time {
    white-space: normal;
  }
}

/* Developer products catalog */
.products-catalog-page{display:grid;gap:22px;min-width:0}.products-catalog-header{align-items:end;display:flex;gap:18px;justify-content:space-between;min-width:0}.products-catalog-header h1{color:var(--text);font-size:28px;line-height:1.15;margin:0 0 10px}.products-catalog-header p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.products-catalog-header-actions,.catalog-actions{align-items:center;display:flex;gap:10px}.products-summary-cards{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}.products-summary-card{align-items:flex-start;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,#0b2234),color-mix(in srgb,var(--surface-2) 88%,#102d3f));border:1px solid var(--line);border-radius:8px;display:flex;gap:14px;min-height:104px;min-width:0;padding:18px}.products-summary-icon{align-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:8px;color:var(--accent);display:inline-flex;flex:0 0 36px;font-size:14px;font-weight:800;height:36px;justify-content:center;width:36px}.products-summary-icon.success{background:color-mix(in srgb,var(--success) 14%,transparent);border-color:color-mix(in srgb,var(--success) 28%,transparent);color:var(--success)}.products-summary-icon.info{background:color-mix(in srgb,#22d3ee 14%,transparent);border-color:color-mix(in srgb,#22d3ee 28%,transparent);color:#67e8f9}.products-summary-icon.warning{background:color-mix(in srgb,#f59e0b 14%,transparent);border-color:color-mix(in srgb,#f59e0b 28%,transparent);color:#fbbf24}.products-summary-icon.danger{background:color-mix(in srgb,#ef4444 14%,transparent);border-color:color-mix(in srgb,#ef4444 28%,transparent);color:#f87171}.products-summary-card p,.products-summary-card small{color:var(--muted);display:block;font-size:12px;margin:0}.products-summary-card strong{color:var(--text);display:block;font-size:23px;line-height:1.2;margin:5px 0 7px}.catalog-toolbar{align-items:end;display:grid;gap:10px;grid-template-columns:minmax(220px,1.55fr) minmax(116px,.65fr) minmax(120px,.7fr) minmax(132px,.78fr) minmax(130px,.78fr) auto minmax(160px,.95fr) minmax(106px,.58fr) auto auto;margin:6px 0 0;min-width:0}.catalog-toolbar .store-field span{height:0;opacity:0;overflow:hidden;position:absolute;width:0}.catalog-toolbar input,.catalog-toolbar select{background:color-mix(in srgb,var(--surface) 84%,#061522);border-color:var(--line);min-height:42px}.catalog-search input{padding-left:40px}.catalog-reset,.catalog-apply{min-height:42px}.catalog-view-toggle{display:flex;gap:8px}.catalog-view-toggle button,.icon-button{align-items:center;background:color-mix(in srgb,var(--surface) 86%,#061522);border:1px solid var(--line);border-radius:6px;color:var(--soft);display:inline-flex;font-size:12px;font-weight:700;height:42px;justify-content:center;min-width:42px;padding:0 10px}.catalog-view-toggle button.active,.catalog-view-toggle button:hover,.icon-button:hover{border-color:var(--accent);color:var(--accent)}.products-table-card{background:color-mix(in srgb,var(--surface) 92%,#071826);border:1px solid var(--line);border-radius:8px;overflow-x:auto;overflow-y:visible}.products-catalog-table{border-collapse:collapse;color:var(--soft);font-size:14px;min-width:1080px;table-layout:fixed;width:100%}.products-catalog-table th{background:color-mix(in srgb,var(--surface-2) 72%,#071826);color:var(--muted);font-size:12px;font-weight:700;padding:14px 16px;text-align:left}.products-catalog-table th:nth-child(1){width:26%}.products-catalog-table th:nth-child(2){width:9%}.products-catalog-table th:nth-child(3){width:10%}.products-catalog-table th:nth-child(4){width:10%}.products-catalog-table th:nth-child(5){width:9%}.products-catalog-table th:nth-child(6){width:10%}.products-catalog-table th:nth-child(7){width:10%}.products-catalog-table th:nth-child(8){width:10%}.products-catalog-table th:nth-child(9){width:8%}.products-catalog-table td{border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);padding:12px 16px;vertical-align:middle}.products-catalog-table tr{height:82px}.catalog-product-cell{align-items:center;display:flex;gap:14px;min-width:0}.catalog-product-thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,#071826),color-mix(in srgb,#22d3ee 12%,#071826));border:1px solid var(--line);border-radius:6px;display:inline-flex;flex:0 0 56px;height:56px;overflow:hidden;width:56px}.catalog-product-thumb img{height:100%;object-fit:cover;width:100%}.catalog-product-thumb.placeholder{align-items:center;color:var(--accent);font-weight:800;justify-content:center}.catalog-product-cell div{min-width:0}.catalog-product-cell a,.catalog-mobile-head a{color:var(--text);display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-product-cell span,.catalog-product-cell em,.catalog-mobile-head span{color:var(--muted);display:block;font-size:12px;font-style:normal;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-product-cell em,.catalog-mobile-card p{color:#fbbf24}.catalog-badge{align-items:center;background:color-mix(in srgb,var(--surface-2) 84%,transparent);border:1px solid var(--line);border-radius:7px;color:var(--soft);display:inline-flex;font-size:12px;font-weight:700;line-height:1;max-width:100%;min-height:24px;padding:5px 10px;white-space:nowrap}.catalog-badge.success{background:color-mix(in srgb,var(--success) 12%,transparent);border-color:color-mix(in srgb,var(--success) 28%,transparent);color:var(--success)}.catalog-badge.warning{background:color-mix(in srgb,#f59e0b 14%,transparent);border-color:color-mix(in srgb,#f59e0b 34%,transparent);color:#fbbf24}.catalog-badge.danger{background:color-mix(in srgb,#ef4444 12%,transparent);border-color:color-mix(in srgb,#ef4444 28%,transparent);color:#f87171}.catalog-badge.info{background:color-mix(in srgb,#3b82f6 13%,transparent);border-color:color-mix(in srgb,#3b82f6 28%,transparent);color:#93c5fd}.catalog-badge.purple{background:color-mix(in srgb,#a855f7 14%,transparent);border-color:color-mix(in srgb,#a855f7 30%,transparent);color:#d8b4fe}.catalog-price-cell strong,.catalog-download-cell strong{color:var(--text);display:block}.catalog-price-cell s,.catalog-download-cell small,.catalog-date-cell small{color:var(--muted);display:block;font-size:12px;margin-top:4px}.catalog-download-cell small.positive{color:var(--success)}.catalog-download-cell small.negative{color:#f87171}.catalog-muted{color:var(--muted)}.catalog-date-cell span{color:var(--soft);display:block}.catalog-actions{justify-content:flex-end;position:relative}.catalog-more-menu{position:relative}.catalog-more-menu summary{cursor:pointer;list-style:none}.catalog-more-menu summary::-webkit-details-marker{display:none}.catalog-more-menu div{background:color-mix(in srgb,var(--surface) 96%,#071826);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.28);display:grid;gap:4px;min-width:210px;padding:8px;position:absolute;right:0;top:calc(100% + 8px);z-index:20}.catalog-more-menu a,.catalog-more-menu button{background:transparent;border:0;border-radius:6px;color:var(--soft);cursor:pointer;font:inherit;font-size:13px;padding:9px 10px;text-align:left;white-space:nowrap}.catalog-more-menu a:hover,.catalog-more-menu button:hover{background:var(--surface-2);color:var(--text)}.catalog-more-menu .danger{color:#f87171}.products-mobile-list{display:none}.catalog-mobile-card{background:color-mix(in srgb,var(--surface) 92%,#071826);border:1px solid var(--line);border-radius:8px;display:grid;gap:14px;min-width:0;padding:16px}.catalog-mobile-head{align-items:center;display:flex;gap:12px;min-width:0}.catalog-mobile-head div{min-width:0}.catalog-mobile-badges{display:flex;flex-wrap:wrap;gap:8px}.catalog-mobile-card p{font-size:13px;margin:0}.catalog-mobile-card dl{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.catalog-mobile-card dt{color:var(--muted);font-size:11px;text-transform:uppercase}.catalog-mobile-card dd{color:var(--soft);margin:3px 0 0}.products-pagination{align-items:center;color:var(--muted);display:flex;font-size:13px;justify-content:space-between;min-width:0}.products-pagination nav{display:flex;gap:8px}.products-pagination a{align-items:center;background:color-mix(in srgb,var(--surface) 88%,#071826);border:1px solid var(--line);border-radius:6px;color:var(--soft);display:inline-flex;font-weight:700;height:36px;justify-content:center;min-width:36px;padding:0 10px}.products-pagination a.active{border-color:var(--accent);color:var(--accent)}.products-pagination a.disabled{opacity:.45;pointer-events:none}.products-empty-state{background:color-mix(in srgb,var(--surface) 92%,#071826);border:1px solid var(--line);border-radius:8px}@media(max-width:1180px){.products-summary-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.products-catalog-header,.products-catalog-header-actions,.products-pagination{align-items:stretch;flex-direction:column}.products-summary-cards,.catalog-toolbar,.catalog-mobile-card dl{grid-template-columns:1fr}.products-table-card{display:none}.products-mobile-list{display:grid;gap:12px}.catalog-actions{justify-content:flex-start}}

/* Developer products catalog fit and edit workspace */
.catalog-toolbar{align-items:end;display:flex;flex-wrap:wrap;gap:10px;max-width:100%;overflow:visible}
.catalog-toolbar .store-field{flex:1 1 136px;min-width:0}
.catalog-toolbar .catalog-search{flex:2 1 260px}
.catalog-toolbar .catalog-sort{flex:1.25 1 178px}
.catalog-toolbar .catalog-limit{flex:0 1 128px}
.catalog-toolbar .catalog-reset,.catalog-toolbar .catalog-apply,.catalog-toolbar .catalog-view-toggle{flex:0 0 auto}
.catalog-view-toggle a{align-items:center;background:color-mix(in srgb,var(--surface) 86%,#061522);border:1px solid var(--line);border-radius:6px;color:var(--soft);display:inline-flex;font-size:12px;font-weight:700;height:42px;justify-content:center;min-width:52px;padding:0 12px;text-decoration:none}
.catalog-view-toggle a.active,.catalog-view-toggle a:hover{border-color:var(--accent);color:var(--accent)}
.products-table-card{max-width:100%;overflow:visible}
.products-catalog-table{min-width:0}
.products-catalog-table th,.products-catalog-table td{padding-left:12px;padding-right:12px}
.products-catalog-table th:nth-child(1){width:25%}
.products-catalog-table th:nth-child(2){width:8%}
.products-catalog-table th:nth-child(3){width:10%}
.products-catalog-table th:nth-child(4){width:9%}
.products-catalog-table th:nth-child(5){width:8%}
.products-catalog-table th:nth-child(6){width:9%}
.products-catalog-table th:nth-child(7){width:8%}
.products-catalog-table th:nth-child(8){width:13%}
.products-catalog-table th:nth-child(9){width:10%}
.catalog-actions{gap:6px}
.catalog-actions .icon-button{height:34px;min-width:34px;padding:0 8px}
.catalog-grid-view{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:1320px){.products-catalog-table{font-size:13px}.catalog-product-thumb{flex-basis:48px;height:48px;width:48px}.catalog-badge{padding-left:8px;padding-right:8px}.products-catalog-table th,.products-catalog-table td{padding-left:10px;padding-right:10px}}
@media(max-width:1080px){.products-table-card{display:none}.products-mobile-list{display:grid;gap:12px}}

/* Developer product command edit panels */
.product-command-center [id]{scroll-margin-top:22px}
.product-command-edit-form{display:grid;gap:18px}
.product-command-edit-form>.developer-section-header{align-items:start;display:flex;gap:18px;justify-content:space-between}
.product-command-edit-form>.developer-section-header p:not(.store-eyebrow){color:var(--muted);margin:6px 0 0;max-width:720px}
.product-edit-property-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.product-edit-property-panel{background:color-mix(in srgb,var(--surface-2) 42%,transparent);border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:8px;display:grid;gap:14px;min-width:0;padding:16px}
.product-edit-property-panel h3{color:var(--text);font-size:15px;margin:0}
.product-edit-property-panel .developer-form-grid{gap:12px}
.product-edit-property-panel .developer-check-grid{margin-top:0}
.product-edit-property-panel .span-2{grid-column:1/-1}
.product-edit-property-panel input[type="file"]{padding:10px}
.product-command-edit-form .store-actions.end{justify-content:flex-end}
.product-health-card .developer-section-header span{color:var(--muted);font-size:12px;font-weight:800}
.product-health-card .product-readiness-bar{margin-top:0}
@media(max-width:900px){.product-command-edit-form>.developer-section-header{align-items:stretch;flex-direction:column}.product-edit-property-grid{grid-template-columns:1fr}}

/* Product detail editor page */
.product-command-center {
  gap: 18px;
}

.product-command-topbar {
  align-items: center;
  gap: 20px;
}

.product-command-hero {
  align-items: start;
  gap: 18px;
  grid-template-columns: 180px minmax(0, 1fr) minmax(280px, 310px);
}

.product-command-artwork-card {
  align-content: start;
  align-self: start;
  gap: 12px;
  padding: 12px;
}

.product-command-artwork-card .store-button {
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  width: 100%;
}

.product-command-identity {
  align-self: start;
  gap: 12px;
  padding-top: 52px;
}

.product-command-title-row {
  align-items: center;
  gap: 10px;
}

.product-command-title-row h1 {
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.product-command-identity > p {
  font-size: 14px;
  margin: 0;
  max-width: 760px;
}

.product-command-meta {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-command-meta div {
  min-width: 0;
}

.product-command-meta dd,
.product-command-meta button {
  overflow-wrap: anywhere;
}

.product-health-card {
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.product-health-card .developer-section-header.compact {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.product-health-card .developer-section-header.compact h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.product-health-body {
  align-items: center;
  gap: 14px;
  grid-template-columns: 108px minmax(0, 1fr);
}

.product-health-ring {
  padding: 14px;
}

.product-health-ring strong {
  font-size: 1.35rem;
}

.product-health-ring span {
  font-size: 0.68rem;
  text-align: center;
}

.product-health-card ul {
  gap: 7px;
}

.product-health-card li {
  gap: 8px;
}

.product-health-card li > span {
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.product-command-check {
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.product-command-kpis {
  gap: 12px;
}

.product-kpi-card {
  gap: 10px;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 76px;
  padding: 12px;
}

.product-kpi-icon {
  height: 34px;
  width: 34px;
}

.product-kpi-card p,
.product-kpi-card small {
  font-size: 12px;
  line-height: 1.25;
}

.product-kpi-card strong {
  font-size: 1.1rem;
  line-height: 1.15;
}

.product-command-dashboard-grid {
  align-items: start;
  gap: 18px;
}

.product-dashboard-column {
  align-content: start;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.product-command-center .developer-section {
  min-width: 0;
  padding: 18px;
}

.product-command-center .developer-section h2 {
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-command-center .developer-section p {
  font-size: 13px;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.product-hise-layout,
.product-rest-card {
  gap: 18px;
}

.product-hise-layout {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
}

.product-rest-card {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
}

.product-package-includes,
.product-rest-card dl {
  min-width: 0;
  padding-left: 18px;
}

.product-package-includes span,
.product-package-includes strong,
.product-rest-card dd {
  overflow-wrap: anywhere;
}

.product-command-last {
  justify-items: start;
  text-align: left;
}

.product-activity-card li {
  align-items: start;
}

.product-activity-card li > span {
  margin-top: 3px;
}

.product-activity-card strong,
.product-version-card strong,
.product-files-card strong {
  line-height: 1.25;
}

.product-hise-command-card > .developer-section-header {
  align-items: start;
  flex-wrap: wrap;
  gap: 14px;
}

.product-hise-command-card > .developer-section-header > div {
  min-width: 0;
}

.product-hise-command-card .store-actions,
.product-rest-card .store-actions {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1120px) {
  .product-command-hero {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .product-command-identity {
    padding-top: 20px;
  }

  .product-health-card {
    grid-column: 1 / -1;
  }

  .product-command-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-hise-layout,
  .product-rest-card {
    grid-template-columns: 1fr;
  }

  .product-package-includes,
  .product-rest-card dl {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 760px) {
  .product-command-hero,
  .product-command-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .product-command-identity {
    padding-top: 0;
  }

  .product-health-body {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .product-command-center > .product-command-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .product-command-meta,
  .product-command-kpis {
    grid-template-columns: 1fr;
  }

  .product-health-body {
    grid-template-columns: 1fr;
  }

  .product-health-ring {
    width: 116px;
  }
}

.product-command-dropdown {
  position: relative;
}

.product-command-dropdown summary {
  cursor: pointer;
  list-style: none;
}

.product-command-dropdown summary::-webkit-details-marker {
  display: none;
}

.product-command-dropdown > div {
  background: color-mix(in srgb, var(--surface) 96%, #071826);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 4px;
  min-width: 240px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
}

.product-command-dropdown a,
.product-command-dropdown button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
}

.product-command-dropdown a:hover,
.product-command-dropdown button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.product-command-dropdown .danger {
  color: #ff7b7b;
}

.product-command-edit-shell {
  gap: 24px;
  padding: 24px;
}

.product-command-edit-shell.is-active {
  align-content: start;
}

.product-command-edit-shell > .developer-section-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  gap: 20px;
  padding-bottom: 20px;
}

.product-command-edit-shell > .developer-section-header h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.product-command-edit-shell > .developer-section-header p:not(.store-eyebrow) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 820px;
}

.product-command-edit-shell .developer-wizard-wrap {
  gap: 0;
}

.product-command-edit-shell .developer-wizard-wrap > .store-link,
.product-command-edit-shell .developer-wizard-hero,
.product-command-edit-shell .developer-wizard-sidebar,
.product-command-edit-shell .developer-wizard-actions {
  display: none;
}

.product-command-edit-shell .developer-wizard {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.product-command-edit-shell .developer-wizard-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 20px;
  min-height: 0;
  padding: 0;
}

.product-command-edit-shell .developer-wizard-step {
  background: color-mix(in srgb, var(--surface) 92%, #071826);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  display: none;
  gap: 20px;
  padding: 24px;
  scroll-margin-top: 22px;
}

.product-command-edit-shell .developer-wizard-step.is-active {
  animation: product-command-page-slide 220ms ease-out;
  display: grid;
}

.product-command-edit-shell .product-editor-page {
  min-height: 420px;
}

.product-command-edit-shell .developer-wizard-step-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.product-command-edit-shell .developer-wizard-step-header h2 {
  font-size: 26px;
}

.product-command-edit-shell .developer-wizard-step-header p:not(.store-eyebrow) {
  font-size: 13px;
  margin-top: 8px;
  max-width: 780px;
}

.product-editor-section-nav {
  background: color-mix(in srgb, var(--surface) 90%, #071826);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  position: sticky;
  top: 12px;
  z-index: 9;
}

.product-editor-section-nav a {
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  min-height: 34px;
  padding: 8px 10px;
  text-decoration: none;
}

.product-editor-section-nav a:hover,
.product-editor-section-nav a:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.product-command-edit-shell .developer-wizard-step-body,
.product-command-edit-shell .developer-form-section,
.product-command-edit-shell .wizard-builder-stack {
  gap: 20px;
}

.product-command-edit-shell .wizard-builder-card,
.product-command-edit-shell .developer-wizard-note,
.product-command-edit-shell .developer-choice,
.product-command-edit-shell .developer-wizard-summary article,
.product-command-edit-shell .developer-product-preview {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  border-color: var(--line);
}

.product-command-edit-shell .developer-choice {
  align-items: start;
  gap: 10px 12px;
  padding: 14px;
}

.product-command-edit-shell .developer-choice input[type="radio"],
.product-command-edit-shell .developer-choice input[type="checkbox"] {
  accent-color: var(--accent);
  height: 16px;
  margin-top: 2px;
  min-height: 16px;
  width: 16px;
}

.product-command-edit-shell .developer-choice strong {
  font-size: 14px;
}

.product-command-edit-shell .developer-choice span {
  font-size: 12px;
}

.product-command-edit-shell .developer-check {
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 54%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
}

.product-command-edit-shell .developer-check input {
  accent-color: var(--accent);
  min-height: 16px;
  width: 16px;
}

.product-command-edit-shell .developer-form-grid,
.product-command-edit-shell .developer-choice-grid,
.product-command-edit-shell .developer-wizard-summary,
.product-command-edit-shell .developer-preview-layout {
  gap: 16px;
}

.product-command-edit-shell .developer-wizard input,
.product-command-edit-shell .developer-wizard select,
.product-command-edit-shell .developer-wizard textarea {
  min-height: 42px;
}

.product-page-editor-save {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 88%, #071826);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  position: sticky;
  bottom: 16px;
  z-index: 8;
}

.product-command-credentials-dropdown {
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

.product-command-credentials-dropdown summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  list-style: none;
  padding: 16px;
}

.product-command-credentials-dropdown summary::-webkit-details-marker {
  display: none;
}

.product-command-credentials-dropdown summary span:first-child {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.product-command-credentials-dropdown[open] {
  padding-bottom: 16px;
}

.product-command-credentials-dropdown > dl,
.product-command-credentials-dropdown > .store-actions {
  margin-left: 16px;
  margin-right: 16px;
}

@media(max-width:900px){
  .product-command-edit-shell > .developer-section-header,
  .product-command-topbar,
  .product-command-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-command-dropdown > div {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 32px));
  }

  .product-command-edit-shell {
    padding: 18px;
  }

  .product-command-edit-shell .developer-wizard-step {
    padding: 18px;
  }

  .product-editor-section-nav {
    position: static;
  }

}

@media (max-width: 980px) {
  .marketing-dashboard-grid,
  .marketing-audience-grid,
  .marketing-automation-grid,
  .marketing-page-shell .marketing-builder-form,
  .marketing-campaign-wizard,
  .marketing-visual-email-builder,
  .marketing-review-layout,
  .marketing-settings-details[open] .marketing-settings-form {
    grid-template-columns: 1fr;
  }

  .marketing-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-campaign-wizard .developer-wizard-sidebar {
    position: static;
  }

  .marketing-wizard-health-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .marketing-page-header,
  .marketing-safety-footer,
  .marketing-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-workspace-tabs,
  .marketing-overview,
  .marketing-dashboard-side .marketing-safety-grid,
  .marketing-action-grid,
  .marketing-audience-estimate,
  .marketing-audience-estimate dl,
  .marketing-audience-health-grid,
  .marketing-contact-controls,
  .marketing-contact-dates,
  .marketing-campaign-metrics,
  .marketing-template-library,
  .marketing-canvas-hero-tools,
  .marketing-canvas-cta,
  .marketing-template-choice-grid,
  .marketing-delivery-options,
  .marketing-exclusion-grid,
  .marketing-review-grid,
  .marketing-delivery-grid,
  .marketing-trigger-card .developer-form-grid,
  .marketing-flow,
  .marketing-flow-summary,
  .marketing-signal-window-grid,
  .marketing-automation-playbooks,
  .marketing-automation-settings .developer-form-grid,
  .marketing-automation-create .developer-form-grid {
    grid-template-columns: 1fr;
  }

  .marketing-action-bar > div,
  .marketing-page-header .developer-actions,
  .marketing-wizard-actions > div,
  .marketing-action-bar .store-button {
    width: 100%;
  }

.marketing-page-header .developer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.promotions-command-center {
  color: var(--text);
  display: grid;
  gap: 24px;
}

.promotions-page-header {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.promotions-page-header h1 {
  color: var(--text);
  font-size: 32px;
  line-height: 1.1;
  margin: 4px 0;
}

.promotions-page-header p:not(.store-eyebrow),
.promotion-section-head p,
.promotion-card-head p {
  color: var(--soft);
  font-size: 13px;
  margin: 4px 0 0;
}

.promotion-create-menu {
  position: relative;
  z-index: 5;
}

.promotion-create-menu summary {
  cursor: pointer;
  list-style: none;
}

.promotion-create-menu summary::-webkit-details-marker {
  display: none;
}

.promotion-create-menu div {
  background: rgba(8, 17, 27, 0.98);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
}

.promotion-create-menu button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 10px;
  text-align: left;
}

.promotion-create-menu button:hover {
  background: rgba(255, 111, 0, 0.14);
  color: var(--accent);
}

.promotion-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.promotion-kpi {
  align-items: center;
  background: linear-gradient(145deg, rgba(14, 27, 42, 0.92), rgba(7, 17, 27, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 112px;
  padding: 18px;
}

.promotion-kpi-icon {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.promotion-kpi.purple .promotion-kpi-icon { color: #d26cff; }
.promotion-kpi.blue .promotion-kpi-icon { color: #52a8ff; }
.promotion-kpi.orange .promotion-kpi-icon { color: var(--accent); }
.promotion-kpi.green .promotion-kpi-icon { color: #61df62; }
.promotion-kpi.yellow .promotion-kpi-icon { color: #f5b301; }

.promotion-kpi p,
.promotion-kpi small {
  color: var(--soft);
  margin: 0;
}

.promotion-kpi strong {
  color: var(--text);
  display: block;
  font-size: 25px;
  line-height: 1.1;
  margin: 5px 0;
}

.promotion-tabs {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  min-width: 0;
}

.promotion-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 42px;
  min-width: 0;
  overflow: hidden;
  padding: 0 8px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-tabs button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.promotion-tab-panel,
.promotion-main-stack,
.promotion-section-grid,
.promotion-side-rail {
  display: grid;
  gap: 20px;
}

.promotion-tab-panel[hidden] {
  display: none;
}

.promotion-overview-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.32fr);
}

.promotion-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promotion-section-head h2,
.promotion-card h2 {
  color: var(--text);
  font-size: 18px;
  margin: 0;
}

.promotion-type-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promotion-type-card,
.promotion-card {
  background: linear-gradient(145deg, rgba(14, 27, 42, 0.9), rgba(7, 17, 27, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  min-width: 0;
}

.promotion-type-card {
  display: grid;
  gap: 12px;
  min-height: 230px;
  padding: 18px;
}

.promotion-type-card span {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.promotion-type-card p {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.promotion-type-card small {
  color: var(--soft);
  display: grid;
  font-size: 12px;
  gap: 3px;
  margin-top: auto;
}

.promotion-type-card b {
  color: var(--text);
}

.promotion-type-card.purple { border-color: rgba(210, 108, 255, 0.3); }
.promotion-type-card.blue { border-color: rgba(82, 168, 255, 0.28); }
.promotion-type-card.orange { border-color: rgba(255, 111, 0, 0.32); }
.promotion-type-card.green { border-color: rgba(97, 223, 98, 0.28); }
.promotion-type-card.yellow { border-color: rgba(245, 179, 1, 0.3); }
.promotion-type-card.cyan { border-color: rgba(16, 213, 222, 0.28); }

.promotion-card {
  padding: 16px;
}

.promotion-card-head {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
}

.promotion-table-controls {
  display: grid;
  gap: 8px;
  grid-template-columns: 130px 130px minmax(190px, 1fr);
}

.promotion-table-controls select,
.promotion-table-controls input {
  background: rgba(4, 13, 21, 0.52);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  min-height: 38px;
  padding: 0 10px;
}

.promotion-table-wrap {
  overflow-x: auto;
}

.promotion-table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.promotion-table th,
.promotion-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 12px;
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}

.promotion-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.promotion-table td {
  color: var(--soft);
}

.promotion-table strong {
  color: var(--text);
  display: block;
}

.promotion-table small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.promotion-status {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  text-transform: capitalize;
  white-space: nowrap;
}

.promotion-status.success { background: rgba(47, 215, 85, 0.12); color: #5beb70; }
.promotion-status.info { background: rgba(64, 156, 255, 0.12); color: #7dbbff; }
.promotion-status.warning { background: rgba(245, 179, 1, 0.12); color: #ffd15a; }
.promotion-status.danger { background: rgba(255, 82, 82, 0.12); color: #ff7777; }
.promotion-status.muted { background: rgba(148, 163, 184, 0.08); color: var(--muted); }

.promotion-empty-state,
.promotion-empty-inline {
  background: rgba(4, 13, 21, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  color: var(--soft);
  padding: 16px;
}

.promotion-empty-state strong {
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.promotion-empty-state p,
.promotion-empty-inline {
  font-size: 13px;
  margin: 0;
}

.promotion-table-footer,
.promotion-muted {
  color: var(--muted);
  font-size: 12px;
}

.promotion-rank-list,
.promotion-activity-list {
  display: grid;
  gap: 10px;
}

.promotion-rank-list div,
.promotion-activity-list div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
}

.promotion-rank-list span,
.promotion-activity-list span {
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.promotion-rank-list strong,
.promotion-activity-list strong {
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-rank-list small,
.promotion-activity-list time {
  color: var(--muted);
  font-size: 11px;
}

.promotion-rank-list b {
  color: #61df62;
  font-size: 12px;
}

.promotion-tip-list {
  color: var(--soft);
  display: grid;
  font-size: 13px;
  gap: 10px;
  line-height: 1.4;
  margin: 0;
  padding-left: 18px;
}

.promotion-modal {
  background: transparent;
  border: 0;
  color: var(--text);
  max-width: min(860px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.promotion-modal::backdrop {
  background: rgba(0, 8, 15, 0.76);
}

.promotion-modal-card {
  background: #07111b;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.promotion-modal-card header {
  align-items: start;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.promotion-modal-card h2 {
  font-size: 20px;
  margin: 0;
}

.promotion-modal-card p {
  color: var(--soft);
  font-size: 13px;
  margin: 4px 0 0;
}

.promotion-modal-form {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promotion-modal-form label {
  color: var(--soft);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
}

.promotion-modal-form input,
.promotion-modal-form select,
.promotion-modal-form textarea {
  background: rgba(4, 13, 21, 0.56);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 42px;
  padding: 0 12px;
}

.promotion-modal-form textarea {
  min-height: 90px;
  padding: 10px 12px;
}

.promotion-modal-form .wide,
.promotion-modal-products,
.promotion-modal-form button[type="submit"] {
  grid-column: 1 / -1;
}

.promotion-check {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}

.promotion-check input {
  min-height: 0;
}

.promotion-modal-products {
  background: rgba(4, 13, 21, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.promotion-modal-products > strong {
  color: var(--text);
}

.promotion-modal-products > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .promotion-kpi-grid,
  .promotion-type-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promotion-overview-grid,
  .promotion-section-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .promotions-page-header,
  .promotion-card-head,
  .promotions-content-grid {
    grid-template-columns: 1fr;
  }

  .promotion-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .promotion-kpi-grid,
  .promotion-type-card-grid,
  .promotion-table-controls,
  .promotion-modal-form,
  .promotion-modal-products > div {
    grid-template-columns: 1fr;
  }

  .promotion-tabs {
    grid-template-columns: repeat(8, minmax(150px, 1fr));
    overflow-x: auto;
  }
}

/* === Developer Branding === */
.developer-branding-page {
  background:
    radial-gradient(circle at 22% 0%, rgba(37, 99, 235, 0.13), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(255, 106, 26, 0.08), transparent 30%);
  display: grid;
  gap: 16px;
}

.branding-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.branding-heading h1 {
  font-size: clamp(1.7rem, 2vw, 2.25rem);
  margin: 4px 0 8px;
}

.branding-heading p {
  color: var(--muted);
  max-width: 820px;
}

.branding-unsaved {
  align-items: center;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid rgba(255, 106, 26, 0.32);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 8px 12px;
  width: fit-content;
}

.branding-panel {
  display: grid;
  gap: 16px;
}

.brand-manager-top-grid,
.brand-manager-main-grid {
  display: grid;
  gap: 16px;
}

.brand-manager-top-grid {
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.1fr);
}

.brand-manager-main-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
}

.brand-manager-primary-stack,
.brand-manager-side-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.brand-manager-health-card,
.brand-manager-preview-card,
.brand-manager-side-card,
.brand-manager-next-steps {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.brand-manager-health-body {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 160px minmax(0, 1fr);
}

.brand-manager-progress {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, var(--panel) 0 58%, transparent 59%),
    conic-gradient(#22c55e calc(var(--brand-progress, 0) * 1%), rgba(148, 163, 184, 0.18) 0);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  max-width: 150px;
  width: 100%;
}

.brand-manager-progress strong {
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.brand-manager-progress span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.brand-manager-checklist,
.brand-manager-usage-list {
  display: grid;
  gap: 10px;
}

.brand-manager-check-item,
.brand-manager-usage-list > div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.brand-manager-usage-list > div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.brand-manager-check-item strong,
.brand-manager-usage-list span {
  overflow-wrap: anywhere;
}

.brand-manager-check-dot {
  background: rgba(148, 163, 184, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  height: 16px;
  width: 16px;
}

.brand-manager-check-dot.complete {
  background: #22c55e;
  border-color: rgba(34, 197, 94, 0.78);
}

.brand-manager-check-dot.progress,
.brand-manager-check-dot.optional {
  background: #f59e0b;
  border-color: rgba(245, 158, 11, 0.78);
}

.brand-manager-status {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

.brand-manager-status.complete {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.brand-manager-status.progress,
.brand-manager-status.optional {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.34);
  color: #fbbf24;
}

.brand-manager-status.needs {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

.brand-manager-tabs {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 0 0 1px;
}

.brand-manager-tabs button {
  background: transparent;
  border-bottom: 2px solid transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  padding: 12px 0;
  text-decoration: none;
}

.brand-manager-tabs button.active,
.brand-manager-tabs button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.brand-manager-tabs .brand-manager-tab-link {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 0;
  white-space: nowrap;
}

.brand-manager-tabs .brand-manager-tab-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.brand-manager-text-button {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.brand-manager-text-button:hover {
  text-decoration: underline;
}

.brand-manager-tab-panel {
  display: none;
}

.brand-manager-tab-panel.is-active {
  display: grid;
}

.brand-manager-card-action {
  justify-self: start;
}

.brand-manager-preview,
.brand-manager-preview-compact {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.brand-manager-preview-tabs {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.brand-manager-preview-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 10px 2px;
}

.brand-manager-preview-tabs button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.brand-manager-preview-panes {
  min-width: 0;
}

.brand-manager-surface-pane {
  background: rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: none;
  min-height: 180px;
  overflow: hidden;
}

.brand-manager-surface-pane.is-active {
  display: grid;
}

.brand-manager-surface-pane > header {
  align-items: center;
  background: rgba(2, 6, 23, 0.72);
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 14px 16px;
}

.brand-manager-surface-pane > header img,
.brand-manager-surface-pane > header span:first-child,
.brand-manager-marketplace-preview img,
.brand-manager-marketplace-preview > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  height: 38px;
  justify-content: center;
  object-fit: contain;
  width: 38px;
}

.brand-manager-storefront-preview,
.brand-manager-checkout-preview,
.brand-manager-email-preview,
.brand-manager-library-preview,
.brand-manager-plugin-preview {
  display: grid;
  gap: 10px;
  padding: 22px;
}

.brand-manager-storefront-preview {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 42%, transparent), color-mix(in srgb, var(--brand-primary) 35%, transparent));
}

.brand-manager-storefront-preview h3,
.brand-manager-email-preview h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}

.brand-manager-storefront-preview p,
.brand-manager-email-preview p,
.brand-manager-library-preview p,
.brand-manager-plugin-preview p,
.brand-manager-side-card p,
.brand-manager-next-card p {
  color: var(--muted);
  margin: 0;
}

.brand-manager-storefront-preview button,
.brand-manager-checkout-preview button {
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  justify-self: start;
  padding: 10px 14px;
}

.brand-manager-checkout-preview > div,
.brand-manager-library-preview {
  align-items: center;
  background: rgba(15, 23, 42, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 10px;
}

.brand-manager-checkout-preview > div {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.brand-manager-email-preview {
  border-top: 4px solid var(--accent);
}

.brand-manager-library-preview {
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 14px;
}

.brand-manager-library-preview > span {
  border-radius: 8px;
  height: 48px;
  width: 48px;
}

.brand-manager-plugin-preview {
  border: 2px solid var(--accent);
  border-radius: 8px;
  margin: 18px;
}

.brand-manager-slug-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.store-field small {
  color: var(--muted);
  line-height: 1.4;
}

.store-field small strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.brand-manager-side-card h2 {
  font-size: 1.05rem;
  margin: 0;
}

.brand-manager-color-preview {
  align-items: center;
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 34px) minmax(0, 1fr);
  padding: 14px;
}

.brand-manager-color-preview > span {
  border-radius: 8px;
  height: 34px;
}

.brand-manager-color-preview > span:nth-child(1) {
  background: var(--brand-primary);
}

.brand-manager-color-preview > span:nth-child(2) {
  background: var(--brand-secondary);
}

.brand-manager-color-preview > span:nth-child(3) {
  background: var(--brand-accent);
}

.brand-manager-marketplace-preview {
  align-items: center;
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 16px;
}

.brand-manager-next-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-manager-next-card {
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.brand-manager-color-preview p,
.brand-manager-marketplace-preview p {
  color: var(--muted);
  margin: 0;
}

/* === Developer Support Center === */
.developer-support-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.13), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(255, 106, 26, 0.08), transparent 30%);
  gap: 16px;
}

.support-heading .developer-field-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.support-manager-top-grid,
.support-manager-main-grid {
  display: grid;
  gap: 16px;
}

.support-manager-top-grid {
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.1fr);
}

.support-center-form {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.support-wizard-topbar {
  max-width: 100%;
  overflow: hidden;
  padding: 10px;
  position: static;
  top: auto;
}

.support-wizard-topbar .store-eyebrow {
  display: none;
}

.support-wizard-topbar ol {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--wizard-step-count), minmax(118px, 1fr));
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.support-wizard-topbar .wizard-progress-step {
  min-width: 0;
  padding: 0;
  position: relative;
}

.support-wizard-topbar .wizard-progress-step:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  left: calc(100% - 10px);
  position: absolute;
  right: -8px;
  top: 22px;
}

.support-wizard-topbar .wizard-progress-step button {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 46px;
  padding: 5px 6px;
  position: relative;
  z-index: 1;
}

.support-wizard-topbar .wizard-progress-step button > div {
  min-width: 0;
}

.support-wizard-topbar .wizard-progress-step span {
  border-radius: 999px;
  flex: 0 0 26px;
  font-size: 10px;
  height: 26px;
  width: 26px;
}

.support-wizard-topbar .wizard-progress-step strong {
  color: var(--soft);
  font-size: 11px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.support-wizard-topbar .wizard-progress-step small {
  font-size: 9px;
  line-height: 1.2;
  margin-top: 2px;
}

.support-wizard-topbar .wizard-progress-step.current,
.support-wizard-topbar .wizard-progress-step.complete {
  background: transparent;
}

.support-manager-main-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
}

.support-manager-workspace {
  min-height: 560px;
  padding: clamp(18px, 3vw, 30px);
}

.support-manager-side-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.support-page-preview {
  background: rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  min-height: 100%;
  overflow: hidden;
}

.support-page-preview header {
  align-items: center;
  background: rgba(2, 6, 23, 0.72);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 14px 16px;
}

.support-page-preview header .store-brand-mark {
  height: 38px;
  width: 38px;
}

.support-page-preview header small,
.support-page-preview p,
.support-intake-list span {
  color: var(--muted);
}

.support-page-preview > div {
  background: linear-gradient(135deg, color-mix(in srgb, #2563eb 24%, transparent), color-mix(in srgb, #ff6a1a 18%, transparent));
  display: grid;
  gap: 10px;
  padding: 22px;
}

.support-page-preview h2 {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.support-preview-pills,
.support-intake-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-preview-pills span,
.support-intake-list span {
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 10px;
}

.support-article-row {
  background: rgba(8, 18, 30, 0.68);
  border-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme="light"] .support-page-preview,
:root[data-theme="light"] .support-preview-pills span,
:root[data-theme="light"] .support-intake-list span,
:root[data-theme="light"] .support-article-row {
  background: rgba(255, 255, 255, 0.86);
}

@media (max-width: 1120px) {
  .brand-manager-top-grid,
  .brand-manager-main-grid,
  .support-manager-top-grid,
  .support-manager-main-grid {
    grid-template-columns: 1fr;
  }

  .brand-manager-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.branding-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.branding-form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.branding-wide {
  grid-column: 1 / -1;
}

.branding-color-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px minmax(0, 1fr);
}

.branding-color-control input[type="color"] {
  background: transparent;
  border: 0;
  height: 42px;
  padding: 0;
  width: 44px;
}

.branding-upload-grid,
.branding-preview-grid,
.branding-link-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.branding-upload,
.branding-preview,
.branding-link-preview {
  background: rgba(8, 18, 30, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

:root[data-theme="light"] .branding-upload,
:root[data-theme="light"] .branding-preview,
:root[data-theme="light"] .branding-link-preview {
  background: rgba(255, 255, 255, 0.86);
}

.branding-upload-preview {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: rgba(15, 23, 42, 0.72);
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.branding-upload-preview img,
.branding-preview header img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.branding-upload input[type="file"] {
  font-size: 0.82rem;
}

.branding-link-preview span,
.branding-validation-list span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.branding-link-preview strong,
.branding-validation-list strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.branding-domain-guide {
  background: rgba(15, 23, 42, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

:root[data-theme="light"] .branding-domain-guide {
  background: rgba(248, 250, 252, 0.88);
}

.branding-domain-guide > div:first-child {
  display: grid;
  gap: 8px;
}

.branding-domain-guide strong {
  color: var(--text);
}

.branding-domain-guide p,
.branding-domain-notes {
  color: var(--muted);
  margin: 0;
}

.branding-setup-steps,
.branding-domain-notes {
  display: grid;
  gap: 6px;
  padding-left: 20px;
}

.branding-setup-steps li,
.branding-domain-notes li {
  line-height: 1.45;
}

.branding-dns-table .developer-table {
  min-width: 900px;
}

.branding-dns-copy-help {
  color: var(--muted);
  margin: 0 0 10px;
}

.branding-dns-table small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  line-height: 1.35;
  margin-top: 4px;
  max-width: 280px;
}

.branding-dns-copy {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.branding-dns-copy code {
  background: rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  display: block;
  max-width: 420px;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  white-space: normal;
}

.brand-domain-workspace {
  display: none;
  gap: 16px;
}

.brand-domain-workspace.is-active {
  display: grid;
}

.brand-domain-hero,
.brand-domain-card,
.brand-domain-details,
.brand-domain-support {
  background:
    linear-gradient(135deg, rgba(10, 24, 42, 0.94), rgba(8, 18, 31, 0.82)),
    radial-gradient(circle at 72% 12%, rgba(37, 99, 235, 0.18), transparent 34%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.brand-domain-hero {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  overflow: hidden;
  padding: 26px;
}

.brand-domain-hero-copy {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.brand-domain-icon {
  align-items: center;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid rgba(255, 106, 26, 0.28);
  border-radius: 999px;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.brand-domain-hero h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  margin: 0;
}

.brand-domain-hero p,
.brand-domain-card p,
.brand-domain-details p,
.brand-provider-card p {
  color: var(--muted);
  margin: 0;
}

.brand-domain-before-after {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  max-width: 720px;
}

.brand-domain-before-after > div {
  background: rgba(4, 13, 24, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.brand-domain-before-after > div.is-after {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(34, 197, 94, 0.42);
}

.brand-domain-before-after span,
.brand-dns-record-card span,
.brand-domain-link-list span,
.brand-domain-input > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.brand-domain-before-after strong,
.brand-domain-link-list strong {
  overflow-wrap: anywhere;
}

.brand-domain-browser-art {
  align-self: end;
  display: grid;
  gap: 14px;
  min-height: 210px;
  place-items: center;
  position: relative;
}

.brand-domain-address {
  align-items: center;
  background: rgba(11, 20, 36, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 0.86rem;
  gap: 8px;
  max-width: 100%;
  padding: 10px 14px;
}

.brand-domain-window {
  background:
    linear-gradient(135deg, rgba(255, 106, 26, 0.5), rgba(37, 99, 235, 0.56), rgba(124, 58, 237, 0.58)),
    rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  min-height: 150px;
  padding: 44px 24px 22px;
  width: min(100%, 360px);
}

.brand-domain-window > div {
  background: rgba(2, 6, 23, 0.54);
  border-radius: 8px;
  height: 36px;
}

.brand-domain-window button {
  background: #ff6a1a;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-weight: 900;
  justify-self: start;
  padding: 9px 12px;
}

.brand-domain-card,
.brand-domain-details,
.brand-domain-support {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.brand-domain-card-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.brand-domain-card-head h3,
.brand-domain-details summary,
.brand-domain-support strong {
  color: var(--text);
  font-size: 1rem;
  margin: 0;
}

.brand-domain-entry-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.brand-domain-input {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.brand-domain-input input {
  background: rgba(3, 10, 20, 0.7);
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 50px;
  padding: 0 14px;
}

.brand-domain-input input:focus {
  border-color: rgba(255, 106, 26, 0.72);
  outline: none;
}

.brand-domain-input small,
.brand-domain-micro-status,
.brand-domain-mini-flow {
  color: var(--muted);
  font-size: 0.82rem;
}

.brand-domain-micro-status,
.brand-domain-mini-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.brand-domain-progress-track {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}

.brand-domain-progress-step {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.brand-domain-progress-step b {
  align-items: center;
  background: #3b82f6;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.brand-domain-progress-step.is-complete b {
  background: #22c55e;
}

.brand-domain-progress-step small {
  color: var(--muted);
  max-width: 150px;
}

.brand-provider-card {
  background: rgba(3, 10, 20, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.brand-provider-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-provider-pills span {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
}

.brand-provider-pills span.is-active {
  border-color: rgba(255, 106, 26, 0.86);
  color: #ff8a3d;
}

.brand-dns-record-grid {
  display: grid;
  gap: 12px;
}

.brand-dns-record-card {
  align-items: center;
  background: rgba(3, 10, 20, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(90px, 0.5fr) minmax(130px, 0.8fr) minmax(220px, 1.4fr) minmax(80px, 0.4fr);
  padding: 14px;
}

.brand-dns-record-card > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.brand-dns-record-card code {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: var(--text);
  overflow-wrap: anywhere;
  padding: 7px 9px;
}

.brand-dns-record-card button,
.brand-domain-link-list button,
.brand-domain-link-list a {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 6px;
  color: #93c5fd;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  justify-self: start;
  padding: 5px 8px;
  text-decoration: none;
}

.brand-dns-record-card footer {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 10px;
}

.brand-domain-empty,
.brand-domain-tip {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  color: var(--muted);
  padding: 14px;
}

.brand-domain-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
}

.brand-domain-status-card {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.brand-domain-status-icon {
  align-items: center;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  color: #fbbf24;
  display: inline-flex;
  font-size: 1.4rem;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.brand-domain-status-card.is-connected .brand-domain-status-icon {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.48);
  color: #22c55e;
}

.brand-domain-status-card.is-failed .brand-domain-status-icon {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}

.brand-domain-live-url {
  color: #80aaff;
  display: inline-block;
  font-size: 1.12rem;
  font-weight: 900;
  margin: 6px 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.brand-domain-check-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-domain-check-list li {
  color: var(--muted);
  padding-left: 26px;
  position: relative;
}

.brand-domain-check-list li::before {
  align-items: center;
  background: #22c55e;
  border-radius: 999px;
  color: #02120a;
  content: "✓";
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 2px;
  width: 16px;
}

.brand-domain-details summary {
  cursor: pointer;
  font-weight: 900;
}

.brand-domain-link-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.brand-domain-link-list > div {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(140px, 0.55fr) minmax(0, 1fr) auto;
  padding: 8px 0;
}

.brand-domain-faq {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.brand-domain-faq details {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 9px 0;
}

.brand-domain-faq summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.brand-domain-support {
  align-items: center;
  border-color: rgba(255, 106, 26, 0.44);
  display: flex;
  justify-content: space-between;
}

.inline-button {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.brand-email-workspace {
  display: none;
  gap: 16px;
}

.brand-email-workspace.is-active {
  display: grid;
}

.brand-email-hero,
.brand-email-card,
.brand-email-details,
.brand-email-health,
.brand-email-support {
  background:
    linear-gradient(135deg, rgba(10, 24, 42, 0.95), rgba(8, 18, 31, 0.84)),
    radial-gradient(circle at 74% 8%, rgba(37, 99, 235, 0.17), transparent 34%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.brand-email-hero {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  overflow: hidden;
  padding: 26px;
}

.brand-email-hero-copy,
.brand-email-card,
.brand-email-details,
.brand-email-health {
  display: grid;
  gap: 16px;
}

.brand-email-icon {
  align-items: center;
  background: rgba(255, 106, 26, 0.12);
  border: 1px solid rgba(255, 106, 26, 0.28);
  border-radius: 999px;
  color: #ff8a3d;
  display: inline-flex;
  font-size: 1.1rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.brand-email-hero h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  margin: 0;
}

.brand-email-hero p,
.brand-email-card p,
.brand-email-details p,
.brand-email-support p {
  color: var(--muted);
  margin: 0;
}

.brand-email-before-after {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  max-width: 720px;
}

.brand-email-before-after > div {
  background: rgba(4, 13, 24, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.brand-email-before-after > div.is-after {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(34, 197, 94, 0.42);
}

.brand-email-before-after span,
.brand-email-record-card span,
.brand-email-record-status span,
.brand-email-routing span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.brand-email-before-after strong {
  overflow-wrap: anywhere;
}

.brand-email-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.brand-email-benefits span {
  color: var(--text);
  font-weight: 800;
}

.brand-email-benefits span::before {
  color: #22c55e;
  content: "✓";
  margin-right: 8px;
}

.brand-email-preview {
  align-self: center;
  background: rgba(3, 10, 20, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  min-height: 230px;
  padding: 16px;
}

.brand-email-window-bar {
  display: flex;
  gap: 7px;
}

.brand-email-window-bar span {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
  height: 9px;
  width: 9px;
}

.brand-email-message {
  align-items: center;
  display: flex;
  gap: 12px;
}

.brand-email-message > b {
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.brand-email-message div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brand-email-message small,
.brand-email-lines span {
  color: var(--muted);
}

.brand-email-lines {
  display: grid;
  gap: 8px;
}

.brand-email-lines span {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  height: 8px;
}

.brand-email-lines span:nth-child(1) {
  width: 72%;
}

.brand-email-lines span:nth-child(2) {
  width: 58%;
}

.brand-email-lines span:nth-child(3) {
  width: 64%;
}

.brand-email-banner {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.54), rgba(37, 99, 235, 0.58), rgba(124, 58, 237, 0.64));
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 2rem;
  font-weight: 950;
  justify-content: center;
  min-height: 78px;
}

.brand-email-card,
.brand-email-details,
.brand-email-health,
.brand-email-support {
  padding: 22px;
}

.brand-email-card-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.brand-email-card-head h3,
.brand-email-details summary,
.brand-email-support strong {
  color: var(--text);
  font-size: 1rem;
  margin: 0;
}

.brand-email-identity-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-email-identity-grid .branding-wide {
  grid-column: 1 / -1;
}

.brand-email-advanced,
.brand-email-advanced-records {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding-top: 12px;
}

.brand-email-advanced summary,
.brand-email-advanced-records summary {
  color: #93c5fd;
  cursor: pointer;
  font-weight: 900;
}

.brand-email-advanced-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.brand-email-routing {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.brand-email-routing > div {
  align-items: center;
  background: rgba(3, 10, 20, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 0.5fr) auto minmax(0, 1fr);
  padding: 10px 12px;
}

.brand-email-progress-track::before {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.72), rgba(34, 197, 94, 0.54));
  content: "";
  height: 2px;
  left: 9%;
  position: absolute;
  right: 9%;
  top: 18px;
  z-index: 0;
}

.brand-email-progress-track .brand-domain-progress-step {
  position: relative;
  z-index: 1;
}

.brand-email-record-grid {
  display: grid;
  gap: 12px;
}

.brand-email-record-card {
  background: rgba(3, 10, 20, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.brand-email-record-card header {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.brand-email-record-card header div {
  display: grid;
  gap: 5px;
}

.brand-email-record-card header b {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 999px;
  color: #fbbf24;
  font-size: 0.76rem;
  padding: 5px 9px;
}

.brand-email-record-card header b.is-verified {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.34);
  color: #22c55e;
}

.brand-email-record-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(80px, 0.42fr) minmax(130px, 0.7fr) minmax(240px, 1.5fr) minmax(80px, 0.4fr);
}

.brand-email-record-fields > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.brand-email-record-fields code {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: var(--text);
  overflow-wrap: anywhere;
  padding: 7px 9px;
}

.brand-email-record-fields button {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 6px;
  color: #93c5fd;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  justify-self: start;
  padding: 5px 8px;
}

.brand-email-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
}

.brand-email-status-dot {
  align-items: center;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 999px;
  color: #fbbf24;
  display: inline-flex;
  font-size: 1.2rem;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.brand-email-status-dot.is-connected {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.48);
  color: #22c55e;
}

.brand-email-live-address {
  color: #80aaff;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.brand-email-record-status {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-email-record-status span {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 8px;
  color: #fbbf24;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.brand-email-record-status span.is-verified {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.24);
  color: #22c55e;
}

.brand-email-test-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.brand-email-score {
  align-items: center;
  display: flex;
  gap: 14px;
}

.brand-email-score strong {
  align-items: center;
  background: conic-gradient(#22c55e 0 84%, rgba(148, 163, 184, 0.16) 84% 100%);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 1.4rem;
  height: 88px;
  justify-content: center;
  width: 88px;
}

.brand-email-score span {
  color: var(--text);
  font-weight: 900;
}

.brand-email-health-list {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-email-health-list span {
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 9px 10px;
}

.brand-email-health-list span.is-done {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.24);
  color: #22c55e;
}

.brand-email-support {
  align-items: center;
  border-color: rgba(255, 106, 26, 0.44);
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1120px) {
  .brand-domain-hero,
  .brand-domain-two-column,
  .brand-email-hero,
  .brand-email-two-column {
    grid-template-columns: 1fr;
  }

  .brand-domain-browser-art {
    min-height: 160px;
  }

  .brand-dns-record-card,
  .brand-email-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-email-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .brand-domain-hero,
  .brand-domain-card,
  .brand-domain-details,
  .brand-domain-support,
  .brand-email-hero,
  .brand-email-card,
  .brand-email-details,
  .brand-email-health,
  .brand-email-support {
    padding: 16px;
  }

  .brand-domain-before-after,
  .brand-email-before-after,
  .brand-domain-entry-row,
  .brand-email-identity-grid,
  .brand-email-advanced-grid,
  .brand-email-routing > div,
  .brand-domain-progress-track,
  .brand-dns-record-card,
  .brand-email-record-fields,
  .brand-domain-status-card,
  .brand-domain-link-list > div,
  .brand-email-record-status,
  .brand-email-test-row,
  .brand-email-health-list {
    grid-template-columns: 1fr;
  }

  .brand-domain-before-after > b,
  .brand-email-before-after > b {
    justify-self: start;
    transform: rotate(90deg);
  }

  .brand-domain-card-head,
  .brand-domain-support,
  .brand-email-card-head,
  .brand-email-record-card header,
  .brand-email-support {
    align-items: stretch;
    flex-direction: column;
  }

  .brand-domain-entry-row .store-button,
  .brand-domain-status-card .store-button,
  .brand-domain-support .store-button,
  .brand-email-test-row .store-button,
  .brand-email-support .store-button {
    width: 100%;
  }

  .brand-email-progress-track::before {
    bottom: 0;
    height: auto;
    left: 18px;
    right: auto;
    top: 18px;
    width: 2px;
  }

  .brand-domain-progress-step {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .brand-domain-progress-step small {
    grid-column: 2;
    max-width: none;
  }
}

.branding-preview {
  min-height: 156px;
}

.branding-preview header {
  align-items: center;
  border-bottom: 2px solid var(--accent);
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

.branding-preview header img,
.branding-preview header span {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.branding-preview button {
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  margin-left: auto;
  padding: 8px 12px;
}

.product-card-preview > div {
  border-radius: 8px;
  height: 42px;
}

.checkout-preview,
.library-preview,
.email-preview,
.plugin-preview {
  justify-content: center;
}

.plugin-preview {
  border-width: 2px;
}

.branding-validation-list {
  display: grid;
  gap: 10px;
}

.branding-validation-list > div {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.5fr) auto;
  padding: 8px 0;
}

.store-toggle-row {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-weight: 700;
  gap: 10px;
}

@media (max-width: 760px) {
  .branding-heading,
  .branding-validation-list > div {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .branding-heading {
    display: grid;
  }

  .branding-heading .developer-field-actions {
    justify-content: stretch;
  }

  .branding-heading .store-button {
    width: 100%;
  }

  .brand-manager-health-body,
  .brand-manager-check-item,
  .brand-manager-usage-list > div,
  .brand-manager-slug-row,
  .brand-manager-color-preview,
  .brand-manager-marketplace-preview {
    grid-template-columns: 1fr;
  }

  .brand-manager-progress {
    max-width: 136px;
  }

  .brand-manager-next-grid {
    grid-template-columns: 1fr;
  }

  .brand-manager-surface-pane > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .brand-manager-check-item .brand-manager-status,
  .brand-manager-usage-list .brand-manager-status,
  .brand-manager-slug-row .brand-manager-status {
    justify-self: start;
  }

  .branding-dns-copy {
    grid-template-columns: 1fr;
  }

  .branding-dns-copy .store-button {
    justify-self: start;
  }
}

@media (max-width: 1180px) {
  .developer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-sidebar {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    bottom: 0;
    left: 0;
    max-width: min(340px, calc(100vw - 36px));
    min-height: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-104%);
    width: min(340px, calc(100vw - 36px));
    z-index: 30;
  }

  .developer-shell.developer-menu-open .developer-sidebar {
    transform: translateX(0);
  }

  .developer-main {
    padding-top: 18px;
  }
}

@media (max-width: 640px) {
  .store-topbar {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    min-height: 64px;
    padding: 10px 14px;
  }

  .store-topbar-actions {
    gap: 10px;
  }

  .store-nav {
    display: none;
  }

  .theme-toggle-icon,
  .store-brand small {
    display: none;
  }

  .developer-mobile-bar {
    top: 64px;
  }
}

@media (max-width: 1180px) {
  .developer-shell.developer-menu-open .developer-sidebar {
    background: var(--surface);
    transform: translateX(0) !important;
  }
}

/* Final Website Builder V1 overrides: keep the redesigned workspace above legacy template/sidebar rules. */
.website-builder-v1-form .website-templates-workspace,
.website-builder-v1-form .website-template-sidebar,
.website-builder-v1-form .website-builder-v1-mainnav {
  display: none !important;
}

.website-builder-v1-form .website-builder-v1-shell {
  width: min(100%, 1540px) !important;
  margin: 0 auto !important;
  padding: 18px 24px 28px !important;
}

.website-builder-v1-form .website-builder-v1-topbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(420px, auto) !important;
  align-items: center !important;
  gap: 16px !important;
}

.website-builder-v1-form .website-builder-pages-layout,
.website-builder-v1-form .website-builder-v1-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 20px !important;
  align-items: start !important;
}

.website-builder-v1-form .website-builder-pages-main,
.website-builder-v1-form .website-builder-v1-section > main,
.website-builder-v1-form .website-template-main {
  min-width: 0 !important;
  width: 100% !important;
}

.website-builder-v1-form .website-template-page-panel {
  padding: 20px !important;
  border: 1px solid rgba(120, 151, 179, 0.24) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(16, 33, 49, 0.95), rgba(9, 20, 32, 0.96)) !important;
}

.website-builder-v1-form .website-home-template-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

.website-builder-v1-form .website-builder-product-head,
.website-builder-v1-form .website-builder-product-row {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.5fr) minmax(110px, 0.75fr) minmax(130px, 0.8fr) minmax(170px, 1fr) 90px minmax(190px, 1fr) !important;
}

.website-builder-v1-form .website-builder-product-row .brand-row-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

@media (max-width: 1180px) {
  .website-builder-v1-form .website-builder-v1-topbar,
  .website-builder-v1-form .website-builder-pages-layout,
  .website-builder-v1-form .website-builder-v1-section,
  .website-builder-v1-form .website-builder-navigation-editor {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .website-builder-v1-form .website-builder-product-head {
    display: none !important;
  }

  .website-builder-v1-form .website-builder-product-row,
  .website-builder-v1-form .website-builder-route-links article,
  .website-builder-v1-form .website-builder-navigation-row {
    grid-template-columns: 1fr !important;
  }
}

/* Website Builder one-screen Pages workspace */
.website-builder-v1-form .website-template-designer {
  min-height: 0 !important;
}

.website-builder-v1-form .website-builder-one-screen-layout,
.website-builder-v1-form .website-builder-pages-layout.website-builder-one-screen-layout {
  display: block !important;
  height: clamp(680px, calc(100vh - 190px), 920px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.website-builder-v1-form .website-builder-one-screen-layout .website-builder-pages-main {
  height: 100% !important;
  min-height: 0 !important;
}

.website-builder-v1-form .website-builder-one-screen {
  background: linear-gradient(145deg, rgba(16, 33, 49, 0.96), rgba(7, 17, 29, 0.98)) !important;
  border: 1px solid rgba(120, 151, 179, 0.24) !important;
  border-radius: 10px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.website-builder-v1-form .website-builder-one-screen-toolbar {
  align-items: center !important;
  border-bottom: 1px solid rgba(120, 151, 179, 0.18) !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(220px, 300px) minmax(180px, 1fr) auto auto !important;
  padding: 14px 16px !important;
}

.website-builder-v1-form .website-builder-toolbar-select {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.website-builder-v1-form .website-builder-toolbar-select span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

.website-builder-v1-form .website-builder-toolbar-select select {
  background: rgba(8, 18, 30, 0.9) !important;
  border: 1px solid rgba(120, 151, 179, 0.28) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  width: 100% !important;
}

.website-builder-v1-form .website-builder-toolbar-meta {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.website-builder-v1-form .website-builder-toolbar-meta span {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.website-builder-v1-form .website-builder-toolbar-meta strong {
  color: var(--success) !important;
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.website-builder-v1-form .website-builder-device-controls,
.website-builder-v1-form .website-builder-toolbar-actions {
  align-items: center !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.website-builder-v1-form .website-builder-device-controls button {
  background: rgba(8, 18, 30, 0.9) !important;
  border: 1px solid rgba(120, 151, 179, 0.26) !important;
  border-radius: 7px !important;
  color: var(--soft) !important;
  font-weight: 900 !important;
  height: 38px !important;
  width: 42px !important;
}

.website-builder-v1-form .website-builder-device-controls button.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.website-builder-v1-form .website-builder-one-screen-body {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: minmax(0, 74%) minmax(300px, 26%) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 16px !important;
}

.website-builder-v1-form .website-builder-live-preview-pane,
.website-builder-v1-form .website-builder-one-screen-inspector {
  border: 1px solid rgba(120, 151, 179, 0.22) !important;
  border-radius: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.website-builder-v1-form .website-builder-live-preview-pane {
  background: rgba(4, 12, 22, 0.72) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.website-builder-v1-form .website-builder-preview-head {
  align-items: center !important;
  border-bottom: 1px solid rgba(120, 151, 179, 0.16) !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
}

.website-builder-v1-form .website-builder-preview-head h2 {
  font-size: 20px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.website-builder-v1-form .website-builder-live-preview-scroll {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 14px !important;
}

.website-builder-v1-form .website-builder-live-preview-scroll .website-home-template-frame {
  align-items: flex-start !important;
  display: flex !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 1480px !important;
  overflow: hidden !important;
}

.website-builder-v1-form .website-builder-live-preview-scroll .website-home-template-scale {
  flex: 0 0 auto !important;
  position: relative !important;
  transform: scale(0.56) !important;
  transform-origin: top center !important;
  width: 1440px !important;
}

.website-builder-v1-form .website-builder-one-screen-inspector {
  background: rgba(8, 18, 30, 0.82) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.website-builder-v1-form .website-builder-inspector-tabs {
  border-bottom: 1px solid rgba(120, 151, 179, 0.16) !important;
  display: grid !important;
  gap: 6px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  padding: 10px !important;
}

.website-builder-v1-form .website-builder-inspector-tabs button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
  min-height: 36px !important;
}

.website-builder-v1-form .website-builder-inspector-tabs button.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
}

.website-builder-v1-form .website-builder-inspector-panel {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
}

.website-builder-v1-form .website-builder-inspector-template-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
}

.website-builder-v1-form .website-builder-inspector-template-card {
  background: rgba(15, 23, 42, 0.76) !important;
  border: 1px solid rgba(120, 151, 179, 0.22) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 10px !important;
  overflow: hidden !important;
  padding: 10px !important;
}

.website-builder-v1-form .website-builder-inspector-template-card.is-active {
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent) !important;
}

.website-builder-v1-form .website-builder-inspector-template-thumb {
  aspect-ratio: 16 / 10 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.website-builder-v1-form .website-builder-inspector-template-thumb .website-home-template-frame {
  height: 100% !important;
}

.website-builder-v1-form .website-builder-inspector-template-copy {
  align-items: start !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.website-builder-v1-form .website-builder-inspector-template-copy h3 {
  color: var(--accent) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
}

.website-builder-v1-form .website-builder-inspector-template-copy p {
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.website-builder-v1-form .website-builder-inspector-template-copy span {
  background: rgba(34, 197, 94, 0.13) !important;
  border-radius: 999px !important;
  color: var(--success) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 5px 8px !important;
}

.website-builder-v1-form .website-builder-inspector-usage,
.website-builder-v1-form .website-builder-inspector-actions {
  display: grid !important;
  gap: 10px !important;
}

.website-builder-v1-form .website-builder-inspector-usage article {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(120, 151, 179, 0.18) !important;
  border-radius: 8px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
}

.website-builder-v1-form .website-builder-inspector-usage span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

.website-builder-v1-form .website-template-content-editor {
  position: fixed !important;
  inset: 72px 24px 24px !important;
  z-index: 1000 !important;
}

.website-builder-v1-form[data-website-template-device-state="tablet"] .website-builder-live-preview-scroll .website-home-template-frame,
.website-template-designer[data-website-template-device-state="tablet"] .website-builder-live-preview-scroll .website-home-template-frame {
  margin-inline: auto !important;
  max-width: 820px !important;
  min-height: 1680px !important;
}

.website-builder-v1-form[data-website-template-device-state="tablet"] .website-builder-live-preview-scroll .website-home-template-scale,
.website-template-designer[data-website-template-device-state="tablet"] .website-builder-live-preview-scroll .website-home-template-scale {
  transform: scale(0.9) !important;
  width: 820px !important;
}

.website-builder-v1-form[data-website-template-device-state="mobile"] .website-builder-live-preview-scroll .website-home-template-frame,
.website-template-designer[data-website-template-device-state="mobile"] .website-builder-live-preview-scroll .website-home-template-frame {
  margin-inline: auto !important;
  max-width: 430px !important;
  min-height: 2100px !important;
}

.website-builder-v1-form[data-website-template-device-state="mobile"] .website-builder-live-preview-scroll .website-home-template-scale,
.website-template-designer[data-website-template-device-state="mobile"] .website-builder-live-preview-scroll .website-home-template-scale {
  transform: scale(1) !important;
  width: 390px !important;
}

@media (max-width: 1100px) {
  .website-builder-v1-form .website-builder-one-screen-layout,
  .website-builder-v1-form .website-builder-pages-layout.website-builder-one-screen-layout {
    height: auto !important;
    overflow: visible !important;
  }

  .website-builder-v1-form .website-builder-one-screen-toolbar,
  .website-builder-v1-form .website-builder-one-screen-body {
    grid-template-columns: 1fr !important;
  }

  .website-builder-v1-form .website-builder-live-preview-scroll,
  .website-builder-v1-form .website-builder-inspector-panel {
    max-height: 70vh !important;
  }
}