body{margin:0;padding:0}.viewerWrapper{width:75vw;height:100vh;position:relative}.modelViewer{background:#fff;background:radial-gradient(circle,#fff,#9c9c9c,#666);width:100%;height:100%}.dot{display:none}.custom-ar-button{bottom:10%;right:4%;position:absolute;display:none;background-color:#fff;color:#000;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 6px #00000040;transition:transform .15s ease,background-color .15s ease}.custom-ar-button:hover{background-color:#f0f0f0;transform:scale(1.05)}.custom-ar-button:active{background-color:#e0e0e0;transform:scale(.95)}.ar-icon{width:30px;height:30px;flex-shrink:0}@media (min-width: 300px) and (max-width: 1024px){.viewerWrapper{width:100vw;height:100vh}.modelViewer{height:100vh}.custom-ar-button{display:flex}}.glossyToggle,.dimToggle{transform:scale(1.5);cursor:pointer}.glossyLabel{position:absolute;top:10px;right:10px;z-index:1000;display:flex;align-items:center;gap:12px;background:#ffffffd9;padding:6px 12px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:60px;opacity:1;transform:translateY(0);overflow:hidden}.glossyLabel.hidden{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:0;transform:translateY(-10px);border:none}.dimLabel{position:absolute;top:55px;right:10px;z-index:1000;display:flex;align-items:center;gap:12px;background:#ffffffd9;padding:6px 12px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:top .3s cubic-bezier(.4,0,.2,1)}.glossyLabel.hidden~.dimLabel{top:10px}.dim{border-radius:4px;border:none;box-sizing:border-box;box-shadow:0 2px 4px #00000040;color:#000c;display:block;font-family:Futura,Helvetica Neue,sans-serif;font-size:1em;font-weight:700;max-width:128px;overflow-wrap:break-word;padding:.5em 1em;position:absolute;width:max-content;height:max-content;transform:translate3d(-50%,-50%,0);pointer-events:none;--min-hotspot-opacity: 0;background:#fff}@media only screen and (max-width: 800px){.dim{font-size:3vw}}.dimensionLineContainer{pointer-events:none;display:block}.dimensionLine{stroke:#16a5e6;stroke-width:2;stroke-dasharray:2}.hide{display:none}.swatchItem{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:80px;margin:8px;transition:transform .2s ease;cursor:pointer}.swatchCircle{width:60px;height:60px;border-radius:50%;border:2px solid #ccc;margin-bottom:.5rem;background:linear-gradient(145deg,#fff,#e6e6e6);box-shadow:inset -3px -3px 6px #ffffffb3,inset 3px 3px 6px #00000026,0 4px 6px #0000001a;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;background-size:cover;background-position:center}.swatchCircle.roughness{width:60px;height:60px;border-radius:50%;border:2px solid #ccc;margin-bottom:.5rem;box-shadow:inset -3px -3px 6px #ffffffb3,inset 3px 3px 6px #00000026,0 4px 6px #0000001a;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;background-size:cover;background-position:center}.swatchCircle:before{content:"";position:absolute;top:5%;left:5%;width:90%;height:40%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent);border-radius:50%;transform:rotate(-20deg);pointer-events:none}.swatchCircle.roughness:before{content:none;position:absolute;top:5%;left:5%;width:90%;height:40%;border-radius:50%;transform:rotate(-20deg);pointer-events:none}.swatchItem:hover .swatchCircle{transform:scale(1.1);box-shadow:inset -2px -2px 6px #00000040,inset 2px 2px 6px #ffffff80,0 6px 15px #0006}.swatchItem:active .swatchCircle{transform:scale(.95)}.swatchLabel{font-size:.85rem;color:#333;text-align:center;font-weight:500;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.categoryContainer{margin-bottom:1.5rem;overflow-x:hidden}.categoryHeading{font-size:1.1rem;font-weight:700;margin-bottom:.8rem;color:#222;border-left:4px solid #444;padding-left:8px}.swatchGrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}.panel{position:fixed;top:0;right:0;width:25vw;height:100vh;background:#f9f9f9;border-left:1px solid #e0e0e0;padding:2rem 1rem;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;z-index:2000;box-shadow:-2px 0 10px #0000001a}.panelContent{flex:1;overflow-y:auto;overflow-x:hidden}.section{margin-bottom:2rem}.heading{font-size:1.25rem;font-weight:600;margin-bottom:1.2rem;color:#222}.swatchGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:.5rem;padding:0 5px}.colorCard{width:100%;padding-top:100%;border-radius:8px;cursor:pointer;position:relative;transition:transform .2s ease}.colorCard:hover{transform:scale(1.05)}.materialsScroll{max-height:50vh;overflow-y:auto;padding-right:5px}.materialsScroll::-webkit-scrollbar{width:6px}.materialsScroll::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}.materialsScroll::-webkit-scrollbar-track{background:transparent}.closeButton{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:6px;border-radius:50%;display:none;z-index:1100}.closeButton:hover{background:#00000014}.openButton{position:fixed;top:20px;left:20px;border:none;background:#181818;color:#fff;padding:.6rem 1rem;border-radius:8px;font-size:1rem;cursor:pointer;display:none;z-index:1200}.openButton:hover{background:#333}@media (min-width: 300px) and (max-width: 1024px){.panel{width:80%;max-width:350px;transform:translate(100%);height:100vh;box-shadow:-4px 0 15px #00000026;padding-top:4rem}.panel.open{transform:translate(0)}.openButton,.closeButton{display:block}}.envGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;margin-bottom:1.2rem;padding:0 10px}.envItem{display:flex;justify-content:center;align-items:center}.envThumb{width:100%;height:auto;aspect-ratio:10 / 7;object-fit:cover;border-radius:8px;border:1px solid #ddd;background:#fff;transition:transform .2s ease-in-out}.envThumb:hover{transform:scale(1.05)}.envButton{width:50%;background:#181818;color:#fff;font-size:1.1rem;border:none;border-radius:10px;font-weight:500;cursor:pointer;display:block;margin:0 auto;transition:background .3s ease}.envButton:hover{background:#333}#app{display:flex;position:fixed;width:100%;height:100vh;overflow:hidden;font-family:Arial,sans-serif;background-color:#f5f5f5}.main-container{display:flex;flex-direction:row;width:100%;overflow:hidden}.main-container .viewerWrapper{height:100%;position:relative}.main-container .viewerWrapper model-viewer{width:100%;height:100%}.main-container .panel{width:25vw;flex-shrink:0;height:100%}@media (max-width: 768px){.main-container{flex-direction:column}.main-container .panel{width:80%;max-width:350px;position:fixed;right:0;top:0;height:100%;transform:translate(100%);transition:transform .3s ease-in-out;z-index:2000}.main-container .panel.open{transform:translate(0)}}