.zp-hot__head{margin-bottom:28px;text-align:center}.zp-hot__head h2{margin-bottom:.25em}.zp-hot__head p{margin:0 auto;max-width:60ch;color:var(--zp-muted)}.zp-hot__stage{position:relative;max-width:1000px;margin-inline:auto}.zp-hot__img{border-radius:var(--zp-r-card);overflow:hidden;background:var(--zp-surface)}.zp-hot__img img{width:100%;height:auto}.zp-hot__placeholder{display:block;width:100%;height:auto;aspect-ratio:16 / 9;fill:var(--zp-muted);opacity:.4}.zp-hotspot{position:absolute;left:var(--x);top:var(--y)}.zp-hotspot summary{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;display:grid;place-items:center;list-style:none;border-radius:50%;border:2px solid #fff;background:var(--zp-accent);color:var(--zp-on-accent);box-shadow:0 2px 10px #080a1459;cursor:pointer}.zp-hotspot summary::-webkit-details-marker{display:none}.zp-hotspot summary svg{transition:transform .2s}.zp-hotspot[open] summary svg{transform:rotate(45deg)}@media(prefers-reduced-motion:no-preference){.zp-hotspot:not([open]) summary{animation:zp-pulse 2.2s ease-out infinite}}@keyframes zp-pulse{0%{box-shadow:0 0 0 0 var(--zp-accent),0 2px 10px #080a1459}70%,to{box-shadow:0 0 0 12px transparent,0 2px 10px #080a1459}}.zp-hotspot__panel{position:absolute;z-index:3;top:24px;left:-20px;width:min(260px,70vw);padding:16px;border-radius:var(--zp-r-card);background:var(--zp-bg);color:var(--zp-text);box-shadow:0 14px 40px #080a1447}.zp-hotspot--left .zp-hotspot__panel{left:auto;right:-20px}.zp-hotspot--up .zp-hotspot__panel{top:auto;bottom:24px}.zp-hotspot__title{margin:0 0 4px;font-family:var(--zp-font-body);font-size:1rem;font-weight:700;letter-spacing:0}.zp-hotspot__panel p{margin:0 0 8px;font-size:.9rem;color:var(--zp-muted)}.zp-hotspot__panel .zp-price{margin-bottom:8px;font-size:.95rem}.zp-hotspot__panel .zp-link:last-child{display:inline-block;font-size:.9rem}@media(max-width:749px){.zp-hotspot{position:static}.zp-hotspot summary{left:var(--x);top:var(--y)}.zp-hotspot__panel,.zp-hotspot--left .zp-hotspot__panel,.zp-hotspot--up .zp-hotspot__panel{left:10px;right:10px;top:auto;bottom:10px;width:auto}}.zp-hot__mech{display:grid;gap:28px;align-items:center}@media(min-width:750px){.zp-hot__mech{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}.zp-hot__pins{position:relative}.zp-hot__pin{position:absolute;left:var(--x);top:var(--y);z-index:1;width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;border-radius:50%;background:var(--zp-bg);color:var(--zp-text);font-family:var(--zp-font-heading);font-size:15px;font-weight:800;line-height:1;box-shadow:0 0 0 4px #ffffff59,0 4px 12px #0000004d}.zp-hot__list{margin:0;padding:0;list-style:none}.zp-hot__zone{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--zp-border)}.zp-hot__zone:last-child{border-bottom:0}.zp-hot__n{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--zp-text);color:var(--zp-bg);font-family:var(--zp-font-heading);font-size:16px;font-weight:800;line-height:1}.zp-hot__body{min-width:0;padding-top:6px}.zp-hot__title{margin:0 0 3px;font-family:var(--zp-font-body);font-size:1.125rem;font-weight:500;letter-spacing:0}.zp-hot__body p{margin:0;color:var(--zp-muted)}.zp-hot__body .zp-price{margin:8px 0 4px;font-size:.95rem}.zp-hot__body .zp-link{display:inline-block;margin-top:6px;font-size:.9rem}.zp-hot__made{display:inline-block;margin:18px 0 0;padding:8px 14px;border-radius:16px;background:var(--zp-surface);font-size:.875rem;font-weight:600;line-height:1.4}@media(hover:hover){.zp-hot__mech:has([data-i="1"]:hover) .zp-hot__pin[data-i="1"],.zp-hot__mech:has([data-i="2"]:hover) .zp-hot__pin[data-i="2"],.zp-hot__mech:has([data-i="3"]:hover) .zp-hot__pin[data-i="3"],.zp-hot__mech:has([data-i="4"]:hover) .zp-hot__pin[data-i="4"],.zp-hot__mech:has([data-i="5"]:hover) .zp-hot__pin[data-i="5"],.zp-hot__mech:has([data-i="6"]:hover) .zp-hot__pin[data-i="6"]{background:var(--zp-text);color:var(--zp-bg);transform:scale(1.12)}.zp-hot__mech:has([data-i="1"]:hover) .zp-hot__zone[data-i="1"] .zp-hot__n,.zp-hot__mech:has([data-i="2"]:hover) .zp-hot__zone[data-i="2"] .zp-hot__n,.zp-hot__mech:has([data-i="3"]:hover) .zp-hot__zone[data-i="3"] .zp-hot__n,.zp-hot__mech:has([data-i="4"]:hover) .zp-hot__zone[data-i="4"] .zp-hot__n,.zp-hot__mech:has([data-i="5"]:hover) .zp-hot__zone[data-i="5"] .zp-hot__n,.zp-hot__mech:has([data-i="6"]:hover) .zp-hot__zone[data-i="6"] .zp-hot__n{box-shadow:0 0 0 4px var(--zp-border)}}@media(prefers-reduced-motion:no-preference){.zp-hot__pin{transition:transform .15s ease,background-color .15s ease,color .15s ease}.zp-hot__n{transition:box-shadow .15s ease}}
