/* Natalie Showcase Border Scope Fix
   Fixes issue where the screaming border wrapped the full page/header/feature row.
   Border is locked to the homepage showcase card only.
*/

:root{
  --ncd-showcase-gold:#f7c948;
  --ncd-showcase-pink:#e94986;
  --ncd-showcase-blue:#4176f6;
}

/* HARD RESET: stop any accidental global/page border from affecting layout */
html,
body,
.top-strip,
.site-header,
.feature-black,
.trust-black,
.footer,
main,
.hero,
.hero-grid,
.wrap,
.header-grid,
.top-strip-inner{
  border-image:none !important;
  outline:none;
}

/* If an older patch added screaming-border too high on the page, neutralize it there */
body.screaming-border,
main.screaming-border,
.hero.screaming-border,
.wrap.screaming-border,
.top-strip.screaming-border,
.site-header.screaming-border,
.feature-black.screaming-border{
  border:0 !important;
  box-shadow:none !important;
  background-clip:initial !important;
}

/* Keep the hero layout clean */
.hero{
  overflow:hidden;
}

.hero-grid{
  align-items:center;
}

/* The border belongs ONLY to the visual showcase side */
.hero-showroom{
  position:relative !important;
  isolation:isolate;
  padding:18px !important;
  border-radius:34px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,246,251,.96)) padding-box,
    linear-gradient(135deg,var(--ncd-showcase-gold),var(--ncd-showcase-pink),var(--ncd-showcase-blue)) border-box !important;
  border:4px solid transparent !important;
  box-shadow:
    0 20px 55px rgba(233,73,134,.18),
    0 12px 35px rgba(65,118,246,.14) !important;
  overflow:visible !important;
}

/* Decorative nested border, still only inside the showcase area */
.hero-showroom::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:28px;
  border:3px solid transparent;
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.70)) padding-box,
    linear-gradient(135deg,var(--ncd-showcase-gold),var(--ncd-showcase-pink),var(--ncd-showcase-blue)) border-box;
  pointer-events:none;
  z-index:0;
  animation:ncdShowcaseBorderGlow 3.8s ease-in-out infinite;
}

/* The actual product frame remains inside the border */
.hero-product-frame{
  position:relative !important;
  z-index:1;
  border-radius:24px !important;
  border:3px solid transparent !important;
  background:
    linear-gradient(135deg,#ffffff,#fff7fb) padding-box,
    linear-gradient(135deg,var(--ncd-showcase-gold),var(--ncd-showcase-pink),var(--ncd-showcase-blue)) border-box !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
  overflow:hidden !important;
}

/* Stage should not create an extra huge outside border */
#heroShowroomStage,
.product-stage{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* Dots remain visible and inside the showcase */
.hero-dots{
  position:relative;
  z-index:2;
}

/* Sparkle/glow effect stays inside the showcase, not the page */
.hero-showroom::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:34px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 12% 10%,rgba(247,201,72,.22),transparent 26%),
    radial-gradient(circle at 92% 22%,rgba(233,73,134,.18),transparent 24%),
    radial-gradient(circle at 74% 88%,rgba(65,118,246,.17),transparent 28%);
  opacity:.9;
}

@keyframes ncdShowcaseBorderGlow{
  0%,100%{
    filter:drop-shadow(0 0 0 rgba(233,73,134,0));
    opacity:.82;
  }
  50%{
    filter:drop-shadow(0 0 14px rgba(233,73,134,.35));
    opacity:1;
  }
}

/* Mobile: keep it polished without taking over the full screen */
@media(max-width:900px){
  .hero-showroom{
    padding:12px !important;
    border-radius:26px !important;
  }
  .hero-showroom::before{
    inset:10px;
    border-radius:22px;
  }
  .hero-product-frame{
    border-radius:18px !important;
  }
}