/* Media uses its own box, independent of product copy height. No artwork cropping. */
.product-layout > .product-art{align-self:start;min-width:0;height:auto}
.product-art > img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.media-gallery{min-width:0}
.media-gallery-item{position:relative;display:block;background:var(--surface);cursor:zoom-in;overflow:hidden}
.media-gallery-item img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.media-gallery-items{display:grid;gap:16px}
[data-gallery-enhanced=true] > .media-gallery-items{display:none}
.media-gallery-stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;overflow:hidden;background:var(--surface);cursor:zoom-in;isolation:isolate}
.media-gallery-stage > img{width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;transform:none;filter:none}
.media-gallery-hint{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;min-height:38px;padding:9px 12px;border-radius:4px;background:var(--accent);color:var(--on-accent);font-size:11px;text-transform:uppercase;letter-spacing:.04em;box-shadow:none;transition:background .3s,color .22s}
.media-gallery-hint svg{width:16px;height:16px}
.media-gallery-stage:is(:hover,:focus-visible) .media-gallery-hint{background:#fff;color:#101010}
.media-gallery-toolbar{display:flex;align-items:center;gap:28px;min-width:0;min-height:44px;margin:18px 0}
.media-gallery-position{min-width:76px;text-align:center;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.media-gallery-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.media-gallery-arrow{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:none}
.media-gallery-arrow svg{width:20px;height:20px}
.media-gallery-progress{flex:1;min-width:24px;height:2px;overflow:hidden;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.media-gallery-progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width 200ms ease}
.media-gallery-thumbnails{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px;margin:-4px;scrollbar-width:thin}
.media-gallery-thumb{position:relative;flex:0 0 76px;width:76px;height:76px;padding:3px;background:var(--surface);border:1px solid transparent;opacity:.6;transition:opacity .2s,border-color .2s}
.media-gallery-thumb img{width:100%;height:100%;object-fit:contain}
.media-gallery-thumb:hover,.media-gallery-thumb[aria-pressed=true]{opacity:1}
.media-gallery-thumb[aria-pressed=true]{border-color:var(--fg)}
.media-gallery-video-badge{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;background:#101010d9;color:#fff;border-radius:50%;pointer-events:none}
.media-gallery-video-badge svg{width:13px;height:13px;fill:currentColor}
.media-gallery-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:80px;background:radial-gradient(ellipse at 50% 50%,#ffffff09,transparent 70%),var(--surface);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.media-gallery.gallery-grid{align-items:start}
.media-gallery.gallery-grid a img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none}
.media-gallery.gallery-grid a{border-radius:2px}
.media-gallery.gallery-grid a:hover{box-shadow:0 10px 30px #0005}

/* Use the full column width without shrinking artwork into a shorter stage.
   Pin only galleries that fit between the header and player; larger galleries
   scroll normally so all artwork and controls remain reachable. */
@media(min-width:761px) and (min-height:640px){
  body:not([data-product-gallery=grid]) .product-layout > .product-art[data-gallery-layout=thumbnails][data-gallery-enhanced=true][data-gallery-sticky=true]{
    position:sticky;top:calc(var(--header-height,88px) + 20px);
  }
}
/* Native dialog top layer places the viewer above the radio and navigation. */
dialog.media-lightbox,body[data-surface=frosted] dialog.media-lightbox{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--fg);backdrop-filter:none;-webkit-backdrop-filter:none;outline:none}
.media-lightbox::backdrop,body[data-surface=frosted] .media-lightbox::backdrop{background:#090909ee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity 240ms ease}
.media-lightbox[data-state=open]::backdrop,body[data-surface=frosted] .media-lightbox[data-state=open]::backdrop{opacity:1}
.media-lightbox-shell{height:100%;display:flex;flex-direction:column;gap:12px;padding:20px 30px 22px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.media-lightbox[data-state=open] .media-lightbox-shell{opacity:1;transform:none}
.media-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;pointer-events:auto}
.media-lightbox-title{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.media-lightbox-close,.media-lightbox-prev,.media-lightbox-next{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:none;pointer-events:auto}
.media-lightbox-close svg,.media-lightbox-prev svg,.media-lightbox-next svg{width:20px;height:20px}
.media-lightbox-view{display:flex;align-items:center;gap:20px;flex:1;min-height:0;pointer-events:auto}
.media-lightbox-content{min-width:0;min-height:0;flex:1;height:100%;position:relative}
.media-lightbox-frame{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.media-lightbox-frame > img,.media-lightbox-frame > video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 12px 60px #0005}
.media-lightbox-frame > iframe{width:min(100%,1200px);height:100%;max-height:100%;aspect-ratio:16/9;border:0;background:#000}
.media-lightbox-frame > video{width:100%;height:auto}
.media-lightbox-load-video{position:absolute;display:grid;place-items:center;width:70px;height:70px;background:var(--accent);color:var(--on-accent);border-radius:50%;box-shadow:0 6px 35px #0008}
.media-lightbox-load-video svg{width:24px;height:24px;fill:currentColor}
.media-lightbox-error{max-width:320px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}
.media-lightbox-footer{display:flex;align-items:center;justify-content:center;gap:20px;flex-shrink:0;min-height:32px;pointer-events:auto}
.media-lightbox-caption{font-size:12px;line-height:1.5;max-width:60%;overflow-wrap:anywhere}
.media-lightbox-count{white-space:nowrap;font-size:10px;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.media-lightbox-original{display:flex;align-items:center;gap:8px;min-height:44px;font-size:10px;color:var(--muted);white-space:nowrap}
.media-lightbox-original:hover{color:var(--fg)}
.media-lightbox-original svg{width:13px;height:13px}
.media-lightbox-thumbnails{display:flex;justify-content:flex-start;align-self:center;gap:8px;max-width:100%;overflow-x:auto;flex-shrink:0;padding:4px;pointer-events:auto;scrollbar-width:thin}
.media-lightbox-thumbnails button{position:relative;flex:0 0 54px;width:54px;height:54px;padding:3px;background:#ffffff08;border:1px solid transparent;opacity:.5;transition:opacity .2s,border-color .2s}
.media-lightbox-thumbnails button img{width:100%;height:100%;object-fit:contain}
.media-lightbox-thumbnails button[aria-pressed=true],.media-lightbox-thumbnails button:hover{opacity:1}
.media-lightbox-thumbnails button[aria-pressed=true]{border-color:var(--fg)}
.media-lightbox-thumbnails .media-gallery-placeholder{min-height:0;font-size:7px}
@media(max-width:760px){
  .media-gallery-toolbar{gap:18px;margin:16px 0}
  .media-gallery-controls{gap:8px}
  .media-gallery-position{min-width:66px;font-size:12px}
  .media-gallery-hint{right:10px;bottom:10px;font-size:8px}
  .media-gallery-thumb{flex-basis:64px;width:64px;height:64px}
  .media-lightbox-shell{gap:8px;padding:12px 12px max(14px,env(safe-area-inset-bottom));padding-top:max(12px,env(safe-area-inset-top))}
  .media-lightbox-title{font-size:9px;line-height:1.5}
  .media-lightbox-view{position:relative;gap:0}
  .media-lightbox-prev,.media-lightbox-next{position:absolute;bottom:8px;z-index:2}
  .media-lightbox-prev{left:8px}.media-lightbox-next{right:8px}
  .media-lightbox-footer{flex-wrap:wrap;gap:0 14px}
  .media-lightbox-caption{max-width:none;width:100%;text-align:center;font-size:11px}
  .media-lightbox-original{font-size:9px}
}
@media(max-height:500px){.media-lightbox-shell{gap:2px;padding-top:6px;padding-bottom:6px}.media-lightbox-thumbnails{display:none}.media-lightbox-caption{width:auto;max-width:60%}.media-lightbox-footer{flex-wrap:nowrap}.media-lightbox-title{font-size:9px}}
[data-motion=reduced] .media-lightbox-shell,[data-motion=reduced] .media-lightbox::backdrop,[data-motion=reduced] .media-gallery *{transition:none}
@media(prefers-reduced-motion:reduce){.media-lightbox-shell,.media-lightbox::backdrop,.media-gallery *{transition:none}}
@media(prefers-reduced-transparency:reduce){.media-lightbox::backdrop{background:#101010;backdrop-filter:none}}
@media(forced-colors:active){.media-gallery-thumb[aria-pressed=true],.media-lightbox-thumbnails button[aria-pressed=true]{border:2px solid Highlight}.media-lightbox::backdrop{background:Canvas}.media-lightbox-close,.media-lightbox-prev,.media-lightbox-next{border:1px solid ButtonText}}

/* The playground can switch product presentation without changing its content. */
[data-product-gallery=grid] [data-gallery-enhanced=true] > .media-gallery-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}
[data-product-gallery=grid] [data-gallery-enhanced=true] > .media-gallery-items > :first-child{grid-column:1 / -1}
[data-product-gallery=grid] [data-gallery-enhanced=true] > .media-gallery-stage,
[data-product-gallery=grid] [data-gallery-enhanced=true] > .media-gallery-toolbar,
[data-product-gallery=grid] [data-gallery-enhanced=true] > .media-gallery-thumbnails{display:none}

.media-lightbox-content[data-media-kind=image]{touch-action:pan-y pinch-zoom}
.media-gallery-video-badge > span{display:none}
body[data-surface=frosted][data-motion=reduced] .media-lightbox::backdrop{transition:none}
@media(prefers-reduced-motion:reduce){body[data-surface=frosted] .media-lightbox::backdrop{transition:none}}
@media(prefers-reduced-transparency:reduce){body[data-surface=frosted] .media-lightbox::backdrop{background:#101010;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){body[data-surface=frosted] .media-lightbox::backdrop{background:Canvas;backdrop-filter:none;-webkit-backdrop-filter:none}}