/**
 * Next.js (localhost:3006) ↔ WordPress visual parity overrides.
 * Loaded after performance.css — restores React look when perf rules soften glass.
 *
 * @package store-theme
 */

/* ── Body background (React globals.css) ───────────────────────────────────── */
body {
  background-attachment: scroll;
}

/* ── Hero grid overlay — match React hsl(var(--border)) ───────────────────── */
#hero-section .absolute.inset-0.opacity-\[0\.02\] {
  background-image:
    linear-gradient(hsl(var(--border)) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px) !important;
}

/* ── Homepage sticky bars (StickyMobileBar.tsx) ───────────────────────────── */
.home-sticky-react-mobile.is-visible,
.home-sticky-react-mobile.store-sb-sticky-preview {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.home-sticky-react-desktop.is-visible,
.home-sticky-react-desktop.store-sb-sticky-preview {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.home-sticky-react-mobile.sticky-bar-enter {
  animation: sticky-bar-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-sticky-react-desktop.sticky-bar-enter {
  animation: sticky-bar-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Glass cards: restore React blur when not actively scrolling ──────────── */
html:not(.is-scrolling) .home-page .glass-card,
html:not(.is-scrolling) .home-page .glass-chip,
html:not(.is-scrolling) #site-header,
html:not(.is-scrolling) .home-sticky-react-desktop > div {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

html:not(.is-scrolling) #site-header {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* ── Hero ambient orbs — always visible (React Framer blobs) ──────────────── */
#hero-section .pointer-events-none.absolute.inset-0.overflow-hidden > .rounded-full {
  display: block !important;
}

/* ── Live order popup — React position ────────────────────────────────────── */
#live-order-popup:not(.hidden) {
  display: flex !important;
}

@media (max-width: 767px) {
  .home-page #live-order-popup {
    bottom: calc(7rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 768px) {
  .home-page #live-order-popup {
    bottom: 2.5rem !important;
    left: 2.5rem !important;
  }
}

/* ── Featured section bg (React FeaturedProducts) ───────────────────────── */
#featured.bg-surface\/25,
#featured {
  background-color: hsl(var(--surface) / 0.25);
}

/* ── Promotions mesh-gradient (React PromotionsBanner) ────────────────────── */
#promotions .mesh-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, hsla(43, 68%, 47%, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, hsla(220, 50%, 25%, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 0%, hsla(43, 68%, 47%, 0.06) 0%, transparent 50%);
}

/* ── COD confirmation gradient (React) ────────────────────────────────────── */
#cod-confirmation .rounded-\[3rem\].bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, hsl(var(--brand)), hsl(var(--brand)), hsl(var(--brand-soft))) !important;
}

/* ── Product card dense frame (React ProductCard) ─────────────────────────── */
#featured .product-card-premium {
  border-radius: 0.75rem !important;
}