/* Product photography and the shared image/video viewer. */
.product-gallery-stage { position:relative; }
.product-main-media { position:relative; touch-action:pan-y pinch-zoom; }
.product-main-media:not([href]) { cursor:default; }
.product-main-media .media > img { object-fit:contain; }
.gallery-open-label { position:absolute; inset-inline-end:12px; inset-block-end:12px; display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px); padding:9px 12px; background:#242020e8; color:#fffdf9; font-size:12px; line-height:1.5; pointer-events:none; }
.gallery-open-label .icon { width:16px; height:16px; }
.gallery-open-label [data-product-gallery-position] { font-variant-numeric:tabular-nums; }
.gallery-arrow.icon-button { width:44px; height:44px; background:#242020e8; color:#fffdf9; border:1px solid #ffffff60; }
.gallery-arrow:hover { background:#4a4141; }
.gallery-previous .icon { transform:rotate(90deg); }
.gallery-next .icon { transform:rotate(-90deg); }
[dir=rtl] .gallery-previous .icon { transform:rotate(-90deg); }
[dir=rtl] .gallery-next .icon { transform:rotate(90deg); }
.product-gallery-stage > .gallery-arrow { position:absolute; top:calc(50% - 22px); }
.product-gallery-stage > .gallery-previous { inset-inline-start:10px; }
.product-gallery-stage > .gallery-next { inset-inline-end:10px; }
.gallery-thumbnails { gap:10px; padding:13px 5px 8px; scroll-padding-inline:6px; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.gallery-thumbnails > a,.gallery-thumbnails > button { display:block; min-width:0; flex:0 0 70px; padding:2px; border:2px solid transparent; opacity:.7; outline-offset:1px; transition:opacity .15s,border-color .15s; }
.gallery-thumbnails > [aria-current=true],.gallery-thumbnails > button[aria-pressed=true] { border:2px solid var(--brand); opacity:1; }
.gallery-thumbnails > a:hover,.gallery-thumbnails > button:hover { opacity:1; }
.gallery-thumbnails .media { aspect-ratio:3/4; }
.gallery-help { font-size:13px; }

.media-dialog { width:min(1200px,calc(100vw - 48px)); height:min(960px,calc(100dvh - 48px)); max-width:none; max-height:none; padding:16px 20px; overflow:hidden; background:#242020; color:#fffdf9; border:0; box-shadow:none; }
.media-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:16px; }
.media-dialog::backdrop { background:#151112d9; backdrop-filter:blur(4px); }
.media-toolbar { display:flex; align-items:center; gap:16px; min-width:0; }
.media-title { flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:15px; line-height:1.5; }
.media-position { flex:none; font-size:14px; font-variant-numeric:tabular-nums; }
.media-close.icon-button { position:static; width:44px; height:44px; color:#fffdf9; border:1px solid #ffffff60; }
.media-close:hover { background:#ffffff20; }
.media-stage { min-height:0; min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:16px; }
.media-stage > .gallery-arrow { grid-row:1; }
.media-stage > .gallery-previous { grid-column:1; }
.media-stage > .gallery-next { grid-column:3; }
#media-dialog-content { grid-column:2; grid-row:1; width:100%; height:100%; min-height:0; min-width:0; position:relative; touch-action:pan-y pinch-zoom; }
#media-dialog-content img,#media-dialog-content video { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
#media-dialog-content iframe { width:100%; height:100%; max-height:100%; min-height:0; border:0; aspect-ratio:16/9; }
#media-dialog-content p { color:#fffdf9; padding:16px; font-size:14px; line-height:1.7; }
.media-error { max-width:40ch; text-align:center; }
.media-error .button { margin-top:8px; }
.media-loading { position:absolute; inset:0; display:grid; place-items:center; }
.media-thumbnails { width:100%; max-width:100%; margin:0; padding-block:4px; min-height:0; }
.media-thumbnails > button { flex-basis:54px; border-color:transparent; }
.media-thumbnails > button:first-child { margin-inline-start:auto; }
.media-thumbnails > button:last-child { margin-inline-end:auto; }
.media-thumbnails > button[aria-pressed=true] { border-color:#fffdf9; }
.media-thumbnails .media-placeholder { font-size:0; padding:4px; gap:0; }
.media-thumbnails .media-placeholder .icon { width:24px; height:24px; }
.media-dialog :focus-visible,.product-gallery-stage .gallery-arrow:focus-visible { outline:3px solid #fffdf9; outline-offset:3px; }
.media-dialog.is-embedded-video .media-stage { display:block; }
.media-dialog.is-embedded-video #media-dialog-content { height:100%; }

@media(max-width:620px) {
    .gallery-thumbnails > a { flex-basis:60px; }
    .gallery-help { margin-top:6px; }
    .product-enquiry { position:static; box-shadow:none; }
    .media-dialog { width:100%; height:100dvh; margin:0; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
    .media-dialog[open] { gap:12px; }
    .media-toolbar { gap:10px; }
    .media-title { font-size:14px; }
    .media-stage { gap:0; }
    #media-dialog-content { grid-column:1 / -1; }
    .media-stage > .gallery-arrow { z-index:1; }
    .media-thumbnails > button { flex-basis:50px; }
}
@media(max-height:500px) {
    .media-dialog { height:100dvh; max-height:100dvh; margin-block:0; padding-block:6px; }
    .media-dialog[open] { gap:6px; }
    .media-thumbnails > button { flex-basis:44px; }
    .media-thumbnails .media { aspect-ratio:1; }
}
@media(prefers-reduced-motion:reduce) {
    .gallery-thumbnails > a,.gallery-thumbnails > button { transition:none; }
}