/* AUJUNPEAK V46 — final responsive product/store layout.
   Loaded last so legacy V32/V37/V44 rules cannot re-introduce the narrow mobile card on desktop.
*/
html,body,#siteMain,.page-content{box-sizing:border-box;max-width:100%;}
html,body{overflow-x:hidden!important;}
.sp-section,.sp-product-group,.sp-grid,.sp-main-grid,.sp-random-grid{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;}
.sp-grid{margin-inline:0!important;}

/* Desktop: true desktop store — wide multi-column cards, not phone cards. */
@media (min-width:1100px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
    align-items:stretch!important;
  }
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:430px!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:18px!important;
  }
  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(220px,18vw,290px)!important;
    min-height:220px!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;
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    mix-blend-mode:normal!important;
  }
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:13px 14px 14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{font-size:1rem!important;line-height:1.3!important;overflow-wrap:anywhere!important;}
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{min-width:0!important;overflow-wrap:anywhere!important;white-space:normal!important;}
  .sp-product-group--main .sp-card-footer,
  .sp-product-group--random .sp-card-footer{min-width:0!important;}
}

@media (min-width:1500px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}

/* Tablet: two proper desktop/tablet cards per row. */
@media (min-width:701px) and (max-width:1099px){
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
  }
  .sp-product-group--main .sp-card-banner,
  .sp-product-group--random .sp-card-banner{
    width:100%!important;
    height:clamp(205px,28vw,250px)!important;
    min-height:205px!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;display:block!important;object-fit:cover!important;object-position:center!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;
  }
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important;padding:12px!important;}
}

/* Phone: one product per row, genuinely horizontal and compact. */
@media (max-width:700px){
  .page-content{padding-left:12px!important;padding-right:12px!important;}
  .sp-category-tabs{display:flex!important;flex-wrap:wrap!important;gap:7px!important;max-width:100%!important;overflow:visible!important;}
  .sp-category-btn{flex:0 0 auto!important;max-width:100%!important;}
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{
    display:grid!important;
    grid-template-columns:minmax(122px,34vw) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!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;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    overflow:hidden!important;
    background:#070e16!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;
    opacity:1!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    background:#070e16!important;
  }
  .sp-product-group--main .sp-card-banner-overlay,
  .sp-product-group--random .sp-card-banner-overlay{display:none!important;}
  .sp-product-group--main .sp-stock-badge,
  .sp-product-group--random .sp-stock-badge{top:7px!important;right:7px!important;z-index:8!important;font-size:.48rem!important;padding:4px 7px!important;}

  .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:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 10px 11px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  .sp-product-group--main .sp-card-body > *,
  .sp-product-group--random .sp-card-body > *{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  .sp-product-group--main .sp-card-plat,
  .sp-product-group--random .sp-card-plat{display:flex!important;flex-wrap:wrap!important;gap:4px!important;min-width:0!important;overflow:visible!important;}
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{
    font-size:.76rem!important;
    line-height:1.24!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    white-space:normal!important;
    text-overflow:clip!important;
    display:block!important;
  }
  .sp-product-group--main .sp-feature-list,
  .sp-product-group--random .sp-feature-list{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    text-overflow:clip!important;
    line-clamp:unset!important;
    -webkit-line-clamp:unset!important;
    font-size:.56rem!important;
    line-height:1.28!important;
    padding-left:13px!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{width:9px!important;height:9px!important;font-size:.30rem!important;flex:0 0 9px!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:2px!important;
    min-width:0!important;
    max-width:100%!important;
    padding:5px 4px!important;
    margin:1px 0 0!important;
    overflow:hidden!important;
  }
  .sp-product-group--main .sp-stat,
  .sp-product-group--random .sp-stat{min-width:0!important;max-width:100%!important;overflow:hidden!important;gap:3px!important;}
  .sp-product-group--main .sp-stat-val,
  .sp-product-group--random .sp-stat-val{font-size:.50rem!important;min-width:0!important;}
  .sp-product-group--main .sp-stat-lbl,
  .sp-product-group--random .sp-stat-lbl{font-size:.38rem!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!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:6px!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:auto!important;
    overflow:visible!important;
  }
  .sp-product-group--main .sp-price-block,
  .sp-product-group--random .sp-price-block{min-width:0!important;max-width:100%!important;overflow:visible!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:.68rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:78px!important;
    max-width:100%!important;
    height:32px!important;
    min-height:32px!important;
    padding:6px 9px!important;
    border-radius:9px!important;
    font-size:.54rem!important;
    white-space:nowrap!important;
  }
  .sp-product-group--main .sp-buy-btn span,
  .sp-product-group--random .sp-buy-btn span{min-width:0!important;}

  /* Keep touch targets comfortable without letting fixed widths create horizontal overflow. */
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{contain:layout paint style!important;}
}

@media (max-width:520px){
  .page-content{padding-left:9px!important;padding-right:9px!important;}
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{grid-template-columns:minmax(112px,32vw) minmax(0,1fr)!important;}
  .sp-product-group--main .sp-card-name,
  .sp-product-group--random .sp-card-name{font-size:.72rem!important;}
  .sp-product-group--main .sp-feature-list li,
  .sp-product-group--random .sp-feature-list li{font-size:.53rem!important;line-height:1.24!important;}
  .sp-product-group--main .sp-buy-btn,
  .sp-product-group--random .sp-buy-btn{min-width:72px!important;height:30px!important;min-height:30px!important;padding:5px 8px!important;font-size:.51rem!important;}
}

@media (max-width:380px){
  .sp-product-group--main .sp-card,
  .sp-product-group--random .sp-card{grid-template-columns:minmax(104px,30vw) minmax(0,1fr)!important;}
  .sp-product-group--main .sp-card-body,
  .sp-product-group--random .sp-card-body{padding:9px 8px 10px!important;gap:5px!important;}
  .sp-product-group--main .sp-card-stats,
  .sp-product-group--random .sp-card-stats{padding:4px 3px!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;}
}