/*
 * ZUVA Hakoura Universal 10.12.2 — website product image presentation refinement.
 * Presentation only. No WooCommerce, ordering, pricing, add-on, cart, API or PWA logic.
 *
 * Goals:
 * 1) Catalogue: keep the full product image visible, but visually lift it within the
 *    existing image area so transparent/cream product artwork does not sit too low.
 * 2) Single product: reduce the rendered image size and add breathing room so the
 *    product is fully visible and professionally framed instead of oversized.
 */

/* -------------------------------------------------------------------------
   WEBSITE CATALOGUE / MENU CARDS
   Keep existing card and image-area dimensions. The image itself is not cropped or
   zoomed; it is simply positioned a little higher inside the existing viewport.
   ------------------------------------------------------------------------- */
html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
:is(.wc-block-components-product-image,.wp-block-woocommerce-product-image),
html:not(.zuva-pwa-standalone) body.zuva-universal-theme .zuva-universal-shop
:is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) {
  background: #eee4d5 !important;
}

html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
:is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
html:not(.zuva-pwa-standalone) body.zuva-universal-theme .zuva-universal-shop
:is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
ul.products li.product a img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateY(-10px) !important;
  transform-origin: center center !important;
}

/* Do not allow card hover rules to reintroduce zoom/crop. */
html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
.wc-block-product:hover :is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
html:not(.zuva-pwa-standalone) body.zuva-universal-theme .zuva-universal-shop
.wc-block-product:hover :is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
ul.products li.product:hover a img {
  transform: translateY(-10px) !important;
}

/* -------------------------------------------------------------------------
   WEBSITE SINGLE PRODUCT
   Keep the two-column layout unchanged. Only introduce an inner visual frame and
   reduce the product artwork so it no longer dominates/crops the left panel.
   ------------------------------------------------------------------------- */
html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(20px, 2.6vw, 36px) !important;
}

html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-image {
  width: min(88%, 560px) !important;
  height: auto !important;
  max-width: 560px !important;
  max-height: 620px !important;
  min-height: 0 !important;
  margin: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
  transform: none !important;
}

/* Tablet website: retain breathing room without making the product too small. */
@media (max-width: 960px) {
  html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-media {
    padding: 20px !important;
  }

  html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-image {
    width: min(92%, 620px) !important;
    max-width: 620px !important;
    max-height: none !important;
  }
}

/* Public mobile website only. The installed PWA keeps its own image treatment. */
@media (max-width: 782px) {
  html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
  :is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
  html:not(.zuva-pwa-standalone) body.zuva-universal-theme .zuva-universal-shop
  :is(.wc-block-components-product-image,.wp-block-woocommerce-product-image) img,
  html:not(.zuva-pwa-standalone) body.zuva-universal-theme:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag)
  ul.products li.product a img {
    transform: translateY(-6px) !important;
  }

  html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-media {
    padding: 14px !important;
  }

  html:not(.zuva-pwa-standalone) body.single-product.zuva-universal-theme .zuva-runtime-product-image {
    width: 94% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
}