.outfit-wrapper{display:flex;gap:40px;width:100%}.outfit-model-box{position:relative;width:50%}.outfit-model{width:100%}.outfit-overlay{position:absolute;top:50%;left:50%;transform:translate(calc(-50% + var(--x-desktop, 0px)),calc(-50% + var(--y-desktop, 0px))) scale(calc(var(--scale-desktop, 100) / 100));transform-origin:center;pointer-events:none;z-index:10;opacity:0;transition:opacity .3s ease}.outfit-overlay.is-active{opacity:1}.outfit-overlay.is-hat{transform-origin:center bottom;transform:translate(calc(-50% + var(--x-desktop, 0px)),calc(-100% - (var(--hat-y-desktop, 0px) * 2))) scale(calc(var(--scale-desktop, 100) / 100));z-index:30}.outfit-products{width:50%}.outfit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.outfit-item{border:1px solid #eee;padding:16px;border-radius:12px;background:#fff}.outfit-item.is-worn{border-color:#000}.outfit-product-image{width:100%;max-height:260px;object-fit:contain;display:block;margin:12px auto}.outfit-actions{display:flex;flex-direction:column;gap:10px;margin:12px 0}.btn-show,.btn-remove,.btn-add{background:#000;color:#fff;border:none;padding:12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500}.btn-show:hover,.btn-remove:hover,.btn-add:hover{opacity:.85}.btn-show.is-worn{opacity:.6;cursor:default}.outfit-dots{display:none}@media (max-width: 768px){.outfit-wrapper{flex-direction:column}.outfit-products{width:100%;order:1}.outfit-model-box{width:100%;order:2;margin-top:24px}.outfit-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;-webkit-overflow-scrolling:touch}.outfit-item{min-width:85%;scroll-snap-align:center;flex-shrink:0;text-align:center}.outfit-product-image{width:100%;max-width:220px;height:200px;object-fit:contain;margin:12px auto 16px}.outfit-dots{display:flex;justify-content:center;gap:8px;margin:8px 0}.outfit-dot{width:26px;height:26px;border-radius:50%;border:1px solid #ccc;background:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}.outfit-dot.active{background:#000;color:#fff;border-color:#000}.outfit-overlay{transform:translate(calc(-50% + var(--x-mobile, 0px)),calc(-50% + var(--y-mobile, 0px))) scale(calc(var(--scale-mobile, 100) / 100))}.outfit-overlay.is-hat{transform:translate(calc(-50% + var(--x-mobile, 0px)),calc(-100% - (var(--hat-y-mobile, 0px) * 2))) scale(calc(var(--scale-mobile, 100) / 100))}}
/*# sourceMappingURL=/cdn/shop/t/71/assets/dress-outfit.css.map */