.product-photo-button {
    position: relative;
    display: block;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: zoom-in;
}

.product-tile .product-photo-button > img {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.product-photo-button:focus-visible {
    outline: 3px solid #0c7048;
    outline-offset: -3px;
}

@media (max-width: 760px) {
    .product-photo-button {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        height: 92px;
    }

    .catalog-page-showcase .product-photo-button { height: 116px; }
}

@media (max-width: 340px) {
    .catalog-page-showcase .product-photo-button { height: 104px; }
}

body.product-photo-open { overflow: hidden; }
.product-photo-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 16px;
    overflow: auto;
    border: 1px solid #d9ded8;
    border-radius: 7px;
    color: #17181a;
    background: #fff;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .25);
}
.product-photo-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.product-photo-dialog::backdrop { background: rgba(17, 19, 18, .72); }
.product-photo-dialog__header { display: flex; align-items: center; gap: 16px; min-width: 0; }
.product-photo-dialog__header h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.product-photo-dialog__close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid #d9ded8; border-radius: 5px; color: #3f454c; background: #fff; cursor: pointer; }
.product-photo-dialog__close:hover { color: #0c7048; border-color: #0c7048; }
.product-photo-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.product-photo-dialog__image { display: block; width: 100%; height: min(680px, calc(100dvh - 160px)); min-height: 0; object-fit: contain; background: #fff; }
.product-photo-dialog__image[hidden], .product-photo-dialog__error[hidden] { display: none; }
.product-photo-dialog__error { margin: 20px 0; font-size: 16px; line-height: 1.5; }

@media (max-width: 620px) {
    .product-photo-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
    .product-photo-dialog__header { gap: 8px; }
    .product-photo-dialog__header h2 { font-size: 16px; }
    .product-photo-dialog__image { height: min(600px, calc(100dvh - 192px)); }
}