/* ==========================================================================
   PIUROPRINT product-card surface contract
   --------------------------------------------------------------------------
   Product cards may have different composition on catalog/search/404/related
   surfaces, but the neutral card fill is one site-wide design token.
   Page CSS must consume --pp-product-card-bg rather than inventing #fff/grey.
   Product media must show the entire image, independently of its proportions.
   ========================================================================== */

body.pp-body .pp-product-card.pp-product-card {
  background: var(--pp-product-card-bg);
}

/* Native WooCommerce loops (catalog, upsells, cross-sells, related fallbacks). */
body.pp-body ul.products li.product.pp-product-card.pp-product-card {
  background: var(--pp-product-card-bg);
}
body.pp-body ul.products li.product.pp-product-card.pp-product-card :where(
  .astra-shop-thumbnail-wrap,
  .woocommerce-loop-product__link
) {
  background-color: var(--pp-product-card-media-bg);
}
body.pp-body ul.products li.product.pp-product-card.pp-product-card .astra-shop-summary-wrap {
  background-color: transparent;
}

/* Custom product-card families use the same surface contract. */
body.pp-body .pp-product-card.pp-product-card :where(
  .pp-prod-card__img,
  .vz-search-card__visual,
  .pp-404-card__visual,
  .pp-raq-card__visual,
  .pp-order-upsell-card__image
) {
  background-color: var(--pp-product-card-media-bg);
}
body.pp-body .pp-product-card.pp-product-card :where(
  .pp-prod-card__body,
  .vz-search-product__body,
  .pp-404-card__body,
  .pp-raq-card__body
) {
  background-color: transparent;
}

/* Uniform card surfaces: products AND templates use #F4F5F7 throughout.
   Only structural surfaces are selected: buttons, badges, favourite controls
   and pixels baked into source images retain their own appearance. */
body.pp-body :is(
  .pp-tg .pp-tg-card,
  .pc-bt .pc-bt-card,
  .pp-template-card,
  .vz-template-card,
  .vz-search-template,
  .vz-product,
  .vz-category-card,
  .pp-ec-recent__item,
  .pp-cart-item
) {
  background: var(--pp-product-card-bg);
}
body.pp-body :is(
  .pp-tg .pp-tg-card__media,
  .pp-tg .pp-tg-card__preview-link,
  .pp-tg .pp-tg-card__content,
  .pp-tg .pp-tg-card__actions,
  .pc-bt .pc-bt-card__media,
  .pc-bt .pc-bt-card__body,
  .pp-kt .pp-templates__thumb,
  .pp-template-card__art,
  .pp-template-card__body,
  .vz-template-card__media,
  .vz-template-card__body,
  .vz-search-template .vz-search-card__visual,
  .vz-search-template__body,
  .vz-product__media,
  .vz-category-image,
  .vz-category-info,
  .pp-ec-recent__visual,
  .pp-cart-item__thumb,
  .pp-co-product__thumb,
  .pp-ma-order-product__image,
  .pp-ma-item__thumb,
  .pp-order-product__thumb,
  .pp-order-upsell-card__image
) {
  background: var(--pp-product-card-bg);
}
/* These template cards used to be dark: keep their title readable on grey. */
body.pp-body .pp-template-card {
  color: var(--pp-text);
}

/* Explicit frames decouple image intrinsic size from flex/grid sizing. An
   absolutely positioned image has a definite containing block even when the
   frame's height comes from aspect-ratio, and cannot enlarge or shrink it.
   Keep placeholders in normal flow and badges above the image. */
body.pp-body :is(
  .pp-prod-card__img,
  .vz-search-product .vz-search-card__visual,
  .pp-404-card__visual,
  .pp-raq-card__visual,
  .vz-product__media,
  .vz-category-image,
  .pp-ec-recent__visual,
  .pp-order-upsell-card__image,
  .pp-order-product__thumb,
  .pp-ma-item__thumb,
  .pp-ma-order-product__image,
  .pp-co-product__thumb,
  .pp-cart-item__thumb
) {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
}

body.pp-body :is(
  .pp-prod-card__img,
  .vz-search-product .vz-search-card__visual,
  .pp-404-card__visual,
  .pp-raq-card__visual,
  .vz-product__media,
  .vz-category-image,
  .pp-ec-recent__visual,
  .pp-order-upsell-card__image,
  .pp-order-product__thumb,
  .pp-ma-item__thumb,
  .pp-ma-order-product__image,
  .pp-co-product__thumb,
  .pp-cart-item__thumb
) img {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--pp-product-image-padding, 6px);
  object-fit: contain;
  object-position: center;
  transform: none;
}

body.pp-body :is(.pp-prod-card__img, .pp-raq-card__visual, .vz-product__media, .vz-category-image) {
  width: 100%;
  aspect-ratio: 4 / 3;
  --pp-product-image-padding: 12px;
}

/* Native Woo loops size the image itself, not the link (which can also hold
   title/price). Do not absolutely position it or alter the gallery slider. */
body.pp-body ul.products li.product.pp-product-card img.attachment-woocommerce_thumbnail,
body.pp-body ul.products li.product.pp-product-card img.woocommerce-placeholder,
body.pp-body ul.products li.product.pp-product-card .astra-shop-thumbnail-wrap img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  margin: 0;
  padding: 16px;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Template/design cards are product previews too. Keep these in the same
   no-crop policy, including when embedded inside a .vz-prose content page.
   Direct children only: gallery favourite/loading icons are not previews. */
body.pp-body :is(
  .pp-tg-card__media > .pp-tg-card__preview-link,
  .pp-kt .pp-templates__thumb,
  .vz-search-template__visual,
  .pp-template-card__art,
  .vz-template-card__media,
  .pc-bt-card__media
) {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
}
body.pp-body .pp-tg-card__media > .pp-tg-card__preview-link {
  position: absolute;
  inset: 0;
}
body.pp-body :is(
  .pp-tg-card__media > .pp-tg-card__preview-link,
  .pp-kt .pp-templates__thumb,
  .vz-search-template__visual,
  .pp-template-card__art,
  .vz-template-card__media,
  .pc-bt-card__media
) > img {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 6px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  transform: none;
}

/* Review product references have explicit small dimensions. Avatars, customer
   photos and decorative heroes are deliberately excluded. */
body.pp-body .pp-op-item__product img,
body.pp-body .iv-comment-product-img {
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  padding: 3px;
  border-radius: 4px;
}