/* ═══════════════════════════════════════════════════════════════════
   MinerCore — Compact Commerce Hero (Cart / Checkout / Payment)
   Rule: Always compact. Zero wasted vertical space on any screen.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ch-bg-gradient: linear-gradient(180deg, rgba(7, 12, 22, 0.88) 0%, rgba(3, 6, 12, 0.96) 100%);
  --ch-datacenter-img: var(--mc-hero-pages-bg, url("../images/hosted-datacenter-aisle.jpg"));
  --ch-accent: var(--color-accent, #38bdf8);
  --ch-primary: var(--brand-primary, #1877f2);
  --ch-text-title: #ffffff;
  --ch-text-sub: #c9d8e5;
  --ch-text-muted: #94a3b8;
  --ch-border-subtle: rgba(255, 255, 255, 0.1);
  --ch-glass-bg: rgba(255, 255, 255, 0.06);
  --ch-glass-border: rgba(255, 255, 255, 0.12);
  --ch-success: #10b981;
}

/* ── Base Hero ─────────────────────────────────────────────────────── */
.commerce-unified-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #060a12 !important;
  background-image: var(--ch-bg-gradient), var(--ch-datacenter-img) !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
  color: var(--ch-text-title) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ch-border-subtle) !important;
  padding: 28px 0 26px !important;   /* desktop: fixed compact — NOT clamp */
  box-sizing: border-box !important;
  min-height: 0 !important;
}

/* Grid overlay */
.commerce-unified-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.6), transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.6), transparent) !important;
}

.commerce-hero-container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Layout: ALWAYS a single row — copy left, steps right ──────────── */
.commerce-hero-inner {
  display: flex !important;
  flex-direction: row !important;        /* stays row on ALL screens */
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.commerce-hero-copy {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* ── Eyebrow ────────────────────────────────────────────────────────── */
.commerce-hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--ch-accent) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
}

.commerce-hero-eyebrow-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background-color: var(--ch-accent) !important;
  box-shadow: 0 0 7px var(--ch-accent) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.commerce-hero-title {
  margin: 0 0 4px 0 !important;
  font-size: var(--text-3xl) !important;  /* clamp(1.45rem, 2.6vw, 1.85rem) */
  font-weight: var(--fw-semibold) !important;
  color: #ffffff !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: -0.02em !important;
  word-break: break-word !important;
}

/* ── Description ────────────────────────────────────────────────────── */
.commerce-hero-desc {
  margin: 0 0 10px 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--ch-text-sub) !important;
  line-height: 1.55 !important;
  max-width: 520px !important;
  word-break: break-word !important;
}

/* ── Trust Strip ────────────────────────────────────────────────────── */
.commerce-hero-trust {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px 10px !important;
  color: #cbd5e1 !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.3 !important;
}

.commerce-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.commerce-trust-check {
  color: var(--ch-accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.commerce-trust-check svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}

.commerce-trust-dot {
  color: rgba(255,255,255,0.28) !important;
  font-size: var(--text-base) !important;
  line-height: 1 !important;
}

/* ── Steps Tracker ──────────────────────────────────────────────────── */
.commerce-steps-wrap {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.commerce-steps-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  background: var(--ch-glass-bg) !important;
  border: 1px solid var(--ch-glass-border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
  white-space: nowrap !important;
}

.commerce-step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--ch-text-muted) !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
  white-space: nowrap !important;
}

.commerce-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  color: inherit !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  flex-shrink: 0 !important;
}

.commerce-step.is-active {
  background: var(--ch-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(24,119,242,0.35) !important;
}

.commerce-step.is-active .commerce-step-num {
  background: #ffffff !important;
  color: var(--ch-primary) !important;
}

.commerce-step.is-completed {
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.35) !important;
  color: #34d399 !important;
}

.commerce-step.is-completed .commerce-step-num {
  background: #10b981 !important;
  color: #ffffff !important;
}

.commerce-step-divider {
  color: rgba(255,255,255,0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.commerce-step-divider svg {
  width: 9px !important;
  height: 9px !important;
  fill: currentColor !important;
}

/* ── Order Badge ────────────────────────────────────────────────────── */
.commerce-order-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.32) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px) !important;
}

.commerce-order-badge__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.commerce-order-badge__icon svg { width: 17px !important; height: 17px !important; fill: currentColor !important; }

.commerce-order-badge__info { display: flex !important; flex-direction: column !important; gap: 1px !important; }

.commerce-order-badge__label {
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6ee7b7 !important;
}

.commerce-order-badge__val {
  font-size: var(--text-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Aggressive Compression
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet ≤ 900px — compact padding, steps still inline */
@media (max-width: 900px) {
  .commerce-unified-hero {
    padding: 18px 0 16px !important;
  }

  .commerce-hero-container {
    padding: 0 18px !important;
  }

  .commerce-hero-inner {
    gap: 12px !important;
  }

  /* Hide description on tablet — saves ~2 lines of height */
  .commerce-hero-desc {
    display: none !important;
  }

  /* Trust: single compact line */
  .commerce-hero-trust {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .commerce-trust-dot:not(:first-of-type) {
    display: none !important;
  }

  /* Steps: slightly smaller */
  .commerce-step {
    padding: 4px 9px !important;
  }
}

/* Mobile ≤ 640px — absolute minimum */
@media (max-width: 640px) {
  .commerce-unified-hero {
    padding: 12px 0 10px !important;
  }

  .commerce-hero-container {
    padding: 0 12px !important;
  }

  .commerce-hero-inner {
    gap: 8px !important;
    align-items: center !important;
  }

  /* Eyebrow hidden — saves one line */
  .commerce-hero-eyebrow {
    display: none !important;
  }

  /* Trust hidden on mobile */
  .commerce-hero-trust {
    display: none !important;
  }

  /* Steps: number only, no label text */
  .commerce-steps-nav {
    padding: 4px !important;
    gap: 2px !important;
    border-radius: 10px !important;
  }

  .commerce-step {
    padding: 5px 7px !important;
    gap: 3px !important;
  }

  /* Hide step label text — keep number only */
  .commerce-step > span:not(.commerce-step-num) {
    display: none !important;
  }

  .commerce-step-num {
    width: 24px !important;
    height: 24px !important;
    font-size: var(--text-xs) !important;
  }

  .commerce-step-divider {
    display: none !important;
  }
}

/* Very small ≤ 420px — micro compact */
@media (max-width: 420px) {
  .commerce-unified-hero {
    padding: 10px 0 8px !important;
  }

  .commerce-hero-container {
    padding: 0 10px !important;
  }

  .commerce-hero-title {
    font-size: var(--text-2xl) !important;
  }

  /* Hide steps entirely — the page itself shows progress */
  .commerce-steps-wrap {
    display: none !important;
  }
}