/* R77: the detail image owns its DOM viewport; no pixel coordinates from the
   main canvas, no hidden mobile viewport, no caption covering the bottle. */
#macro{width:218px;height:226px;bottom:56px;overflow:hidden;z-index:5;background:#b9ccca;flex-direction:column;isolation:isolate}
#macro:not([hidden]){display:flex!important}
#macro #macro-caption{position:relative;flex:0 0 auto;display:block;inset:auto;width:100%;min-height:28px;padding:6px 9px;font-size:11px;line-height:1.35;background:#fff7e9;color:#604215}
#macro .macro-preview{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
#macro .bottle-detail-canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;pointer-events:none}
@media(max-width:820px),(max-height:560px){
 #macro{left:10px;bottom:119px;width:124px;height:160px;border-radius:7px}
 #macro #macro-caption{padding:5px 6px;min-height:32px;font-size:10px}
}
@media(max-width:380px){#macro{width:112px;height:146px}}