/* Independent responsive layout patch — 2026-09-06 / 2026-09-07 P1
   Load after theme CSS via footer.htm and homepage link (do not edit theme CSS).
*/

/* 1) Product body images on narrow viewports */
@media (max-width: 900px) {
  .product-detail-page .product-description-content img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .product-detail-page .product-description-content img[src*="field-batch"] {
    aspect-ratio: 4 / 3;
    background: #f2f6f8;
  }
}

/* 2) Footer 375 overflow (~9px): brand 340px lock
   Covers site-footer (footer.htm) and homepage inline footer. */
@media (max-width: 600px) {
  .site-footer .wrap.footer-grid,
  .home-site-footer .wrap.footer-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .site-footer .footer-grid > *,
  .home-site-footer .footer-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .site-footer .footer-brand,
  .site-footer .footer-brand p,
  .site-footer .footer-logo,
  .site-footer .footer-logo .words,
  .home-site-footer .footer-brand,
  .home-site-footer .footer-brand p,
  .home-site-footer .footer-logo,
  .home-site-footer .footer-logo .words {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* 3) Product list hero @ ≤900: industry-unified forces height:518px + object-fit:fill
   → stretch/distort on 375/768. Restore natural 1920×518 box; cover without stretch.
   Desktop (≥901) keeps existing 518px rules. */
@media (max-width: 900px) {
  .product-list-page .product-center-hero.site-page-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1920 / 518 !important;
  }
  .product-list-page .product-center-hero .page-hero-photo {
    object-fit: cover !important;
    object-position: center center !important;
  }
}