/* ============================================================
   Click a product photo to see it large — wine, bundle and gift set pages.
   Brief: docs/briefs/2026-11-13-wine-pdp-photo-row-zoom.md. Markup comes from
   assets/js/photo-zoom.js; the dialog follows the recipe lightbox
   (assets/css/recipe-post.css § .rp-lightbox).
   ============================================================ */

/* The whole photo is the button. Its corner icon shows on hover and on
   keyboard focus only, so the photo paints exactly as it did before. */
.rh-zoom-open{
  position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:flex-end;
  margin:0; padding:14px; background:none; border:0; border-radius:0; cursor:zoom-in; color:#FBF7EE;
  -webkit-tap-highlight-color:transparent;
}
.rh-zoom-open svg{
  width:40px; height:40px; padding:11px; box-sizing:border-box; border-radius:50%;
  background:rgba(28,25,22,.62); opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s;
}
@media (hover:hover){ .rh-zoom-open:hover svg{ opacity:1; transform:none; } }
.rh-zoom-open:focus-visible svg{ opacity:1; transform:none; }
.rh-zoom-open:focus-visible{ outline:2px solid #520000; outline-offset:-4px; }

.rh-zoom{
  width:min(96vw, 1400px); max-width:none; height:min(94vh, 1100px); height:min(94dvh, 1100px); max-height:none;
  margin:auto; padding:0; border:0; background:transparent; overflow:visible; color:#FBF7EE;
}
.rh-zoom::backdrop{ background:rgba(16,14,12,.92); }
.rh-zoom-fig{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; margin:0; }
.rh-zoom-fig img{ display:block; max-width:100%; max-height:calc(100% - 56px); width:auto; height:auto; object-fit:contain; }
.rh-zoom-fig figcaption{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 14px; margin:0; padding:0 52px;
  font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-size:18px; color:rgba(251,247,238,.8); text-align:center;
}
.rh-zoom-count{
  font-family:"Josefin Sans", sans-serif; font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(251,247,238,.6);
}
.rh-zoom-btn{
  position:absolute; z-index:1; display:grid; place-items:center; width:44px; height:44px; padding:0;
  background:rgba(28,25,22,.7); border:1px solid rgba(251,247,238,.3); border-radius:50%; color:#FBF7EE; cursor:pointer;
}
.rh-zoom-btn[hidden]{ display:none; }
.rh-zoom-btn:focus-visible{ outline:2px solid #E2C58F; outline-offset:3px; }
.rh-zoom-close{ top:0; right:0; }
.rh-zoom-prev, .rh-zoom-next{ top:50%; transform:translateY(-50%); }
.rh-zoom-prev{ left:0; }
.rh-zoom-next{ right:0; }
@media (prefers-reduced-motion:reduce){ .rh-zoom-open svg{ transition:none; } }