/* AUJUNPEAK V44 — FINAL RESPONSIVE STORE LAYOUT
   Scope: homepage product/store cards only.
   Desktop and mobile intentionally use different layouts.
*/

/* ---------- Common full-width contract ---------- */
.sp-product-group--main,
.sp-product-group--random,
.sp-main-grid,
.sp-random-grid{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* ---------- Desktop: fluid cards, no phone-sized column ---------- */
@media (min-width: 761px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) !important;
    gap:16px !important;
    width:100% !important;
    align-items:stretch !important;
  }

  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    box-sizing:border-box !important;
  }

  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{
    width:100% !important;
    height:clamp(190px,17vw,270px) !important;
    min-height:190px !important;
    overflow:hidden !important;
  }

  .sp-product-group--main .sp-card-banner-img,
  .sp-product-group--random .sp-card-banner-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* ---------- Phone: one card per row, horizontal ---------- */
@media (max-width: 760px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-flow:row !important;
    gap:12px !important;
    width:100% !important;
  }

  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    display:grid !important;
    grid-template-columns:minmax(150px,37vw) minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:205px !important;
    height:auto !important;
    margin:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-radius:15px !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:205px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }

  .sp-product-group--main .sp-card-banner-img,
  .sp-product-group--random .sp-card-banner-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
  }

  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:205px !important;
    height:auto !important;
    padding:12px 13px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    justify-content:space-between !important;
  }

  /* Keep every text block inside the content column. */
  .sp-product-group--main .sp-card-plat,
  .sp-product-group--main .sp-card-name,
  .sp-product-group--main .sp-feature-list,
  .sp-product-group--main .sp-card-stats,
  .sp-product-group--main .sp-card-footer,
  .sp-product-group--random .sp-card-plat,
  .sp-product-group--random .sp-card-name,
  .sp-product-group--random .sp-feature-list,
  .sp-product-group--random .sp-card-stats,
  .sp-product-group--random .sp-card-footer{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Product description: no old two-line/one-line clamp on phones. */
  .sp-product-group--main .sp-feature-list,
  .sp-product-group--random .sp-feature-list{
    overflow:visible !important;
    max-height:none !important;
  }

  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{
    display:flex !important;
    overflow:visible !important;
    white-space:normal !important;
    text-overflow:clip !important;
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    max-height:none !important;
    line-height:1.35 !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;
  }

  /* Do not let old mobile rules turn the body back into a one-column card. */
  .sp-product-group--main .sp-card-footer,
  .sp-product-group--random .sp-card-footer{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .sp-product-group--main .sp-price-block,
  .sp-product-group--random .sp-price-block{
    min-width:0 !important;
    max-width:52% !important;
  }

  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{
    width:auto !important;
    min-width:104px !important;
    max-width:48% !important;
    flex:0 0 auto !important;
  }

  .sp-product-group--main .sp-stock-badge,
  .sp-product-group--random .sp-stock-badge{
    top:8px !important;
    right:8px !important;
    z-index:4 !important;
  }

  .sp-product-group--main .sp-card-banner-overlay,
  .sp-product-group--random .sp-card-banner-overlay{
    background:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.22)) !important;
    z-index:1 !important;
  }
}

/* Small phones: keep the same horizontal concept but tighten dimensions. */
@media (max-width: 520px){
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    grid-template-columns:minmax(126px,34vw) minmax(0,1fr) !important;
    min-height:184px !important;
  }

  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner,
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    min-height:184px !important;
  }

  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    padding:10px 11px !important;
    gap:6px !important;
  }

  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{
    font-size:.78rem !important;
    line-height:1.25 !important;
  }

  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{
    font-size:.60rem !important;
  }

  .sp-product-group--main .sp-card-stats,
  .sp-product-group--random .sp-card-stats{
    padding:5px 6px !important;
  }

  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{
    min-width:92px !important;
    padding:8px 10px !important;
    font-size:.62rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card,
  .sp-product-group--main .sp-card-banner-img,
  .sp-product-group--random .sp-card-banner-img{
    transition:none !important;
    animation:none !important;
  }
}