/* ── Cake Wallet desktop overrides (keep original layout) ── */

/* Show content that Next.js left at opacity:0 without hydration */
[style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hide mobile-only chrome */
.relative.z-50.md\:hidden,
button[aria-label="Toggle dark mode"] {
  display: none !important;
}

header.mx-auto.hidden.md\:flex {
  display: flex !important;
}

/* Hide any leftover phone mockups */
img[src*="cakephone"] {
  display: none !important;
}

/* Desktop mockup in hero */
.cake-desktop-mockup,
.desktop-hero-visual {
  display: block !important;
  position: relative !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  height: auto !important;
  margin: 0 auto !important;
  z-index: 30 !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
}

/* Reposition hero phone stack container for laptop mockup */
.-bottom-\[25\%\].h-\[270px\],
.-bottom-\[25\%\] {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  height: auto !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide App Store / Play Store blocks if any remain */
a[href*="apps.apple.com"],
a[href*="play.google.com"] {
  display: none !important;
}

/* Header download buttons spacing */
.hidden.md\:flex.items-center.gap-x-4 {
  gap: 10px !important;
  flex-wrap: wrap;
}

.cake-dl + .cake-dl {
  margin-left: 0 !important;
}

/* Hero download row: desktop buttons only */
.flex.flex-col.items-center.justify-center.gap-6 a[href*="apps.apple.com"],
.flex.flex-col.items-center.justify-center.gap-6 a[href*="play.google.com"] {
  display: none !important;
}

/* Ensure main hero section visible on desktop */
main,
section {
  min-height: 0 !important;
}

@media (max-width: 767px) {
  header.mx-auto.hidden.md\:flex {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px !important;
  }

  .hidden.md\:flex.items-center.gap-x-4 {
    justify-content: center;
  }
}
