/* Rosaifa 4.14.11 — mobile PDP gallery flow stability.
   Prevents the product summary/title from entering the gallery while WooCommerce FlexSlider initializes or resizes. */

@media (max-width: 760px) {
  /* Make the gallery itself own the height of its visible media plane.
     FlexSlider can wrap the figure after page load; a column flex container
     keeps both the viewport and optional thumbnails in normal document flow. */
  .single-product div.product div.images.woocommerce-product-gallery {
    align-items: stretch;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
  }

  .single-product div.product div.images.woocommerce-product-gallery::after {
    display: none !important;
  }

  /* Reserve the final square media plane before and after FlexSlider init.
     This removes the intermittent layout jump caused by source-image ratios. */
  .single-product div.product div.images.woocommerce-product-gallery > .flex-viewport,
  .single-product div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .single-product div.product div.images.woocommerce-product-gallery > .flex-control-thumbs {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Product information must always start after the complete gallery block. */
  .single-product div.product .summary {
    clear: both !important;
    margin-top: 0 !important;
    position: static !important;
    z-index: auto !important;
  }
}