#shop-coming{
  position: relative;
  /* room below header on all screens */
  padding: clamp(84px, 12vw, 140px) 16px clamp(56px, 8vw, 96px);
  min-height: clamp(520px, 100vh, 960px);
  display: grid;
  place-items: center;
  text-align: center;
  background: #0b0b0f; /* fallback if image missing */
  overflow: hidden;
}

#shop-coming .coming-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;           /* why: fills entire background */
  object-position: center;
  filter: saturate(1.05);
}

#shop-coming .coming-overlay{
  position: absolute; inset: 0;
  /* subtle dark overlay for readability */
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(255,255,255,.06) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}

#shop-coming .coming-title{
  position: relative;
  margin: 0;
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: .9;
  color: #fff;
  font-size: clamp(2.5rem, 12vw, 10rem);
  /* tiny glow for contrast on bright frames */
  text-shadow: 0 0 10px rgba(255,255,255,.18), 0 0 40px rgba(255,255,255,.12);
}

#shop-coming .coming-sub{
  position: relative;
  margin: .75rem 0 0;
  color: #d6d6d6;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: .04em;
  font-family: 'Montserrat';
}

/* (Optional) remove old grid if still present in the HTML */
#shop-mockup{ display: none !important; }

#shop-coming .coming-bg-stack{ position:absolute; inset:0; }
#shop-coming .coming-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1200ms ease;  /* why: cross-fade */
}
#shop-coming .coming-bg.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  #shop-coming .coming-bg{ transition:none; }
}