/* Custom fixes for product and category pages */

/* --- Gallery improvements --- */
/* Remove grey background from gallery viewport and ensure images fill their frame. */
.gallery-viewport {
  background: #fff !important;
}

/* Use object-fit: cover so photos completely fill the gallery viewport without grey bars. */
.gallery-viewport img,
.gallery-slide img {
  object-fit: cover !important;
  background: #fff !important;
}

/* --- Desktop layout tweaks --- */
@media (min-width: 768px) {
  /* Float the product gallery to allow text to wrap around the image on desktop. */
  .prod-body-grid.with-photo {
    display: block !important;
  }
  .product-gallery {
    float: left;
    width: 320px;
    max-width: 320px;
    margin-right: 24px;
    margin-bottom: 16px;
  }
  .prod-text {
    overflow: visible;
  }
}

/* --- Mobile spacing tweaks --- */
@media (max-width: 760px) {
  /* Reduce gap between gallery and text on mobile */
  .prod-body-grid.with-photo {
    gap: 16px !important;
  }
  /* Reduce bottom margin under gallery on mobile */
  .product-gallery {
    margin-bottom: 12px !important;
  }
}

/* --- Breadcrumb and title alignment --- */
/* Stack breadcrumbs and page title vertically for better alignment. */
.page-top > .container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Ensure crumbs and headings align flush with the container's left edge */
.page-top .crumbs {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.page-top h1 {
  margin-left: 0 !important;
}