/* Kinetic 01–09 integration; no prototype shell. */
/* reveal-zoom */
.mz{position:relative;aspect-ratio:4/3;cursor:zoom-in;touch-action:pan-y}
.mz img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;transform-origin:0 0;transition:transform var(--t-m) var(--ease),opacity var(--t-l) var(--ease)}
.mz.mz-ready:not(.in) img{opacity:0;transform:translateY(16px) scale(1.04)}
.mz.zoomed{cursor:zoom-out}
.mz .zbtn{position:absolute;right:12px;bottom:12px;z-index:2}
@media (prefers-reduced-motion:reduce){.mz img{transition:none}.mz.mz-ready:not(.in) img{opacity:1;transform:none}}

body.guide .pdp .mz{width:100%;overflow:hidden;border-radius:12px;background:var(--tile-bg)}
body.guide .pdp .mz img.ph{min-height:0;max-height:none;height:100%;padding:6%;background:transparent!important;border-radius:0}
.mz .zbtn{min-width:72px}.mz [hidden]{display:none}

/* Grid children must shrink around long manufacturer source URLs on mobile. */
body.guide .pdp>div{min-width:0}body.guide .pdp-info{overflow-wrap:anywhere}body.guide .pdp .specs{table-layout:fixed}

/* photo-swap */
.scrub{position:relative;aspect-ratio:4/3;touch-action:pan-y}
.scrub img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;opacity:0;transition:opacity var(--t-s) var(--ease)}
.scrub img.on{opacity:1}
.ticks{display:flex;gap:8px;margin-top:12px}
.ticks button{width:64px;height:48px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--tile-bg);cursor:pointer;position:relative}
.ticks button img{width:100%;height:100%;object-fit:contain;padding:4px}
.ticks button:after{content:"";position:absolute;inset:-1px;border:2px solid var(--acc-ink);border-radius:8px;opacity:0;transition:opacity var(--t-xs) var(--ease)}
.ticks button[aria-current=true]:after{opacity:1}
@media (prefers-reduced-motion:reduce){.scrub img,.ticks button:after{transition:none}}
.scrub img:not(.on){opacity:0!important}.mz.scrub img.on{opacity:1}.ticks button{min-width:64px}.pdp-media .ticks img.ph{min-height:0!important;max-height:48px!important;aspect-ratio:4/3;padding:4px!important}

/* swatch */
.sw-media{position:relative;aspect-ratio:4/3}
.sw-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;transition:opacity var(--t-m) var(--ease)}
.sw-media img:not(.on){opacity:0}
.sw-list{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;padding:0;border:0}
.sw-list label{position:relative;width:36px;height:36px;border-radius:50%;cursor:pointer}
.sw-list input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw-list .chip{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.25);transition:transform var(--t-xs) var(--ease)}
.sw-list .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc-ink);opacity:0;transform:scale(.8);transition:opacity var(--t-s) var(--ease),transform var(--t-s) var(--ease)}
.sw-list input:checked~.ring{opacity:1;transform:none}.sw-list label:hover .chip{transform:scale(1.08)}
.sw-list input:focus-visible~.ring{opacity:1;outline:3px solid var(--acc-ink);outline-offset:2px}
.sw-name{display:grid;min-height:1.5em}.sw-name span{grid-area:1/1;transition:opacity var(--t-s) var(--ease),transform var(--t-s) var(--ease)}
.sw-name span:not(.on){opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){.sw-media img,.sw-list .chip,.sw-list .ring,.sw-name span{transition:none}}

body.guide .swatches.big{display:block}.sw-list legend{font-weight:600;font-size:14px;margin-bottom:8px}.sw-list label{display:block;width:44px;height:44px}.sw-list input{z-index:2}.sw-list .chip{width:auto!important;height:auto!important;inset:8px}.sw-list .ring{pointer-events:none}.sw-name{margin-top:10px}.swatches.big .mut{max-width:50ch}

/* compare */
body.has-tray{padding-bottom:96px}/* reserved up front so the tray never shifts layout */
.ctray{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;padding:14px 4vw;background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(100%);transition:transform var(--t-m) var(--ease)}
.ctray.open{transform:none}
.ctray ol{display:flex;gap:8px;margin:0;padding:0;list-style:none;flex:1}
.ctray li{width:64px;height:48px;border-radius:8px;border:1px dashed var(--line);background:var(--tile-bg);position:relative}
.ctray li img{width:100%;height:100%;object-fit:contain;padding:4px;transition:opacity var(--t-xs) var(--ease)}
.ctray li button{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:var(--acc);color:#fff;font:700 12px/22px Inter;padding:0;cursor:pointer}
.fly{position:fixed;z-index:70;pointer-events:none;object-fit:contain;transform-origin:0 0;transition:transform var(--t-l) var(--ease),opacity var(--t-l) var(--ease)}
.addc{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-size:14px}
@media (max-width:520px){.ctray li{width:48px;height:40px}.ctray .lbl{display:none}}
@media (prefers-reduced-motion:reduce){.ctray,.fly,.ctray li img{transition:none}}

body.guide .tray.ctray{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;background:var(--bg2);color:var(--ink);min-height:96px;max-width:100%;visibility:hidden}
body.guide .tray.ctray.open{visibility:visible}.ctray .btn{white-space:nowrap}.ctray li{display:flex;align-items:center;justify-content:center}.ctray li .slot-name{font-size:10px;line-height:1.1;max-height:44px;overflow:hidden;padding:2px}
.ctray li button{width:30px;height:30px;top:-14px;right:-10px;line-height:30px;z-index:1}
@media(max-width:520px){.ctray{padding:14px 3vw;gap:8px}.ctray ol{gap:8px}.ctray li{width:40px;height:40px;flex-shrink:0}.ctray .btn{font-size:12px!important;padding:10px!important}}

/* sticky-quote */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4vw;background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);opacity:0;transition:transform var(--t-m) var(--ease),opacity var(--t-m) var(--ease)}
.qbar.show{transform:none;opacity:1}
.qbar b{font:800 15px/1.2 var(--disp);text-transform:uppercase}.qbar .acts{display:flex;gap:8px;flex-shrink:0}
@media (max-width:520px){.qbar .nm{display:none}.qbar .acts{flex:1}.qbar .btn{flex:1;text-align:center}}
@media (prefers-reduced-motion:reduce){.qbar{transition:none}}

