/* Style-Galerie auf der Produktseite (includes/style-gallery.php) */

.kutten-style-gallery {
  width: 100%;
  box-sizing: border-box;
  /* wie der bisherige Bereich: bündig mit der Produktgalerie darüber */
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 600px) {
  .kutten-style-gallery {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.kutten-style-gallery > h2 {
  margin-bottom: 1rem;
}

.kutten-sg-scroller {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.kutten-sg-scroller:focus-visible {
  outline: var(--bwidth, 4px) solid var(--dark, #000);
  outline-offset: 2px;
}

.kutten-sg-track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
}

.kutten-sg-slide {
  flex: 0 0 min(320px, 78%);
  margin: 0;
  scroll-snap-align: start;
}

.kutten-sg-slide figure {
  margin: 0;
}

.kutten-sg-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--bwidth, 4px) solid var(--dark, #000);
  background: var(--dark, #000);
  cursor: zoom-in;
}

.kutten-sg-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kutten-sg-link:hover img,
.kutten-sg-link:focus-visible img {
  opacity: 0.7;
}

.kutten-sg-link:focus-visible {
  /* innen statt außen, damit der Fokusring am Slider-Rand nicht abgeschnitten wird */
  outline: var(--bwidth, 4px) solid var(--white, #fff);
  outline-offset: -0.5rem;
}

.kutten-sg-slide figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

.kutten-sg-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kutten-sg-controls[hidden] {
  display: none;
}

/* Höhere Spezifität nötig: globale Theme-Button-Styles setzen Buttons sonst auf weiß/weiß */
.kutten-style-gallery .kutten-sg-nav {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--bwidth, 4px) solid var(--dark, #000);
  border-radius: 0;
  background: var(--dark, #000);
  color: var(--white, #fff);
  font-family: sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.kutten-style-gallery .kutten-sg-nav:hover:not(:disabled),
.kutten-style-gallery .kutten-sg-nav:focus-visible {
  background: var(--white, #fff);
  color: var(--dark, #000);
}

.kutten-style-gallery .kutten-sg-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .kutten-sg-scroller {
    scroll-behavior: auto;
  }
}