/* ============================================================
   HOMEPAGE RANDOM PRODUCT SECTION
   Visually separates mystery/random products from normal shop
   cards and makes Random cards compact 2-up on phones.
   ============================================================ */
.sp-product-group{
  width:100%;
  min-width:0;
}
.sp-product-group[hidden]{display:none!important}
.sp-product-group--random{
  position:relative;
  margin-top:18px;
  padding-top:0;
}
.sp-random-divider{
  width:min(100%,520px);
  height:20px;
  margin:4px auto 9px;
  display:grid;
  grid-template-columns:minmax(36px,1fr) 34px minmax(36px,1fr);
  align-items:center;
  gap:9px;
  opacity:.96;
}
.sp-random-divider__line{
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(84,177,255,.48),rgba(129,114,255,.42));
  box-shadow:0 0 10px rgba(78,171,255,.14);
}
.sp-random-divider__line:last-child{
  transform:scaleX(-1);
}
.sp-random-divider__gem{
  position:relative;
  width:32px;
  height:20px;
  display:grid;
  place-items:center;
  color:#86caff;
  font-size:.68rem;
  text-shadow:0 0 9px rgba(90,190,255,.38);
}
.sp-random-divider__gem::before,
.sp-random-divider__gem::after{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#9fd8ff;
  box-shadow:0 0 8px rgba(96,199,255,.58);
  animation:spRandomDividerTwinkle 2.6s ease-in-out infinite;
}
.sp-random-divider__gem::before{left:2px;top:3px}
.sp-random-divider__gem::after{right:2px;bottom:3px;animation-delay:-1.2s}
.sp-random-section-head{
  position:relative;
  width:100%;
  min-height:47px;
  margin:0 0 11px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px 7px 9px;
  border-radius:13px;
  background:linear-gradient(90deg,rgba(44,100,171,.075),rgba(69,77,140,.04) 48%,transparent 88%);
  border-left:2px solid rgba(73,169,255,.42);
  overflow:hidden;
}
.sp-random-section-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(220px,44%);
  height:1px;
  background:linear-gradient(90deg,rgba(74,184,255,.55),rgba(116,119,255,.22),transparent);
}
.sp-random-section-head__icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#a8dbff;
  background:linear-gradient(145deg,rgba(48,138,255,.15),rgba(72,92,255,.07));
  border:1px solid rgba(91,174,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 16px rgba(18,80,166,.08);
}
.sp-random-section-head__copy{min-width:0}
.sp-random-section-head__kicker{
  color:#73bfff;
  font-size:.54rem;
  font-weight:950;
  letter-spacing:.16em;
  line-height:1.1;
}
.sp-random-section-head__title{
  margin-top:2px;
  color:#eef7ff;
  font-size:.9rem;
  font-weight:950;
  line-height:1.18;
}
.sp-random-section-head__sub{
  margin-top:2px;
  color:rgba(205,224,244,.55);
  font-size:.62rem;
  line-height:1.25;
}
.sp-random-section-head__spark{
  position:absolute;
  right:12px;
  top:50%;
  width:54px;
  height:24px;
  transform:translateY(-50%);
  pointer-events:none;
}
.sp-random-section-head__spark i{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#8ed5ff;
  box-shadow:0 0 8px rgba(89,195,255,.62);
  animation:spRandomHeadSpark 2.9s ease-in-out infinite;
}
.sp-random-section-head__spark i:nth-child(1){left:3px;top:10px}
.sp-random-section-head__spark i:nth-child(2){left:25px;top:2px;animation-delay:-1s}
.sp-random-section-head__spark i:nth-child(3){right:3px;bottom:3px;animation-delay:-2s}
.sp-random-grid{
  width:100%;
}
/* Desktop remains spacious like normal product cards. */
@media (min-width:761px){
  .sp-random-grid{
    grid-template-columns:repeat(auto-fill,minmax(285px,1fr))!important;
    gap:14px!important;
  }
}
/* Phone: Random Products stay two-up and compact. */
@media (max-width:520px){
  .sp-product-group--random{margin-top:13px}
  .sp-random-divider{
    width:min(82%,320px);
    height:16px;
    margin:1px auto 7px;
    grid-template-columns:minmax(28px,1fr) 26px minmax(28px,1fr);
    gap:6px;
  }
  .sp-random-divider__gem{width:26px;height:16px;font-size:.58rem}
  .sp-random-section-head{
    min-height:40px;
    margin-bottom:8px;
    padding:5px 8px 5px 7px;
    border-radius:11px;
    gap:7px;
  }
  .sp-random-section-head__icon{width:29px;height:29px;flex-basis:29px;border-radius:8px;font-size:.72rem}
  .sp-random-section-head__kicker{font-size:.45rem;letter-spacing:.13em}
  .sp-random-section-head__title{font-size:.74rem;margin-top:1px}
  .sp-random-section-head__sub{font-size:.53rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}
  .sp-random-section-head__spark{display:none}
  .sp-random-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    gap:7px!important;
  }
  .sp-random-grid > .sp-card--random-direct:only-child{
    grid-column:1/-1;
    width:min(100%,310px)!important;
    justify-self:center!important;
  }
  .sp-random-grid .sp-card--random-direct{
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
  .sp-random-grid .sp-card-banner{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1.35/1!important;
    overflow:hidden!important;
    background:#0b111a!important;
  }
  .sp-random-grid .sp-card-banner-img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .sp-random-grid .sp-stock-badge{
    top:6px!important;
    right:6px!important;
    min-height:20px!important;
    padding:3px 6px!important;
    border-radius:6px!important;
    font-size:.46rem!important;
    letter-spacing:.035em!important;
  }
  .sp-random-grid .sp-card-body{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    height:auto!important;
    min-height:0!important;
    padding:7px 7px 8px!important;
  }
  .sp-random-grid .sp-card-plat{
    gap:4px!important;
    min-height:0!important;
    flex-wrap:nowrap!important;
    overflow:hidden!important;
  }
  .sp-random-grid .sp-plat-badge,
  .sp-random-grid .sp-category-pill{
    min-width:0!important;
    padding:3px 5px!important;
    border-radius:6px!important;
    font-size:.46rem!important;
    gap:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .sp-random-grid .sp-card-name{
    min-height:0!important;
    margin:0!important;
    font-size:.72rem!important;
    line-height:1.24!important;
    font-weight:900!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
  }
  .sp-random-grid .sp-feature-list{
    gap:2px!important;
    margin:0!important;
  }
  .sp-random-grid .sp-feature-list li{
    min-height:0!important;
    padding:0!important;
    font-size:.53rem!important;
    line-height:1.3!important;
  }
  .sp-random-grid .sp-feature-list li:nth-child(n+3){display:none!important}
  .sp-random-grid .sp-feature-list li::before{
    width:12px!important;
    height:12px!important;
    min-width:12px!important;
  }
  .sp-random-grid .sp-feature-list li::after{
    width:12px!important;
    height:12px!important;
  }
  .sp-random-grid .sp-card-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;
    margin:1px 0 0!important;
    padding:5px 3px!important;
    border-radius:8px!important;
  }
  .sp-random-grid .sp-stat{gap:1px!important;min-width:0!important}
  .sp-random-grid .sp-stat i{font-size:.52rem!important;margin-bottom:1px!important}
  .sp-random-grid .sp-stat-val{font-size:.58rem!important;line-height:1.1!important}
  .sp-random-grid .sp-stat-lbl{font-size:.40rem!important;line-height:1.1!important;white-space:nowrap!important}
  .sp-random-grid .sp-stat-div{display:none!important}
  .sp-random-grid .sp-card-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin-top:1px!important;
    padding-top:5px!important;
  }
  .sp-random-grid .sp-price-block{min-width:0!important}
  .sp-random-grid .sp-price-from{font-size:.43rem!important;margin-bottom:0!important}
  .sp-random-grid .sp-price-range,
  .sp-random-grid .sp-price-free{font-size:.68rem!important;line-height:1.15!important;white-space:nowrap!important}
  .sp-random-grid .sp-random-open-btn{
    width:100%!important;
    min-height:31px!important;
    height:31px!important;
    padding:5px 7px!important;
    border-radius:8px!important;
    font-size:.56rem!important;
    gap:5px!important;
  }
  .sp-random-grid .sp-random-open-btn i{font-size:.58rem!important}
}
@keyframes spRandomDividerTwinkle{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@keyframes spRandomHeadSpark{0%,100%{opacity:.35;transform:translateY(2px) scale(.8)}50%{opacity:1;transform:translateY(-2px) scale(1.2)}}
@media(prefers-reduced-motion:reduce){
  .sp-random-divider__gem::before,.sp-random-divider__gem::after,.sp-random-section-head__spark i{animation:none!important}
}

/* ============================================================
   STORE & SERVICES — GLASS HEADER V2
   Keeps the main-store heading visually consistent with the
   Mystery Box heading while remaining its own calmer section.
   ============================================================ */
.sp-store-glass-head{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:62px;
  margin-bottom:13px!important;
  padding:10px 14px 10px 11px!important;
  gap:11px!important;
  border:1px solid rgba(111,174,255,.20)!important;
  border-left:2px solid rgba(87,176,255,.50)!important;
  border-radius:15px!important;
  background:
    linear-gradient(115deg,rgba(8,15,26,.76) 0%,rgba(16,24,40,.61) 47%,rgba(11,25,42,.42) 100%)!important;
  -webkit-backdrop-filter:blur(17px) saturate(138%);
  backdrop-filter:blur(17px) saturate(138%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(74,137,225,.035),
    0 10px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(46,96,170,.025)!important;
}
.sp-store-glass-head::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-70% -10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 50%,rgba(62,160,255,.16),transparent 25%),
    radial-gradient(circle at 62% 16%,rgba(118,91,255,.11),transparent 24%),
    radial-gradient(circle at 92% 72%,rgba(41,205,230,.07),transparent 22%);
  filter:blur(14px);
  opacity:.86;
  animation:spStoreGlassDrift 9s ease-in-out infinite alternate;
}
.sp-store-glass-head::after{
  content:"";
  position:absolute;
  left:11px;
  bottom:0;
  width:min(270px,38%);
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(84,187,255,.76),rgba(114,112,255,.33),transparent);
  box-shadow:0 0 10px rgba(68,172,255,.20);
  pointer-events:none;
}
.sp-store-glass-head__icon{
  position:relative;
  z-index:1;
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border-radius:11px!important;
  color:#b8ddff!important;
  font-size:.92rem!important;
  background:linear-gradient(145deg,rgba(68,150,255,.18),rgba(103,91,224,.08))!important;
  border:1px solid rgba(116,183,255,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 18px rgba(19,82,167,.10),
    0 0 16px rgba(71,157,255,.055)!important;
}
.sp-store-glass-head__icon::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:8px;
  border:1px solid rgba(145,206,255,.06);
  pointer-events:none;
}
.sp-store-glass-head__copy{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1;
}
.sp-store-glass-head__kicker{
  margin-bottom:2px;
  color:#76c4ff;
  font-size:.53rem;
  font-weight:950;
  line-height:1.05;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(74,173,255,.20);
}
.sp-store-glass-head .sp-section-title{
  color:#f3f8ff!important;
  font-size:.90rem!important;
  font-weight:950!important;
  line-height:1.2!important;
  text-shadow:0 1px 10px rgba(0,0,0,.22);
}
.sp-store-glass-head .sp-section-sub{
  max-width:680px;
  margin-top:2px!important;
  color:rgba(207,224,243,.60)!important;
  font-size:.64rem!important;
  line-height:1.32!important;
}
.sp-store-glass-head__spark{
  position:absolute;
  z-index:1;
  right:15px;
  top:50%;
  width:70px;
  height:34px;
  transform:translateY(-50%);
  pointer-events:none;
}
.sp-store-glass-head__spark i{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#a7dcff;
  box-shadow:0 0 9px rgba(80,189,255,.70);
  animation:spStoreGlassSpark 3.2s ease-in-out infinite;
}
.sp-store-glass-head__spark i:nth-child(1){left:2px;top:18px}
.sp-store-glass-head__spark i:nth-child(2){left:31px;top:4px;animation-delay:-1.1s}
.sp-store-glass-head__spark i:nth-child(3){right:3px;bottom:5px;animation-delay:-2.15s}

