.product-modal-image { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:.85rem; }
.product-modal-image:has(.product-modal-gallery:not([hidden])) { grid-template-columns:88px minmax(0,1fr); }
.product-modal-image > img,.product-modal-image > i { grid-column:-2 / -1; grid-row:1; min-width:0; }
.product-modal-image > img { max-height:100%; }
.product-modal-gallery { grid-column:1; grid-row:1; align-self:stretch; display:flex; flex-direction:column; gap:.5rem; width:100%; min-height:0; max-height:100%; overflow-x:hidden; overflow-y:auto; padding:.35rem; border-radius:12px; background:rgba(255,255,255,.9); scrollbar-width:thin; overscroll-behavior:contain; }
.product-modal-gallery[hidden] { display:none; }
.product-modal-gallery button { flex:0 0 64px; width:64px; height:64px; padding:3px; border:2px solid transparent; border-radius:9px; background:#fff; cursor:pointer; }
.product-modal-gallery button[aria-pressed="true"] { border-color:#92658d; }
.product-modal-gallery button:focus-visible { outline:3px solid #92658d; outline-offset:2px; }
.product-modal-gallery button img { width:100%; height:100%; object-fit:contain; border-radius:5px; box-shadow:none; animation:none; }
@media(max-width:600px) { .product-modal-image { gap:.5rem; } .product-modal-image:has(.product-modal-gallery:not([hidden])) { grid-template-columns:76px minmax(0,1fr); } .product-modal-gallery { gap:.35rem; } .product-modal-gallery button { flex-basis:52px; width:52px; height:52px; } }