/* Bottle media uses the same white gallery as the release, with asset-specific photos. */
.asset-detail-page .release-gallery { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.asset-detail-page .release-visual { flex: 1; height: auto; min-height: 500px; touch-action: pan-y; }
.asset-detail-page.is-redesign .release-visual > .gallery-studio { width: 100%; height: 90%; max-width: 100%; max-height: 90%; bottom: 5%; }
.gallery-arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 3px; border: 1px solid var(--palette-line); border-radius: 50%; background: var(--palette-white); color: var(--ink); font: 400 30px/1 var(--font-body); cursor: pointer; }
.gallery-arrow.previous { left: 14px; }
.gallery-arrow.next { right: 14px; }
.gallery-arrow:hover { background: var(--yellow); ;color:var(--palette-on-yellow);}
.gallery-position { position: absolute; bottom: 25px; left: 20px; z-index: 3; color: var(--palette-body); font: 500 12px/1.4 var(--font-body); }
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px 2px 5px; }
.gallery-thumbnail { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 5px; min-height: 89px; border: 1px solid var(--palette-line); border-radius: var(--radius-surface, 14px); background: var(--palette-white); color: var(--palette-body); font: 500 11px/1.3 var(--font-body); cursor: pointer; }
.gallery-thumbnail > img { width: 56px; height: 56px; object-fit: contain; }
.gallery-thumbnail:hover { border-color: var(--palette-body); }
.gallery-thumbnail[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.gallery-thumbnail.is-spin { background: var(--palette-yellow); ;color:var(--palette-on-yellow);}
.gallery-thumbnail .spin-symbol { height: 56px; display: grid; place-items: center; font: 600 21px/1 var(--font-body); }
.gallery-spin-controls { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.gallery-spin-controls button { flex: 0 0 auto; min-height: 40px; min-width: 106px; padding: 9px 12px; border: 1px solid var(--palette-line); border-radius: var(--radius-surface, 14px); background: var(--palette-white); color: var(--ink); font: 600 12px/1.3 var(--font-body); cursor: pointer; }
.gallery-spin-controls button:hover { background: var(--yellow); ;color:var(--palette-on-yellow);}
.gallery-spin-controls button:disabled { opacity: .65; cursor: wait; }
.gallery-spin-controls input { flex: 1; width: 100%; min-width: 0; accent-color: var(--ink); cursor: ew-resize; }
.gallery-spin-controls > span { min-width: 30px; text-align: right; font: 500 12px/1.4 var(--font-body); color: var(--palette-body); font-variant-numeric: tabular-nums; }
.gallery-status { margin: 0; color: var(--palette-body); font: 400 12px/1.5 var(--font-body); }
.gallery-status:empty { display: none; }
[data-gallery-stage].is-spin { cursor: ew-resize; }
[data-gallery-stage]:focus-visible { outline: 2px solid var(--kelly-2); outline-offset: 4px; }
.asset-detail-page .asset-photo-dialog { width: min(900px, calc(100vw - 32px)); padding: 48px 24px 18px; }
.gallery-expanded-stage { position: relative; height: min(60dvh, 650px); background: var(--palette-white); border-radius: var(--radius-surface, 14px); touch-action: pan-y; }
.gallery-expanded-stage > img { width: 100%; height: 100%; object-fit: contain; }
.asset-photo-dialog .gallery-position { bottom: 12px; }
.asset-photo-dialog .gallery-thumbnails { justify-content: center; margin-top: 12px; }
.asset-photo-dialog .gallery-spin-controls { margin-top: 12px; }
.asset-photo-dialog .gallery-status { margin: 8px 0 0; }
.asset-photo-dialog [data-photo-caption] { margin: 10px 0 0; font-size: 12px; }
@media (max-width: 900px) {
  .asset-detail-page .release-visual { flex: none; min-height: 0; height: 400px; }
}
@media (max-width: 500px) {
  .asset-detail-page .release-visual { height: 330px; }
  .gallery-arrow { width: 34px; height: 34px; }
  .gallery-arrow.previous { left: 10px; }
  .gallery-arrow.next { right: 10px; }
  .gallery-position { bottom: 24px; left: 14px; }
  .gallery-thumbnail { flex-basis: 64px; min-height: 82px; font-size: 10px; }
  .gallery-thumbnail > img { width: 48px; height: 50px; }
  .gallery-thumbnail .spin-symbol { height: 50px; }
  .gallery-thumbnails { gap: 7px; }
  .asset-detail-page .asset-photo-dialog { padding: 48px 14px 16px; }
  .asset-photo-dialog .gallery-thumbnails { justify-content: flex-start; }
  .gallery-expanded-stage { height: 48dvh; }
}