/* variations-0918 — the Variations sheet (public/variations-sheet.js).
   Phone: bottom sheet, max-height 85vh, drag handle. Desktop (>=760px): a
   440px right drawer, same tokens/rhythm as the rest of AJAW Trade - plain
   white, --violet accents, never orange. */

#vs-overlay{position:fixed;inset:0;z-index:1900;display:none}
#vs-overlay.is-open{display:block}
.vs-backdrop{position:absolute;inset:0;background:rgba(9,9,11,.45)}
body.vs-lock{overflow:hidden}

.vs-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
 max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -20px 60px #16082e30;
 animation:vsSlideUp .22s ease}
@keyframes vsSlideUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}

.vs-handle{width:36px;height:4px;border-radius:3px;background:var(--line);margin:10px auto 2px;flex-shrink:0}
.vs-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.vs-head h2{font-size:17px}
.vs-close{width:32px;height:32px;display:grid;place-items:center;color:var(--gray);border-radius:50%;flex-shrink:0}
.vs-close:hover{background:var(--canvas)}
.vs-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 6px}
.vs-foot{padding:10px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-shrink:0}
.vs-moq-hint{font-size:12px;color:var(--gray);text-align:center;margin:0 0 8px}
.vs-cta{width:100%}

.vs-product{display:flex;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.vs-product img{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--canvas)}
.vs-product-info{min-width:0}
.vs-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vs-price b{font:700 20px/1.2 var(--display);letter-spacing:-.02em}
.vs-off{background:var(--ajaw-brand-gradient);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px}
.vs-moq{font-size:12px;color:var(--gray);margin-top:4px}

.vs-chipsec{margin-bottom:16px}
.vs-chipsec-head{margin-bottom:8px;font-size:13px}
.vs-chips{display:flex;flex-wrap:wrap;gap:8px}
.vs-chip{border:1.5px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12.5px;background:#fff}
.vs-chip.is-on{border-color:var(--violet);color:var(--deep);background:var(--tint);font-weight:600}

.vs-group{margin-bottom:4px}
.vs-group-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.vs-group-head b{font-size:13px}
.vs-group-head small{font-size:11px;color:var(--gray)}
.vs-rows{display:flex;flex-direction:column;gap:12px}
.vs-row{display:flex;align-items:center;gap:10px}
.vs-row img{width:44px;height:44px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--canvas)}
.vs-row-name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-row-price{font-size:13px;font-weight:600;color:var(--ink);width:76px;text-align:right;flex-shrink:0}
.vs-stepper{display:flex;align-items:center;border:1px solid #ddd6e4;border-radius:6px;overflow:hidden;flex-shrink:0}
.vs-stepper button{width:28px;height:28px;font-size:16px;background:#faf9fc;display:grid;place-items:center;line-height:1}
.vs-stepper .vs-qty{width:30px;text-align:center;font-size:12.5px}

.vs-deliver{display:flex;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--line);margin-top:14px;font-size:13px}
.vs-deliver .icon{width:17px;height:17px;color:var(--gray);flex-shrink:0}
.vs-shipcard{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.vs-shipcard b{display:block;font-size:12.5px}
.vs-shipcard p{font-size:12px;margin-top:4px}

.vs-subtotal{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0}
.vs-subtotal span{font-size:13px;color:var(--gray)}
.vs-subtotal b{font-size:15px;flex:1;text-align:right;margin-right:4px}
.vs-subtotal .vs-subtotal-chevron{transition:transform .18s ease}
.vs-subtotal.is-open .vs-subtotal-chevron{transform:rotate(180deg)}
.vs-breakdown{background:var(--canvas);border-radius:10px;padding:10px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}
.vs-bd-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.vs-bd-row span{color:var(--gray)}
.vs-empty{font-size:12.5px;text-align:center;padding:6px 0}

@media (min-width:760px){
 .vs-sheet{left:auto;right:0;top:0;bottom:0;width:440px;max-width:100%;max-height:none;
  border-radius:0;box-shadow:-20px 0 60px #16082e20;animation:vsSlideIn .22s ease}
 .vs-handle{display:none}
 @keyframes vsSlideIn{from{transform:translateX(24px);opacity:.4}to{transform:translateX(0);opacity:1}}
}

.vs-row-price{white-space:nowrap}
.vs-row-price.is-quote{font-weight:500;color:var(--gray);font-size:12px}
.vs-row.is-off{opacity:.45}