@media(max-width:560px){
  .s-prod.spx{--r:14px;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px -10px rgba(15,23,42,.18);transition:transform .2s,box-shadow .2s}
  .s-prod.spx::before{padding:1px;background:#eef2f7}
  .s-prod.spx.is-feat::before{padding:1px;background:linear-gradient(145deg,#fcd34d,#eef2f7 45%)}
  .s-prod.spx:active{transform:scale(.98)}
  .spx-media{margin:0;border-radius:14px 14px 0 0;aspect-ratio:16/10}
  .spx-bg,.spx-media::after,.spx-type,.spx-feat,.spx-view,.spx-shine{display:none}
  .spx-img{object-fit:cover;transition:transform .35s}
  .spx-media.is-empty{background:linear-gradient(135deg,#eff6ff,#f5f3ff)}
  .spx-doc{transform:scale(.56);margin-top:0}
  .spx-tags{top:6px;inset-inline:6px;gap:4px}
  .spx-badge{padding:1px 7px;font-size:.58rem}
  .spx-body{padding:8px 10px 10px}
  .spx-cat{align-self:stretch;display:block;margin:0 0 2px;padding:0;background:none !important;color:#94a3b8 !important;font-size:.64rem;font-weight:600;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spx-cat span{display:none}
  .spx-title{margin:0 0 4px;font-size:.78rem;font-weight:800;line-height:1.7;min-height:3.4em;-webkit-line-clamp:2}
  .spx-sub,.spx-meta{display:none}
  .spx-foot{flex-wrap:nowrap;align-items:flex-end;gap:6px;margin-top:auto;padding-top:0;border-top:0}
  .spx-price{flex:1 1 auto;min-width:0;min-height:0;font-size:.68rem;color:#64748b}
  .spx-price .pw{gap:4px;margin-bottom:0}
  .spx-price .pw-old{font-size:.62rem}
  .spx-price .pw-pct{font-size:.58rem;padding:0 5px}
  .spx-price .pw-pct svg{width:10px;height:10px}
  .spx-now{gap:3px}
  .spx-now b{font-size:.8rem;font-weight:900;color:#1d4ed8}
  .spx-now small{font-size:.62rem;color:#64748b}
  .spx-free{padding:0;background:none;color:#16a34a;font-size:.8rem}
  .spx-cart{flex:0 0 32px;width:32px;height:32px;padding:0;gap:0;border-radius:10px;font-size:0;box-shadow:0 6px 14px -6px rgba(37,99,235,.6)}
  .spx-cart svg{width:15px;height:15px}
  .spx-cart:disabled::after{width:12px;height:12px}
  .s-grid-3:has(> .s-prod.spx),.s-grid-4:has(> .s-prod.spx){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:560px) and (hover:hover){
  .s-prod.spx:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,23,42,.1)}
  .spx:hover .spx-img{transform:scale(1.06)}
}
@media(max-width:300px){
  .s-grid-3:has(> .s-prod.spx),.s-grid-4:has(> .s-prod.spx){grid-template-columns:minmax(0,1fr)}
}