.flow-gallery {
  margin-block: 2rem;
  display: none;
}

.flow-gallery-swiper {
  position: relative;
  overflow: hidden;
  padding-bottom: 2rem; /* room for pagination */
}

.flow-gallery .swiper-wrapper {
  display: flex;
}

.flow-gallery .swiper-slide {
  width: auto;
  flex-shrink: 0;
  text-align: center;
  position: relative;
}

.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0.5rem;
  max-width: 300px;
  margin-inline: auto;
  transition: transform 0.2s ease;
}
.gallery-thumb:hover,
.gallery-thumb:focus {
  transform: scale(1.02);
}

.flow-gallery-controls {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0.5rem auto 1rem;
  width: 100%;
  max-width: var(--content-max, 1200px);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  pointer-events: auto;
}

.flow-gallery-controls-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.flow-gallery-controls .swiper-button-prev,
.flow-gallery-controls .swiper-button-next {
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  color: var(--border-color);
  font-size: 1.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.flow-gallery-controls .swiper-button-prev:hover,
.flow-gallery-controls .swiper-button-next:hover {
  background-color: var(--theme-color);
  color: var(--white);
}

.flow-gallery-controls .swiper-button-prev:focus-visible,
.flow-gallery-controls .swiper-button-next:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.flow-gallery-controls .swiper-button-next::after,
.flow-gallery-controls .swiper-button-prev::after {
  display: none !important;
}

.flow-gallery-controls .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  position: static !important;
  transform: none !important;
  text-align: center;
  z-index: auto !important;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.flow-gallery-controls .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--grey);
  opacity: 0.5;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.flow-gallery-controls .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--border-color);
}

/* Shared base button style */
.glightbox-clean .gbtn {
  background-color: transparent;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  outline: 2px solid #fff;
}

/* Positioning (these are already good, just override coloring) */
.glightbox-clean .gbtn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: white;
}

/* Optional hover/focus state for arrows */
.glightbox-clean .gbtn:hover,
.glightbox-clean .gbtn:focus-visible {
  background-color: var(--pink);
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.glightbox-clean .gbtn:focus:not(:focus-visible) {
  outline: none;
}

.glightbox-clean .gdesc-inner {
  display: none !important;
}

/* 1. Turn off the default (clipped) outline on the link */
.flow-gallery .swiper-slide .flow-gallery-lightbox:focus-visible {
  outline: none;
}

/* 2. When anything inside the slide is focused, show a visible “inside” focus ring */
.flow-gallery .swiper-slide:focus-within::after {
  content: "";
  position: absolute;
  inset: 1px 4px 1px 4px; /* inside the slide, away from the overflow edge */
  border: 3px solid var(--focus-color, #ff00aa); /* use your real focus colour */
  border-radius: inherit; /* matches your existing rounded corners */
  pointer-events: none;
  border-radius: 0.5rem;
}

@media (min-width: 64rem) {
  .flow-gallery {
    display: block;
  }
}