.variant-picker-modern{--vp-gap: .75rem;--vp-card-radius: 6px;--vp-border-color: #e5e7eb;--vp-border-hover: #9ca3af;--vp-border-selected: #000;--vp-bg: #fff;--vp-bg-muted: #f9fafb;--vp-bg-hover: #f3f4f6;--vp-text: #111827;--vp-text-muted: #6b7280;--vp-text-light: #9ca3af;--vp-price: #e3101b;--vp-stock-ok: #059669;--vp-stock-low: #d97706;--vp-stock-out: #dc2626;--vp-transition: .2s ease;--vp-card-width: clamp(120px, 40vw - 1rem, 180px);--vp-card-width-desktop: 140px}.variant-picker-modern{width:100%;margin:1.5rem 0}.variant-options-container{position:relative;overflow:hidden}.variant-options-wrapper{display:flex;gap:var(--vp-gap);padding:.5rem 0 1rem;width:max-content}.variant-options-wrapper.is-scrolling{will-change:transform}.variant-options-wrapper::-webkit-scrollbar{display:none}.variant-scroll-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:var(--vp-bg);border:1px solid var(--vp-border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:0 2px 8px #0000001a;transition:opacity var(--vp-transition),box-shadow var(--vp-transition);opacity:0;pointer-events:none}.variant-scroll-btn.visible{opacity:1;pointer-events:auto}.variant-scroll-btn:hover{background:var(--vp-bg-muted);box-shadow:0 4px 12px #00000026}.variant-scroll-btn:active{transform:translateY(-50%) scale(.95)}.variant-scroll-btn--prev{left:8px}.variant-scroll-btn--next{right:8px}@media (max-width: 767px){.variant-scroll-btn{display:none}}.variant-scroll-btn svg{width:20px;height:20px;fill:var(--vp-text)}.variant-option-item{flex:0 0 auto;width:var(--vp-card-width);cursor:pointer;position:relative}.variant-option-card{position:relative;border:2px solid var(--vp-border-color);border-radius:var(--vp-card-radius);overflow:hidden;background:var(--vp-bg);transition:border-color var(--vp-transition),transform var(--vp-transition),box-shadow var(--vp-transition)}@media (hover: hover){.variant-option-item:hover .variant-option-card{border-color:var(--vp-border-hover);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}}.variant-option-item.selected .variant-option-card{border-color:var(--vp-border-selected);box-shadow:inset 0 0 0 .5px var(--vp-border-selected),0 4px 16px #0000001f}.variant-option-item.unavailable{opacity:.5}.variant-image-wrapper{position:relative;width:100%;aspect-ratio:1;background:var(--vp-bg-muted);border-radius:var(--vp-card-radius) var(--vp-card-radius) 0 0;overflow:hidden}.variant-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;mix-blend-mode:multiply}.variant-info{padding:.875rem .625rem;text-align:center}.variant-name{font-size:.9em;font-weight:600;color:var(--vp-text);margin:0 0 .375rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}.variant-price{font-size:1em;font-weight:600;margin:0 0 .375rem;color:var(--vp-price)}.variant-compare-price{font-size:.8em;color:var(--vp-text-light);text-decoration:line-through;display:block;margin-bottom:.25rem}.variant-stock-status{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85em;font-weight:500;margin:4px 0 0;line-height:1.2}.variant-stock-status.in-stock{color:var(--vp-stock-ok)}.variant-stock-status.low-stock{color:var(--vp-stock-low)}.variant-stock-status.out-of-stock{color:var(--vp-stock-out)}.variant-stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background-color:var(--vp-text-light)}.variant-stock-dot.in-stock{background-color:var(--vp-stock-ok)}.variant-stock-dot.backordered{background-color:var(--vp-stock-low)}.variant-stock-dot.out-of-stock{background-color:var(--vp-stock-out)}.variant-stock-text{line-height:1.2}.variant-selected-checkmark{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:var(--vp-border-selected);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity var(--vp-transition),transform var(--vp-transition);z-index:3}.variant-option-item.selected .variant-selected-checkmark{opacity:1;transform:scale(1)}.variant-selected-checkmark svg{width:14px;height:14px;fill:#fff}.variant-details-btn{display:flex;align-items:center;justify-content:center;gap:.35rem;width:calc(100% - 1rem);margin:0 .5rem .75rem;padding:.5rem .25rem;background:var(--vp-bg-muted);border:1px solid var(--vp-border-color);border-radius:var(--vp-card-radius);font-size:.75em;font-weight:500;color:var(--vp-text-muted);cursor:pointer;transition:background var(--vp-transition),color var(--vp-transition)}.variant-details-btn:hover{background:var(--vp-border-color);color:var(--vp-text)}.variant-details-btn svg{width:14px;height:14px;flex-shrink:0}.variant-picker-modern .js-option{position:absolute;opacity:0;pointer-events:none}.variant-details-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:99999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;display:flex;align-items:center;justify-content:center;padding:1rem;isolation:isolate}.variant-details-modal-overlay.active{opacity:1;visibility:visible}.variant-details-modal{background:#fff;border-radius:4px;width:100%;max-width:560px;max-height:80vh;overflow:hidden;transform:translateY(20px) scale(.95);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;position:relative;z-index:100000}.variant-details-modal-overlay.active .variant-details-modal{transform:translateY(0) scale(1)}.variant-details-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb;background:#f9fafb}.variant-details-modal-title{font-size:1.35rem;font-weight:700;color:#111827;margin:0}.variant-details-modal-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:background .2s ease}.variant-details-modal-close:hover{background:#f3f4f6}.variant-details-modal-close svg{width:22px;height:22px;fill:#6b7280}.variant-details-modal-body{padding:0;overflow-y:auto;flex:1;overscroll-behavior:contain}.variant-details-table{width:100%;border-collapse:collapse}.variant-details-table tr{border-bottom:1px solid #e5e7eb}.variant-details-table tr:last-child{border-bottom:none}.variant-details-table tr:nth-child(2n){background:#f9fafb}.variant-details-table td{padding:1.1rem 1.5rem;font-size:.85em}.variant-details-table td:first-child{font-weight:600;color:#374151;width:50%}.variant-details-table td:last-child{color:#111827;font-weight:500}@media (min-width: 768px){.variant-option-item{width:var(--vp-card-width-desktop)}}@media (max-width: 767px){.variant-details-modal{max-height:70vh}.variant-details-table td{padding:1rem 1.25rem}}@media (prefers-reduced-motion: reduce){.variant-options-wrapper{scroll-behavior:auto}.variant-option-card,.variant-scroll-btn,.variant-selected-checkmark,.variant-details-btn,.variant-details-modal-overlay,.variant-details-modal{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/variant-picker-modern-growly.css.map */