.variant-picker{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:flex-end;justify-content:center}.variant-picker__backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.45)}.variant-picker__sheet{position:relative;z-index:1;width:min(100%,480px);max-height:min(92vh,760px);display:flex;flex-direction:column;overflow:hidden;background:var(--background);border-radius:16px 16px 0 0;padding:16px var(--page-pad-x) calc(16px + env(safe-area-inset-bottom, 0px));box-shadow:0 -8px 32px rgba(15,23,42,.12)}.variant-picker__head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.variant-picker__head h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin:0 0 4px}.variant-picker__head p{margin:0;color:var(--muted-foreground);font-size:var(--text-sm)}.variant-picker__close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--cream);font-size:20px;line-height:1}.variant-picker__hint{flex-shrink:0;margin:0 0 12px;font-size:var(--text-sm);color:var(--muted-foreground)}.variant-picker__list{list-style:none;margin:0;padding:0 0 12px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px}.variant-picker__row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--cream)}.variant-picker__option-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.variant-picker__option-actions{flex-shrink:0}.variant-picker__option-name{font-size:var(--text-xs);color:var(--muted-foreground);overflow-wrap:anywhere}.variant-picker__option-main{font-weight:600;font-size:var(--text-sm);color:var(--foreground)}.variant-picker__spec{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.variant-picker__spec-divider{display:inline-block;width:1px;height:.95em;background:color-mix(in srgb,var(--foreground) 28%,transparent);flex-shrink:0}.variant-picker__option-meta{font-size:var(--text-xs);color:var(--muted-foreground)}.variant-picker__add{border:0;border-radius:10px;padding:10px 14px;background:var(--charcoal);color:#fff;font-size:var(--text-xs);font-weight:700;white-space:nowrap}.variant-picker__stepper{min-width:108px}.variant-picker__view-cart{flex-shrink:0;width:100%;border:0;border-radius:12px;padding:14px 16px;background:var(--charcoal);color:#fff;font-weight:700}.variant-picker__view-cart:disabled{opacity:.45}@keyframes variant-picker-dialog-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width:768px){.variant-picker{align-items:center;padding:max(20px,env(safe-area-inset-top,0px)) 28px max(20px,env(safe-area-inset-bottom,0px))}.variant-picker__sheet{width:min(100%,560px);max-height:min(82vh,680px);border-radius:var(--radius-card,20px);padding:20px 24px calc(20px + env(safe-area-inset-bottom, 0px));box-shadow:0 24px 48px -12px rgba(15,23,42,.22),0 8px 20px -8px rgba(15,23,42,.12);animation:variant-picker-dialog-in .28s var(--ease) both}.variant-picker__head{margin-bottom:10px}.variant-picker__head h2{font-size:var(--text-title)}.variant-picker__hint{margin-bottom:14px}.variant-picker__list{gap:10px;padding-bottom:16px}.variant-picker__row{padding:14px 16px;gap:16px}.variant-picker__option-name{font-size:var(--text-sm)}.variant-picker__option-main{font-size:var(--text-base)}.variant-picker__option-meta{font-size:var(--text-sm)}.variant-picker__view-cart{padding:16px 18px;font-size:var(--text-base)}}@media (min-width:1024px){.variant-picker{padding-left:36px;padding-right:36px}.variant-picker__sheet{width:min(100%,640px);max-height:min(78vh,720px);padding:24px 28px calc(24px + env(safe-area-inset-bottom, 0px))}.variant-picker__close{width:36px;height:36px}.variant-picker__row{padding:16px 18px;border-radius:14px}.variant-picker__add{padding:12px 18px;font-size:var(--text-sm)}.variant-picker__stepper{min-width:120px}}@media (min-width:1280px){.variant-picker__sheet{width:min(100%,680px);padding:28px 32px calc(28px + env(safe-area-inset-bottom, 0px))}.variant-picker__list{gap:12px}}