/* Some João Pessoa catalog mockups are PNGs with a white studio background
   baked into the file. Blend only those card images into the store surface so
   they share the same visual language as the newer studio mockups. */
.product-card-media {
  isolation: isolate;
  background-color: #d8c9b3 !important;
  background-image: url('../img/ui/product-studio-backdrop-v1.png') !important;
  background-size: cover;
  background-position: center;
}

.product-card-media img[src*="/products/joao-pessoa/studio/"] {
  mix-blend-mode: multiply;
  filter: saturate(.98) contrast(1.02);
}

.product-card-media img[src*="/products/fortaleza/studio/"] {
  mix-blend-mode: multiply;
  filter: saturate(.98) contrast(1.02);
}

.product-card-media img[src*="/products/porto/studio/"] {
  mix-blend-mode: multiply !important;
  filter: sepia(.22) saturate(1.08) brightness(.94) contrast(1.04) !important;
}

.product-card-media img[src$=".png"]:not([src*="cutout-v1"]) {
  mix-blend-mode: multiply;
}

.product-card-media img[src*="cutout-v1"] {
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Keep the square magnet comfortably inside the shared studio composition. */
.product-card-media:has(img[src*="ima-quadrado-cutout-v1"]) img {
  object-fit: contain;
  object-position: center 58%;
  padding: 10% 8% 7%;
  box-sizing: border-box;
}

/* Profession keychains: keep both personalized pieces inside the frame. */
.product-card-media:has(img[src*="profissao-cutout-v1"]) img {
  object-fit: contain;
  object-position: center 55%;
  padding: 8% 7% 7%;
  box-sizing: border-box;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* João Pessoa round keychains: show the complete piece and keep the clean
   white highlight around the metal edge from the original artwork. */
.product-card-media:has(img[src*="chaveiro-redondo-vixe-oxe-mariana-cutout-v2"]),
.product-card-media:has(img[src*="chaveiro-redondo-cuscuz-com-bode-cutout-v2"]),
.product-card-media:has(img[src*="chaveiro-redondo-eu-e-tu-cutout-v2"]) {
  background-position: center;
}

.product-card-media:has(img[src*="chaveiro-redondo-vixe-oxe-mariana-cutout-v2"]) img,
.product-card-media:has(img[src*="chaveiro-redondo-cuscuz-com-bode-cutout-v2"]) img,
.product-card-media:has(img[src*="chaveiro-redondo-eu-e-tu-cutout-v2"]) img {
  object-fit: contain;
  object-position: center 54%;
  padding: 4% 7% 5%;
  box-sizing: border-box;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.96)) drop-shadow(0 4px 5px rgba(36,26,15,.18)) !important;
}

/* Car plate: use the transparent original at a contained scale so the
   artwork does not bleed into the scene or crop at the card edges. */
.product-card-media:has(img[src*="placa-carro-fortaleza"]) img {
  mix-blend-mode: normal !important;
  filter: none !important;
  object-fit: contain;
  object-position: center 56%;
  padding: 12% 6% 8%;
  box-sizing: border-box;
}

/* Non-square catalog formats need their own contained framing inside the
   square product card; otherwise object-fit: cover crops or bleeds them. */
.product-card-media:has(img[src*="placa-carro-porto"]),
.product-card-media:has(img[src*="placa-de-carro"]),
.product-card-media:has(img[src*="estojo-porto"]),
.product-card-media:has(img[src*="estojo-rio"]),
.product-card-media:has(img[src*="chaveiro-chinelo-porto"]),
.product-card-media:has(img[src*="ima-placa-"]),
.product-card-media:has(img[src*="ima-retangular-"]),
.product-card-media:has(img[src*="ima-abridor-fortaleza"]),
.product-card-media:has(img[src*="ima-abridor-porto"]),
.product-card-media:has(img[src*="carteira-floral-fortaleza"]),
.product-card-media:has(img[src*="porta-moedas-"]),
.product-card-media:has(img[src*="estojo-floral-"]) {
  background-position: center;
}

.product-card-media:has(img[src*="placa-carro-porto"]) img,
.product-card-media:has(img[src*="placa-de-carro"]) img,
.product-card-media:has(img[src*="estojo-porto"]) img,
.product-card-media:has(img[src*="estojo-rio"]) img,
.product-card-media:has(img[src*="chaveiro-chinelo-porto"]) img,
.product-card-media:has(img[src*="ima-placa-"]) img,
.product-card-media:has(img[src*="ima-retangular-"]) img,
.product-card-media:has(img[src*="ima-abridor-fortaleza"]) img,
.product-card-media:has(img[src*="ima-abridor-porto"]) img,
.product-card-media:has(img[src*="carteira-floral-fortaleza"]) img,
.product-card-media:has(img[src*="porta-moedas-"]) img,
.product-card-media:has(img[src*="estojo-floral-"]) img {
  object-fit: contain;
  object-position: center 56%;
  padding: 8% 7% 7%;
  box-sizing: border-box;
}

