/* Catalog-derived interactive awning product laboratory */
.awning-product-lab{min-height:840px;background:radial-gradient(circle at 52% 40%,rgba(182,255,24,.32),transparent 34%),linear-gradient(145deg,#fff 0,#efffd5 58%,#d4ff79 100%)}
.awning-lab-switches{position:absolute;z-index:7;left:20px;top:52px;display:grid;gap:8px;width:min(505px,calc(100% - 180px))}
.awning-model-switch,.awning-fabric-switch{padding:9px 10px 10px;border:1px solid rgba(16,32,24,.14);background:rgba(255,255,255,.92);box-shadow:5px 5px 0 rgba(16,32,24,.08);backdrop-filter:blur(12px)}
.awning-model-switch small,.awning-fabric-switch small{display:block;margin-bottom:7px;color:rgba(16,32,24,.48);font:800 8px/1 Urbanist,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.awning-model-switch>div,.awning-fabric-switch>div{display:flex;gap:5px;flex-wrap:wrap}
.awning-model-switch button,.awning-fabric-switch button{min-height:29px;padding:6px 9px;border:1px solid rgba(16,32,24,.14);background:#f5f8f1;color:#415047;font:800 8px/1 Urbanist,sans-serif;letter-spacing:.04em;cursor:pointer;transition:.2s ease}
.awning-model-switch button:hover,.awning-fabric-switch button:hover,.awning-model-switch button.active,.awning-fabric-switch button.active{background:var(--neon);border-color:#93d800;color:var(--ink);transform:translateY(-1px)}
.awning-fabric-switch button{position:relative;padding-left:25px}.awning-fabric-switch button::before{content:"";position:absolute;left:7px;top:50%;width:11px;height:11px;transform:translateY(-50%);border:1px solid rgba(16,32,24,.22);background:var(--swatch,#b6ff18)}
.awning-catalog-note{position:absolute;z-index:6;left:20px;top:181px;display:grid;gap:2px;max-width:420px;padding:10px 12px;border-left:3px solid var(--neon);background:rgba(255,255,255,.78);pointer-events:none}
.awning-catalog-note b{font:800 10px/1.2 Urbanist,sans-serif;text-transform:uppercase;letter-spacing:.08em}.awning-catalog-note span{font-size:8px;line-height:1.35;color:rgba(16,32,24,.58)}
.awning-product-lab .model-controls{top:54px}.awning-product-lab .model-controls button{min-width:128px}
.awning-product-lab .model-hotspot{display:flex!important;position:absolute;z-index:7;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.awning-product-lab .model-hotspot span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(16,32,24,.18);background:#fff;box-shadow:4px 4px 0 var(--neon);font:900 9px/1 Urbanist,sans-serif}
.awning-product-lab .model-hotspot b{padding:5px 7px;background:rgba(255,255,255,.88);font-size:8px;text-transform:uppercase;letter-spacing:.06em;opacity:0;transform:translateX(-5px);transition:.2s}.awning-product-lab .model-hotspot:hover b,.awning-product-lab .model-hotspot.active b{opacity:1;transform:none}.awning-product-lab .model-hotspot.active span{background:var(--neon)}
.awning-product-lab .hotspot-1{left:34%;top:45%}.awning-product-lab .hotspot-2{right:31%;top:38%}.awning-product-lab .hotspot-3{left:38%;top:59%}.awning-product-lab .hotspot-4{right:29%;top:57%}.awning-product-lab .hotspot-5{left:49%;top:69%}
.awning-product-lab .explorer-readout{left:20px;bottom:20px;right:auto;width:min(610px,calc(100% - 205px));padding-right:28px}.awning-product-lab .drag-note{bottom:23px;right:22px;max-width:160px;text-align:right}
.awning-product-lab .awning-lab-canvas{z-index:3;filter:drop-shadow(0 31px 30px rgba(16,32,24,.16))}
.awning-fallback{position:absolute;z-index:2;left:50%;top:50%;width:510px;height:330px;transform:translate(-50%,-50%) perspective(900px) rotateX(56deg) rotateZ(-2deg);transform-style:preserve-3d;pointer-events:none;transition:opacity .3s ease}
.awning-fallback-cassette{position:absolute;left:0;right:0;top:0;height:35px;background:linear-gradient(#d9dfdb,#626f68 48%,#28342e);box-shadow:0 10px 18px rgba(16,32,24,.24);transform:translateZ(26px)}
.awning-fallback-cloth{position:absolute;left:18px;right:18px;top:28px;height:255px;background:linear-gradient(110deg,rgba(255,255,255,.25),transparent 30%),#b6ff18;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);box-shadow:0 25px 40px rgba(16,32,24,.22);transform:translateZ(12px)}
.awning-fallback-front{position:absolute;left:34px;right:34px;bottom:22px;height:28px;border-radius:18px;background:linear-gradient(#b7c1bb,#26332c);box-shadow:0 10px 18px rgba(16,32,24,.25);transform:translateZ(29px)}
.awning-fallback-arm{position:absolute;top:62px;width:9px;height:218px;background:linear-gradient(90deg,#425049,#d4ddd8,#425049);transform-origin:top;transform:translateZ(19px) rotate(21deg)}.awning-fallback-arm.a{left:96px}.awning-fallback-arm.b{right:96px;transform:translateZ(19px) rotate(-21deg)}
.awning-product-lab.awning-canvas-ok .awning-fallback{opacity:.04}
.awning-product-lab.awning-canvas-ok[data-lab-isolated] .awning-fallback{opacity:0!important}
.awning-product-lab[data-fabric="sand"] .awning-fallback-cloth{background-color:#ded0aa}.awning-product-lab[data-fabric="red"] .awning-fallback-cloth{background-color:#c93b42}.awning-product-lab[data-fabric="graphite"] .awning-fallback-cloth{background-color:#35413b}
@media(max-width:900px){.awning-lab-switches{width:calc(100% - 170px)}.awning-catalog-note{display:none}.awning-fallback{width:430px;height:285px}.awning-product-lab .hotspot-1{left:25%}.awning-product-lab .hotspot-2{right:24%}}
@media(max-width:680px){.awning-product-lab{min-height:730px}.awning-lab-switches{left:10px;top:47px;width:calc(100% - 118px);gap:5px}.awning-model-switch,.awning-fabric-switch{padding:7px}.awning-model-switch button,.awning-fabric-switch button{font-size:7px;padding:5px 6px;min-height:24px}.awning-product-lab .model-controls{right:8px;top:47px}.awning-product-lab .model-controls button{min-width:101px;padding:8px;font-size:8px}.awning-product-lab .model-hotspot b{display:none}.awning-product-lab .model-hotspot span{width:25px;height:25px}.awning-product-lab .hotspot-1{left:18%;top:43%}.awning-product-lab .hotspot-2{right:17%;top:40%}.awning-product-lab .hotspot-3{left:23%;top:56%}.awning-product-lab .hotspot-4{right:18%;top:56%}.awning-product-lab .hotspot-5{left:44%;top:65%}.awning-product-lab .explorer-readout{left:10px;right:10px;width:auto;bottom:10px}.awning-fallback{width:300px;height:215px;top:51%}}