body{display:flex;flex-direction:column;height:100vh;margin:0;overflow:hidden;font-family:Helvetica,sans-serif}.top-bar{background-color:#0f0;text-align:center;padding:10px 0;color:#000;font-size:.6em;font-weight:400}.navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background-color:#fff;border-bottom:1px solid #ddd}h2{margin:0;letter-spacing:.1em;font-weight:500}.logo img{width:100%}.logo{width:10%}.nav-icons{display:flex;align-items:center;gap:15px}.btn button{background:#000;color:#fff;border:none;padding:10px 40px;font-size:14px;cursor:pointer;width:100%;min-width:125px}.btn{width:100%}.btn button:hover{background:#0f0;color:#000}.icon{position:relative;text-decoration:none;color:#000;font-size:18px}.cart-count{position:absolute;top:-5px;right:-10px;background:#0f0;color:#000;font-size:12px;width:16px;height:16px;display:flex;justify-content:center;align-items:center;border-radius:50%}.configurator-container{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.parts-buttons{margin-top:16px;display:flex;justify-content:center;align-items:center;gap:16px;flex-direction:column;color:#fff;font-weight:400}.configurator-settings{display:flex;flex-direction:column;font-size:1rem;font-weight:700;position:absolute;justify-content:center;align-items:center;top:85%;left:50%;transform:translate(-50%,-50%);z-index:1}.configurator-option{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.configurator-option button{background:#000;color:#fff;border:none;padding:10px 20px;font-size:14px;cursor:pointer}.configurator-option button:hover,.configurator-option button:active,.configurator-option button.selected{background:#0f0;color:#000}.part-selector{display:flex;align-items:center;gap:16px;justify-content:space-between;width:100%;background-color:#000;min-width:300px}.part-selector button{background:none;border:none;background-color:#000;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer}.part-selector button:hover{background:#0f0;color:#000}.color-palette{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px}.color-item{width:40px;height:40px;border:3px solid transparent;cursor:pointer;transition:transform .2s ease,border .2s ease}.color-item:hover{transform:scale(1.2)}.color-item.selected{border-color:#0f0}.fabric-palette{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px}.fabric-item{width:50px;height:50px;border:3px solid transparent;cursor:pointer;transition:transform .2s ease,border .2s ease;background-size:cover;background-position:center}.fabric-item:hover{transform:scale(1.2)}.fabric-item.selected{border-color:#0f0}@keyframes buttonColorChange{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.btn button{animation:buttonColorChange 5s linear infinite;background:linear-gradient(90deg,#000,#212121,#0f0,#1d1d1d,#000);background-size:400% 100%;transition:background-position 1s ease}.btn button:hover{background-position:100% 50%;color:#000}.notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:500px;background-color:#000c;color:#fff;padding:20px;border-radius:8px;text-align:center;box-shadow:0 4px 8px #0003;z-index:1000}.slide-modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#0006;display:flex;justify-content:flex-end;transform:translate(100%);transition:transform .3s ease-in-out}.slide-modal.open{transform:translate(0)}.slide-modal-content{background-color:#fefefe;width:300px;height:100%;padding:20px;box-shadow:-2px 0 5px #00000080;display:flex;flex-direction:column;align-items:center}.close-button{align-self:flex-end;font-size:28px;font-weight:700;cursor:pointer}.size-options{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0}.size-option{background-color:#fff;color:#000;border:1px solid #000;padding:10px 20px;width:35%;cursor:pointer;transition:background-color .3s}.size-option:hover,.size-option.active{background-color:#0f0;color:#000}.confirm-button{background-color:#000;text-transform:uppercase;color:#fff;border:none;padding:10px 20px;cursor:pointer;transition:background-color .3s;width:75%}.confirm-button:hover{background-color:#0f0;color:#000}h3{color:#000;font-size:1.2em;font-weight:500;margin:0;text-transform:uppercase}.initials-input{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;color:#fff;font-weight:400}.initials-input-group{display:flex;flex-direction:column}.initials-input label{margin-bottom:4px;font-size:.8em;font-weight:400;color:#fff}.initials-input input{padding:8px;font-size:14px;margin-bottom:8px;width:100px;text-align:center}.initials-input button{background:#000;color:#fff;border:none;padding:10px 20px;margin-top:10px;font-size:14px;cursor:pointer}.initials-input button:hover{background:#0f0;color:#000}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:500px;background-color:#000c;color:#fff;padding:20px;border-radius:8px;text-align:center;box-shadow:0 4px 8px #0003;z-index:1000;display:none}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:999;display:none}.popup-buttons{display:flex;gap:10px;margin-top:20px}.close-popup{position:absolute;top:10px;right:10px;font-size:28px;font-weight:700;cursor:pointer;color:#fff;pointer-events:auto}@media (max-width: 768px){.navbar{text-align:center;padding:10px}.logo{width:25%}.navbar h2{font-size:1rem;margin:10px 0}.nav-icons{justify-content:center;gap:10px}.btn button{font-size:12px;padding:8px 16px}.configurator-settings{font-size:.9rem;padding:10px;position:absolute;left:50%;transform:translate(-50%,-50%);z-index:1}.parts-buttons{flex-direction:column;gap:10px}.part-selector{flex-wrap:wrap;gap:10px}.part-selector button{font-size:12px;padding:8px 12px}.configurator-option{gap:5px}.color-item,.fabric-item{width:30px;height:30px}.initials-input{align-items:flex-start;gap:10px}.initials-input input{width:auto;font-size:12px}.initials-input button{font-size:.8em;padding:8px 16px;height:auto}}@media (max-width: 480px){.navbar h2{font-size:.9rem}.btn button{padding:6px 12px}.parts-buttons{gap:8px}.configurator-option button{padding:8px 12px;font-size:12px}.color-item,.fabric-item{width:20px;height:20px}}
