/* Transparent AVIF thumbnail canvas system (non-product-page contexts only). */
/* Product page hero/gallery behavior is intentionally untouched. */

:root {
  --gstore-avif-canvas-bg: var(--pc-image-bg, #f6f6f7);
  --gstore-avif-canvas-pad: var(--pc-image-pad, 13%);
}

.gstore-thumb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: var(--gstore-avif-canvas-bg);
  background-origin: border-box;
  background-clip: border-box;
  box-sizing: border-box;
}

.gstore-thumb-canvas > img.gstore-transparent,
.gstore-thumb-canvas > img.gstore-thumb-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding: var(--gstore-avif-canvas-pad) !important;
  background: transparent !important;
}

.product-image.pc-image-transparent,
.pc-card .product-image.pc-image-transparent,
.gstore-slider .product-image.pc-image-transparent {
  position: relative;
  background: var(--gstore-avif-canvas-bg);
  background-image: none !important;
  background-origin: border-box;
  background-clip: border-box;
  padding: 0 !important;
  box-sizing: border-box;
}

.product-image.pc-image-transparent > .gstore-thumb-canvas,
.pc-card .product-image.pc-image-transparent > .gstore-thumb-canvas,
.gstore-slider .product-image.pc-image-transparent > .gstore-thumb-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Fallback for contexts where wrapper is not yet present. */
.list-card .image-frame img.gstore-transparent,
.gstore-search-tile-image img.gstore-transparent,
.gstore-search-tile-image-slide img.gstore-transparent,
.gstore-header-search .gstore-search-tile-image img.gstore-transparent,
.gstore-header-search .gstore-search-tile-image-slide img.gstore-transparent,
#gstore-mobile-header.gstore-header-app .gstore-search-tile-image img.gstore-transparent,
#gstore-mobile-header.gstore-header-app .gstore-search-tile-image-slide img.gstore-transparent,
.cart-item-image img.gstore-transparent,
.mini-cart-item-image img.gstore-transparent,
#gstore-mini-cart .mini-cart-item-image img.gstore-transparent,
#gstore-mini-cart .cart-item-image img.gstore-transparent,
.gstore-checkout-wrapper .product-thumb img.gstore-transparent,
.product-image.pc-image-transparent > img.gstore-transparent,
.product-image.pc-image-transparent > img.gstore-thumb-image,
.product-image.pc-image-transparent > .pc-image-media.gstore-transparent {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
  padding: var(--gstore-avif-canvas-pad) !important;
  background: var(--gstore-avif-canvas-bg) !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}

/* Keep badges and gallery dots above the canvas layer. */
.product-image.pc-image-transparent .gstore-badge-group,
.product-image.pc-image-transparent .gstore-valentine-ribbon,
.product-image.pc-image-transparent .gstore-badge-rose,
.product-image.pc-image-transparent .gstore-badge-mother,
.product-image.pc-image-transparent .gstore-badge-womens,
.product-image.pc-image-transparent .pc-gallery-dots {
  z-index: 2;
}

/* Lightbox should display original image untouched. */
.pswp__img.gstore-transparent,
.lg-image.gstore-transparent,
.fslightbox-source.gstore-transparent {
  background: transparent !important;
  padding: 0 !important;
}