/* PATCH_ID: b2c_phase5e9_banner_edge_blend_fix_stage_safe_20260522 */

/*
  Fix visible purple/white edge stripes on the home hero banner.
  Cause: image background + translucent overlay + 1px border + rounded clipping.
  This patch makes the hero borderless and uses a soft inner highlight instead.
*/
.b2c-home-native-cms .home-hero{
  border:0 !important;
  outline:0 !important;
  background-clip:border-box !important;
  box-shadow:
    0 30px 76px rgba(90,48,120,.13),
    inset 0 0 0 1px rgba(255,255,255,.42) !important;
  isolation:isolate;
}

/* Keep the text readable, but stop the mask from creating a hard vertical edge. */
.b2c-home-native-cms .home-hero.has-bg::before{
  inset:-1px !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255,246,252,.96) 0%, rgba(255,246,252,.84) 32%, rgba(255,246,252,.32) 58%, rgba(255,255,255,0) 78%),
    linear-gradient(90deg, rgba(255,246,252,.88) 0%, rgba(255,246,252,.62) 34%, rgba(255,246,252,.16) 64%, rgba(255,255,255,0) 88%) !important;
  filter:none !important;
}

/* Avoid sub-pixel purple lines at rounded corners on Chrome/Edge. */
.b2c-home-native-cms .home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
  z-index:2;
}

/* Keep all text above both the image and the blending layer. */
.b2c-home-native-cms .home-hero .hero-copy{
  position:relative;
  z-index:3;
}

/* Make the pill and CTA visually detached from the background image. */
.b2c-home-native-cms .home-hero .hero-badge{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(8px);
}
.b2c-home-native-cms .home-hero .hero-cta{
  box-shadow:0 18px 34px rgba(25,23,31,.22) !important;
}

/* Mobile: remove edge artifacts from vertical cover mode too. */
@media(max-width:900px){
  .b2c-home-native-cms .home-hero{
    box-shadow:
      0 24px 58px rgba(90,48,120,.12),
      inset 0 0 0 1px rgba(255,255,255,.44) !important;
  }
  .b2c-home-native-cms .home-hero.has-bg::before{
    inset:-1px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,246,252,.74) 58%, rgba(255,246,252,.98) 100%) !important;
  }
}