@media (max-width:520px){
  .sp-store-glass-head{
    min-height:48px;
    margin-bottom:9px!important;
    padding:6px 9px 6px 7px!important;
    gap:8px!important;
    border-radius:12px!important;
    -webkit-backdrop-filter:blur(13px) saturate(130%);
    backdrop-filter:blur(13px) saturate(130%);
  }
  .sp-store-glass-head::after{left:8px;width:min(170px,48%)}
  .sp-store-glass-head__icon{
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
    border-radius:9px!important;
    font-size:.72rem!important;
  }
  .sp-store-glass-head__kicker{font-size:.43rem;letter-spacing:.12em;margin-bottom:1px}
  .sp-store-glass-head .sp-section-title{font-size:.75rem!important}
  .sp-store-glass-head .sp-section-sub{
    max-width:245px;
    font-size:.52rem!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sp-store-glass-head__spark{display:none}
}

@keyframes spStoreGlassDrift{
  0%{transform:translate3d(-1.5%,0,0) scale(1)}
  100%{transform:translate3d(1.5%,1%,0) scale(1.03)}
}
@keyframes spStoreGlassSpark{
  0%,100%{opacity:.28;transform:translateY(2px) scale(.78)}
  50%{opacity:1;transform:translateY(-2px) scale(1.18)}
}
@media(prefers-reduced-motion:reduce){
  .sp-store-glass-head::before,.sp-store-glass-head__spark i{animation:none!important}
}