/* Shared image navigation. Never impose dimensions or backgrounds on images. */
.bf-media-frame { position: relative; box-sizing: border-box; padding-inline: 3rem; }
.bf-media-touch { touch-action: pan-y pinch-zoom; }
.bf-media-transition-host { position: relative; }
.bf-media-arrow,
.artwork-viewer .bf-media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(110 110 110 / 12%);
  color: var(--wp--preset--color--ink, #111);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: background-color 160ms, opacity 160ms;
}
.bf-media-arrow--previous { left: .125rem; }
.bf-media-arrow--next { right: .125rem; }
.bf-media-arrow:hover,
.bf-media-arrow:focus-visible { opacity: 1; background: rgb(110 110 110 / 22%); }
.bf-media-dots,
.press-dialog__media-controls.bf-media-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .125rem;
  margin-block: .5rem;
  padding: 0;
}
.bf-media-dot,
.about-viewer__controls .bf-media-dot,
.press-dialog .bf-media-dot,
.artwork-viewer .bf-media-dot {
  position: static;
  inset: auto;
  transform: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--ink, #111);
  cursor: pointer;
}
.bf-media-dot::before {
  content: '';
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
}
.bf-media-dot[aria-pressed="true"]::before { opacity: 1; }
.bf-media-dot:hover::before { opacity: .65; }
.bf-media-arrow:focus-visible,
.bf-media-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bf-media-dots[hidden], .bf-media-arrow[hidden] { display: none !important; }
.bf-media-status,
.press-dialog__media-controls .bf-media-status {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.about-viewer__controls.bf-media-pagination { margin-block-start: .5rem; gap: 0; }
.about-viewer__controls .bf-media-dots { margin: 0; }
.bf-shop-gallery .bf-media-arrow { top: var(--bf-shop-gallery-center, 10rem); }
.bf-shop-gallery .flex-control-thumbs img.flex-active { outline: 1px solid rgb(17 17 17 / 45%); outline-offset: -1px; }
.artwork-viewer .bf-media-arrow { position: fixed; }
.artwork-viewer > .bf-media-dots {
  position: fixed;
  z-index: 3;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  margin: 0;
  border-radius: 1rem;
  background: var(--wp--preset--color--canvas, #f5f5f2);
}
@media (prefers-reduced-motion: reduce) {
  .bf-media-arrow { transition: none; }
}