/* A fixed switch module and an independent, swipeable plate surface. */
.switch-configurator{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffffff30;border-radius:34px;background:linear-gradient(140deg,#ffffff12,#ffffff04);box-shadow:inset 0 1px 0 #ffffff2e,0 25px 70px #090e2729;overflow:hidden}
.config-preview{min-width:0;position:relative;display:flex;flex-direction:column;padding:25px 28px 23px;background:radial-gradient(ellipse at 50% 35%,#7f9ec626,transparent 65%),linear-gradient(135deg,#111d354d,#ffffff03);border-right:1px solid #ffffff20;isolation:isolate}
.config-preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;letter-spacing:1.4px;color:#abc0e3}.config-lock{font-size:10px;letter-spacing:0;color:#d2def5;display:flex;gap:7px;align-items:center;padding:7px 10px;background:#ffffff0a;border:1px solid #ffffff18;border-radius:100px}.config-lock>span{color:#d8f9a2;font-size:15px}
.config-view{height:460px;position:relative;display:grid;place-items:center;touch-action:pan-y;cursor:grab;isolation:isolate;outline-offset:-8px;border-radius:20px;overflow:hidden}.config-view:active{cursor:grabbing}.config-room-glow{position:absolute;z-index:-2;left:3%;right:3%;height:86%;top:2%;border-radius:50%;background:radial-gradient(ellipse,#e9dfba28,#aabff111 45%,transparent 72%);transition:opacity 450ms}.config-ground{position:absolute;z-index:-1;width:70%;height:35px;bottom:48px;left:15%;background:radial-gradient(ellipse,#050a20a6,transparent 70%);filter:blur(6px)}
.config-assembly{--module-width:88px;--module-height:175px;--frame-width:178px;--frame-height:262px;position:relative;perspective:1000px;width:100%;height:330px;filter:drop-shadow(18px 24px 18px #050b2a45);transform:rotate(-4deg)}.config-assembly[data-family=g3]{--module-width:150px;--module-height:179px;--frame-width:248px;--frame-height:274px}
.config-frame{--plate-color:#b77c64;--plate-edge:#704635;--plate-shine:#f5c8b0;position:absolute;left:50%;top:50%;width:var(--frame-width);height:var(--frame-height);margin-left:calc(var(--frame-width)/-2);margin-top:calc(var(--frame-height)/-2);border-radius:14px;background:linear-gradient(125deg,var(--plate-shine) -50%,var(--plate-color) 30%,var(--plate-color) 67%,var(--plate-edge) 150%);border:2px solid var(--plate-edge);box-shadow:inset 2px 3px 3px #fff8,inset -2px -3px 4px #0006,5px 6px 0 var(--plate-edge),8px 12px 20px #070f2b29;transform:translateZ(0);transition:background 300ms,border-color 300ms,box-shadow 300ms}
.config-frame:before{content:'';position:absolute;inset:6px;border:1px solid #ffffff75;border-radius:9px;box-shadow:inset 0 0 4px #fff3;pointer-events:none}.config-frame:after{content:'';position:absolute;left:50%;top:50%;width:calc(var(--module-width) + 5px);height:calc(var(--module-height) + 5px);transform:translate(-50%,-50%);border:2px solid #111d37;border-radius:7px;background:#172239;box-shadow:0 1px 2px #fff8,inset 0 3px 8px #0009}
.config-frame[data-pattern=duo]{background:linear-gradient(110deg,var(--plate-shine) 0%,var(--plate-color) 24%,var(--plate-edge) 48%,var(--plate-color) 52%,var(--plate-shine) 100%)}
.config-frame[data-pattern=wood]{background:repeating-linear-gradient(3deg,#422c211c 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,#e7c5a41a 0 2px,transparent 2px 12px),linear-gradient(110deg,var(--plate-shine),var(--plate-color) 35%,var(--plate-edge) 160%)}
.config-module{--module-face:#343a44;--module-dark:#202733;--module-light:#5d6570;position:absolute;left:50%;top:50%;width:var(--module-width);height:var(--module-height);margin-left:calc(var(--module-width)/-2);margin-top:calc(var(--module-height)/-2);border-radius:5px;background:linear-gradient(115deg,var(--module-light),var(--module-face) 12%,var(--module-dark) 95%);box-shadow:inset 1px 1px 1px #ffffff42,inset -1px -2px 2px #000b,0 1px 2px #000c;z-index:2}
.config-module[data-finish=white]{--module-face:#eeeae0;--module-dark:#b9b9b0;--module-light:#fffdf7}.config-rocker{position:absolute;left:11%;top:10%;width:78%;height:76%;border-radius:5px;border:1px solid var(--module-dark);background:linear-gradient(170deg,var(--module-light) -20%,var(--module-face) 30%,var(--module-face) 73%,var(--module-dark) 130%);box-shadow:inset 1px 2px 2px #fff4,inset -1px -1px 1px #0004,0 5px 6px #0005;transform:perspective(500px) rotateX(-6deg);transition:transform 200ms,box-shadow 200ms;touch-action:pan-y;color:#929ca8}
.config-rocker:active{transform:perspective(500px) rotateX(6deg)}.config-rocker-i,.config-rocker-o{position:absolute;left:0;right:0;text-align:center;font-size:10px;letter-spacing:1px;color:#a5aebc;line-height:1}.config-rocker-i{top:22px}.config-rocker-o{bottom:20px}.config-module[data-finish=white] .config-rocker-i,.config-module[data-finish=white] .config-rocker-o{color:#767d7a}.config-indicator{position:absolute;top:12px;left:calc(50% - 8px);width:16px;height:2px;border-radius:3px;background:#dcf8a5;box-shadow:0 0 9px #dcf8a578;transition:background 300ms,box-shadow 300ms}.config-module-code{position:absolute;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.6px;bottom:8px;color:#7b8699}.config-module[data-finish=white] .config-module-code{color:#7d857e}
.config-assembly[data-lit=false] .config-rocker{transform:perspective(500px) rotateX(6deg);box-shadow:inset 1px 1px 2px #0003,0 -3px 4px #0005}.config-assembly[data-lit=false] .config-indicator{background:#62706d;box-shadow:none}.config-view[data-lit=false] .config-room-glow{opacity:.15}.config-view-hint{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1.6px;color:#8197bb;pointer-events:none}
.config-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:3px}.config-preview-bottom p{font-size:23px;font-family:Manrope,Arial,sans-serif;letter-spacing:-.7px;margin:0 0 4px;color:#eef3ff}.config-preview-bottom span{font-size:11px;color:#9fb5d8}.config-light{padding:10px 14px;min-height:44px;border-radius:12px;color:#dfe9ff;background:#ffffff0b;border:1px solid #ffffff30;font-size:12px;white-space:nowrap}.config-light[aria-pressed=true]{background:#d8f9a210;color:#e0f7b9;border-color:#d8f9a235}.config-swipe-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}.config-swipe-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff08;color:#d8e5ff;font-size:18px}.config-swipe-nav button:hover{background:#ffffff18}.config-swipe-nav span{font-size:11px;letter-spacing:1px;color:#aec1e4}.config-visual-note{font-size:11px;line-height:1.8;text-align:center;margin:18px 0 0;color:#90a6c8;max-width:350px;align-self:center}
.config-controls{padding:36px;min-width:0;overflow:hidden}.config-step{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px}.config-step>span{display:grid;place-items:center;border-radius:10px;min-width:31px;height:31px;background:#ffffff0c;border:1px solid #ffffff25;color:#c0d2f5;font-size:10px;margin-top:2px}.config-step h3{font-size:23px;line-height:1.25;letter-spacing:-.7px;color:#ebf1ff}.config-step p{font-size:12px;line-height:1.8;color:#9fb5d9;margin:7px 0 0}.config-controls .field{font-size:11px}.config-controls .field select{height:48px;font-size:13px;padding:0 14px;border:1px solid #ffffff30;background:#263650;border-radius:13px;color:#e4eeff;width:100%}.config-finish-label{font-size:11px;color:#afc1df;margin:16px 0 9px}.config-switch-finishes{display:flex;gap:9px;flex-wrap:wrap}.switch-finish{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;min-height:43px;border-radius:12px;border:1px solid #ffffff25;background:#ffffff05;color:#a6bbdf;font-size:11px}.switch-finish[aria-pressed=true]{border-color:#c0d2ff9c;background:#b2c8ff13;color:#e0ebff;box-shadow:inset 0 1px 0 #ffffff20}.switch-finish-dot{width:15px;height:15px;border-radius:5px;border:1px solid #ffffff40;box-shadow:inset 0 1px 1px #fff6}.switch-finish-dot.graphite{background:#343a44}.switch-finish-dot.white{background:#eeeae0}.config-step.plate-step{margin-top:28px;margin-bottom:12px}
.config-rail{--tile-width:108px;position:relative;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a9bee357 transparent;padding:12px max(0px,calc((100% - var(--tile-width))/2)) 18px;margin-inline:-16px;scroll-padding-inline:calc((100% - var(--tile-width))/2);min-height:145px;align-items:stretch}.plate-tile{position:relative;scroll-snap-align:center;flex:0 0 var(--tile-width);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:11px 8px 10px;min-height:138px;border:1px solid #ffffff16;border-radius:16px;background:#ffffff04;color:#9aafd3;gap:8px;transition:border-color 200ms,background 200ms,color 200ms}.plate-tile:hover{border-color:#ffffff50;background:#ffffff0c}.plate-tile[aria-pressed=true]{border-color:#c5d6ffb8;background:#b1c5ff15;color:#e6efff;box-shadow:inset 0 1px 0 #ffffff28}.plate-tile>span:not(.plate-mini){font-size:10px;line-height:1.45;text-align:center;min-height:28px;display:grid;place-items:center}.plate-tile small{font-size:9px;color:#9eb4d7;margin-top:auto;white-space:nowrap}.plate-mini{position:relative;display:block;width:42px;height:57px;border-radius:5px;border:1px solid var(--plate-edge);background:linear-gradient(120deg,var(--plate-shine),var(--plate-color) 38%,var(--plate-edge) 150%);box-shadow:inset 1px 1px 1px #fff8,2px 3px 0 var(--plate-edge),0 4px 8px #0003}.plate-mini i{position:absolute;inset:9px 11px;border:1px solid #13213e50;border-radius:2px;background:#23334a;box-shadow:0 1px 1px #ffffff80}.plate-tile[data-pattern=wood] .plate-mini{background:repeating-linear-gradient(2deg,#46302433 0 1px,transparent 1px 4px),linear-gradient(110deg,var(--plate-shine),var(--plate-color) 35%,var(--plate-edge) 160%)}.plate-tile[data-pattern=duo] .plate-mini{background:linear-gradient(110deg,var(--plate-shine),var(--plate-color),var(--plate-edge),var(--plate-color),var(--plate-shine))}
.config-selection{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;padding:18px 0;margin-top:18px}.config-selection>div{min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:5px}.config-selection>div>span{font-size:8px;letter-spacing:1.4px;color:#8098c1}.config-selection strong{font-size:11px;font-weight:400;color:#cbdaf4;line-height:1.65;overflow-wrap:anywhere}.config-selection small{font-size:9px;color:#8fa6ce;overflow-wrap:anywhere}.config-selection a{font-size:10px;color:#b8cbf1;text-decoration:underline;text-underline-offset:3px;margin-top:3px}.config-total{margin-top:21px;margin-bottom:18px}.config-total>div{display:flex;align-items:center;justify-content:space-between;gap:20px}.config-total span{font-size:11px;color:#b5c7e9}.config-total strong{font-size:29px;font-weight:500;letter-spacing:-.6px;color:#e1ebff}.config-total small{display:block;color:#829cc5;font-size:10px;margin-top:3px}.config-controls>.button{width:100%;font-size:12px;min-height:48px}.config-enquire{width:100%;border:0;background:none;color:#b4c9ef;font-size:11px;min-height:44px;padding:12px 0 6px}.config-status{font-size:11px;line-height:1.8;color:#d4e2fb;min-height:20px;margin:9px 0}.config-compatibility{font-size:10px;color:#819bc2;line-height:1.9;margin:15px 0 0}.config-compatibility a{color:#a9c1e9;text-decoration:underline;text-underline-offset:3px}.configure-product{width:100%;margin:0 0 12px}
.config-frame.plate-arrives{animation:plate-arrives 330ms cubic-bezier(.2,.7,.3,1)}@keyframes plate-arrives{from{opacity:.55;filter:brightness(1.2);transform:translateX(6px)}to{opacity:1;filter:brightness(1);transform:translateX(0)}}
@media(max-width:1050px){.config-controls{padding:27px}.config-preview{padding:24px 22px}.config-preview-top{flex-direction:column;align-items:flex-start;gap:12px}.config-step h3{font-size:21px}.config-view{height:440px}.config-selection{grid-template-columns:1fr}.config-assembly[data-family=g3]{--frame-width:224px;--module-width:139px}.config-rail{--tile-width:102px}}
@media(max-width:700px){.switch-configurator{grid-template-columns:1fr;border-radius:25px}.config-preview{border-right:0;border-bottom:1px solid #ffffff20;padding:20px 21px 22px}.config-preview-top{flex-direction:row;align-items:center;font-size:8px;letter-spacing:1px;gap:10px}.config-lock{font-size:9px;padding:6px 8px}.config-lock>span{font-size:13px}.config-view{height:354px;margin-top:4px}.config-assembly{--frame-width:155px;--frame-height:230px;--module-width:77px;--module-height:155px;height:280px}.config-assembly[data-family=g3]{--frame-width:209px;--frame-height:240px;--module-width:133px;--module-height:157px}.config-ground{bottom:36px}.config-view-hint{font-size:8px;letter-spacing:1.2px;bottom:6px}.config-preview-bottom p{font-size:21px}.config-preview-bottom span{font-size:10px}.config-preview-bottom{gap:15px}.config-light{font-size:11px}.config-swipe-nav{margin-top:17px}.config-visual-note{font-size:10px;margin-top:16px;max-width:310px}.config-controls{padding:27px 22px}.config-step{gap:12px;margin-bottom:18px}.config-step h3{font-size:23px}.config-step p{font-size:12px}.config-controls .field{font-size:12px}.config-controls .field select{font-size:14px;height:49px}.config-switch-finishes{gap:9px}.switch-finish{flex:1;font-size:12px;min-height:44px;padding:10px}.config-finish-label{font-size:12px}.config-step.plate-step{margin-top:25px}.config-rail{--tile-width:106px;margin-inline:-12px;min-height:150px}.plate-tile>span:not(.plate-mini){font-size:11px}.plate-tile small{font-size:10px}.plate-tile{min-height:146px}.config-selection{grid-template-columns:1fr 1fr;gap:13px;padding:17px 0;margin-top:15px}.config-selection>div>span{font-size:9px}.config-selection strong{font-size:12px}.config-selection small{font-size:9px}.config-selection a{font-size:11px;min-height:35px;padding-top:4px}.config-total span{font-size:12px}.config-total small{font-size:11px}.config-total strong{font-size:29px}.config-controls>.button{font-size:13px;min-height:49px}.config-enquire{font-size:12px;padding-top:15px;min-height:48px}.config-status{font-size:12px;line-height:1.8;margin-top:10px}.config-compatibility{font-size:11px;line-height:1.85}.config-module-code{font-size:6px;bottom:7px}.config-rocker-i{top:21px}.config-rocker-o{bottom:18px}}
@media(max-width:360px){.config-preview-top{flex-direction:column;align-items:flex-start}.config-view{height:330px}.config-controls{padding:24px 18px}.config-preview{padding:20px 18px}.config-step h3{font-size:21px}.config-selection{grid-template-columns:1fr}.config-assembly[data-family=g3]{--frame-width:194px;--module-width:124px}.switch-finish{font-size:11px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.config-frame.plate-arrives{animation:none}.config-frame,.config-rocker,.config-room-glow{transition:none}.config-rail{scroll-behavior:auto;scroll-snap-type:x proximity}}
.reduce-motion .config-frame.plate-arrives{animation:none}.reduce-motion .config-rail{scroll-behavior:auto}
/* Keep the visual result in view while the customer changes the controls. */
.switch-configurator{overflow:visible}.config-preview{position:sticky;top:105px;align-self:start;border-radius:33px 0 0 33px}
@media(max-width:700px){
 .config-preview{top:83px;z-index:8;border-radius:24px;padding:13px 17px 15px;background:linear-gradient(135deg,#293951f5,#1e2d46f5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 10px 25px #07132926}
 .config-preview-top{font-size:7px;letter-spacing:.8px;flex-direction:row;align-items:center}.config-lock{font-size:8px;padding:5px 7px}.config-view{height:237px;margin-top:0}.config-assembly{--frame-width:137px;--frame-height:198px;--module-width:67px;--module-height:133px;height:225px}.config-assembly[data-family=g3]{--frame-width:182px;--frame-height:205px;--module-width:112px;--module-height:134px}.config-ground{top:calc(50% + 85px);bottom:auto;height:23px}.config-view-hint{font-size:7px;letter-spacing:1px;bottom:1px}.config-frame{border-radius:11px}.config-preview-bottom{padding:5px 0 0;min-height:46px}.config-preview-bottom p{font-size:19px;margin-bottom:1px}.config-preview-bottom span{font-size:9px}.config-light{min-height:42px;font-size:11px;padding:8px 11px}.config-swipe-nav{position:absolute;left:12px;right:12px;top:138px;justify-content:space-between;gap:0;margin:0;pointer-events:none}.config-swipe-nav button{pointer-events:auto;width:40px;height:44px;background:#263954bf;backdrop-filter:blur(10px)}.config-swipe-nav>span{display:none}.config-visual-note{display:none}.config-controls{padding-top:27px}.config-module-code{font-size:5px;bottom:5px}.config-rocker-i{font-size:9px;top:19px}.config-rocker-o{font-size:9px;bottom:16px}.config-indicator{top:9px;width:12px;left:calc(50% - 6px)}.config-rail{scroll-margin-top:450px}
}
@media(max-width:360px){.config-preview{padding-inline:14px}.config-preview-top{font-size:6px;letter-spacing:.6px;gap:7px}.config-lock{font-size:7px;gap:4px}.config-preview-bottom p{font-size:18px}.config-preview-bottom span{font-size:8px}.config-assembly[data-family=g3]{--frame-width:170px;--module-width:104px}}
@media(max-width:700px) and (max-height:600px){.config-preview{position:relative;top:auto}}