:root{--font: "Montserrat"}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font)}a{color:#000}button,label{font-family:var(--font);border:2px solid black;background:#fff;padding:8px 16px;font-weight:700;text-transform:uppercase;transition:.3s;cursor:pointer;font-size:14px;text-align:center}button.selected,button:hover,label:hover{background:#000;color:#fff}input[type=file]{display:none}button.toggle{display:flex;background:#000;height:37px;width:74px!important;padding:0;gap:4px;transition:.3s;overflow:hidden}button.toggle.on{background:#c5b199;border-color:#c5b199}button.toggle .head,button.toggle img{transition:.3s;padding:2px;height:33px;width:33px;flex-shrink:0}button.toggle .head{background:#fff}button.toggle:not(.on) .on,button.toggle:not(.on) .head,button.toggle:not(.on) .off{transform:translate(-37px)}section{margin:64px 0;padding:0 24px}.header{height:calc(100svh - 48px);margin:24px 24px 128px;border:2px solid black;display:flex;flex-direction:column;padding:0}.header .right,.header .left{padding:5vw;flex:1}.header .left{display:flex;flex-direction:column;justify-content:center}.left h1{font-size:2.5rem;margin:0}.left span{background:#000;color:#fff;padding-right:6px}.left p{margin:16px 0 0}.header .right{background:#000;display:flex;flex-direction:column;align-items:center;padding-bottom:0;overflow:hidden}.right .carousel{flex:1;display:flex;gap:5vw;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform;height:0}.carousel img{width:100%;height:100%;object-fit:cover;flex-shrink:0;transition:.3s;border:2px solid white}.right.image-1 .carousel{transform:translate(0)}.right.image-2 .carousel{transform:translate(calc(-100% - 5vw))}.right.image-3 .carousel{transform:translate(calc(-200% - 10vw))}.right .indicators{padding:2.5vw 0;display:flex;gap:16px}.right .indicator{background:#fff;transition:.3s;width:12px;height:12px;cursor:pointer}.right.image-1 .indicator:nth-child(1),.right.image-2 .indicator:nth-child(2),.right.image-3 .indicator:nth-child(3),.right .indicator:hover{transform:rotate(45deg) scale(1.2)}.customization{margin:0 auto;max-width:800px}.options{display:grid;gap:32px}.option{display:flex;justify-content:space-between}.option.important{border:2px solid black;padding:8px 8px 8px 16px}.option button,.option label{width:150px;flex-shrink:0}.option p{margin:0;font-size:14px;color:#2c2c2c}.option-btns{display:flex;flex-wrap:wrap;gap:16px}#logo-name{border-color:#fff;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:10px}.color-preview{aspect-ratio:2/1;border:2px solid black;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:18px}.color-preview.white{color:#fff}.color-preview p{font-size:14px;margin:0;max-width:80%}.colors{margin:16px 0;display:flex;flex-wrap:wrap;gap:4px}.selected-colors span:after,.selected-colors span,.colors span{width:24px;height:24px;border:2px solid black;cursor:pointer}.colors span{border-radius:100%;display:block}.selected-colors{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px}.selected-colors span{flex-shrink:0;position:relative}.selected-colors span:hover{z-index:1}.selected-colors span:after{content:"";top:-2px;left:-2px;position:absolute;transition:.3s;background:inherit;pointer-events:none}.selected-colors span:hover:after{width:52px;height:52px}.preview{display:flex;align-items:center;flex:1}.preview img{padding:2vw;width:100%}.checkout{text-align:center;margin-bottom:128px}footer{background:#000;color:#fff;padding:64px 24px}footer img{width:20px}footer .socials{max-width:400px;margin:25px auto}footer ul{list-style:none;padding:0;font-weight:600}footer li{display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;margin:16px 0;cursor:pointer}footer li p{margin:0}footer p{margin:0;text-align:center;font-size:14px}footer p a{color:#fff}.dark-overlay{position:fixed;inset:0;background:#000;pointer-events:none;opacity:0;transition:.3s;z-index:1}.dark-overlay.active{pointer-events:all;opacity:.8}.modal{position:fixed;top:15%;margin:24px;z-index:2;background:#fff;padding:24px;border:2px solid black;max-width:600px;display:none}.modal.active{display:block}.modal h2{margin:0;text-align:center}code,pre{padding:1px 6px;border-radius:4px;background:#e6e6e6}pre{padding:8px 8px 8px 24px}pre code{padding:0}.actions{display:flex;justify-content:center;align-items:center;gap:16px}@media(max-width:480px){.option:not(.important){flex-direction:column;gap:8px}.option-btns button,.option-btns label{flex:1}.colors{justify-content:center}}@media(min-width:480px){.options{grid-template-columns:1fr 1fr}.option-btns{gap:4px;justify-content:end}.options div:nth-child(1),.options div:nth-child(2),.options div:nth-child(3),.options div:nth-child(6){grid-column:span 2}.option{align-items:center}}@media(min-width:652px){footer li{flex-wrap:nowrap}.modal{width:60%;left:50%;transform:translate(-50%);margin:0}}@media(min-width:768px){.header{flex-direction:row}.left h1{font-size:3rem}}@media(min-width:1280px){.left h1{font-size:4rem}}