/**
 * Purific Blocks: shared product card (front end, also used in the editor
 * preview). Registered as the style 'purific-blocks-product-card'; a block
 * lists it in block.json "style". The card's width is set by the block that
 * lays the cards out (carousel, grid).
 *
 * The hover image swaps in only once product-card.js has loaded it
 * (.is-hover-loaded), so a card never fades to an empty frame.
 */
/* position:relative: anything absolutely positioned inside the card (e.g.
   WooCommerce's hidden "Price range: ..." screen reader text) stays inside
   it, whatever layout the card is placed in. */
.pf-blocks-product-card{position:relative;display:block;color:inherit;text-decoration:none}

.pf-blocks-product-card__img{
  position:relative;overflow:hidden;
  aspect-ratio:1/1;border-radius:var(--pf-radius);
  background:radial-gradient(circle at 50% 42%,var(--pf-hover),var(--pf-bg) 70%);
}
.pf-blocks-product-card__img img{
  position:absolute;top:0;left:0;
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;
  transition:opacity .3s var(--pf-ease);
}
.pf-blocks-product-card__img .pf-blocks-product-card__img-secondary{opacity:0}

@media (hover:hover) and (pointer:fine){
  .pf-blocks-product-card.is-hover-loaded:hover .pf-blocks-product-card__img-primary{opacity:0}
  .pf-blocks-product-card.is-hover-loaded:hover .pf-blocks-product-card__img-secondary{opacity:1}
}

/* Sale badge (products on sale, Discount Manager prices included). Same
   look as the Product Gallery block's .pf-product-media__sale
   (inc/blocks/product-gallery/style.css). */
.pf-blocks-product-card__sale{
  position:absolute;top:var(--pf-s3);left:var(--pf-s3);z-index:2;
  padding:4px 10px;border-radius:var(--pf-radius);
  background:rgba(232,250,255,.92);color:var(--pf-text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:var(--pf-tiny);font-weight:600;line-height:1.4;letter-spacing:.02em;
  pointer-events:none;
}

/* Sale price: the normal price struck through, smaller and faint (same
   as the product page and cart). */
.pf-blocks-product-card__price del{margin-right:var(--pf-s1);color:var(--pf-text-faint);font-size:.85em;text-decoration-thickness:1px}
.pf-blocks-product-card__price ins{text-decoration:none}

.pf-blocks-product-card__name{margin-top:var(--pf-s4);font-weight:500;font-size:var(--pf-ui)}
.pf-blocks-product-card__meta{margin-top:var(--pf-s1);font-size:var(--pf-small);color:var(--pf-text-soft)}
.pf-blocks-product-card:focus-visible{outline:2px solid var(--pf-text);outline-offset:4px;border-radius:var(--pf-radius)}