/* Every selector belongs to the gallery or its own native dialog. */
.native-gallery {
  --native-gallery-ratio: 1 / 1;
  --native-gallery-fit: contain;
  --native-gallery-accent: #155b36;
  max-width: 100%;
  min-width: 0;
}
.native-gallery .native-gallery__viewport {
  display: flex;
  position: relative;
  width: 100%;
  aspect-ratio: var(--native-gallery-ratio);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: #fff;
  cursor: grab;
}
.native-gallery .native-gallery__viewport::-webkit-scrollbar { display: none; }
.native-gallery .native-gallery__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  user-select: none;
  -webkit-user-drag: none;
  color: inherit;
  text-decoration: none;
}
.native-gallery .native-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: var(--native-gallery-fit);
  user-select: none;
  -webkit-user-drag: none;
}
.native-gallery .native-gallery__viewport--dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}
.native-gallery .native-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .375rem 0;
}
.native-gallery [data-gallery-counter] { min-width: 5rem; text-align: center; }
.native-gallery [data-gallery-prev],
.native-gallery [data-gallery-next],
.native-gallery [data-gallery-thumb] {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #b6c0ba;
  border-radius: .375rem;
  padding: .375rem .75rem;
  background: #fff;
  color: #143721;
  font: inherit;
  cursor: pointer;
}
.native-gallery button:disabled { opacity: .4; cursor: default; }
.native-gallery .native-gallery__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: .25rem;
}
.native-gallery [data-gallery-thumb] { flex: 0 0 64px; height: 64px; padding: 3px; }
.native-gallery [data-gallery-thumb] img { display: block; width: 100%; height: 100%; object-fit: contain; }
.native-gallery [data-gallery-thumb][aria-current="true"] { border: 3px solid var(--native-gallery-accent); padding: 1px; }
.native-gallery :focus-visible { outline: 3px solid var(--native-gallery-accent); outline-offset: 2px; }
.native-gallery .native-gallery__slide:focus-visible { outline-offset: -4px; }
.native-gallery-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: contain;
  background: #121612;
  color: #fff;
}
.native-gallery-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .75rem; }
.native-gallery-dialog::backdrop { background: rgb(0 0 0 / .9); }
.native-gallery-dialog .native-gallery-dialog__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.native-gallery-dialog [data-zoom-counter] { margin-right: auto; }
.native-gallery-dialog [data-zoom-original] { color: #fff; text-decoration: underline; }
.native-gallery-dialog button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid #b8c4b9;
  border-radius: .375rem;
  background: #213426;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.native-gallery-dialog button:disabled { opacity: .35; cursor: default; }
.native-gallery-dialog :focus-visible { outline: 3px solid #b6f8c7; outline-offset: 2px; }
.native-gallery-dialog .native-gallery-dialog__stage { display: grid; position: relative; min-width: 0; min-height: 0; touch-action: pan-y pinch-zoom; }
.native-gallery-dialog .native-gallery-dialog__stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.native-gallery-dialog [data-zoom-prev],
.native-gallery-dialog [data-zoom-next] { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; }
.native-gallery-dialog [data-zoom-prev] { left: 0; }
.native-gallery-dialog [data-zoom-next] { right: 0; }
@media (prefers-reduced-motion: reduce) {
  .native-gallery .native-gallery__viewport,
  .native-gallery .native-gallery__thumbs { scroll-behavior: auto; }
}