@import"https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";:root{--base-100: #fff;--base-200: #999;--base-300: #343434;--base-400: #212121;--base-500: #000}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans;background:var(--base-100);overflow:hidden}p{font-size:.85rem;font-weight:500;line-height:1}.container{position:relative;width:100%;height:100vh;overflow:hidden}.nav{position:absolute;top:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:2rem;z-index:2}.nav p{text-transform:uppercase;font-family:DM Mono}.logo{position:relative}.logo-text{display:inline-block;font-family:PP Pangram Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;font-weight:800;font-size:1.25rem;padding:.5rem 1rem;border-radius:.375rem;background-color:var(--base-100);color:var(--base-400);box-shadow:0 2px 8px #0000001a;transition:background-color .3s ease,color .3s ease}.logo-text.logo-inverted{background-color:var(--base-400);color:var(--base-100)}@media(max-width:768px){.logo-text{font-size:1rem;padding:.375rem .75rem}}.product-name{color:var(--base-200)}.gallery{position:absolute;width:100%;height:100svh;overflow:hidden}.products{position:absolute;width:300px;height:300px;top:45%;left:50%;transform:translate(-50%,-50%)}.products li{position:absolute;width:300px;height:300px;display:flex;align-items:center;justify-content:center;will-change:transform}.products li img{width:250px;height:250px}.controller{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);width:11rem;height:11rem;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:10}.controller-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;background:var(--base-300);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}.close-icon{position:relative;width:20px;height:20px}.close-icon span{position:absolute;top:50%;left:50%;width:0;height:2px;background:var(--base-100);transform-origin:center}.close-icon span:first-child{transform:translate(-50%,-50%) rotate(45deg)}.close-icon span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.controller-outer{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--base-400);border-radius:50%;clip-path:circle(50% at 50% 50%);will-change:clip-path;z-index:-1}.controller-label p{position:absolute;top:1rem;left:50%;transform:translate(-50%);text-transform:uppercase;font-family:DM Mono;color:var(--base-100);will-change:opacity}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);font-size:1.125rem;color:var(--base-100);will-change:opacity;cursor:pointer}.nav-btn.prev{left:1rem}.nav-btn.next{right:1rem}.nav-btn.disabled{opacity:.25;pointer-events:none}.product-banner{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;will-change:opacity}.product-banner img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}.product-preview{position:absolute;top:47.5%;left:50%;transform:translate(-50%,100%);width:30%;height:75%;padding:2rem 1rem;border-radius:.5rem;background-color:#ffffff4d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:2rem;z-index:2}.product-preview-info{display:flex;align-items:center;gap:.5rem}.product-preview-name p{font-size:.95rem}.product-preview-tag{padding:.25rem .5rem;border-radius:.25rem;background-color:var(--base-500);color:var(--base-100)}.product-preview-tag p{text-transform:uppercase;font-family:DM Mono;font-size:.75rem}.product-preview-img{width:100%;aspect-ratio:1;border-radius:.25rem;background-color:var(--base-100);overflow:hidden}.product-preview-img img{width:100%;height:100%;object-fit:cover}.product-url .btn{background-color:var(--base-500);display:flex;justify-content:center;align-items:center;border-radius:.25rem}.product-url .btn a{display:block;padding:1rem 0;text-decoration:none;color:var(--base-100)}@media(max-width:1000px){.product-preview{width:calc(100% - 2rem)}}
