.product-frame-slider{position:relative;width:100%;max-width:none;margin:0;padding:var(--section-padding-top, 36px) 20px var(--section-padding-bottom, 36px)}.frame-container{position:relative;width:100%;height:auto;overflow:visible;border-radius:12px;box-shadow:0 8px 32px #0000001a;display:block;aspect-ratio:auto}.static-frame{position:relative;width:100%;height:auto;z-index:1;pointer-events:none;display:block}.frame-image{width:100%;height:auto;object-fit:contain;object-position:center;display:block;max-width:100%;max-height:none}.frame-image--desktop{display:block;width:100%;height:auto;object-fit:contain;object-position:center;max-width:100%;max-height:none}.frame-image--mobile{display:none;width:100%;height:auto;object-fit:contain;object-position:center;max-width:100%;max-height:none;border-radius:10px}.product-frame-slider .slider-wrapper{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.product-frame-slider .slider-wrapper .slide{background:none!important}.product-frame-slider .slider-wrapper .slide-image{background:none!important;box-shadow:none!important}.default-frame{width:100%;height:100%;position:relative}.frame-border{position:absolute;top:0;left:0;width:100%;height:100%;border:20px solid #333;border-radius:12px;box-sizing:border-box;background:transparent}.frame-border:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 80px);height:calc(100% - 80px);border:2px solid #666;border-radius:8px;background:transparent}.slider-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:auto}.slider-wrapper{position:absolute;top:var(--slider-y-desktop, 20%);left:var(--slider-x-desktop, 20%);width:var(--slider-width-desktop, 60%);height:auto;min-height:200px;z-index:2;border-radius:8px;overflow:hidden;transform:translateZ(0);right:auto;bottom:auto;max-width:calc(100% - var(--slider-x-desktop, 20%));max-height:calc(100% - var(--slider-y-desktop, 20%))}.slider-track{display:flex;width:100%;height:auto;min-height:200px;transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;position:relative;z-index:3}.slide{flex:0 0 100%;width:100%;height:auto;position:relative;display:flex;align-items:center;justify-content:center}.slide-image{width:100%;height:auto;min-height:150px;max-height:100%;object-fit:contain;object-position:center;display:block;opacity:1;background:#ffffff1a;box-shadow:0 2px 8px #0000001a;z-index:3;border-radius:4px}.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#ffffffe6;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000026}.slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 6px 20px #0003}.slider-arrow:active{transform:translateY(-50%) scale(.95)}.slider-arrow--prev{left:20px}.slider-arrow--next{right:20px}.slider-arrow svg{color:#333;transition:color .2s ease}.slider-arrow:hover svg{color:#000}.slider-dots{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:3}.dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dot:hover{border-color:#ffffffe6;transform:scale(1.2)}.dot.active{background:#ffffffe6;border-color:#fff;transform:scale(1.3)}@media screen and (max-width: 768px){.product-frame-slider{max-width:none;padding:var(--section-padding-top, 24px) 16px var(--section-padding-bottom, 24px)}.frame-image--desktop{display:none}.frame-image--mobile{display:block;width:100%;height:auto;object-fit:contain;object-position:center;max-width:100%;max-height:none}.frame-container{border-radius:8px}.default-frame .frame-border{border-width:15px;border-radius:8px}.default-frame .frame-border:before{width:calc(100% - 60px);height:calc(100% - 60px)}.slider-wrapper{top:var(--slider-y-mobile, 15%);left:var(--slider-x-mobile, 15%);width:var(--slider-width-mobile, 70%);min-height:120px;max-width:calc(100% - var(--slider-x-mobile, 15%));max-height:calc(100% - var(--slider-y-mobile, 15%))}.slider-arrow{width:40px;height:40px}.slider-arrow--prev{left:12px}.slider-arrow--next{right:12px}.slider-dots{bottom:12px;gap:8px}.dot{width:10px;height:10px}}@media screen and (max-width: 480px){.product-frame-slider{padding:10px}.frame-container{border-radius:6px}.default-frame .frame-border{border-width:12px;border-radius:6px}.default-frame .frame-border:before{width:calc(100% - 48px);height:calc(100% - 48px)}.slider-wrapper{top:var(--slider-y-mobile, 15%);left:var(--slider-x-mobile, 15%);width:var(--slider-width-mobile, 70%);min-height:100px;border-radius:4px;max-width:calc(100% - var(--slider-x-mobile, 15%));max-height:calc(100% - var(--slider-y-mobile, 15%))}.slide-image{min-height:100px;max-height:100%}.slider-arrow{width:36px;height:36px}.slider-arrow--prev{left:8px}.slider-arrow--next{right:8px}.slider-dots{bottom:8px;gap:6px}.dot{width:8px;height:8px}}.product-frame-slider{contain:layout style paint}.slider-track{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.slide-image{transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){.slider-track,.slider-arrow,.dot{transition:none}}.slider-arrow:focus,.dot:focus{outline:2px solid #007acc;outline-offset:2px}.slide-image{opacity:1;transition:opacity .3s ease}.slide-image.loaded{opacity:1}.slider-container{pointer-events:auto}.slider-wrapper{background:#ffffff0d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.slide{background:#00000005;min-height:inherit}.static-frame{z-index:1}.slider-container{z-index:2}.slider-wrapper{z-index:3}.slider-track{z-index:4}.slide{z-index:5}@media (hover: hover){.product-frame-slider:hover .slider-arrow{opacity:1}.slider-arrow{opacity:.7;transition:opacity .3s ease,transform .2s ease,background .2s ease}}@media (hover: none){.slider-arrow{opacity:.9}.slider-arrow:active{background:#fffc}}.product-frame-slider .slider-track,.product-frame-slider .slider-wrapper{min-height:auto!important}
/*# sourceMappingURL=/cdn/shop/t/7/assets/product-frame-slider.css.map */