/* Full-color platform logos float around the real, high-resolution store sidebar. */
#stores {
  min-height: 580px;
  background: radial-gradient(ellipse at 76% 68%, #e8dbf65e, transparent 56%),
    linear-gradient(112deg, #fcfbfe 8%, #f8f4fc 53%, #eee5f8 100%);
}
#stores .store-network {
  position: relative;
  height: 560px;
  min-height: 560px;
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  --channel-left: 20%;
  --channel-right: 80%;
  --channel-left-inner: 18%;
  --channel-right-inner: 82%;
}
#stores .store-network::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 13%;
  bottom: 20px;
  width: 74%;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #9a71c739 0, #c3a4e325 35%, transparent 72%);
  transform: rotate(-4deg);
  filter: blur(13px);
  pointer-events: none;
}
#stores .store-network::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at 49% 47%, #fff9 0, #ffffff30 31%, transparent 64%),
    linear-gradient(137deg, transparent 27%, #ffffff79 45%, transparent 59%);
  pointer-events: none;
}
#stores .store-channels {
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;
}
#stores .store-channel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 134px;
  transform: translate(-50%, -50%);
  color: #31223e;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
#stores .store-channel img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px #43265f1f);
}
#stores .store-channel:nth-child(1) { left: var(--channel-left); top: 17%; }
#stores .store-channel:nth-child(2) { left: var(--channel-left-inner); top: 39%; }
#stores .store-channel:nth-child(3) { left: var(--channel-left-inner); top: 62%; }
#stores .store-channel:nth-child(4) { left: var(--channel-left); top: 84%; }
#stores .store-channel:nth-child(5) { left: var(--channel-right); top: 20%; }
#stores .store-channel:nth-child(6) { left: var(--channel-right-inner); top: 42%; }
#stores .store-channel:nth-child(7) { left: var(--channel-right-inner); top: 65%; }
#stores .store-channel:nth-child(8) { left: var(--channel-right); top: 87%; }
#stores .store-network .module-frame {
  z-index: 3;
  width: 134px;
  left: calc(50% - 67px);
  top: 24px;
  padding: 4px;
  border-radius: 12px;
  transform: rotateX(calc(5deg + var(--py, 0deg))) rotateY(calc(-12deg + var(--px, 0deg))) rotateZ(-5deg);
  box-shadow: 2px 3px 0 #b8a3cb, 5px 6px 0 #927aa7,
    0 25px 36px -19px #51326966, 0 0 36px #ffffffa3;
}
#stores .store-network .module-frame img {
  aspect-ratio: 780 / 2952;
  border-radius: 7px;
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #stores .store-network:hover .store-channel img { animation: store-logo-float 6s ease-in-out infinite; }
  #stores .store-network:hover .store-channel:nth-child(even) img { animation-delay: -.9s; }
  #stores .store-network:hover .store-channel:nth-child(3n) img { animation-delay: -1.8s; }
}
@keyframes store-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #stores { min-height: 550px; }
  #stores .store-network { height: 550px; min-height: 550px; }
  #stores .store-network .module-frame {
    width: 112px;
    left: calc(50% - 56px);
    top: 58px;
  }
  #stores .store-channel { width: 104px; gap: 8px; font-size: 13px; }
  #stores .store-channel img { width: 35px; height: 35px; flex-basis: 35px; }
}
@media (max-width: 760px) {
  #stores { min-height: 0; padding-bottom: 6px; }
  #stores .store-network {
    height: 455px;
    min-height: 455px;
    max-width: 550px;
    margin: 20px auto 0;
    --channel-left: 15%;
    --channel-right: 85%;
    --channel-left-inner: 15%;
    --channel-right-inner: 85%;
  }
  #stores .store-network::before { bottom: 18px; height: 46px; }
  #stores .store-network .module-frame {
    width: 102px;
    left: calc(50% - 51px);
    top: 28px;
    padding: 3px;
    border-radius: 9px;
    transform: rotateX(4deg) rotateY(-8deg) rotateZ(-3deg);
    box-shadow: 2px 3px 0 #b8a3cb, 4px 5px 0 #927aa7, 0 19px 29px -19px #51326973;
  }
  #stores .store-network .module-frame img { border-radius: 5px; }
  #stores .store-channel { width: 83px; gap: 7px; font-size: 12px; line-height: 1.6; }
  #stores .store-channel img { width: 32px; height: 32px; flex-basis: 32px; }
  #stores .store-channel:nth-child(1), #stores .store-channel:nth-child(5) { top: 16%; }
  #stores .store-channel:nth-child(2), #stores .store-channel:nth-child(6) { top: 38%; }
  #stores .store-channel:nth-child(3), #stores .store-channel:nth-child(7) { top: 60%; }
  #stores .store-channel:nth-child(4), #stores .store-channel:nth-child(8) { top: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  #stores .store-network .module-frame { transition: none; }
  #stores .store-channel img { animation: none; }
}