/* Shop the original Mamigo still life, without changing the hero composition. */
#hero-comparison .hero-look{isolation:isolate;overflow:visible}
#hero-comparison .hero-look-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-look-shade{fill:var(--mg-color-black);opacity:0;transition:opacity 180ms ease}
.hero-look-selected-photo,.hero-look-outline{opacity:0;pointer-events:none}
.hero-look.has-picked .hero-look-shade{opacity:.34}
.hero-look.has-picked .hero-look-selected-photo,.hero-look.has-picked .hero-look-outline{opacity:1}
.hero-look-outline{fill:none;stroke:var(--mg-color-orange);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hero-look-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
#hero-comparison .hero-look-point{position:absolute;left:var(--look-x);top:var(--look-y);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;transform:translate(-50%,-50%);background:none;border:0;border-radius:50%;cursor:pointer;color:var(--mg-text)}
.hero-look-point>span{display:grid;place-items:center;width:28px;height:28px;background:var(--mg-color-white);border:2px solid var(--mg-color-orange);border-radius:50%;transition:transform 160ms ease,background-color 160ms ease}
.hero-look-point svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.hero-look-point:hover>span,.hero-look-point:focus-visible>span{transform:scale(1.16)}
.hero-look-point:focus-visible{outline:2px solid var(--mg-color-white);outline-offset:2px}
.hero-look-point[aria-expanded=true]>span{background:var(--mg-color-orange);color:var(--mg-color-white);transform:rotate(45deg)}
#hero-comparison .hero-look-hint{position:absolute;left:14px;bottom:12px;z-index:1;background:var(--mg-color-white);color:var(--mg-text);font:400 12px/1.4 var(--mg-font-family);padding:6px 10px;pointer-events:none;transition:opacity 160ms ease}
.hero-look.has-picked .hero-look-hint{opacity:0}
#hero-comparison .hero-product-detail{position:absolute;z-index:4;right:14px;bottom:14px;width:min(320px,calc(100% - 28px));padding:16px;background:var(--mg-color-white);color:var(--mg-text);transform:rotate(-3deg);transform-origin:center;box-shadow:0 8px 24px #1111111f /* taste-skill-ignore: shadow belongs to the temporary floating product detail overlay */}
#hero-comparison .hero-product-detail[data-corner^=top]{bottom:auto;top:14px}
#hero-comparison .hero-product-detail[data-corner$=left]{right:auto;left:14px}
#hero-comparison .hero-product-detail h2{font:700 22px/1.12 var(--mg-font-family);letter-spacing:-.025em;margin:0;padding-right:28px;color:var(--mg-text);max-width:none;text-wrap:balance}
#hero-comparison .hero-product-detail .hero-product-description{font:400 14px/1.45 var(--mg-font-family);color:var(--mg-text);margin:9px 0 10px;max-width:none}
#hero-comparison .hero-product-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center}
#hero-comparison .hero-product-meta{font:400 12px/1.4 var(--mg-font-family);color:var(--mg-text-muted)}
#hero-comparison .hero-product-design{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:44px;padding:10px 12px;border:0;background:var(--mg-color-orange);color:var(--mg-color-white);font:700 15px/1.2 var(--mg-font-family);cursor:pointer}
.hero-product-design svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#hero-comparison .hero-detail-close{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--mg-text);cursor:pointer}
.hero-detail-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.hero-product-detail button:focus-visible{outline:2px solid var(--mg-color-purple);outline-offset:3px}
.hero-product-design:hover{background:var(--mg-color-orange-400)}
@media(max-width:760px){
 #hero-comparison .hero-product-detail{width:min(268px,calc(100% - 20px));padding:12px;right:10px;bottom:10px}
 #hero-comparison .hero-product-detail[data-corner^=top]{top:10px}
 #hero-comparison .hero-product-detail[data-corner$=left]{left:10px}
 #hero-comparison .hero-product-detail h2{font-size:19px;line-height:1.15;padding-right:23px}
 #hero-comparison .hero-product-detail .hero-product-description{font-size:13px;line-height:1.4;margin:7px 0 6px}
 #hero-comparison .hero-product-design{font-size:14px;padding-inline:10px;gap:6px}
 #hero-comparison .hero-product-meta{font-size:11px}
 #hero-comparison .hero-look-hint{font-size:11px;left:10px;bottom:10px}
}
@media(max-width:359px){
 #hero-comparison .hero-product-detail{padding:10px;width:calc(100% - 16px);right:8px;bottom:8px}
 #hero-comparison .hero-product-detail[data-corner^=top]{top:8px}
 #hero-comparison .hero-product-detail[data-corner$=left]{left:8px}
 #hero-comparison .hero-product-detail h2{font-size:18px}
 #hero-comparison .hero-product-detail .hero-product-description{font-size:12px}
 #hero-comparison .hero-product-design{font-size:13px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){.hero-look *{animation:none!important;transition:none!important}}

/* Compact only when the detail overlay would cover the selected product marker. */
#hero-comparison .hero-product-detail.is-compact .hero-product-description{display:none}
#hero-comparison .hero-product-detail.is-compact .hero-product-bottom{margin-top:8px}
