EG Brakes \u2013 Configure Your Disc<\/title>\r\n<style>\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\n#egb-config{width:100%;background:#000;min-height:100vh;padding:40px 20px;font-family:inherit;}\r\n#egb-config h1{text-align:center;color:#fff;font-size:22px;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:8px;}\r\n.egb-subtitle{text-align:center;color:#555;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:40px;}\r\n\r\n#egb-steps{display:flex;justify-content:center;gap:0;margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto;}\r\n.egb-step{flex:1;text-align:center;padding:10px;position:relative;}\r\n.egb-step-num{width:32px;height:32px;border-radius:50%;border:1px solid #333;color:#555;font-size:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}\r\n.egb-step.active .egb-step-num{border-color:#E8000D;color:#E8000D;}\r\n.egb-step.done .egb-step-num{background:#E8000D;border-color:#E8000D;color:#fff;}\r\n.egb-step-label{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-step.active .egb-step-label{color:#fff;}\r\n.egb-step-line{position:absolute;top:26px;right:-50%;width:100%;height:1px;background:#222;z-index:0;}\r\n\r\n#egb-preview{width:300px;height:300px;margin:0 auto 40px;position:relative;}\r\n#egb-preview img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;}\r\n\r\n#egb-price-display{text-align:center;margin-bottom:20px;}\r\n#egb-price-display .egb-price{font-size:28px;color:#E8000D;font-weight:500;}\r\n#egb-price-display .egb-price-note{font-size:11px;color:#555;margin-top:4px;}\r\n\r\n.egb-panel{display:none;}\r\n.egb-panel.active{display:block;}\r\n.egb-panel-title{text-align:center;font-size:11px;color:#E8000D;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:20px;}\r\n\r\n.egb-diam-grid{display:flex;flex-wrap:wrap;gap:8px;max-width:700px;margin:0 auto;justify-content:center;}\r\n.egb-diam-btn{background:#0d0d0d;border:1px solid #222;color:#888;padding:10px 16px;border-radius:3px;font-size:12px;cursor:pointer;transition:all 0.2s;position:relative;}\r\n.egb-diam-btn:hover{border-color:#E8000D;color:#E8000D;}\r\n.egb-diam-btn.active{border-color:#E8000D;color:#E8000D;background:#110000;}\r\n.egb-diam-btn .egb-diam-price{display:block;font-size:10px;color:#555;margin-top:3px;}\r\n.egb-diam-btn.active .egb-diam-price{color:#E8000D;}\r\n\r\n.egb-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px;margin:0 auto;}\r\n.egb-shape-opt{border:1px solid #222;background:#0d0d0d;padding:12px;cursor:pointer;border-radius:4px;text-align:center;transition:all 0.2s;}\r\n.egb-shape-opt:hover{border-color:#E8000D;}\r\n.egb-shape-opt.active{border-color:#E8000D;background:#110000;}\r\n.egb-shape-opt.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}\r\n.egb-shape-opt img{width:80px;height:80px;object-fit:contain;display:block;margin:0 auto 8px;}\r\n.egb-shape-opt span{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-shape-opt.active span{color:#E8000D;}\r\n.egb-shape-extra{font-size:9px;color:#E8000D;display:block;margin-top:3px;}\r\n\r\n.egb-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:600px;margin:0 auto;}\r\n.egb-color-opt{border:1px solid #222;background:#0d0d0d;padding:10px;cursor:pointer;border-radius:4px;text-align:center;transition:all 0.2s;}\r\n.egb-color-opt:hover{border-color:#E8000D;}\r\n.egb-color-opt.active{border-color:#E8000D;background:#110000;}\r\n.egb-color-opt.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}\r\n.egb-color-opt img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 6px;}\r\n.egb-color-opt span{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-color-opt.active span{color:#E8000D;}\r\n\r\n.egb-nav{display:flex;justify-content:center;gap:12px;margin-top:30px;}\r\n.egb-back-btn{padding:12px 30px;border:1px solid #333;color:#555;background:transparent;border-radius:3px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;}\r\n.egb-back-btn:hover{border-color:#fff;color:#fff;}\r\n.egb-next-btn{padding:12px 40px;border:none;background:#E8000D;color:#fff;border-radius:3px;font-size:11px;text-transform:uppercase;letter-spacing:0.15em;cursor:pointer;transition:all 0.2s;}\r\n.egb-next-btn:hover{background:#c0000b;}\r\n.egb-next-btn:disabled{background:#333;cursor:not-allowed;}\r\n\r\n#egb-summary-box{max-width:500px;margin:0 auto;background:#0d0d0d;border:1px solid #222;border-radius:4px;padding:24px;}\r\n#egb-summary-box h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:16px;}\r\n.egb-sum-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #111;font-size:12px;}\r\n.egb-sum-row span:first-child{color:#555;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-sum-row span:last-child{color:#fff;}\r\n.egb-sum-total{display:flex;justify-content:space-between;padding:12px 0;font-size:14px;margin-top:4px;}\r\n.egb-sum-total span:first-child{color:#fff;text-transform:uppercase;}\r\n.egb-sum-total span:last-child{color:#E8000D;font-size:18px;}\r\n\r\n#egb-cart{max-width:700px;margin:0 auto 30px;}\r\n#egb-cart-title{font-size:11px;color:#E8000D;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:12px;text-align:center;}\r\n.egb-cart-item{background:#0d0d0d;border:1px solid #222;border-radius:4px;padding:16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}\r\n.egb-cart-item-info{font-size:12px;color:#888;line-height:1.8;}\r\n.egb-cart-item-info strong{color:#fff;display:block;margin-bottom:4px;}\r\n.egb-cart-item-price{font-size:16px;color:#E8000D;white-space:nowrap;margin-left:16px;}\r\n.egb-cart-remove{background:none;border:none;color:#555;font-size:18px;cursor:pointer;margin-left:12px;}\r\n.egb-cart-remove:hover{color:#E8000D;}\r\n#egb-cart-total{text-align:right;font-size:14px;color:#fff;padding:12px 0;border-top:1px solid #222;margin-top:8px;}\r\n#egb-cart-total span{color:#E8000D;font-size:18px;margin-left:8px;}\r\n\r\n.egb-note{text-align:center;font-size:10px;color:#444;margin-top:16px;font-style:italic;}\r\n\r\n#egb-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;justify-content:center;align-items:center;overflow-y:auto;}\r\n#egb-overlay.active{display:flex;}\r\n#egb-popup{background:#111;border:1px solid #222;border-radius:6px;padding:30px;width:90%;max-width:500px;position:relative;margin:20px auto;}\r\n#egb-popup h3{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:16px;}\r\n#egb-popup input,#egb-popup textarea,#egb-popup select{width:100%;background:#1a1a1a;border:1px solid #333;color:#fff;padding:10px 12px;border-radius:3px;font-size:13px;margin-bottom:12px;box-sizing:border-box;font-family:inherit;}\r\n#egb-popup textarea{height:80px;resize:vertical;}\r\n#egb-popup input:focus,#egb-popup textarea:focus{outline:none;border-color:#E8000D;}\r\n#egb-submit-btn{width:100%;background:#E8000D;color:#fff;border:none;padding:12px;border-radius:3px;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:0.15em;transition:background 0.2s;}\r\n#egb-submit-btn:hover{background:#c0000b;}\r\n#egb-pop-close{position:absolute;top:12px;right:16px;color:#555;font-size:20px;cursor:pointer;}\r\n#egb-pop-close:hover{color:#fff;}\r\n#egb-success{display:none;text-align:center;padding:20px 0;}\r\n#egb-success h3{color:#00A86B;font-size:18px;margin-bottom:8px;}\r\n#egb-success p{color:#666;font-size:13px;}\r\n.egb-field-label{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;display:block;}\r\n.egb-required{color:#E8000D;}\r\n<\/style>\r\n\r\n<div id=\"egb-config\">\r\n <h1>Configura il Tuo Disco<\/h1>\r\n <p class=\"egb-subtitle\">Costruisci passo dopo passo il tuo disco freno personalizzato<\/p>\r\n\r\n <div id=\"egb-steps\">\r\n <div class=\"egb-step active\" id=\"step-ind-1\">\r\n <div class=\"egb-step-num\">1<\/div>\r\n <div class=\"egb-step-label\">Diametro<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-2\">\r\n <div class=\"egb-step-num\">2<\/div>\r\n <div class=\"egb-step-label\">Forma<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-3\">\r\n <div class=\"egb-step-num\">3<\/div>\r\n <div class=\"egb-step-label\">Colore Mozzo<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-4\">\r\n <div class=\"egb-step-num\">4<\/div>\r\n <div class=\"egb-step-label\">Colore Dado<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-5\">\r\n <div class=\"egb-step-num\">5<\/div>\r\n <div class=\"egb-step-label\">Revisione<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"egb-preview\">\r\n <img decoding=\"async\" id=\"prev-shape\" src=\"\" style=\"opacity:0.15;\" \/>\r\n <img decoding=\"async\" id=\"prev-hub\" src=\"\" style=\"display:none;\" \/>\r\n <img decoding=\"async\" id=\"prev-nut\" src=\"\" style=\"display:none;\" \/>\r\n <\/div>\r\n\r\n <div id=\"egb-price-display\" style=\"display:none;\">\r\n <div class=\"egb-price\" id=\"egb-price-val\">\u20ac0<\/div>\r\n <div class=\"egb-price-note\" id=\"egb-price-note\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel active\" id=\"panel-1\">\r\n <div class=\"egb-panel-title\">Passaggio 1: scegli il diametro<\/div>\r\n <div class=\"egb-diam-grid\">\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'190',55,'basic')\">190mm<span class=\"egb-diam-price\">\u20ac55<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'200',60,'basic')\">200mm<span class=\"egb-diam-price\">\u20ac60<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'210',60,'basic')\">210mm<span class=\"egb-diam-price\">\u20ac60<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'220',65,'basic')\">220mm<span class=\"egb-diam-price\">\u20ac65<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'230',70,'basic')\">230mm<span class=\"egb-diam-price\">\u20ac70<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'240',75,'mid')\">240mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'245',75,'mid')\">245mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'250',75,'mid')\">250mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'260',75,'mid')\">260mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'270',85,'mid')\">270mm<span class=\"egb-diam-price\">\u20ac85<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'280',110,'mid')\">280mm<span class=\"egb-diam-price\">\u20ac110<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'290',140,'mid')\">290mm<span class=\"egb-diam-price\">\u20ac140<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'292',140,'mid')\">292mm<span class=\"egb-diam-price\">\u20ac140<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'300',150,'full')\">300mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'305',150,'full')\">305mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'310',150,'full')\">310mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'320',150,'full')\">320mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'330',160,'full')\">330mm<span class=\"egb-diam-price\">\u20ac160<\/span><\/button>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-next-btn\" id=\"next-1\" onclick=\"goStep(2)\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-2\">\r\n <div class=\"egb-panel-title\">Passaggio 2: scegli la forma del disco<\/div>\r\n <div class=\"egb-shape-grid\">\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-tondo\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1a-Tondo-Model-scaled.png','Tondo',false)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1a-Tondo-Model-scaled.png\" \/>\r\n <span>Tondo<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-mosaico\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1b-Tondo-Mosaico-Model-scaled.png','Tondo Mosaico',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1b-Tondo-Mosaico-Model-scaled.png\" \/>\r\n <span>Tondo Mosaico<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-wild\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1c-Tondo-wild-Model-scaled.png','Tondo Wild',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1c-Tondo-wild-Model-scaled.png\" \/>\r\n <span>Tondo Wild<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-margherita\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2a-Margherita-Model-scaled.png','Margherita',false)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2a-Margherita-Model-scaled.png\" \/>\r\n <span>Margherita<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-racing\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3a-Tondo-racing-Model-scaled.png','Tondo Racing',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3a-Tondo-racing-Model-scaled.png\" \/>\r\n <span>Tondo Racing<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-venom\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4a-Venom-Model-scaled.png','Venom',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4a-Venom-Model-scaled.png\" \/>\r\n <span>Venom<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(1)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-2\" onclick=\"nextFromShape()\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-3\">\r\n <div class=\"egb-panel-title\">Step 3 \u2014 Choose hub color<\/div>\r\n <div class=\"egb-color-grid\">\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Mozzo-scaled.png','Nero')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Mozzo-scaled.png\" \/><span>Nero<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Mozzo-scaled.png','Rosso')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Mozzo-scaled.png\" \/><span>Rosso<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Mozzo-Model-scaled.png','Arancio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Mozzo-Model-scaled.png\" \/><span>Arancio<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Mozzo-scaled.png','Blu')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Mozzo-scaled.png\" \/><span>Blu<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Mozzo-scaled.png','Azzurro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Mozzo-scaled.png\" \/><span>Azzurro<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Mozzo-scaled.png','Verde')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Mozzo-scaled.png\" \/><span>Verde<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Mozzo-scaled.png','Giallo')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Mozzo-scaled.png\" \/><span>Giallo<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Mozzo-scaled.png','Oro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Mozzo-scaled.png\" \/><span>Oro<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Mozzo-scaled.png','Grigio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Mozzo-scaled.png\" \/><span>Grigio<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Mozzo-scaled.png','Viola')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Mozzo-scaled.png\" \/><span>Viola<\/span><\/div>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(2)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-3\" onclick=\"nextFromHub()\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-4\">\r\n <div class=\"egb-panel-title\">Step 4 \u2014 Choose nut color<\/div>\r\n <div class=\"egb-color-grid\" id=\"nut-grid\">\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Nero\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Nottolino-scaled.png','Nero')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Nottolino-scaled.png\" \/><span>Nero<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Rosso\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Nottolino-scaled.png','Rosso')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Nottolino-scaled.png\" \/><span>Rosso<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Arancio\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Nottolino-scaled.png','Arancio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Nottolino-scaled.png\" \/><span>Arancio<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Blu\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Nottolino-scaled.png','Blu')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Nottolino-scaled.png\" \/><span>Blu<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Azzurro\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Nottolino-scaled.png','Azzurro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Nottolino-scaled.png\" \/><span>Azzurro<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Verde\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Nottolino-scaled.png','Verde')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Nottolino-scaled.png\" \/><span>Verde<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Giallo\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Nottolino-scaled.png','Giallo')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Nottolino-scaled.png\" \/><span>Giallo<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Oro\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Nottolino-scaled.png','Oro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Nottolino-scaled.png\" \/><span>Oro<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Grigio\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Nottolino-scaled.png','Grigio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Nottolino-scaled.png\" \/><span>Grigio<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Viola\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Nottolino-scaled.png','Viola')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Nottolino-scaled.png\" \/><span>Viola<\/span><\/div>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(3)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-4\" onclick=\"goStep(5)\" disabled>Review \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-5\">\r\n <div class=\"egb-panel-title\">Your Configuration<\/div>\r\n <div id=\"egb-summary-box\">\r\n <h3>Riepilogo<\/h3>\r\n <div class=\"egb-sum-row\"><span>Diametro<\/span><span id=\"sum-diam\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Forma<\/span><span id=\"sum-shape\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Colore Mozzo<\/span><span id=\"sum-hub\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Colore Dado<\/span><span id=\"sum-nut\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-total\"><span>Total<\/span><span id=\"sum-total\">\u2014<\/span><\/div>\r\n <\/div>\r\n <p class=\"egb-note\">* The image is representative and does not reflect the final product<\/p>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goBackFromReview()\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"addToCart()\">Aggiungi al carrello +<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"openPopup()\" style=\"background:#333;\">Richiedi un preventivo \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"egb-cart\" style=\"display:none;\">\r\n <div id=\"egb-cart-title\">Il tuo carrello dei preventivi<\/div>\r\n <div id=\"egb-cart-items\"><\/div>\r\n <div id=\"egb-cart-total\">Totale: <span id=\"cart-total-val\">\u20ac0<\/span><\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"addAnother()\">+ Aggiungi un altro disco<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"openPopup()\">Richiedi un preventivo \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div id=\"egb-overlay\">\r\n <div id=\"egb-popup\">\r\n <span id=\"egb-pop-close\" onclick=\"closePopup()\">\u2715<\/span>\r\n <div id=\"egb-form-area\">\r\n <h3>Complete Your Quote<\/h3>\r\n <span class=\"egb-field-label\">Full Name <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-name\" placeholder=\"Il tuo nome completo\" \/>\r\n <span class=\"egb-field-label\">Indirizzo e-mail <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"email\" id=\"egb-email\" placeholder=\"Il tuo indirizzo di posta elettronica\" \/>\r\n <span class=\"egb-field-label\">Numero di telefono<\/span>\r\n <input type=\"tel\" id=\"egb-phone\" placeholder=\"Opzionale\" \/>\r\n <span class=\"egb-field-label\">Marchio motociclistico <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-make\" placeholder=\"e.g. Honda, Yamaha, BMW\" \/>\r\n <span class=\"egb-field-label\">Motorcycle Model <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-model\" placeholder=\"Per esempio. CBR600, R1, S1000RR\" \/>\r\n <span class=\"egb-field-label\">Dimensioni del motore <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-engine\" placeholder=\"per esempio. 600cc, 1000cc\" \/>\r\n <span class=\"egb-field-label\">Anno di produzione <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-year\" placeholder=\"per esempio. 2019\" \/>\r\n <span class=\"egb-field-label\">Notes<\/span>\r\n <textarea id=\"egb-notes\" placeholder=\"Eventuali note o richieste aggiuntive...\"><\/textarea>\r\n <button id=\"egb-submit-btn\" onclick=\"submitQuote()\">Invia richiesta di preventivo<\/button>\r\n <\/div>\r\n <div id=\"egb-success\">\r\n <h3>\u2713 Quote Sent!<\/h3>\r\n <p>We have received your request and will contact you shortly.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nvar sel = {diam:'',diamPrice:0,diamType:'',shape:'',shapeName:'',shapeExtra:false,hub:'',hubName:'',nut:'',nutName:''};\r\nvar cart = [];\r\n\r\nvar prices = {\r\n '190':55,'200':60,'210':60,'220':65,'230':70,\r\n '240':75,'245':75,'250':75,'260':75,'270':85,'280':110,'290':140,'292':140,\r\n '300':150,'305':150,'310':150,'320':150,'330':160\r\n};\r\n\r\nfunction calcTotal() {\r\n var total = sel.diamPrice;\r\n if(sel.shapeExtra) total += 35;\r\n return total;\r\n}\r\n\r\nfunction updatePriceDisplay() {\r\n if(!sel.diam) return;\r\n var total = calcTotal();\r\n document.getElementById('egb-price-display').style.display = 'block';\r\n document.getElementById('egb-price-val').textContent = '\u20ac' + total;\r\n var note = '';\r\n if(sel.shapeExtra) note = 'Base \u20ac'+sel.diamPrice+' + \u20ac35 custom shape';\r\n document.getElementById('egb-price-note').textContent = note;\r\n}\r\n\r\nfunction goStep(n) {\r\n document.querySelectorAll('.egb-panel').forEach(function(p){p.classList.remove('active');});\r\n document.getElementById('panel-'+n).classList.add('active');\r\n document.querySelectorAll('.egb-step').forEach(function(s,i){\r\n s.classList.remove('active','done');\r\n if(i+1 < n) s.classList.add('done');\r\n if(i+1 === n) s.classList.add('active');\r\n });\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n}\r\n\r\nfunction selectDiam(el, diam, price, type) {\r\n document.querySelectorAll('.egb-diam-btn').forEach(function(b){b.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.diam = diam;\r\n sel.diamPrice = price;\r\n sel.diamType = type;\r\n sel.shape = '';\r\n sel.shapeName = '';\r\n sel.shapeExtra = false;\r\n sel.hub = '';\r\n sel.hubName = '';\r\n sel.nut = '';\r\n sel.nutName = '';\r\n document.getElementById('prev-shape').src = '';\r\n document.getElementById('prev-shape').style.opacity = '0.15';\r\n document.getElementById('prev-hub').style.display = 'none';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-1').disabled = false;\r\n updatePriceDisplay();\r\n}\r\n\r\nfunction selectShape(el, url, name, isExtra) {\r\n document.querySelectorAll('.egb-shape-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.shape = url;\r\n sel.shapeName = name;\r\n sel.shapeExtra = isExtra;\r\n document.getElementById('prev-shape').src = url;\r\n document.getElementById('prev-shape').style.opacity = '1';\r\n document.getElementById('next-2').disabled = false;\r\n updatePriceDisplay();\r\n}\r\n\r\nfunction nextFromShape() {\r\n if(sel.diamType === 'basic') {\r\n updateSummary();\r\n goStep(5);\r\n } else {\r\n goStep(3);\r\n }\r\n}\r\n\r\nfunction selectHub(el, url, name) {\r\n document.querySelectorAll('#panel-3 .egb-color-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.hub = url;\r\n sel.hubName = name;\r\n document.getElementById('prev-hub').src = url;\r\n document.getElementById('prev-hub').style.display = 'block';\r\n document.getElementById('next-3').disabled = false;\r\n}\r\n\r\nfunction nextFromHub() {\r\n if(sel.diamType === 'mid') {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){\r\n var name = o.getAttribute('data-name');\r\n if(name === 'Nero' || name === 'Grigio') {\r\n o.classList.remove('disabled');\r\n } else {\r\n o.classList.add('disabled');\r\n }\r\n });\r\n } else {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){\r\n o.classList.remove('disabled');\r\n });\r\n }\r\n sel.nut = '';\r\n sel.nutName = '';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-4').disabled = true;\r\n goStep(4);\r\n}\r\n\r\nfunction selectNut(el, url, name) {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.nut = url;\r\n sel.nutName = name;\r\n document.getElementById('prev-nut').src = url;\r\n document.getElementById('prev-nut').style.display = 'block';\r\n document.getElementById('next-4').disabled = false;\r\n}\r\n\r\nfunction goBackFromReview() {\r\n if(sel.diamType === 'basic') goStep(2);\r\n else if(sel.diamType === 'mid') goStep(4);\r\n else goStep(4);\r\n}\r\n\r\nfunction updateSummary() {\r\n document.getElementById('sum-diam').textContent = sel.diam + 'mm';\r\n document.getElementById('sum-shape').textContent = sel.shapeName;\r\n document.getElementById('sum-hub').textContent = sel.hubName || '\u2014';\r\n document.getElementById('sum-nut').textContent = sel.nutName || '\u2014';\r\n document.getElementById('sum-total').textContent = '\u20ac' + calcTotal();\r\n}\r\n\r\nfunction addToCart() {\r\n updateSummary();\r\n var item = {\r\n diam: sel.diam,\r\n shape: sel.shapeName,\r\n hub: sel.hubName || '\u2014',\r\n nut: sel.nutName || '\u2014',\r\n total: calcTotal()\r\n };\r\n cart.push(item);\r\n renderCart();\r\n resetConfig();\r\n}\r\n\r\nfunction renderCart() {\r\n var html = '';\r\n var total = 0;\r\n cart.forEach(function(item, i) {\r\n total += item.total;\r\n html += '<div class=\"egb-cart-item\">';\r\n html += '<div class=\"egb-cart-item-info\"><strong>Disc ' + (i+1) + '<\/strong>';\r\n html += item.diam + 'mm | ' + item.shape + ' | Hub: ' + item.hub + ' | Nuts: ' + item.nut + '<\/div>';\r\n html += '<div class=\"egb-cart-item-price\">\u20ac' + item.total + '<\/div>';\r\n html += '<button class=\"egb-cart-remove\" onclick=\"removeFromCart('+i+')\">\u2715<\/button>';\r\n html += '<\/div>';\r\n });\r\n document.getElementById('egb-cart-items').innerHTML = html;\r\n document.getElementById('cart-total-val').textContent = '\u20ac' + total;\r\n document.getElementById('egb-cart').style.display = 'block';\r\n}\r\n\r\nfunction removeFromCart(i) {\r\n cart.splice(i, 1);\r\n if(cart.length === 0) {\r\n document.getElementById('egb-cart').style.display = 'none';\r\n } else {\r\n renderCart();\r\n }\r\n}\r\n\r\nfunction addAnother() {\r\n resetConfig();\r\n goStep(1);\r\n}\r\n\r\nfunction resetConfig() {\r\n sel = {diam:'',diamPrice:0,diamType:'',shape:'',shapeName:'',shapeExtra:false,hub:'',hubName:'',nut:'',nutName:''};\r\n document.querySelectorAll('.egb-diam-btn').forEach(function(b){b.classList.remove('active');});\r\n document.querySelectorAll('.egb-shape-opt').forEach(function(o){o.classList.remove('active');});\r\n document.querySelectorAll('#panel-3 .egb-color-opt').forEach(function(o){o.classList.remove('active');});\r\n document.querySelectorAll('.nut-opt').forEach(function(o){o.classList.remove('active');});\r\n document.getElementById('prev-shape').src = '';\r\n document.getElementById('prev-shape').style.opacity = '0.15';\r\n document.getElementById('prev-hub').style.display = 'none';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-1').disabled = true;\r\n document.getElementById('next-2').disabled = true;\r\n document.getElementById('next-3').disabled = true;\r\n document.getElementById('next-4').disabled = true;\r\n document.getElementById('egb-price-display').style.display = 'none';\r\n goStep(1);\r\n}\r\n\r\nfunction openPopup() {\r\n updateSummary();\r\n document.getElementById('egb-overlay').classList.add('active');\r\n document.getElementById('egb-success').style.display = 'none';\r\n document.getElementById('egb-form-area').style.display = 'block';\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById('egb-overlay').classList.remove('active');\r\n}\r\n\r\nfunction submitQuote() {\r\n var name = document.getElementById('egb-name').value.trim();\r\n var email = document.getElementById('egb-email').value.trim();\r\n var make = document.getElementById('egb-make').value.trim();\r\n var model = document.getElementById('egb-model').value.trim();\r\n var engine = document.getElementById('egb-engine').value.trim();\r\n var year = document.getElementById('egb-year').value.trim();\r\n\r\n if(!name||!email||!make||!model||!engine||!year) {\r\n alert('Please fill in all required fields.');\r\n return;\r\n }\r\n\r\n var cartSummary = '';\r\n if(cart.length > 0) {\r\n cart.forEach(function(item, i) {\r\n cartSummary += 'Disc '+(i+1)+': '+item.diam+'mm | '+item.shape+' | Hub: '+item.hub+' | Nuts: '+item.nut+' | \u20ac'+item.total+'\\n';\r\n });\r\n } else {\r\n cartSummary = sel.diam+'mm | '+sel.shapeName+' | Hub: '+(sel.hubName||'\u2014')+' | Nuts: '+(sel.nutName||'\u2014')+' | \u20ac'+calcTotal();\r\n }\r\n\r\n var formData = new FormData();\r\n formData.append('action','egb_quote_submit');\r\n formData.append('name', name);\r\n formData.append('email', email);\r\n formData.append('phone', document.getElementById('egb-phone').value.trim());\r\n formData.append('product', cartSummary);\r\n formData.append('diameter', sel.diam);\r\n formData.append('shape', sel.shapeName);\r\n formData.append('hub_color', sel.hubName||'\u2014');\r\n formData.append('nut_color', sel.nutName||'\u2014');\r\n formData.append('make', make);\r\n formData.append('model', model);\r\n formData.append('engine', engine);\r\n formData.append('year', year);\r\n formData.append('notes', document.getElementById('egb-notes').value.trim());\r\n\r\n fetch('\/wp-admin\/admin-ajax.php',{method:'POST',body:formData})\r\n .then(function(r){return r.json();})\r\n .then(function(res){\r\n if(res.success){\r\n document.getElementById('egb-form-area').style.display='none';\r\n document.getElementById('egb-success').style.display='block';\r\n } else {\r\n alert('Something went wrong. Please try again.');\r\n }\r\n })\r\n .catch(function(){alert('Something went wrong. Please try again.');});\r\n}\r\n\r\ndocument.getElementById('egb-overlay').addEventListener('click',function(e){\r\n if(e.target===this) closePopup();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EG Brakes \u2013 Configure Your Disc Configure Your Disc Build your custom brake disc step by step 1 Diameter 2 Shape 3 Hub Color 4 Nut Color 5 Review \u20ac0 Step 1 \u2014 Choose your diameter 190mm\u20ac55 200mm\u20ac60 210mm\u20ac60 220mm\u20ac65 230mm\u20ac70 240mm\u20ac75 245mm\u20ac75 250mm\u20ac75 260mm\u20ac75 270mm\u20ac85 280mm\u20ac110 290mm\u20ac140 292mm\u20ac140 300mm\u20ac150 305mm\u20ac150 310mm\u20ac150 320mm\u20ac150 330mm\u20ac160 Next […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1087","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/comments?post=1087"}],"version-history":[{"count":19,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087\/revisions\/1130"}],"wp:attachment":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/media?parent=1087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nEG Brakes \u2013 Configure Your Disc<\/title>\r\n<style>\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\n#egb-config{width:100%;background:#000;min-height:100vh;padding:40px 20px;font-family:inherit;}\r\n#egb-config h1{text-align:center;color:#fff;font-size:22px;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:8px;}\r\n.egb-subtitle{text-align:center;color:#555;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:40px;}\r\n\r\n#egb-steps{display:flex;justify-content:center;gap:0;margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto;}\r\n.egb-step{flex:1;text-align:center;padding:10px;position:relative;}\r\n.egb-step-num{width:32px;height:32px;border-radius:50%;border:1px solid #333;color:#555;font-size:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}\r\n.egb-step.active .egb-step-num{border-color:#E8000D;color:#E8000D;}\r\n.egb-step.done .egb-step-num{background:#E8000D;border-color:#E8000D;color:#fff;}\r\n.egb-step-label{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-step.active .egb-step-label{color:#fff;}\r\n.egb-step-line{position:absolute;top:26px;right:-50%;width:100%;height:1px;background:#222;z-index:0;}\r\n\r\n#egb-preview{width:300px;height:300px;margin:0 auto 40px;position:relative;}\r\n#egb-preview img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;}\r\n\r\n#egb-price-display{text-align:center;margin-bottom:20px;}\r\n#egb-price-display .egb-price{font-size:28px;color:#E8000D;font-weight:500;}\r\n#egb-price-display .egb-price-note{font-size:11px;color:#555;margin-top:4px;}\r\n\r\n.egb-panel{display:none;}\r\n.egb-panel.active{display:block;}\r\n.egb-panel-title{text-align:center;font-size:11px;color:#E8000D;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:20px;}\r\n\r\n.egb-diam-grid{display:flex;flex-wrap:wrap;gap:8px;max-width:700px;margin:0 auto;justify-content:center;}\r\n.egb-diam-btn{background:#0d0d0d;border:1px solid #222;color:#888;padding:10px 16px;border-radius:3px;font-size:12px;cursor:pointer;transition:all 0.2s;position:relative;}\r\n.egb-diam-btn:hover{border-color:#E8000D;color:#E8000D;}\r\n.egb-diam-btn.active{border-color:#E8000D;color:#E8000D;background:#110000;}\r\n.egb-diam-btn .egb-diam-price{display:block;font-size:10px;color:#555;margin-top:3px;}\r\n.egb-diam-btn.active .egb-diam-price{color:#E8000D;}\r\n\r\n.egb-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px;margin:0 auto;}\r\n.egb-shape-opt{border:1px solid #222;background:#0d0d0d;padding:12px;cursor:pointer;border-radius:4px;text-align:center;transition:all 0.2s;}\r\n.egb-shape-opt:hover{border-color:#E8000D;}\r\n.egb-shape-opt.active{border-color:#E8000D;background:#110000;}\r\n.egb-shape-opt.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}\r\n.egb-shape-opt img{width:80px;height:80px;object-fit:contain;display:block;margin:0 auto 8px;}\r\n.egb-shape-opt span{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-shape-opt.active span{color:#E8000D;}\r\n.egb-shape-extra{font-size:9px;color:#E8000D;display:block;margin-top:3px;}\r\n\r\n.egb-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:600px;margin:0 auto;}\r\n.egb-color-opt{border:1px solid #222;background:#0d0d0d;padding:10px;cursor:pointer;border-radius:4px;text-align:center;transition:all 0.2s;}\r\n.egb-color-opt:hover{border-color:#E8000D;}\r\n.egb-color-opt.active{border-color:#E8000D;background:#110000;}\r\n.egb-color-opt.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}\r\n.egb-color-opt img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 6px;}\r\n.egb-color-opt span{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-color-opt.active span{color:#E8000D;}\r\n\r\n.egb-nav{display:flex;justify-content:center;gap:12px;margin-top:30px;}\r\n.egb-back-btn{padding:12px 30px;border:1px solid #333;color:#555;background:transparent;border-radius:3px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;}\r\n.egb-back-btn:hover{border-color:#fff;color:#fff;}\r\n.egb-next-btn{padding:12px 40px;border:none;background:#E8000D;color:#fff;border-radius:3px;font-size:11px;text-transform:uppercase;letter-spacing:0.15em;cursor:pointer;transition:all 0.2s;}\r\n.egb-next-btn:hover{background:#c0000b;}\r\n.egb-next-btn:disabled{background:#333;cursor:not-allowed;}\r\n\r\n#egb-summary-box{max-width:500px;margin:0 auto;background:#0d0d0d;border:1px solid #222;border-radius:4px;padding:24px;}\r\n#egb-summary-box h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:16px;}\r\n.egb-sum-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #111;font-size:12px;}\r\n.egb-sum-row span:first-child{color:#555;text-transform:uppercase;letter-spacing:0.1em;}\r\n.egb-sum-row span:last-child{color:#fff;}\r\n.egb-sum-total{display:flex;justify-content:space-between;padding:12px 0;font-size:14px;margin-top:4px;}\r\n.egb-sum-total span:first-child{color:#fff;text-transform:uppercase;}\r\n.egb-sum-total span:last-child{color:#E8000D;font-size:18px;}\r\n\r\n#egb-cart{max-width:700px;margin:0 auto 30px;}\r\n#egb-cart-title{font-size:11px;color:#E8000D;text-transform:uppercase;letter-spacing:0.2em;margin-bottom:12px;text-align:center;}\r\n.egb-cart-item{background:#0d0d0d;border:1px solid #222;border-radius:4px;padding:16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}\r\n.egb-cart-item-info{font-size:12px;color:#888;line-height:1.8;}\r\n.egb-cart-item-info strong{color:#fff;display:block;margin-bottom:4px;}\r\n.egb-cart-item-price{font-size:16px;color:#E8000D;white-space:nowrap;margin-left:16px;}\r\n.egb-cart-remove{background:none;border:none;color:#555;font-size:18px;cursor:pointer;margin-left:12px;}\r\n.egb-cart-remove:hover{color:#E8000D;}\r\n#egb-cart-total{text-align:right;font-size:14px;color:#fff;padding:12px 0;border-top:1px solid #222;margin-top:8px;}\r\n#egb-cart-total span{color:#E8000D;font-size:18px;margin-left:8px;}\r\n\r\n.egb-note{text-align:center;font-size:10px;color:#444;margin-top:16px;font-style:italic;}\r\n\r\n#egb-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;justify-content:center;align-items:center;overflow-y:auto;}\r\n#egb-overlay.active{display:flex;}\r\n#egb-popup{background:#111;border:1px solid #222;border-radius:6px;padding:30px;width:90%;max-width:500px;position:relative;margin:20px auto;}\r\n#egb-popup h3{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:16px;}\r\n#egb-popup input,#egb-popup textarea,#egb-popup select{width:100%;background:#1a1a1a;border:1px solid #333;color:#fff;padding:10px 12px;border-radius:3px;font-size:13px;margin-bottom:12px;box-sizing:border-box;font-family:inherit;}\r\n#egb-popup textarea{height:80px;resize:vertical;}\r\n#egb-popup input:focus,#egb-popup textarea:focus{outline:none;border-color:#E8000D;}\r\n#egb-submit-btn{width:100%;background:#E8000D;color:#fff;border:none;padding:12px;border-radius:3px;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:0.15em;transition:background 0.2s;}\r\n#egb-submit-btn:hover{background:#c0000b;}\r\n#egb-pop-close{position:absolute;top:12px;right:16px;color:#555;font-size:20px;cursor:pointer;}\r\n#egb-pop-close:hover{color:#fff;}\r\n#egb-success{display:none;text-align:center;padding:20px 0;}\r\n#egb-success h3{color:#00A86B;font-size:18px;margin-bottom:8px;}\r\n#egb-success p{color:#666;font-size:13px;}\r\n.egb-field-label{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;display:block;}\r\n.egb-required{color:#E8000D;}\r\n<\/style>\r\n\r\n<div id=\"egb-config\">\r\n <h1>Configura il Tuo Disco<\/h1>\r\n <p class=\"egb-subtitle\">Costruisci passo dopo passo il tuo disco freno personalizzato<\/p>\r\n\r\n <div id=\"egb-steps\">\r\n <div class=\"egb-step active\" id=\"step-ind-1\">\r\n <div class=\"egb-step-num\">1<\/div>\r\n <div class=\"egb-step-label\">Diametro<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-2\">\r\n <div class=\"egb-step-num\">2<\/div>\r\n <div class=\"egb-step-label\">Forma<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-3\">\r\n <div class=\"egb-step-num\">3<\/div>\r\n <div class=\"egb-step-label\">Colore Mozzo<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-4\">\r\n <div class=\"egb-step-num\">4<\/div>\r\n <div class=\"egb-step-label\">Colore Dado<\/div>\r\n <div class=\"egb-step-line\"><\/div>\r\n <\/div>\r\n <div class=\"egb-step\" id=\"step-ind-5\">\r\n <div class=\"egb-step-num\">5<\/div>\r\n <div class=\"egb-step-label\">Revisione<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"egb-preview\">\r\n <img decoding=\"async\" id=\"prev-shape\" src=\"\" style=\"opacity:0.15;\" \/>\r\n <img decoding=\"async\" id=\"prev-hub\" src=\"\" style=\"display:none;\" \/>\r\n <img decoding=\"async\" id=\"prev-nut\" src=\"\" style=\"display:none;\" \/>\r\n <\/div>\r\n\r\n <div id=\"egb-price-display\" style=\"display:none;\">\r\n <div class=\"egb-price\" id=\"egb-price-val\">\u20ac0<\/div>\r\n <div class=\"egb-price-note\" id=\"egb-price-note\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel active\" id=\"panel-1\">\r\n <div class=\"egb-panel-title\">Passaggio 1: scegli il diametro<\/div>\r\n <div class=\"egb-diam-grid\">\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'190',55,'basic')\">190mm<span class=\"egb-diam-price\">\u20ac55<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'200',60,'basic')\">200mm<span class=\"egb-diam-price\">\u20ac60<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'210',60,'basic')\">210mm<span class=\"egb-diam-price\">\u20ac60<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'220',65,'basic')\">220mm<span class=\"egb-diam-price\">\u20ac65<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'230',70,'basic')\">230mm<span class=\"egb-diam-price\">\u20ac70<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'240',75,'mid')\">240mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'245',75,'mid')\">245mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'250',75,'mid')\">250mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'260',75,'mid')\">260mm<span class=\"egb-diam-price\">\u20ac75<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'270',85,'mid')\">270mm<span class=\"egb-diam-price\">\u20ac85<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'280',110,'mid')\">280mm<span class=\"egb-diam-price\">\u20ac110<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'290',140,'mid')\">290mm<span class=\"egb-diam-price\">\u20ac140<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'292',140,'mid')\">292mm<span class=\"egb-diam-price\">\u20ac140<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'300',150,'full')\">300mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'305',150,'full')\">305mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'310',150,'full')\">310mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'320',150,'full')\">320mm<span class=\"egb-diam-price\">\u20ac150<\/span><\/button>\r\n <button class=\"egb-diam-btn\" onclick=\"selectDiam(this,'330',160,'full')\">330mm<span class=\"egb-diam-price\">\u20ac160<\/span><\/button>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-next-btn\" id=\"next-1\" onclick=\"goStep(2)\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-2\">\r\n <div class=\"egb-panel-title\">Passaggio 2: scegli la forma del disco<\/div>\r\n <div class=\"egb-shape-grid\">\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-tondo\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1a-Tondo-Model-scaled.png','Tondo',false)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1a-Tondo-Model-scaled.png\" \/>\r\n <span>Tondo<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-mosaico\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1b-Tondo-Mosaico-Model-scaled.png','Tondo Mosaico',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1b-Tondo-Mosaico-Model-scaled.png\" \/>\r\n <span>Tondo Mosaico<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-wild\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1c-Tondo-wild-Model-scaled.png','Tondo Wild',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1c-Tondo-wild-Model-scaled.png\" \/>\r\n <span>Tondo Wild<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-margherita\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2a-Margherita-Model-scaled.png','Margherita',false)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2a-Margherita-Model-scaled.png\" \/>\r\n <span>Margherita<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-racing\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3a-Tondo-racing-Model-scaled.png','Tondo Racing',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3a-Tondo-racing-Model-scaled.png\" \/>\r\n <span>Tondo Racing<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-shape-opt\" id=\"shape-venom\" onclick=\"selectShape(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4a-Venom-Model-scaled.png','Venom',true)\">\r\n <img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4a-Venom-Model-scaled.png\" \/>\r\n <span>Venom<\/span>\r\n <span class=\"egb-shape-extra\">+\u20ac35<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(1)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-2\" onclick=\"nextFromShape()\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-3\">\r\n <div class=\"egb-panel-title\">Step 3 \u2014 Choose hub color<\/div>\r\n <div class=\"egb-color-grid\">\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Mozzo-scaled.png','Nero')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Mozzo-scaled.png\" \/><span>Nero<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Mozzo-scaled.png','Rosso')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Mozzo-scaled.png\" \/><span>Rosso<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Mozzo-Model-scaled.png','Arancio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Mozzo-Model-scaled.png\" \/><span>Arancio<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Mozzo-scaled.png','Blu')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Mozzo-scaled.png\" \/><span>Blu<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Mozzo-scaled.png','Azzurro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Mozzo-scaled.png\" \/><span>Azzurro<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Mozzo-scaled.png','Verde')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Mozzo-scaled.png\" \/><span>Verde<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Mozzo-scaled.png','Giallo')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Mozzo-scaled.png\" \/><span>Giallo<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Mozzo-scaled.png','Oro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Mozzo-scaled.png\" \/><span>Oro<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Mozzo-scaled.png','Grigio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Mozzo-scaled.png\" \/><span>Grigio<\/span><\/div>\r\n <div class=\"egb-color-opt\" onclick=\"selectHub(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Mozzo-scaled.png','Viola')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Mozzo-scaled.png\" \/><span>Viola<\/span><\/div>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(2)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-3\" onclick=\"nextFromHub()\" disabled>Prossimo<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-4\">\r\n <div class=\"egb-panel-title\">Step 4 \u2014 Choose nut color<\/div>\r\n <div class=\"egb-color-grid\" id=\"nut-grid\">\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Nero\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Nottolino-scaled.png','Nero')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/1-Nero-Nottolino-scaled.png\" \/><span>Nero<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Rosso\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Nottolino-scaled.png','Rosso')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/2-Rosso-Nottolino-scaled.png\" \/><span>Rosso<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Arancio\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Nottolino-scaled.png','Arancio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/3-Arancio-Nottolino-scaled.png\" \/><span>Arancio<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Blu\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Nottolino-scaled.png','Blu')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/4-Blu-Nottolino-scaled.png\" \/><span>Blu<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Azzurro\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Nottolino-scaled.png','Azzurro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/5-Azzurro-Nottolino-scaled.png\" \/><span>Azzurro<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Verde\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Nottolino-scaled.png','Verde')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/6-Verde-Nottolino-scaled.png\" \/><span>Verde<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Giallo\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Nottolino-scaled.png','Giallo')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/7-Giallo-Nottolino-scaled.png\" \/><span>Giallo<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Oro\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Nottolino-scaled.png','Oro')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/8-Oro-Nottolino-scaled.png\" \/><span>Oro<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Grigio\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Nottolino-scaled.png','Grigio')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/9-Grigio-Nottolino-scaled.png\" \/><span>Grigio<\/span><\/div>\r\n <div class=\"egb-color-opt nut-opt\" data-name=\"Viola\" onclick=\"selectNut(this,'https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Nottolino-scaled.png','Viola')\"><img decoding=\"async\" src=\"https:\/\/egbrakes.com\/wp-content\/uploads\/2026\/06\/10-Viola-Nottolino-scaled.png\" \/><span>Viola<\/span><\/div>\r\n <\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goStep(3)\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" id=\"next-4\" onclick=\"goStep(5)\" disabled>Review \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"egb-panel\" id=\"panel-5\">\r\n <div class=\"egb-panel-title\">Your Configuration<\/div>\r\n <div id=\"egb-summary-box\">\r\n <h3>Riepilogo<\/h3>\r\n <div class=\"egb-sum-row\"><span>Diametro<\/span><span id=\"sum-diam\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Forma<\/span><span id=\"sum-shape\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Colore Mozzo<\/span><span id=\"sum-hub\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-row\"><span>Colore Dado<\/span><span id=\"sum-nut\">\u2014<\/span><\/div>\r\n <div class=\"egb-sum-total\"><span>Total<\/span><span id=\"sum-total\">\u2014<\/span><\/div>\r\n <\/div>\r\n <p class=\"egb-note\">* The image is representative and does not reflect the final product<\/p>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"goBackFromReview()\">\u2190 Indietro<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"addToCart()\">Aggiungi al carrello +<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"openPopup()\" style=\"background:#333;\">Richiedi un preventivo \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"egb-cart\" style=\"display:none;\">\r\n <div id=\"egb-cart-title\">Il tuo carrello dei preventivi<\/div>\r\n <div id=\"egb-cart-items\"><\/div>\r\n <div id=\"egb-cart-total\">Totale: <span id=\"cart-total-val\">\u20ac0<\/span><\/div>\r\n <div class=\"egb-nav\">\r\n <button class=\"egb-back-btn\" onclick=\"addAnother()\">+ Aggiungi un altro disco<\/button>\r\n <button class=\"egb-next-btn\" onclick=\"openPopup()\">Richiedi un preventivo \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div id=\"egb-overlay\">\r\n <div id=\"egb-popup\">\r\n <span id=\"egb-pop-close\" onclick=\"closePopup()\">\u2715<\/span>\r\n <div id=\"egb-form-area\">\r\n <h3>Complete Your Quote<\/h3>\r\n <span class=\"egb-field-label\">Full Name <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-name\" placeholder=\"Il tuo nome completo\" \/>\r\n <span class=\"egb-field-label\">Indirizzo e-mail <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"email\" id=\"egb-email\" placeholder=\"Il tuo indirizzo di posta elettronica\" \/>\r\n <span class=\"egb-field-label\">Numero di telefono<\/span>\r\n <input type=\"tel\" id=\"egb-phone\" placeholder=\"Opzionale\" \/>\r\n <span class=\"egb-field-label\">Marchio motociclistico <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-make\" placeholder=\"e.g. Honda, Yamaha, BMW\" \/>\r\n <span class=\"egb-field-label\">Motorcycle Model <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-model\" placeholder=\"Per esempio. CBR600, R1, S1000RR\" \/>\r\n <span class=\"egb-field-label\">Dimensioni del motore <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-engine\" placeholder=\"per esempio. 600cc, 1000cc\" \/>\r\n <span class=\"egb-field-label\">Anno di produzione <span class=\"egb-required\">*<\/span><\/span>\r\n <input type=\"text\" id=\"egb-year\" placeholder=\"per esempio. 2019\" \/>\r\n <span class=\"egb-field-label\">Notes<\/span>\r\n <textarea id=\"egb-notes\" placeholder=\"Eventuali note o richieste aggiuntive...\"><\/textarea>\r\n <button id=\"egb-submit-btn\" onclick=\"submitQuote()\">Invia richiesta di preventivo<\/button>\r\n <\/div>\r\n <div id=\"egb-success\">\r\n <h3>\u2713 Quote Sent!<\/h3>\r\n <p>We have received your request and will contact you shortly.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nvar sel = {diam:'',diamPrice:0,diamType:'',shape:'',shapeName:'',shapeExtra:false,hub:'',hubName:'',nut:'',nutName:''};\r\nvar cart = [];\r\n\r\nvar prices = {\r\n '190':55,'200':60,'210':60,'220':65,'230':70,\r\n '240':75,'245':75,'250':75,'260':75,'270':85,'280':110,'290':140,'292':140,\r\n '300':150,'305':150,'310':150,'320':150,'330':160\r\n};\r\n\r\nfunction calcTotal() {\r\n var total = sel.diamPrice;\r\n if(sel.shapeExtra) total += 35;\r\n return total;\r\n}\r\n\r\nfunction updatePriceDisplay() {\r\n if(!sel.diam) return;\r\n var total = calcTotal();\r\n document.getElementById('egb-price-display').style.display = 'block';\r\n document.getElementById('egb-price-val').textContent = '\u20ac' + total;\r\n var note = '';\r\n if(sel.shapeExtra) note = 'Base \u20ac'+sel.diamPrice+' + \u20ac35 custom shape';\r\n document.getElementById('egb-price-note').textContent = note;\r\n}\r\n\r\nfunction goStep(n) {\r\n document.querySelectorAll('.egb-panel').forEach(function(p){p.classList.remove('active');});\r\n document.getElementById('panel-'+n).classList.add('active');\r\n document.querySelectorAll('.egb-step').forEach(function(s,i){\r\n s.classList.remove('active','done');\r\n if(i+1 < n) s.classList.add('done');\r\n if(i+1 === n) s.classList.add('active');\r\n });\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n}\r\n\r\nfunction selectDiam(el, diam, price, type) {\r\n document.querySelectorAll('.egb-diam-btn').forEach(function(b){b.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.diam = diam;\r\n sel.diamPrice = price;\r\n sel.diamType = type;\r\n sel.shape = '';\r\n sel.shapeName = '';\r\n sel.shapeExtra = false;\r\n sel.hub = '';\r\n sel.hubName = '';\r\n sel.nut = '';\r\n sel.nutName = '';\r\n document.getElementById('prev-shape').src = '';\r\n document.getElementById('prev-shape').style.opacity = '0.15';\r\n document.getElementById('prev-hub').style.display = 'none';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-1').disabled = false;\r\n updatePriceDisplay();\r\n}\r\n\r\nfunction selectShape(el, url, name, isExtra) {\r\n document.querySelectorAll('.egb-shape-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.shape = url;\r\n sel.shapeName = name;\r\n sel.shapeExtra = isExtra;\r\n document.getElementById('prev-shape').src = url;\r\n document.getElementById('prev-shape').style.opacity = '1';\r\n document.getElementById('next-2').disabled = false;\r\n updatePriceDisplay();\r\n}\r\n\r\nfunction nextFromShape() {\r\n if(sel.diamType === 'basic') {\r\n updateSummary();\r\n goStep(5);\r\n } else {\r\n goStep(3);\r\n }\r\n}\r\n\r\nfunction selectHub(el, url, name) {\r\n document.querySelectorAll('#panel-3 .egb-color-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.hub = url;\r\n sel.hubName = name;\r\n document.getElementById('prev-hub').src = url;\r\n document.getElementById('prev-hub').style.display = 'block';\r\n document.getElementById('next-3').disabled = false;\r\n}\r\n\r\nfunction nextFromHub() {\r\n if(sel.diamType === 'mid') {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){\r\n var name = o.getAttribute('data-name');\r\n if(name === 'Nero' || name === 'Grigio') {\r\n o.classList.remove('disabled');\r\n } else {\r\n o.classList.add('disabled');\r\n }\r\n });\r\n } else {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){\r\n o.classList.remove('disabled');\r\n });\r\n }\r\n sel.nut = '';\r\n sel.nutName = '';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-4').disabled = true;\r\n goStep(4);\r\n}\r\n\r\nfunction selectNut(el, url, name) {\r\n document.querySelectorAll('.nut-opt').forEach(function(o){o.classList.remove('active');});\r\n el.classList.add('active');\r\n sel.nut = url;\r\n sel.nutName = name;\r\n document.getElementById('prev-nut').src = url;\r\n document.getElementById('prev-nut').style.display = 'block';\r\n document.getElementById('next-4').disabled = false;\r\n}\r\n\r\nfunction goBackFromReview() {\r\n if(sel.diamType === 'basic') goStep(2);\r\n else if(sel.diamType === 'mid') goStep(4);\r\n else goStep(4);\r\n}\r\n\r\nfunction updateSummary() {\r\n document.getElementById('sum-diam').textContent = sel.diam + 'mm';\r\n document.getElementById('sum-shape').textContent = sel.shapeName;\r\n document.getElementById('sum-hub').textContent = sel.hubName || '\u2014';\r\n document.getElementById('sum-nut').textContent = sel.nutName || '\u2014';\r\n document.getElementById('sum-total').textContent = '\u20ac' + calcTotal();\r\n}\r\n\r\nfunction addToCart() {\r\n updateSummary();\r\n var item = {\r\n diam: sel.diam,\r\n shape: sel.shapeName,\r\n hub: sel.hubName || '\u2014',\r\n nut: sel.nutName || '\u2014',\r\n total: calcTotal()\r\n };\r\n cart.push(item);\r\n renderCart();\r\n resetConfig();\r\n}\r\n\r\nfunction renderCart() {\r\n var html = '';\r\n var total = 0;\r\n cart.forEach(function(item, i) {\r\n total += item.total;\r\n html += '<div class=\"egb-cart-item\">';\r\n html += '<div class=\"egb-cart-item-info\"><strong>Disc ' + (i+1) + '<\/strong>';\r\n html += item.diam + 'mm | ' + item.shape + ' | Hub: ' + item.hub + ' | Nuts: ' + item.nut + '<\/div>';\r\n html += '<div class=\"egb-cart-item-price\">\u20ac' + item.total + '<\/div>';\r\n html += '<button class=\"egb-cart-remove\" onclick=\"removeFromCart('+i+')\">\u2715<\/button>';\r\n html += '<\/div>';\r\n });\r\n document.getElementById('egb-cart-items').innerHTML = html;\r\n document.getElementById('cart-total-val').textContent = '\u20ac' + total;\r\n document.getElementById('egb-cart').style.display = 'block';\r\n}\r\n\r\nfunction removeFromCart(i) {\r\n cart.splice(i, 1);\r\n if(cart.length === 0) {\r\n document.getElementById('egb-cart').style.display = 'none';\r\n } else {\r\n renderCart();\r\n }\r\n}\r\n\r\nfunction addAnother() {\r\n resetConfig();\r\n goStep(1);\r\n}\r\n\r\nfunction resetConfig() {\r\n sel = {diam:'',diamPrice:0,diamType:'',shape:'',shapeName:'',shapeExtra:false,hub:'',hubName:'',nut:'',nutName:''};\r\n document.querySelectorAll('.egb-diam-btn').forEach(function(b){b.classList.remove('active');});\r\n document.querySelectorAll('.egb-shape-opt').forEach(function(o){o.classList.remove('active');});\r\n document.querySelectorAll('#panel-3 .egb-color-opt').forEach(function(o){o.classList.remove('active');});\r\n document.querySelectorAll('.nut-opt').forEach(function(o){o.classList.remove('active');});\r\n document.getElementById('prev-shape').src = '';\r\n document.getElementById('prev-shape').style.opacity = '0.15';\r\n document.getElementById('prev-hub').style.display = 'none';\r\n document.getElementById('prev-nut').style.display = 'none';\r\n document.getElementById('next-1').disabled = true;\r\n document.getElementById('next-2').disabled = true;\r\n document.getElementById('next-3').disabled = true;\r\n document.getElementById('next-4').disabled = true;\r\n document.getElementById('egb-price-display').style.display = 'none';\r\n goStep(1);\r\n}\r\n\r\nfunction openPopup() {\r\n updateSummary();\r\n document.getElementById('egb-overlay').classList.add('active');\r\n document.getElementById('egb-success').style.display = 'none';\r\n document.getElementById('egb-form-area').style.display = 'block';\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById('egb-overlay').classList.remove('active');\r\n}\r\n\r\nfunction submitQuote() {\r\n var name = document.getElementById('egb-name').value.trim();\r\n var email = document.getElementById('egb-email').value.trim();\r\n var make = document.getElementById('egb-make').value.trim();\r\n var model = document.getElementById('egb-model').value.trim();\r\n var engine = document.getElementById('egb-engine').value.trim();\r\n var year = document.getElementById('egb-year').value.trim();\r\n\r\n if(!name||!email||!make||!model||!engine||!year) {\r\n alert('Please fill in all required fields.');\r\n return;\r\n }\r\n\r\n var cartSummary = '';\r\n if(cart.length > 0) {\r\n cart.forEach(function(item, i) {\r\n cartSummary += 'Disc '+(i+1)+': '+item.diam+'mm | '+item.shape+' | Hub: '+item.hub+' | Nuts: '+item.nut+' | \u20ac'+item.total+'\\n';\r\n });\r\n } else {\r\n cartSummary = sel.diam+'mm | '+sel.shapeName+' | Hub: '+(sel.hubName||'\u2014')+' | Nuts: '+(sel.nutName||'\u2014')+' | \u20ac'+calcTotal();\r\n }\r\n\r\n var formData = new FormData();\r\n formData.append('action','egb_quote_submit');\r\n formData.append('name', name);\r\n formData.append('email', email);\r\n formData.append('phone', document.getElementById('egb-phone').value.trim());\r\n formData.append('product', cartSummary);\r\n formData.append('diameter', sel.diam);\r\n formData.append('shape', sel.shapeName);\r\n formData.append('hub_color', sel.hubName||'\u2014');\r\n formData.append('nut_color', sel.nutName||'\u2014');\r\n formData.append('make', make);\r\n formData.append('model', model);\r\n formData.append('engine', engine);\r\n formData.append('year', year);\r\n formData.append('notes', document.getElementById('egb-notes').value.trim());\r\n\r\n fetch('\/wp-admin\/admin-ajax.php',{method:'POST',body:formData})\r\n .then(function(r){return r.json();})\r\n .then(function(res){\r\n if(res.success){\r\n document.getElementById('egb-form-area').style.display='none';\r\n document.getElementById('egb-success').style.display='block';\r\n } else {\r\n alert('Something went wrong. Please try again.');\r\n }\r\n })\r\n .catch(function(){alert('Something went wrong. Please try again.');});\r\n}\r\n\r\ndocument.getElementById('egb-overlay').addEventListener('click',function(e){\r\n if(e.target===this) closePopup();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EG Brakes \u2013 Configure Your Disc Configure Your Disc Build your custom brake disc step by step 1 Diameter 2 Shape 3 Hub Color 4 Nut Color 5 Review \u20ac0 Step 1 \u2014 Choose your diameter 190mm\u20ac55 200mm\u20ac60 210mm\u20ac60 220mm\u20ac65 230mm\u20ac70 240mm\u20ac75 245mm\u20ac75 250mm\u20ac75 260mm\u20ac75 270mm\u20ac85 280mm\u20ac110 290mm\u20ac140 292mm\u20ac140 300mm\u20ac150 305mm\u20ac150 310mm\u20ac150 320mm\u20ac150 330mm\u20ac160 Next […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1087","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/comments?post=1087"}],"version-history":[{"count":19,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/pages\/1087\/revisions\/1130"}],"wp:attachment":[{"href":"https:\/\/egbrakes.com\/it\/wp-json\/wp\/v2\/media?parent=1087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}