.product-layout-top .product-modern /* Shared photo viewer for the two proposals. */
html.photo-viewer-open{ overflow: hidden; }
.product-layout-top .product-modern .product-gallery.photo-viewer{
    width: min(1180px, calc(100vw - 40px));
    height: calc(100dvh - 40px);
    max-width: none;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    border: 1px solid #ffffff24;
    border-radius: 16px;
    background: #14181d;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 30px 100px #0006;
}
.product-layout-top .product-modern .photo-viewer[open]{ display: grid; grid-template-rows: 70px minmax(0, 1fr) 100px; }
.product-layout-top .product-modern .photo-viewer::backdrop{ background: #080b10e8; backdrop-filter: blur(6px); }
.product-layout-top .product-modern .photo-viewer-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; gap: 16px; }
.product-layout-top .product-modern .photo-viewer-head b{ display: block; font-size: 14px; }
.product-layout-top .product-modern .photo-viewer-count{ display: block; margin-top: 4px; color: #b9c0c8; font-size: 12px; }
.product-layout-top .product-modern .photo-viewer button{ font: inherit; cursor: pointer; color: #fff; }
.product-layout-top .product-modern .photo-viewer .photo-viewer-close{ width: 42px; height: 42px; border: 1px solid #ffffff35; border-radius: 50%; background: #ffffff12; font-size: 28px; line-height: 1; }
.product-layout-top .product-modern .photo-viewer-stage{ position: relative; min-height: 0; margin: 0 20px; display: flex; align-items: center; justify-content: center; }
.product-layout-top .product-modern .photo-viewer .photo-viewer-image{ width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.product-layout-top .product-modern .photo-viewer-prev,.product-layout-top .product-modern .photo-viewer-next{ position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff60; border-radius: 50%; background: #14181dcc; line-height: 1; }
.product-layout-top .product-modern .photo-viewer-prev svg,.product-layout-top .product-modern .photo-viewer-next svg{ display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.product-layout-top .product-modern .photo-viewer-prev{ left: 12px; }
.product-layout-top .product-modern .photo-viewer-next{ right: 12px; }
.product-layout-top .product-modern .photo-viewer-thumbs{ display: flex; align-items: center; gap: 9px; min-width: 0; overflow-x: auto; padding: 14px 22px; scrollbar-width: thin; scrollbar-color: #69717b transparent; }
.product-layout-top .product-modern .photo-viewer-thumbs button{ flex: 0 0 80px; height: 60px; padding: 3px; border: 2px solid transparent; border-radius: 7px; background: transparent; opacity: .55; }
.product-layout-top .product-modern .photo-viewer-thumbs img{ width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.product-layout-top .product-modern .photo-viewer-thumbs button[aria-current="true"]{ border-color: var(--y); opacity: 1; }
.product-layout-top .product-modern .photo-viewer button:hover{ opacity: 1; background-color: #ffffff25; }
.product-layout-top .product-modern .photo-viewer button:focus-visible{ outline: 3px solid var(--y); outline-offset: 2px; }
@media (max-width: 600px){.product-layout-top .product-modern .product-gallery.photo-viewer{ width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
.product-layout-top .product-modern .photo-viewer[open]{ grid-template-rows: 70px minmax(0, 1fr) calc(92px + env(safe-area-inset-bottom)); }
.product-layout-top .product-modern .photo-viewer-head{ padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.product-layout-top .product-modern .photo-viewer-stage{ margin: 0; }
.product-layout-top .product-modern .photo-viewer-prev,.product-layout-top .product-modern .photo-viewer-next{ width: 42px; height: 42px; }
.product-layout-top .product-modern .photo-viewer-prev{ left: 8px; }
.product-layout-top .product-modern .photo-viewer-next{ right: 8px; }
.product-layout-top .product-modern .photo-viewer-thumbs{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}