.traces-container{position:relative;width:100%;height:100vh;max-width:2000px;margin:0 auto;overflow:hidden}.traces-container .traces-nav,.traces-container .traces-footer{position:absolute;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;z-index:1}.traces-container .traces-nav{top:0}.traces-container .traces-footer{bottom:0}.traces-container .traces-nav p,.traces-container .traces-footer p{padding:.6rem 1rem;background-color:#f2eeda0d;border:1px solid rgba(242,238,218,.15);border-radius:.25rem;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);color:var(--base-100)}.traces-container .traces-nav .trace-name p{background-color:var(--base-100);color:var(--base-300);font-weight:600}.traces-container .traces-slider{position:absolute;width:100%;height:100svh;overflow:hidden}.traces-container .traces-slider .traces{position:absolute;width:300px;height:300px;top:42.5%;left:50%;transform:translate(-50%,-50%)}.traces-container .traces-slider .traces li{position:absolute;display:flex;align-items:center;justify-content:center;will-change:transform;width:100%;aspect-ratio:4/5;padding:.5rem;filter:url(#goo);transform:translateZ(0) scale(0);backface-visibility:hidden;perspective:1000px}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-img-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;filter:url(#goo);transform:translateZ(0);backface-visibility:hidden}.traces-container .traces-slider .traces li .outline-wrapper{z-index:-1}.traces-container .traces-slider .traces li .product-item-bg-wrapper{z-index:0}.traces-container .traces-slider .traces li .product-img-wrapper{z-index:1}.traces-container .traces-slider .traces li .product-img-wrapper{padding:.75rem}.traces-container .traces-slider .traces li .product-item-bg-wrapper .product-item-bg{width:100%;height:100%;clip-path:polygon(2.5rem 0%,calc(100% - 2.5rem) 0%,100% 2.5rem,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,2.5rem 100%,0% calc(100% - 2.5rem),0% 2.5rem);background-color:var(--base-300);z-index:0}.traces-container .traces-slider .traces li .outline-wrapper .product-bg-outline{width:100%;height:100%;clip-path:polygon(2.5rem 0%,calc(100% - 2.5rem) 0%,100% 2.5rem,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,2.5rem 100%,0% calc(100% - 2.5rem),0% 2.5rem);transform:scaleX(1.0095) scaleY(1.0075);background-color:#3c3c3c}.traces-container .traces-slider .traces li img{width:100%;height:100%;clip-path:polygon(2rem 0%,calc(100% - 2rem) 0%,100% 2rem,100% calc(100% - 2rem),calc(100% - 2rem) 100%,2rem 100%,0% calc(100% - 2rem),0% 2rem);transform:translateZ(0);backface-visibility:hidden}.traces-container .traces-slider .controller{position:absolute;bottom:2rem;left:50%;transform:translate(-50%) translateY(300px);width:11rem;height:11rem;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:10}.traces-container .traces-slider .controller .controller-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;background:#383838;border-radius:50%;display:flex;align-items:center;justify-content:center;clip-path:circle(40% at 50% 50%);will-change:clip-path;cursor:pointer;z-index:1}.traces-container .traces-slider .controller .controller-inner .controller-close-icon{position:relative;width:24px;height:24px}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span{position:absolute;top:50%;left:50%;width:0;height:2px;background:var(--base-100);transform-origin:center}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span:first-child{transform:translate(-50%,-50%) rotate(45deg)}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.traces-container .traces-slider .controller .controller-outer{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--base-300);border-radius:50%;clip-path:circle(50% at 50% 50%);will-change:clip-path;z-index:-1}.traces-container .traces-slider .controller .controller-outer .controller-label p{position:absolute;top:1rem;left:50%;transform:translate(-50%);text-transform:uppercase;color:var(--base-1000);will-change:opacity}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn{position:absolute;top:50%;transform:translateY(-50%);color:var(--base-1000);will-change:opacity;cursor:pointer;transition:transform .3s ease-out}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn:active{transform:translateY(-50%) scale(.75)}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn ion-icon{font-size:1.25rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.prev{left:.75rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.next{right:.75rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.disabled{opacity:.25;pointer-events:none}.traces-container .traces-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,100%);width:75%;height:72.5%;padding:1rem;border-radius:.5rem;background-color:var(--base-300);border:1px solid rgba(242,238,218,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:1rem;z-index:2}.traces-container .traces-preview .traces-preview-info{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem}.traces-container .traces-preview .traces-preview-info .traces-preview-tag p{text-transform:uppercase}.traces-container .traces-preview .traces-preview-img{width:100%;aspect-ratio:1;border-radius:.25rem;background-color:var(--base-1000);overflow:hidden}.traces-container .traces-preview .traces-preview-img img{width:100%;height:100%;object-fit:cover}@media(max-width:1000px){.traces-container .traces-nav,.traces-container .traces-footer{display:none}.traces-container .traces-slider .traces{top:40%}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-img-wrapper{transform:scale(.8)}.traces-container .traces-slider .controller{bottom:1rem;width:9rem;height:9rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.prev{left:.5rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.next{right:.5rem}.traces-container .traces-slider .controller .controller-outer .controller-label p{font-size:.7rem}.traces-container .traces-preview{width:calc(100% - 2rem);height:max-content;justify-content:center}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper{display:none}}
