.variant-picker__overlay{z-index:1100;background:#0000008c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.variant-picker{color:#1a1a1a;width:min(560px,100%);max-height:min(760px,90dvh);font-family:var(--font-body,Arial, sans-serif);background:#fff;border-radius:18px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 20px 70px #0000003d}.variant-picker__header,.variant-picker__footer{flex:none;padding:18px 22px}.variant-picker__header{border-bottom:1px solid #eee;justify-content:space-between;align-items:start;gap:16px;display:flex}.variant-picker__eyebrow{color:#777;font-size:12px}.variant-picker__header h2{margin:4px 0 0;font-size:18px;line-height:1.3}.variant-picker__close{cursor:pointer;background:#f3f3f3;border:0;border-radius:50%;flex:0 0 32px;place-items:center;width:32px;height:32px;display:grid}.variant-picker__content{min-height:0;padding:18px 22px;overflow-y:auto}.variant-picker__preview{align-items:center;gap:14px;margin-bottom:18px;display:flex}.variant-picker__preview img{object-fit:contain;border:1px solid #eee;border-radius:10px;flex:0 0 76px;width:76px;height:76px}.variant-picker__preview strong{font-size:20px}.variant-picker__preview p{color:#666;margin:5px 0 0;font-size:13px}.variant-picker__instruction{margin:0 0 10px;font-size:14px;font-weight:600}.variant-picker__choices{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.variant-picker__choices--compact{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}.variant-picker__choice{min-width:0;color:inherit;text-align:left;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:10px;flex-direction:column;align-items:stretch;gap:5px;padding:8px;display:flex}.variant-picker__choice img{object-fit:contain;background:#f8f8f8;border-radius:6px;width:100%;height:98px}.variant-picker__choice--selected{background:#f6faff;border-color:#2463a3;box-shadow:0 0 0 2px #2463a3}.variant-picker__choice:disabled{opacity:.5;cursor:not-allowed}.variant-picker__choice-label{overflow-wrap:anywhere;font-size:12px;font-weight:600}.variant-picker__choice-meta{color:#666;font-size:11px}.variant-picker__footer{background:#fff;border-top:1px solid #eee}.variant-picker__quantity{justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;display:flex}.variant-picker__quantity>div{border:1px solid #ddd;border-radius:6px;align-items:center;display:flex}.variant-picker__quantity button{cursor:pointer;background:0 0;border:0;place-items:center;width:34px;height:34px;display:grid}.variant-picker__quantity button:disabled{color:#aaa;cursor:default}.variant-picker__quantity output{text-align:center;min-width:28px}.variant-picker__confirm{color:#fff;cursor:pointer;background:#1a1a1a;border:0;border-radius:8px;width:100%;min-height:46px;font-size:13px;font-weight:700}.variant-picker__confirm:disabled{cursor:not-allowed;background:#aaa}@media (max-width:768px){.variant-picker__overlay{align-items:end;padding:0}.variant-picker{border-radius:18px 18px 0 0;width:100%;max-height:88dvh}.variant-picker__header,.variant-picker__footer,.variant-picker__content{padding:16px}.variant-picker__footer{padding-bottom:max(16px, env(safe-area-inset-bottom))}.variant-picker__choices{grid-template-columns:repeat(2,minmax(0,1fr))}.variant-picker__choices--compact{grid-template-columns:repeat(3,minmax(0,1fr))}}