/* Consistent option cells and balanced panels, independent of legacy widget styles. */
html body #pcfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important;gap:24px!important;background:transparent!important}
html body #pcfg .cpanel,html body #pcfg .visual{padding:24px!important;border-radius:20px!important;min-width:0!important;box-sizing:border-box!important}
html body #pcfg .cpanel{min-height:0!important}
html body #pcfg .wheel-config-host fieldset{margin:0 0 20px!important;min-width:0!important}
html body #pcfg .wheel-config-host legend{padding:0!important;margin:0 0 10px!important;font:700 12px/1.4 Manrope,Arial,sans-serif!important}
html body #pcfg .wheel-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding:0!important}
html body #pcfg .wheel-options button{width:100%!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:8px!important;border:1px solid #d7cbe5!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;font:500 11px/1.35 Manrope,Arial,sans-serif!important;text-align:left!important;white-space:normal!important;box-sizing:border-box!important}
html body #pcfg .wheel-options button[hidden]{display:none!important}
html body #pcfg .wheel-options button[aria-pressed=true]{border-color:#6928d8!important;box-shadow:inset 0 0 0 1px #6928d8!important}
html body #pcfg .wheel-options img{width:23px!important;height:23px!important;flex:0 0 23px!important;object-fit:contain!important}
html body #pcfg .wheel-label{min-width:0;overflow-wrap:normal}
html body #pcfg .wheel-no-image{display:none}
html body #pcfg .wheel-options-sections{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body #pcfg .wheel-options-sections button,html body #pcfg .wheel-options-connection button{justify-content:center!important;text-align:center!important;min-height:40px!important}
html body #pcfg .wheel-options-orientation{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body #pcfg .wheel-patterns{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:none!important;overflow:visible!important}
html body #pcfg .wheel-patterns button{flex-direction:column!important;justify-content:center!important;min-height:70px!important;text-align:center!important;gap:7px!important;padding:8px 4px!important;font-size:10px!important}
html body #pcfg .wheel-patterns img,html body #pcfg .wheel-patterns .wheel-no-image{width:26px!important;height:26px!important;flex:0 0 26px!important}
html body #pcfg .wheel-patterns .wheel-no-image{display:grid;place-items:center;font-size:20px;color:#977cac}
html body #pcfg .pattern-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;margin:8px 0 0;padding:0 2px;border:0;background:none;color:#6325c5;font:650 11px/1.4 Manrope,Arial,sans-serif;text-align:left}
html body #pcfg .pattern-toggle span{font-size:20px;font-weight:400}
html body #pcfg .wheel-color-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
html body #pcfg .wheel-color-row label{min-width:0!important;font:600 11px/1.4 Manrope,Arial,sans-serif!important}
html body #pcfg .wheel-color-row select{height:42px!important;min-width:0!important;padding:8px!important;margin-top:8px!important;font:500 11px/1.3 Manrope,Arial,sans-serif!important;text-overflow:ellipsis}
html body #pcfg .cap-details{border-top:1px solid #d7cbe5;padding-top:16px}
html body #pcfg .cap-details summary{font:600 12px/1.5 Manrope,Arial,sans-serif;min-height:24px;cursor:pointer}
html body #pcfg .cap-details[open] summary{margin-bottom:16px}
html body #pcfg .visual{position:relative!important;top:auto!important;align-self:stretch!important;display:flex!important;flex-direction:column!important;gap:0!important}
html body #pcfg .preview{position:relative!important;flex:1 1 auto!important;aspect-ratio:auto!important;height:auto!important;max-height:none!important;min-height:390px!important;padding:0!important;background:#f7f9ef!important;border-radius:14px!important}
html body #pcfg #pcanvas{position:absolute!important;inset:64px 18px 24px!important;width:calc(100% - 36px)!important;height:calc(100% - 88px)!important;max-height:none!important;object-fit:contain!important}
html body #pcfg .preview-mode{left:16px!important;top:16px!important;height:36px!important;padding:3px!important}
html body #pcfg .preview-mode button{min-width:40px!important;padding:5px 9px!important;font:600 12px/1.4 Manrope,Arial,sans-serif!important}
html body #pcfg .dicebtn.inpreview{right:16px!important;top:16px!important;width:36px!important;height:36px!important;border-radius:10px!important}
html body #pcfg .dicebtn.inpreview svg{width:24px!important;height:24px!important}
html body #pcfg .buy{flex:0 0 auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:16px!important;padding:20px 0 0!important;margin:0!important}
html body #pcfg .pricewrap{gap:7px!important}
html body #pcfg .price{font:750 28px/1.2 Manrope,Arial,sans-serif!important}
html body #pcfg .cart{width:100%!important;min-width:0!important;min-height:48px!important;padding:12px!important;font:700 12px/1.4 Manrope,Arial,sans-serif!important;white-space:normal!important}
html body #pcfg:has(.pattern-toggle[aria-expanded=true]) .visual,html body #pcfg:has(.cap-details[open]) .visual{position:sticky!important;top:20px!important;align-self:start!important;min-height:590px!important}
@media(min-width:1200px){html body #pcfg .wheel-options button{font-size:12px!important;min-height:48px!important;padding:10px!important}html body #pcfg .wheel-patterns button{min-height:74px!important;font-size:11px!important}html body #pcfg .wheel-options img{width:26px!important;height:26px!important;flex-basis:26px!important}}
@media(max-width:1000px) and (min-width:768px){html body #pcfg .cpanel,html body #pcfg .visual{padding:18px!important}html body #pcfg{gap:18px!important}html body #pcfg .wheel-options-shape button{flex-direction:column!important;justify-content:center!important;text-align:center!important;min-height:66px!important}html body #pcfg .buy{grid-template-columns:1fr!important;gap:12px!important}html body #pcfg .price{font-size:27px!important}.config-bottom{align-items:center}}
@media(max-width:767px){html body #pcfg{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}html body #pcfg .cpanel,html body #pcfg .visual{padding:18px!important;border-radius:16px!important}html body #pcfg .visual,html body #pcfg:has(.pattern-toggle[aria-expanded=true]) .visual,html body #pcfg:has(.cap-details[open]) .visual{position:static!important;top:auto!important;min-height:0!important;grid-row:1!important}html body #pcfg .preview{flex:none!important;height:310px!important;min-height:310px!important;max-height:310px!important}html body #pcfg .buy{padding-top:16px!important;gap:12px!important}html body #pcfg .price{font-size:25px!important}html body #pcfg .cart{font-size:11px!important}html body #pcfg .wheel-options-shape button{flex-direction:column!important;justify-content:center!important;text-align:center!important;min-height:66px!important}html body #pcfg .wheel-patterns button{min-height:74px!important}html body #pcfg .wheel-config-host fieldset{margin-bottom:22px!important}}
/* The legacy widget relocates its buy row inside the preview on phones. */
@media(max-width:767px){
 html body #pcfg .preview:has(>.buy){height:390px!important;min-height:390px!important;max-height:390px!important}
 html body #pcfg .preview:has(>.buy) #pcanvas{inset:64px 18px 88px!important;height:calc(100% - 152px)!important}
 html body #pcfg .preview>.buy{position:absolute!important;inset:auto 0 0!important;padding:16px 12px 12px!important;grid-template-columns:auto minmax(0,1fr)!important}
}

.config-source{font-size:14px;line-height:1.6;color:#6323c9;border-left:3px solid #7527ed;padding:8px 14px;margin:0 0 20px;background:#f0e8fb;border-radius:0 8px 8px 0}#configurator:focus{outline:none}