/* AUJUNPEAK V37 — storefront mobile layout + compact store header.
   Scope is limited to the homepage storefront. No JS/business logic changes. */

/* ---------- Store header: less text, cleaner visual hierarchy ---------- */
.sp-store-glass-head{
  position:relative!important;
  isolation:isolate!important;
  min-height:56px!important;
  margin:0 0 12px!important;
  padding:9px 13px 9px 10px!important;
  gap:10px!important;
  overflow:hidden!important;
  border:1px solid rgba(137,166,196,.16)!important;
  border-left:3px solid rgba(70,157,255,.72)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,rgba(10,16,25,.94),rgba(18,25,36,.96) 58%,rgba(13,21,31,.96))!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.sp-store-glass-head::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 8% 50%,rgba(48,146,255,.13),transparent 24%),
    radial-gradient(circle at 84% 20%,rgba(57,194,174,.07),transparent 24%)!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
}
.sp-store-glass-head::after{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  right:42%!important;
  bottom:0!important;
  width:auto!important;
  height:1px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(74,164,255,.75),rgba(76,191,174,.24),transparent)!important;
  box-shadow:none!important;
}
.sp-store-glass-head__icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border-radius:10px!important;
  font-size:.78rem!important;
  color:#8fc8ff!important;
  background:rgba(41,112,184,.16)!important;
  border:1px solid rgba(91,170,238,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.sp-store-glass-head__icon::after{display:none!important}
.sp-store-glass-head__copy{min-width:0!important;flex:1!important}
.sp-store-glass-head__kicker{
  margin:0 0 2px!important;
  color:#73baff!important;
  font-size:.47rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}
.sp-store-glass-head .sp-section-title{
  margin:0!important;
  color:#edf4fb!important;
  font-size:.86rem!important;
  line-height:1.15!important;
  font-weight:950!important;
  text-shadow:none!important;
}
.sp-store-glass-head .sp-section-sub{
  margin:2px 0 0!important;
  max-width:none!important;
  color:rgba(188,205,222,.56)!important;
  font-size:.55rem!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sp-store-glass-head__spark{display:none!important}

/* ---------- Category controls ---------- */
.sp-category-block{margin:0 0 12px!important}
.sp-category-head{margin:0 0 7px!important}
.sp-category-title{display:none!important}
.sp-category-tabs{gap:7px!important}
.sp-category-btn{
  min-height:31px!important;
  height:31px!important;
  padding:0 9px 0 8px!important;
  gap:6px!important;
  border:1px solid rgba(130,153,181,.17)!important;
  border-radius:9px!important;
  background:#111823!important;
  color:#aebccd!important;
  font-size:.66rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 3px 10px rgba(0,0,0,.10)!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.sp-category-btn:hover{
  transform:translateY(-1px)!important;
  background:#172230!important;
  border-color:rgba(93,164,239,.36)!important;
  color:#edf4fb!important;
}
.sp-category-btn.active{
  background:linear-gradient(135deg,#257fd5,#2e99ee)!important;
  border-color:rgba(107,190,255,.76)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(35,126,211,.25),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.sp-category-btn-icon{
  width:16px!important;height:16px!important;flex:0 0 16px!important;
  display:grid!important;place-items:center!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.055)!important;
}
.sp-category-btn.active .sp-category-btn-icon{background:rgba(255,255,255,.13)!important}
.sp-category-btn-icon i{font-size:.53rem!important;color:#9ec5ea!important}
.sp-category-btn.active .sp-category-btn-icon i{color:#fff!important}
.sp-category-btn-label{min-width:0!important}
.sp-category-btn-count{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:16px!important;
  height:16px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.075)!important;
  color:#a9bfd6!important;
  font-size:.49rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.sp-category-btn.active .sp-category-btn-count{background:rgba(255,255,255,.18)!important;color:#fff!important}

/* ---------- Product grid: ONE full-width horizontal card per row on phones ---------- */
@media (max-width:700px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    gap:10px!important;
    width:100%!important;
  }

  .sp-product-group--main .sp-main-grid > .sp-card,
  .sp-product-group--random .sp-random-grid > .sp-card{
    display:grid!important;
    grid-template-columns:minmax(150px,42%) minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:190px!important;
    height:auto!important;
    align-items:stretch!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,#101722,#121a25)!important;
    border:1px solid rgba(111,144,175,.20)!important;
    box-shadow:0 9px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .sp-product-group--main .sp-main-grid > .sp-card:only-child,
  .sp-product-group--random .sp-random-grid > .sp-card:only-child{
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
  }

  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:190px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#08111c!important;
    border-right:1px solid rgba(111,144,175,.13)!important;
  }
  .sp-product-group--main .sp-card-banner-img,
  .sp-product-group--random .sp-card-banner-img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
  }
  .sp-product-group--main .sp-card-banner-overlay,
  .sp-product-group--random .sp-card-banner-overlay{
    display:none!important;
  }

  /* Visible, consistent stock state */
  .sp-product-group--main .sp-stock-badge,
  .sp-product-group--random .sp-stock-badge{
    top:8px!important;
    right:8px!important;
    min-height:23px!important;
    padding:4px 8px!important;
    border-radius:999px!important;
    gap:5px!important;
    font-size:.48rem!important;
    line-height:1!important;
    letter-spacing:.035em!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 5px 15px rgba(0,0,0,.22)!important;
    z-index:4!important;
  }
  .sp-product-group--main .sp-stock-badge:not(.out),
  .sp-product-group--random .sp-stock-badge.random-ready,
  .sp-product-group--random .sp-stock-badge.manual.infinite{
    background:rgba(14,142,111,.94)!important;
    border:1px solid rgba(76,235,195,.46)!important;
    color:#effffb!important;
  }
  .sp-product-group--main .sp-stock-badge.out,
  .sp-product-group--random .sp-stock-badge.out{
    background:rgba(157,32,57,.96)!important;
    border:1px solid rgba(255,112,136,.48)!important;
    color:#fff4f6!important;
  }
  .sp-product-group--main .sp-stock-badge:not(.out)::before,
  .sp-product-group--random .sp-stock-badge.random-ready::before,
  .sp-product-group--random .sp-stock-badge.manual.infinite::before{
    width:6px!important;height:6px!important;flex:0 0 6px!important;
    background:#72f1ca!important;
    box-shadow:0 0 0 3px rgba(77,235,194,.12),0 0 10px rgba(77,235,194,.65)!important;
  }
  .sp-product-group--main .sp-stock-badge.out::before,
  .sp-product-group--random .sp-stock-badge.out::before{
    width:6px!important;height:6px!important;flex:0 0 6px!important;
    background:#ff8da4!important;
    box-shadow:0 0 0 3px rgba(255,89,121,.11),0 0 10px rgba(255,89,121,.48)!important;
  }

  /* Right content column */
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:11px 12px 11px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .sp-product-group--main .sp-card-plat,
  .sp-product-group--random .sp-card-plat{
    min-width:0!important;
    flex-wrap:wrap!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .sp-product-group--main .sp-plat-badge,
  .sp-product-group--main .sp-category-pill,
  .sp-product-group--random .sp-plat-badge,
  .sp-product-group--random .sp-category-pill{
    max-width:100%!important;
    padding:3px 6px!important;
    border-radius:7px!important;
    font-size:.48rem!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{
    min-height:0!important;
    margin:0!important;
    font-size:.79rem!important;
    line-height:1.22!important;
    font-weight:950!important;
    letter-spacing:.01em!important;
    display:block!important;
    overflow:visible!important;
    text-overflow:clip!important;
    -webkit-line-clamp:unset!important;
  }

  /* Keep the full feature/description text visible instead of hiding later lines. */
  .sp-product-group--main .sp-feature-list,
  .sp-product-group--random .sp-feature-list{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{
    display:flex!important;
    align-items:flex-start!important;
    min-width:0!important;
    margin:0!important;
    padding:0 0 0 14px!important;
    font-size:.55rem!important;
    line-height:1.3!important;
    color:rgba(224,235,247,.72)!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  .sp-product-group--main .sp-feature-list li:nth-child(n+3),
  .sp-product-group--random .sp-feature-list li:nth-child(n+3){
    display:flex!important;
  }
  .sp-product-group--main .sp-feature-list li::before,
  .sp-product-group--random .sp-feature-list li::before{
    content:'✓'!important;
    position:absolute!important;
    left:0!important;
    top:.07em!important;
    width:10px!important;
    height:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:linear-gradient(135deg,#2393ea,#42b2ff)!important;
    color:#fff!important;
    font-size:.34rem!important;
    font-weight:950!important;
    box-shadow:0 2px 7px rgba(35,147,234,.20)!important;
  }
  .sp-product-group--main .sp-feature-list li::after,
  .sp-product-group--random .sp-feature-list li::after{display:none!important}

  .sp-product-group--main .sp-card-stats,
  .sp-product-group--random .sp-card-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
    margin:2px 0 0!important;
    padding:6px 5px!important;
    border-radius:9px!important;
    background:rgba(24,36,50,.78)!important;
    border:1px solid rgba(121,151,180,.14)!important;
  }
  .sp-product-group--main .sp-stat,
  .sp-product-group--random .sp-stat{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    font-size:.47rem!important;
  }
  .sp-product-group--main .sp-stat i,
  .sp-product-group--random .sp-stat i{font-size:.47rem!important;color:#67b8f6!important}
  .sp-product-group--main .sp-stat-val,
  .sp-product-group--random .sp-stat-val{font-size:.54rem!important;color:#eef5fb!important}
  .sp-product-group--main .sp-stat-lbl,
  .sp-product-group--random .sp-stat-lbl{font-size:.39rem!important;color:rgba(178,198,219,.62)!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .sp-product-group--main .sp-stat-div,
  .sp-product-group--random .sp-stat-div{display:none!important}

  .sp-product-group--main .sp-card-footer,
  .sp-product-group--random .sp-card-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:7px!important;
    margin:0!important;
    padding:2px 0 0!important;
  }
  .sp-product-group--main .sp-price-from,
  .sp-product-group--random .sp-price-from{font-size:.42rem!important;line-height:1!important}
  .sp-product-group--main .sp-price-range,
  .sp-product-group--random .sp-price-range,
  .sp-product-group--main .sp-price-free,
  .sp-product-group--random .sp-price-free{
    font-size:.72rem!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{
    width:auto!important;
    min-width:88px!important;
    min-height:34px!important;
    height:34px!important;
    padding:6px 10px!important;
    border-radius:9px!important;
    gap:5px!important;
    font-size:.57rem!important;
    box-shadow:0 6px 14px rgba(35,126,211,.18)!important;
    transform:none!important;
  }
  .sp-product-group--main .sp-buy-btn i,
  .sp-product-group--random .sp-buy-btn i{font-size:.58rem!important}

  /* Remove decorative product card shine that can read as an overlay on photos. */
  .sp-product-group--main .sp-card::before,
  .sp-product-group--main .sp-card::after,
  .sp-product-group--random .sp-card::before,
  .sp-product-group--random .sp-card::after{
    pointer-events:none!important;
  }
}

@media (max-width:430px){
  .sp-product-group--main .sp-main-grid > .sp-card,
  .sp-product-group--random .sp-random-grid > .sp-card{
    grid-template-columns:minmax(128px,40%) minmax(0,1fr)!important;
    min-height:176px!important;
  }
  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{min-height:176px!important}
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{padding:10px 10px!important;gap:5px!important}
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{font-size:.74rem!important}
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{font-size:.51rem!important}
  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{min-width:82px!important}
}

@media (max-width:360px){
  .sp-category-tabs{gap:5px!important}
  .sp-category-btn{height:29px!important;min-height:29px!important;padding:0 7px!important;font-size:.61rem!important}
  .sp-product-group--main .sp-main-grid > .sp-card,
  .sp-product-group--random .sp-random-grid > .sp-card{
    grid-template-columns:minmax(116px,38%) minmax(0,1fr)!important;
    min-height:164px!important;
  }
  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{min-height:164px!important}
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{padding:9px 8px!important}
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{font-size:.69rem!important}
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{font-size:.48rem!important;padding-left:13px!important}
  .sp-product-group--main .sp-feature-list li::before,
  .sp-product-group--random .sp-feature-list li::before{width:9px!important;height:9px!important;font-size:.30rem!important}
  .sp-product-group--main .sp-card-footer,
  .sp-product-group--random .sp-card-footer{grid-template-columns:1fr!important;gap:5px!important}
  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{width:100%!important;height:31px!important;min-height:31px!important}
}

@media (prefers-reduced-motion:reduce){
  .sp-category-btn{transition:none!important}
}