.wrap{max-width:1100px;margin:0 auto;padding:10px 16px}
.rows{display:grid;gap:10px}
.item{display:grid;grid-template-columns:100px 1fr 120px 120px 32px;gap:10px;align-items:center;border:1px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}
.item img{width:100px;height:100px;object-fit:cover;border-radius:10px;border:1px solid #eee}
.item-info{display:flex;flex-direction:column;gap:2px}
.item .t a{font-weight:700;color:#111;text-decoration:none}
.item .t a:hover{text-decoration:underline}
.item .sku{font-size:12px;color:#666}
.item .variant-info{font-size:13px;color:#666;margin-top:4px}
.item input{width:80px;padding:8px;border:1px solid #e5e7eb;border-radius:8px}
.btn{padding:10px 14px;border:1px solid #e5e7eb;border-radius:10px;background:#111;color:#fff;cursor:pointer}
.btn.outline{background:#fff;color:#111}
.sum{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:12px}

/* grid layout with summary */
.grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media (max-width: 960px){.grid{grid-template-columns:1fr}}
.summary{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:12px;height:max-content;position:sticky;top:12px}
.summary h3{margin:0 0 8px}
.summary .line,.summary .total{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.summary .total{border-top:1px solid #eee;margin-top:6px;padding-top:10px;font-weight:800}
.summary .coupon{display:flex;gap:8px;margin-top:10px}
.summary .coupon input{flex:1;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px}
.btn.primary{background:#0ea5e9;border-color:#0ea5e9}