/**
 * WooCommerce-Produktgalerie (Standard-PDP + Konfigurator-PDP).
 */
.product-gallery{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

@media (min-width: 900px){
  .product-gallery{
    position: sticky;
    top: calc(var(--header-h, 76px) + var(--space-4));
    align-self: start;
  }
}

.product-gallery-main{
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8efff 0%, #dde3ee 100%);
  border-radius: var(--radius-lg, var(--radius-card, 6px));
  overflow: hidden;
  cursor: zoom-in;
}

.product-gallery-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at center 70%, rgb(180 130 80 / .12) 0%, transparent 60%);
}

.product-gallery-main::after{
  content: "";
  position: absolute;
  inset: auto 14% 16% 14%;
  height: 36%;
  background:
    linear-gradient(180deg,
      #fefefe 0%, #fefefe 30%,
      #e9eef5 30%, #e9eef5 65%,
      #c9a87a 65%, #b8966a 75%,
      #a08458 75%, #a08458 100%);
  border-radius: 8px 8px 4px 4px;
  filter: drop-shadow(0 12px 24px rgb(11 13 18 / .18));
}

.product-gallery-main:has(.product-gallery-main-img)::before,
.product-gallery-main:has(.product-gallery-main-img)::after{
  display: none;
}

.product-gallery-main .product-gallery-main-img{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;
  /* Die Box nimmt das Seitenverhältnis des jeweiligen Hauptbildes an (inline in
     gallery.php gesetzt). Daher füllt "cover" die Box ohne Letterbox — das
     Hauptbild wird nicht beschnitten (Box == sein Format), nachfolgende
     Galeriebilder werden auf dieses Format angepasst. Gilt für Standard- und
     Konfigurator-PDP. */
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

.product-gallery-zoom{
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgb(255 255 255 / .92);
  color: var(--color-text, var(--color-ink, #111));
  box-shadow: var(--shadow, var(--shadow-card));
  cursor: zoom-in;
  transition: transform .15s ease, background .15s ease;
}

.product-gallery-zoom:hover{
  background: #fff;
  transform: scale(1.06);
}

.product-gallery-zoom svg{
  width: 20px;
  height: 20px;
}

/* Lightbox */
.product-gallery-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(11 13 18 / .88);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.product-gallery-lightbox.is-open{
  opacity: 1;
  visibility: visible;
}

.product-gallery-lightbox__dialog{
  position: relative;
  width: min(96vw, 1200px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.product-gallery-lightbox__figure{
  position: relative;
  width: 100%;
  max-height: calc(92vh - 48px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery-lightbox__img{
  max-width: 100%;
  max-height: calc(92vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 24px 64px rgb(0 0 0 / .45);
}

.product-gallery-lightbox__close,
.product-gallery-lightbox__nav{
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgb(255 255 255 / .12);
  transition: background .15s ease, transform .15s ease;
}

.product-gallery-lightbox__close:hover,
.product-gallery-lightbox__nav:hover{
  background: rgb(255 255 255 / .22);
}

.product-gallery-lightbox__close{
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 2;
}

.product-gallery-lightbox__nav{
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.product-gallery-lightbox__nav.is-prev{ left: var(--space-3); }
.product-gallery-lightbox__nav.is-next{ right: var(--space-3); }
.product-gallery-lightbox__nav svg,
.product-gallery-lightbox__close svg{
  width: 22px;
  height: 22px;
}

.product-gallery-lightbox__counter{
  color: rgb(255 255 255 / .85);
  font-size: var(--fs-small, 14px);
  font-weight: 500;
}

body.is-gallery-lightbox-open{
  overflow: hidden;
}

.product-gallery-sale{
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
}

.product-gallery-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / .9);
  color: var(--color-text, var(--color-ink, #111));
  box-shadow: var(--shadow, var(--shadow-card));
  transition: all .15s ease;
  z-index: 2;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.product-gallery-nav:hover{
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.product-gallery-nav.is-prev{ left: var(--space-3); }
.product-gallery-nav.is-next{ right: var(--space-3); }
.product-gallery-nav svg{ width: 20px; height: 20px; }

.product-gallery-thumbs-wrap{
  --thumb-gap: var(--space-2);
  --thumbs-max: 8;
  --thumbs-shown: var(--thumbs-max);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--thumb-gap);
}

.product-gallery-thumbs-wrap.has-thumb-nav{
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}

/* display:grid auf .product-gallery-thumbs-nav würde sonst [hidden] aushebeln */
.product-gallery-thumbs-wrap:not(.has-thumb-nav) .product-gallery-thumbs-nav,
.product-gallery-thumbs-nav[hidden]{
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 899px){
  .product-gallery-thumbs-wrap{
    --thumbs-max: 4;
  }
}

.product-gallery-thumbs-viewport{
  container-type: inline-size;
  overflow: hidden;
  min-width: 0;
}

.product-gallery-thumbs-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--thumb-gap);
  transition: transform .25s ease;
  will-change: transform;
}

.product-gallery-thumbs-nav{
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: var(--color-stone, #eef1f6);
  color: var(--color-text, var(--color-ink, #111));
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.product-gallery-thumbs-nav:hover:not(:disabled){
  background: var(--color-line, #dde3ee);
  transform: scale(1.05);
}

.product-gallery-thumbs-nav:disabled{
  opacity: .35;
  cursor: default;
}

.product-gallery-thumbs-nav svg{
  width: 18px;
  height: 18px;
}

.product-gallery-thumb{
  --thumb-slot: calc(
    (100cqi - (var(--thumbs-shown) - 1) * var(--thumb-gap)) / var(--thumbs-shown)
  );
  position: relative;
  flex: 0 0 var(--thumb-slot-px, var(--thumb-slot));
  width: var(--thumb-slot-px, var(--thumb-slot));
  min-width: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: linear-gradient(135deg, #e8efff 0%, #dde3ee 100%);
  border: 2px solid transparent;
  border-radius: var(--radius-sm, var(--radius, 4px));
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  padding: 0;
}

.product-gallery-thumb:has(img)::after{
  display: none;
}

.product-gallery-thumb img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100% !important;
  max-width: 100%;
  /* contain statt cover: ganze Abbildung sichtbar — Label-/Zertifikatsbilder
     (z. B. OEKO-TEX, Stiftung Warentest) werden nicht mehr zu einem wirren
     Ausschnitt beschnitten. Weisser Grund + etwas Luft wirken sauber. */
  object-fit: contain;
  background: #fff;
  padding: 4px;
  display: block;
}

.product-gallery-thumb:hover{ transform: translateY(-2px); }

.product-gallery-thumb.is-active{
  border-color: var(--color-accent, var(--color-brand, #1e5baa));
}

/* Konfigurator: globales img{height:auto} in .product-hero */
.page-pdp-konfigurator .product-hero .product-gallery-main .product-gallery-main-img,
.page-pdp-konfigurator .product-hero .product-gallery-thumb img{
  height: 100% !important;
}

.page-pdp-konfigurator .product-hero__grid > *{
  min-width: 0;
}

.product-gallery-label{
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: 4px var(--space-3);
  background: var(--color-text, var(--color-ink, #111));
  color: #fff;
  border-radius: var(--radius-sm, var(--radius, 4px));
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  z-index: 2;
}

.product-gallery-thumb::after{
  content: "";
  position: absolute;
  inset: auto 14% 14% 14%;
  height: 40%;
  background: linear-gradient(180deg,
    #fefefe 0%, #fefefe 35%,
    #c9a87a 35%, #b8966a 65%,
    #a08458 65%, #a08458 100%);
  border-radius: 3px 3px 2px 2px;
}

.product-gallery-thumb[data-variant="2"]::after{
  height: 50%;
  background: linear-gradient(180deg,
    #fefefe 0%, #fefefe 40%,
    #e0e6ee 40%, #d0d6de 100%);
  inset: auto 18% 18% 18%;
}

.product-gallery-thumb[data-variant="3"]::after{
  height: 28%;
  background: linear-gradient(180deg, #fefefe 0%, #f0f3f8 100%);
  inset: auto 12% 32% 12%;
  border-radius: 2px;
}

.product-gallery-thumb[data-variant="4"]::after{
  height: 50%;
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 5px,
      rgb(11 13 18 / .08) 5px, rgb(11 13 18 / .08) 6px),
    linear-gradient(180deg, #fefefe 0%, #e0e6ee 100%);
  inset: auto 16% 20% 16%;
  border-radius: 4px;
}

.product-gallery-thumb[data-variant="5"]::after{
  height: 18%;
  background:
    repeating-linear-gradient(90deg,
      #b8966a 0, #b8966a 8px,
      #a08458 8px, #a08458 10px);
  inset: auto 12% 36% 12%;
  border-radius: 2px;
}

.product-gallery-thumb-badge{
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 1px 4px;
  background: var(--color-warning, #e6a817);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 2;
}