/* Hero owns page-level title and guide panels. */
.app-hero {
  margin: 0;
}

.app-hero .merchant-hero-panel {
  border-color: var(--shell-panel-border) !important;
  background: var(--shell-hero-bg) !important;
  box-shadow: var(--shell-panel-shadow);
}

.app-hero .app-hero-aside {
  background: var(--shell-hero-side-bg) !important;
}

.app-hero h1,
.app-hero h3 {
  color: var(--theme-text);
}

.app-hero p {
  color: var(--theme-muted);
}

body.theme-lux .app-hero .eyebrow {
  color: var(--theme-primary);
}

body.theme-lux .app-hero .merchant-step-pills span {
  border-color: var(--theme-border);
  background: var(--theme-surface-high);
  color: var(--theme-text);
}

/* New theme hero reset: no legacy glass, beige borders, blue glow, or old motion. */
body.theme-lux .app-hero {
  margin-bottom: 24px;
}

body.theme-lux .app-hero .merchant-hero-grid {
  gap: 18px;
}

body.theme-lux .app-hero .merchant-hero-panel,
body.theme-lux .app-hero .merchant-hero-primary,
body.theme-lux .app-hero .merchant-hero-guide,
body.theme-lux .app-hero .page-title-copy,
body.theme-lux .app-hero .page-title-side {
  overflow: hidden !important;
  min-height: 168px !important;
  padding: 26px 28px !important;
  border: 1px solid var(--theme-border-soft) !important;
  border-radius: 0 !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-xs, none) !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: border-color 140ms ease, background-color 140ms ease !important;
}

body.theme-lux .app-hero .merchant-hero-primary {
  background: var(--theme-surface) !important;
}

body.theme-lux .app-hero .merchant-hero-guide,
body.theme-lux .app-hero .page-title-side {
  background: var(--theme-surface-high) !important;
}

body.theme-lux .app-hero .merchant-hero-panel::before,
body.theme-lux .app-hero .merchant-hero-panel::after,
body.theme-lux .app-hero .merchant-hero-primary::before,
body.theme-lux .app-hero .merchant-hero-primary::after,
body.theme-lux .app-hero .merchant-hero-guide::before,
body.theme-lux .app-hero .merchant-hero-guide::after,
body.theme-lux .app-hero .page-title-copy::before,
body.theme-lux .app-hero .page-title-copy::after,
body.theme-lux .app-hero .page-title-side::before,
body.theme-lux .app-hero .page-title-side::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

body.theme-lux .app-hero .merchant-hero-panel:hover,
body.theme-lux .app-hero .merchant-hero-primary:hover,
body.theme-lux .app-hero .merchant-hero-guide:hover {
  transform: none !important;
  border-color: var(--theme-border-strong) !important;
  box-shadow: var(--theme-shadow-xs, none) !important;
}

body.theme-lux .app-hero h1,
body.theme-lux .app-hero h3 {
  color: var(--theme-text) !important;
  letter-spacing: 0 !important;
}

body.theme-lux .app-hero h1 {
  font-size: clamp(30px, 2.8vw, 42px) !important;
  font-weight: 820 !important;
}

body.theme-lux .app-hero h3 {
  font-size: clamp(22px, 1.8vw, 28px) !important;
  font-weight: 760 !important;
}

body.theme-lux .app-hero p:not(.eyebrow) {
  color: var(--theme-muted) !important;
  font-size: 15px !important;
  font-weight: 520 !important;
  line-height: 1.68 !important;
}

body.theme-lux-light .app-hero {
  --theme-hero-primary-bg: #ffffff;
  --theme-hero-aside-bg: #e7e7e7;
  --theme-hero-border: #d9dee6;
}

body.theme-lux-light .app-hero .merchant-hero-panel,
body.theme-lux-light .app-hero .merchant-hero-primary,
body.theme-lux-light .app-hero .page-title-copy {
  border-color: var(--theme-hero-border) !important;
  background: var(--theme-hero-primary-bg) !important;
}

body.theme-lux-light .app-hero .merchant-hero-guide,
body.theme-lux-light .app-hero .page-title-side {
  border-color: var(--theme-hero-border) !important;
  background: var(--theme-hero-aside-bg) !important;
}

body.theme-lux-dark .app-hero {
  --theme-hero-primary-bg: #151617;
  --theme-hero-aside-bg: #202020;
  --theme-hero-border: #3b352b;
}

body.theme-lux-dark .app-hero .merchant-hero-panel,
body.theme-lux-dark .app-hero .merchant-hero-primary,
body.theme-lux-dark .app-hero .page-title-copy {
  border-color: var(--theme-hero-border) !important;
  background: var(--theme-hero-primary-bg) !important;
}

body.theme-lux-dark .app-hero .merchant-hero-guide,
body.theme-lux-dark .app-hero .page-title-side {
  border-color: var(--theme-hero-border) !important;
  background: var(--theme-hero-aside-bg) !important;
}