/* Rosaifa 4.14.4 — mobile PDP gallery flow hotfix. */

@media (max-width: 760px) {
  /* Breadcrumb consumed valuable space and amplified the gallery offset. */
  .single-product .woocommerce-breadcrumb { display: none !important; }
  .single-product .rf-woocommerce-main { padding-top: 16px !important; }
  .single-product div.product { margin-top: 0 !important; }

  /*
   * FlexSlider calculates its viewport from the source image ratio. The prior
   * mobile rule then made the image square, so the image could become taller
   * than that calculated viewport and the summary entered the same visual row.
   * Give the viewport/slide the square plane instead; the image only fills it.
   */
  .single-product div.product div.images {
    clear: both;
    display: block !important;
    min-height: 0;
    overflow: visible;
  }
  .single-product div.product div.images::after {
    clear: both;
    content: "";
    display: table;
  }
  .single-product .woocommerce-product-gallery > .flex-viewport,
  .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100%;
  }
  .single-product .woocommerce-product-gallery > .flex-viewport {
    background: linear-gradient(145deg, #fbf7f2, #f3e8dd);
    border: 1px solid rgba(67, 43, 29, .13);
    border-radius: 20px;
    box-shadow: 0 18px 54px rgba(55, 33, 20, .06);
  }
  .single-product .woocommerce-product-gallery > .flex-viewport > .woocommerce-product-gallery__wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .single-product .woocommerce-product-gallery__image,
  .single-product .woocommerce-product-gallery__image > a {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
  }
  .single-product .woocommerce-product-gallery__image img {
    aspect-ratio: auto !important;
    box-sizing: border-box;
    display: block;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    width: 100% !important;
  }
  .single-product div.product .summary {
    clear: both;
    margin-top: 0 !important;
    position: static !important;
  }
}