/* =========================================================
   Metta Pic v40 — mobile scroll + cards + story full width
   ========================================================= */

/* --- Mobile vertical scroll fix --- */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.mp-home,
body.woocommerce,
body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat {
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
}
#main-content,
.site-main,
main {
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
/* don't trap scroll on shop */
body.woocommerce-shop #main-content,
body.post-type-archive-product #main-content,
body.tax-product_cat #main-content {
  overflow: visible !important;
}
/* space for fixed bottom nav on mobile */
@media (max-width: 900px) {
  body {
    padding-bottom: 84px !important;
  }
  .mp-hero.mp-hero-lancer,
  body.mp-home .mp-hero {
    max-height: none !important;
    /* allow page to scroll past hero */
  }
}

/* --- Product card images: horizontal, centered --- */
body.mp-home .mp-products .product-media,
body.mp-home .mp-products .mp-product-media,
.mp-products-grid .mp-product-media,
.mp-product-card .mp-product-media {
  height: 300px;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 14px !important;
}
.mp-product-card .mp-product-media > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
.mp-product-card .mp-card-media,
.mp-product-card .thumb,
.mp-product-card a > img,
.mp-product-card .mp-product-media img,
.products .product img,
ul.products li.product img,
.mp-products-grid .mp-product-card img {
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  width: 71% !important;
  height: auto !important;
  max-height: 100% !important;
}
.mp-product-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.mp-product-card .mp-wishlist {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* --- Product story FULL WIDTH one column --- */
.single-product .summary .mp-product-story,
.single-product .entry-summary .mp-product-story {
  /* if stuck inside summary, force full bleed relative to container */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  padding-left: max(20px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(20px, calc((100vw - 1180px) / 2)) !important;
}
.mp-product-story-full,
section.mp-product-story {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 32px 0 !important;
  padding: 28px 24px !important;
  background: #fafafa !important;
  border-radius: 18px !important;
  border: 1px solid #eee !important;
  box-sizing: border-box !important;
}
.mp-product-story-full h2,
.mp-product-story h2 {
  margin: 8px 0 12px !important;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
}
.mp-product-story-full > p,
.mp-product-story > p {
  max-width: 72ch !important;
  line-height: 1.9 !important;
  color: #444 !important;
}
.mp-story-points {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 20px !important;
  width: 100% !important;
}
.mp-story-points > div {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid #eee !important;
}
@media (max-width: 640px) {
  .mp-story-points {
    grid-template-columns: 1fr !important;
  }
}

/* --- Category page banner --- */
.mp-cat-page-banner {
  line-height: 0 !important;
  background: #f5f5f5 !important;
  width: 100% !important;
}
.mp-cat-page-banner img {
  width: 100% !important;
  height: auto !important;
  max-height: min(48vh, 480px) !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Shop grid mobile 2-col */
@media (max-width: 980px) {
  .mp-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body.mp-home .mp-products .product-media,
  body.mp-home .mp-products .mp-product-media,
  .mp-product-card .mp-product-media {
    height: 200px !important;
  }
}

.mp-story-breakout {
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  float: none !important;
  display: block !important;
  margin: 0 0 24px !important;
}
.mp-story-breakout > .container {
  width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}
/* Woo summary should not constrain later sections */
.single-product div.product {
  display: block !important;
}
.single-product .summary {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 901px) {
  .single-product .mp-single-layout,
  .single-product .product-detail-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
}

/* ===== v13.7 product card media ===== */
.mp-product-card .mp-product-media,
.mp-products-grid .mp-product-media,
body.mp-home .mp-products .mp-product-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f5f5f5 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.mp-product-card .mp-product-media > a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mp-product-card .mp-product-media img,
.mp-products-grid .mp-product-card img,
body.mp-home .mp-products .mp-product-media img {
  width: 88% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Home popular works force 2 columns */
body.mp-home .mp-products .mp-products-grid,
.mp-section.mp-products .mp-products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
@media (max-width: 900px) {
  .mp-product-card .mp-product-media img,
  .mp-products-grid .mp-product-card img,
  body.mp-home .mp-products .mp-product-media img {
    width: 100% !important;
    object-fit: cover !important;
  }
  .mp-product-card .mp-product-media,
  .mp-products-grid .mp-product-media {
    aspect-ratio: 1 / 1 !important;
  }
  body.mp-home .mp-products .mp-products-grid,
  .mp-section.mp-products .mp-products-grid,
  .mp-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (min-width: 1100px) {
  .mp-product-card .mp-product-media img {
    width: 78% !important;
  }
}