.product-zoom-trigger{cursor:zoom-in}
.product-zoom-trigger:focus-visible{outline:3px solid #368ce7;outline-offset:4px}
dialog.product-zoom{position:fixed;inset:0;box-sizing:border-box;width:96vw;max-width:1400px;height:auto;max-height:96dvh;margin:auto;padding:58px 16px 14px;border:0;border-radius:8px;background:#111b24;color:#fff;overflow:auto;box-shadow:0 20px 90px #0008}
.product-zoom::backdrop{background:#000d}
.product-zoom .zoom-close{position:absolute;right:12px;top:10px;min-height:40px;border:1px solid #ffffff60;border-radius:4px;background:#243543;color:#fff;padding:8px 14px;font:14px Arial,sans-serif;cursor:pointer}
.product-zoom .zoom-stage{display:flex;align-items:center;justify-content:center;min-height:100px}
.product-zoom .zoom-stage>img{display:block;width:auto;max-width:100%;height:auto;max-height:72dvh;object-fit:contain}
.product-zoom .zoom-crop{position:relative;overflow:hidden;width:min(100%,108dvh);aspect-ratio:3/2;background:#eeeae3}
.product-zoom .zoom-crop>img{position:absolute!important;width:300%!important;height:300%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;left:calc(var(--col) * -100%)!important;top:calc(var(--row) * -100%)!important}
.product-zoom .zoom-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.product-zoom .zoom-caption{color:#fff;font:13px/1.5 Arial,sans-serif;text-align:center;margin:0;overflow-wrap:anywhere}
.product-zoom .zoom-bottom button{flex-shrink:0;min-height:44px;background:#243543;color:#fff;border:1px solid #ffffff60;border-radius:4px;padding:10px 12px;font:13px Arial,sans-serif;cursor:pointer}
@media(max-width:600px){dialog.product-zoom{width:100vw;max-height:100dvh;padding:60px 8px 14px;border-radius:0}.product-zoom .zoom-stage>img{max-height:70dvh}.product-zoom .zoom-caption{font-size:11px}.product-zoom .zoom-bottom{gap:6px}.product-zoom .zoom-bottom button{padding:10px 8px;font-size:12px}}

/* Let responsive product images calculate their height instead of retaining HTML height attributes. */
.hero figure>img,.card-image>img{height:auto}
