/* Kidora "COMING SOON" hanging sign — pure CSS, no image.
   Used in the shop / category / collection / new-arrivals empty grid. */
.kidora-coming-soon{
  --cs-red:#e01f26;
  --cs-red-dark:#bd0f17;
  --cs-ring:#cf1b22;
  width:260px;
  max-width:100%;
  margin:34px auto 56px;
}

/* Everything hangs from the ring at the top centre and sways together */
.cs-swing{
  position:relative;
  padding-top:78px;
  transform-origin:top center;
}

/* Top ring (hook) */
.kidora-coming-soon .cs-ring{
  position:absolute;
  top:0;
  left:50%;
  width:16px;
  height:16px;
  border:3px solid var(--cs-ring);
  border-radius:50%;
  background:#fff;
  transform:translateX(-50%);
  z-index:3;
}

/* Two thin strings fanning out from the ring down to the board corners.
   Lengths are tuned to the 7deg-tilted board corners so each string meets
   its corner exactly and never pokes out past the board sides. */
.kidora-coming-soon .cs-string{
  position:absolute;
  top:15px;
  left:50%;
  height:2.5px;
  background:var(--cs-ring);
  border-radius:2px;
  transform-origin:0 50%;
  z-index:1;
}
.kidora-coming-soon .cs-string--left{ width:132px; transform:rotate(158.5deg); }
.kidora-coming-soon .cs-string--right{ width:158px; transform:rotate(30deg); }

/* The vivid red hanging board, tilted clockwise with a soft floating shadow */
.kidora-coming-soon .cs-board{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:26px 20px;
  border-radius:16px;
  background:radial-gradient(120% 120% at 35% 18%, #f75048, #e01f26 55%, #bd0f17);
  color:#fff;
  font-weight:900;
  font-size:clamp(28px,7.4vw,40px);
  line-height:1.06;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  transform:rotate(7deg);
  z-index:2;
  box-shadow:
    -6px 26px 34px -8px rgba(15,23,42,.34),
    inset 0 2px 0 rgba(255,255,255,.22);
  text-shadow:0 2px 4px rgba(120,0,0,.35);
}

/* Gentle pendulum sway (disabled for users who prefer reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .kidora-coming-soon .cs-swing{
    animation:cs-sway 4.6s ease-in-out infinite;
  }
  @keyframes cs-sway{
    0%,100%{ transform:rotate(-1.2deg); }
    50%{ transform:rotate(1.2deg); }
  }
}

@media (max-width:360px){
  .kidora-coming-soon{
    transform:scale(.85);
    transform-origin:top center;
    margin-bottom:22px;
  }
}