body.has-qbar{padding-bottom:96px}.qbar:not(.show){visibility:hidden}.qbar .acts .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}@media(max-width:520px){.qbar .acts{gap:6px}.qbar .btn{font-size:13px!important;padding:12px!important}}

/* spec-stagger */
.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs caption{text-align:left;color:var(--mut);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:8px}
.specs th,.specs td{padding:12px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}.specs th{font-weight:500;color:var(--mut);width:45%;text-transform:capitalize}
.specs.stg tr{opacity:0;transform:translateY(12px);transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.specs.stg.in tr{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.specs.stg tr{opacity:1;transform:none;transition:none}}

/* dealer-pins */
/* Distance-order illustration only: not a geographic map. */
.dealer-motion{display:grid;grid-template-columns:minmax(180px,.7fr) 1fr;gap:20px;margin:16px 0}.dealer-motion .dmap{position:relative;min-height:150px;border-radius:12px;background:#e9e1d6;overflow:hidden}.distance-caption{display:block;padding:12px;font-size:12px;color:#5c524b}.dpin{position:absolute;width:30px;height:38px;transform-origin:50% 100%;transition:transform var(--t-l) var(--ease),opacity var(--t-m) var(--ease);transition-delay:calc(var(--i)*70ms)}.dpin span{display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--acc);color:white;transform:rotate(-45deg);font-weight:700}.dealer-motion.ready:not(.on) .dpin{opacity:0;transform:translateY(-18px)}.dealer-motion .dpin.hl{transform:scale(1.3);transition-delay:0s;transition-duration:var(--t-xs)}
.dealer-motion .dlist{display:block;list-style:none;padding:0;margin:0}.dealer-motion .dealer{position:relative;isolation:isolate;transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease);transition-delay:calc(var(--i)*70ms)}.dealer-motion.ready:not(.on) .dealer{opacity:0;transform:translateY(12px)}.dealer-motion .dealer:after{content:"";position:absolute;inset:0;border:2px solid var(--acc);border-radius:inherit;opacity:0;transition:opacity var(--t-xs) var(--ease);pointer-events:none}.dealer-motion .dealer.hl:after{opacity:1}
@media(max-width:760px){.dealer-motion{grid-template-columns:1fr}.dealer-motion .dmap{min-height:130px}}
@media(prefers-reduced-motion:reduce){.dealer-motion .dpin,.dealer-motion .dealer,.dealer-motion .dealer:after{transition:none!important}.dealer-motion.ready:not(.on) .dpin,.dealer-motion.ready:not(.on) .dealer{opacity:1;transform:none}}

/* card-lift */
body.guide .card.prod{position:relative;isolation:isolate;transition:transform var(--t-s) var(--ease)}
body.guide .card.prod:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px var(--acc-ink);opacity:0;transition:opacity var(--t-s) var(--ease);pointer-events:none;z-index:-1}
body.guide .card.prod img.ph{transition:transform var(--t-m) var(--ease)}
@media(hover:hover){body.guide .card.prod:hover{transform:translateY(-4px)}body.guide .card.prod:hover:after{opacity:1}body.guide .card.prod:hover img.ph{transform:translateY(-6px) scale(1.04)}}
body.guide .card.prod:focus-within{transform:translateY(-4px);outline:2px solid var(--acc-ink);outline-offset:2px}body.guide .card.prod:focus-within:after{opacity:1}body.guide .card.prod:focus-within img.ph{transform:translateY(-6px) scale(1.04)}
@media(prefers-reduced-motion:reduce){body.guide .card.prod,body.guide .card.prod img.ph{transition:none;transform:none!important}body.guide .card.prod:after{transition:none}}

/* marquee */
.mq{position:relative;overflow:hidden;padding:26px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-dur,40s) linear infinite}
.mq ul{display:flex;align-items:center;gap:56px;margin:0;padding:0 28px;list-style:none}
.mq li a{display:block;height:40px;opacity:.75;transition:opacity var(--t-xs) var(--ease)}.mq li a:hover,.mq li a:focus-visible{opacity:1}
.mq img{height:100%;width:auto;max-width:150px;object-fit:contain;}
.mq:hover .mq-track,.mq:focus-within .mq-track,.mq.paused .mq-track{animation-play-state:paused}
.mq-ctl{margin-top:6px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq{-webkit-mask:none;mask:none}.mq-track{animation:none;width:auto}.mq ul{flex-wrap:wrap;justify-content:center;row-gap:24px}.mq ul[aria-hidden],.mq-ctl{display:none}}

.mq{min-height:104px}.mq ul.brand-strip{flex-wrap:nowrap;width:max-content;gap:56px;margin:0;padding:0 28px}.mq .bl img{max-width:150px}.mq li{flex-shrink:0}.mq-ctl{min-height:44px;cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:8px 18px}.mq .bl{display:inline-flex;align-items:center}.mq .bl img{filter:none}.mq-track{will-change:transform}
@media(prefers-reduced-motion:reduce){.mq-track{width:100%}.mq ul.brand-strip{width:100%;flex-wrap:wrap;gap:24px}.mq ul[aria-hidden]{display:none}}