/* ==========================================================
   BT Single Product Gallery Sticky

   Zweck:
   - Galerie und Summary innerhalb eines gemeinsamen Wrappers anordnen
   - Galerie auf Desktop sticky führen
   - Sticky-Bereich nach der Summary beenden
   - Galeriehinweis direkt unter dem Produktbild darstellen

   Owner:
   - inc/feature-woo-single-product-gallery-sticky.php

   Scope:
   - Nur Produktseiten mit aktivem Feature
     woo_sticky_product_gallery
   ========================================================== */


/* ==========================================================
   Desktop: Galerie und Summary nebeneinander
   ========================================================== */

@media (min-width: 701px) {
  :root {
    --bt-product-gallery-sticky-top: 152px;
    --bt-product-gallery-width: 38%;
  }

  body.single-product .bt-product-top-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 32px;
  }

  body.single-product .bt-product-top-wrap .bt-product-gallery-stack {
    flex: 0 0 var(--bt-product-gallery-width);
    max-width: var(--bt-product-gallery-width);
    align-self: flex-start !important;

    position: sticky !important;
    top: var(--bt-product-gallery-sticky-top) !important;
  }

  body.single-product
    .bt-product-top-wrap
    .bt-product-gallery-stack
    .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-bottom: 8px;
  }

  body.single-product .bt-product-top-wrap .summary.entry-summary {
    flex: 1 1 0;
    max-width: none;
    margin-bottom: 0;
  }
}


/* ==========================================================
   Galerie-Stack

   Der Hinweis darf eine eigene Fläche besitzen.
   Produktbild und Galerie bleiben optisch neutral.
   ========================================================== */

body.single-product .bt-product-gallery-stack {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body.single-product .bt-product-gallery-stack .woocommerce-product-gallery,
body.single-product
  .bt-product-gallery-stack
  .woocommerce-product-gallery__wrapper,
body.single-product
  .bt-product-gallery-stack
  .woocommerce-product-gallery__image,
body.single-product
  .bt-product-gallery-stack
  .woocommerce-product-gallery__image
  a,
body.single-product
  .bt-product-gallery-stack
  .woocommerce-product-gallery__image
  img {
  background: #fff !important;
}

body.single-product .bt-product-gallery-stack .woocommerce-product-gallery {
  padding: 0 !important;
  border-radius: 0 !important;
}

body.single-product
  .bt-product-gallery-stack
  .woocommerce-product-gallery__wrapper {
  margin-bottom: 0 !important;
}


/* ==========================================================
   Hinweis unter der Produktgalerie
   ========================================================== */

.bt-product-gallery-note {
  display: block;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #666;
  background-color: var(--base-2);
}

.bt-product-gallery-note__label {
  font-weight: 600;
  color: #444;
}


/* ==========================================================
   Mobile und Tablet: Galerie und Summary untereinander
   ========================================================== */

@media (max-width: 700px) {
  body.single-product .bt-product-top-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Galerie vollständig auf verfügbare Breite setzen */
  .woocommerce #content div.product div.images,
  .woocommerce div.product div.images,
  .woocommerce-page #content div.product div.images,
  .woocommerce-page div.product div.images,
  body.single-product .bt-product-top-wrap .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Summary ebenfalls vollständig auf verfügbare Breite setzen */
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: 100% !important;
    max-width: 100% !important;
  }
}