.product-card-media:has(img[src*="relogio-prancha"]),
.product-card-media:has(img[src*="ima-mini-prancha"]),
.product-card-media:has(img[src*="ima-mini-pipa"]),
.product-card-media:has(img[src*="eco-vinho-porto"]),
.product-card-media:has(img[src*="eco-bag-porto"]),
.product-card-media:has(img[src*="chaveiro-redondo-metal-rio"]),
.product-card-media:has(img[src*="chaveiro-coracao-metal-rio"]),
.product-card-media:has(img[src*="chaveiro-filtro-rio"]),
.product-card-media:has(img[src*="chaveiro-cristo-metal-rio"]),
.product-card-media:has(img[src*="chaveiro-chinelo-metal-rio"]) {
  background-position: center;
}

.product-card-media:has(img[src*="relogio-prancha"]) img,
.product-card-media:has(img[src*="ima-mini-prancha"]) img,
.product-card-media:has(img[src*="ima-mini-pipa"]) img,
.product-card-media:has(img[src*="eco-vinho-porto"]) img,
.product-card-media:has(img[src*="eco-bag-porto"]) img,
.product-card-media:has(img[src*="chaveiro-redondo-metal-rio"]) img,
.product-card-media:has(img[src*="chaveiro-coracao-metal-rio"]) img,
.product-card-media:has(img[src*="chaveiro-filtro-rio"]) img,
.product-card-media:has(img[src*="chaveiro-cristo-metal-rio"]) img,
.product-card-media:has(img[src*="chaveiro-chinelo-metal-rio"]) img {
  object-fit: contain;
  object-position: center 54%;
  padding: 6% 13% 6%;
  box-sizing: border-box;
}

/* Porto round keychains: keep both pieces fully inside the studio frame. */
.product-card-media:has(img[src*="chaveiro-redondo-porto"]) img,
.product-card-media:has(img[src*="chaveiro-link-porto"]) img,
.product-card-media:has(img[src*="chaveiro-coracao-porto"]) img,
.product-card-media:has(img[src*="chaveiro-filtro-porto"]) img,
.product-card-media:has(img[src*="chaveiro-letra-porto"]) img {
  object-fit: contain;
  object-position: center 55%;
  padding: 7% 10% 7%;
  box-sizing: border-box;
}

.product-card-media img[src*="/products/porto/studio/ima-"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]) {
  mix-blend-mode: multiply !important;
  filter: sepia(.22) saturate(1.08) brightness(.94) contrast(1.04) !important;
}

/* These Porto catalog exports carry a solid white rectangle in the bitmap.
   Keep the artwork intact, but make that rectangle read as the store's warm
   studio surface on desktop and mobile alike. */
.product-card-media img[src*="/products/porto/studio/chaveiro-redondo-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]),
.product-card-media img[src*="/products/porto/studio/chaveiro-link-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]),
.product-card-media img[src*="/products/porto/studio/chaveiro-letra-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]),
.product-card-media img[src*="/products/porto/studio/ima-placa-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]),
.product-card-media img[src*="/products/porto/studio/ima-tampa-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]),
.product-card-media img[src*="/products/porto/studio/ima-abridor-porto"]:not([src*="cutout-v1"]):not([src*="cutout-v2"]) {
  mix-blend-mode: multiply !important;
  filter: sepia(.26) saturate(1.1) brightness(.92) contrast(1.05) !important;
}

/* The mosquetão is a transparent cutout, so give it the same editorial
   studio treatment as the newer mockups instead of leaving it on a flat card. */
.product-card-media:has(img[src*="/catalog-real/chaveiro-mosquetao"]) {
  background-image: url('../img/ui/product-studio-backdrop-v1.png') !important;
  position: relative;
}

.product-card-media:has(img[src*="/catalog-real/chaveiro-mosquetao"])::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 8%;
  height: 8%;
  border-radius: 50%;
  background: rgba(74, 55, 34, .15);
  filter: blur(13px);
  pointer-events: none;
}

.product-card-media:has(img[src*="/catalog-real/chaveiro-mosquetao"]) img {
  position: relative;
  z-index: 1;
}

/* Chinelo Porto: the source is already a transparent product cutout. Keep
   the white areas of the art opaque so the studio backdrop cannot bleed
   through them, and frame the full shape inside the media panel. */
.product-card-media:has(img[src*="/products/porto/studio/chaveiro-chinelo-porto"]) {
  background-image: url('../img/ui/product-studio-backdrop-v1.png') !important;
}

.product-card-media:has(img[src*="/products/porto/studio/chaveiro-chinelo-porto"]) img {
  mix-blend-mode: normal !important;
  filter: none !important;
  object-fit: contain !important;
  object-position: center 55% !important;
  padding: 8% 6% 7% !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Heart magnet: use the transparent cutout and keep its full silhouette
   above the shared studio background. */
.product-card-media:has(img[src*="ima-coracao-porto"]) img {
  mix-blend-mode: normal !important;
  filter: none !important;
  object-fit: contain !important;
  object-position: center 55% !important;
  padding: 8% 6% 7% !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Other Porto pieces with transparent product silhouettes must not inherit
   the older multiply treatment used by flat catalog exports. */
.product-card-media:has(img[src*="placa-carro-porto"]) img,
.product-card-media:has(img[src*="ima-tampa-porto"]) img,
.product-card-media:has(img[src*="ima-abridor-porto"]) img {
  mix-blend-mode: normal !important;
  filter: none !important;
  position: relative;
  z-index: 1;
}