/**
 * StanceArena — shop-card.css
 * Shared shop product card (used in shop.html + viral feed).
 */
.shop-card-host{
  display:none;
  flex:0 0 auto;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  background:#0d0f14;
}
.shop-card-host.active{display:flex}

.sc-root{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  font-family:'Rubik',system-ui,sans-serif;
  color:#f1f5f9;
}

.sc-q-wrap{
  flex-shrink:0;
  padding:10px 18px 6px;
  background:#0d0f14;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.sc-q-text{
  font-size:clamp(17px,4.8vw,22px);font-weight:900;line-height:1.2;
  letter-spacing:-0.5px;text-align:center;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.sc-timer-row{
  flex-shrink:0;display:flex;align-items:center;gap:10px;padding:5px 16px 4px;
}
.sc-t-circle{
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;transition:all 0.3s;
}
.sc-t-circle.warn{border-color:#f59e0b;color:#f59e0b}
.sc-t-circle.danger{border-color:#ef4444;color:#ef4444}
.sc-t-track{flex:1;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
.sc-t-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#22c55e,#f59e0b);transition:width 1s linear}
.sc-t-fill.warn{background:#f59e0b}
.sc-t-fill.danger{background:#ef4444}

.sc-battle{
  flex:0 0 auto;display:flex;gap:0;padding:10px 14px 12px;min-height:0;position:relative;
}
.sc-fighter{
  flex:1;min-width:0;min-height:0;border-radius:18px;display:flex;flex-direction:column;
  align-items:center;padding:12px 10px 10px;overflow:hidden;position:relative;cursor:pointer;
  transition:transform 0.12s,box-shadow 0.25s;
}
.sc-fighter:active{transform:scale(0.972)}
.sc-fighter.red-f{
  background:linear-gradient(165deg,rgba(239,68,68,0.1) 0%,#0d0f14 55%);
  border:1.5px solid rgba(239,68,68,0.45);margin-right:5px;
}
.sc-fighter.blue-f{
  background:linear-gradient(165deg,rgba(59,130,246,0.1) 0%,#0d0f14 55%);
  border:1.5px solid rgba(59,130,246,0.45);margin-left:5px;
}
.sc-fighter.voted-r{box-shadow:0 0 20px rgba(239,68,68,0.28);border-color:rgba(239,68,68,0.75)}
.sc-fighter.voted-b{box-shadow:0 0 20px rgba(59,130,246,0.28);border-color:rgba(59,130,246,0.75)}

.sc-prod-img{
  width:100%;flex:0 0 auto;min-height:88px;max-height:min(38vw,168px);
  aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;position:relative;z-index:1;
}
.sc-prod-img img,.sc-prod-img .sc-prod-photo{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.sc-prod-ph{font-size:clamp(40px,12vw,60px);line-height:1}

.sc-prod-name{
  font-size:clamp(14px,4vw,16px);font-weight:900;text-align:center;line-height:1.32;
  flex-shrink:0;word-break:break-word;padding:0 4px;margin-bottom:8px;color:#f1f5f9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sc-fighter.red-f .sc-prod-name{color:#fecaca}
.sc-fighter.blue-f .sc-prod-name{color:#bfdbfe}

.sc-vote-count,.sc-vote-label,.sc-vbar{display:none!important}

.sc-disc{
  font-size:clamp(10px,2.7vw,12px);font-weight:800;color:#34d399;
  background:rgba(52,211,153,0.14);padding:2px 6px;border-radius:6px;
  flex-shrink:0;line-height:1.2;
}
.sc-disc:empty{display:none}

.sc-price-row{
  display:flex;align-items:baseline;justify-content:center;gap:5px;
  flex-shrink:0;margin-bottom:8px;flex-wrap:wrap;
}
.sc-price{font-size:clamp(19px,5.5vw,24px);font-weight:900;color:#fbbf24;letter-spacing:-0.3px}
.sc-price-orig{
  font-size:clamp(11px,3vw,13px);font-weight:600;color:rgba(148,163,184,0.8);
  text-decoration:line-through;line-height:1.2;
}
.sc-price-orig:empty{display:none}

.sc-buy-btn{
  width:100%;padding:11px 4px;border:none;border-radius:13px;
  font-size:clamp(13px,3.8vw,15px);font-weight:900;cursor:pointer;flex-shrink:0;
  font-family:'Rubik',system-ui,sans-serif;transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;gap:5px;margin-top:auto;
}
.sc-buy-btn:active{transform:scale(0.94);opacity:0.8}
.sc-buy-btn:disabled{opacity:0.45;cursor:default}
.sc-fighter.red-f .sc-buy-btn{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff}
.sc-fighter.blue-f .sc-buy-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}

.sc-vs-wrap{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:10;pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.sc-vs-badge{
  width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#1c2438 0%,#0d0f14 100%);
  border:2px solid rgba(255,255,255,0.32);
  box-shadow:0 0 0 1px rgba(239,68,68,0.4),0 0 0 3px rgba(59,130,246,0.28),0 0 16px rgba(255,255,255,0.14);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;letter-spacing:-0.5px;
}
.sc-vs-r{color:#fca5a5;text-shadow:0 0 8px rgba(239,68,68,0.55)}
.sc-vs-b{color:#93c5fd;text-shadow:0 0 8px rgba(59,130,246,0.55)}

.screen.mode-shop .shop-card-host{
  flex:0 0 auto;
  max-height:min(58vh,480px);
}