/* A small circle and filled saved heart sit inside a transparent 44px target. */
body[data-page="showroom"]{--showroom-save:var(--mg-red);--showroom-save-ink:#311713}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo{
 position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;
 width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;
 color:var(--mg-white);background:transparent;border:0;border-radius:50%;backdrop-filter:none;
 overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo::before{
 content:'';position:absolute;inset:10px;border:1px solid currentColor;border-radius:50%;
 background:transparent;pointer-events:none;filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--mg-black) 53%,transparent));
 transition:color var(--mg-dur-fast) var(--mg-ease);
}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo svg{
 width:14px;height:14px;fill:none;stroke-width:1.6;transform-origin:center;
 filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--mg-black) 53%,transparent));transition:transform var(--mg-dur-fast) var(--mg-ease),color var(--mg-dur-fast) var(--mg-ease),fill var(--mg-dur-fast) var(--mg-ease);
}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo span{
 position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo[aria-pressed="true"]{
 color:var(--showroom-save);background:transparent;border:0;
}
body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo[aria-pressed="true"] svg{fill:currentColor}
/* The viewer uses the same 24px circle / 14px heart as the photo wall. */
body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save{
 display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;
 padding:0;margin:0;border:0;border-radius:50%;color:var(--mg-white);background:transparent;
 overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save::before{
 content:'';position:absolute;inset:10px;border:1px solid currentColor;border-radius:50%;
 background:transparent;pointer-events:none;filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--mg-black) 53%,transparent));transition:color var(--mg-dur-fast) var(--mg-ease);
}
body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save svg{
 width:14px;height:14px;fill:none;stroke-width:1.6;transform-origin:center;
 filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--mg-black) 53%,transparent));transition:transform var(--mg-dur-fast) var(--mg-ease),color var(--mg-dur-fast) var(--mg-ease),fill var(--mg-dur-fast) var(--mg-ease);
}
body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save[aria-pressed="true"]{
 color:var(--showroom-save);background:transparent;border:0;
}
body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save[aria-pressed="true"] svg{fill:currentColor}
body[data-page="showroom"] .save-photo:active>svg{transform:scale(.72)}
body[data-page="showroom"] .save-photo:focus-visible{outline:2px solid var(--mg-focus-ring);outline-offset:1px}
body[data-page="showroom"] .save-feedback-ring{
 position:absolute;width:24px;height:24px;display:block;border:1px solid var(--showroom-save);
 border-radius:50%;background:none;pointer-events:none;z-index:2;
}
@media(hover:hover) and (pointer:fine){
 body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo:hover{color:var(--mg-white);background:transparent}
 body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo[aria-pressed="true"]:hover{color:var(--mg-red)}
 body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save:hover{color:var(--mg-white);background:transparent;border:0}
 body[data-page="showroom"] #lightbox :is(#viewer-save,#light-details) .photo-action.detail-save[aria-pressed="true"]:hover{color:var(--mg-red);background:transparent}
}
@media(max-width:740px),(hover:none),(pointer:coarse){
 body[data-page="showroom"] .motion-world .photo-card .photo-media>.save-photo{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 body[data-page="showroom"] .save-photo>svg{transition:none;transform:none!important}
}