/* Interactive demo — Product Video listing icon, centered over the thumbnail.
   Loaded by productvideo as views/css/pv_custom.css (PV_CUST_CSS). The listing
   button (.pv_popupvideo) becomes a circular, icon-only play button centered on
   the product image; clicking it opens the video popup.
   Relative units (%, rem, clamp, aspect-ratio) so it scales on mobile/other
   layouts. Brand-blue fill + light ring so it stays visible on dark OR light
   product photos. */
.product-miniature__top { position: relative; }

.product-miniature .pv_popupvideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: clamp(2.6rem, 20%, 4.25rem);  /* scales with the card, bounded */
  aspect-ratio: 1 / 1;                 /* perfect circle at any width */
  height: auto;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d7ff9;                  /* brand blue — visible on any product */
  color: #fff;
  opacity: 0.95;
  box-shadow: 0 0.15em 0.7em rgba(0, 0, 0, 0.45),
              0 0 0 0.22em rgba(255, 255, 255, 0.30);  /* light ring for contrast */
  cursor: pointer;
  /* font-size drives the em-based play triangle below; relative to card width */
  font-size: clamp(0.7rem, 4.5%, 1.15rem);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.product-miniature .pv_popupvideo:hover,
.product-miniature .pv_popupvideo:focus {
  opacity: 1;
  background: #1b6ae0;
  transform: translate(-50%, -50%) scale(1.08);
  outline: none;
}

/* Icon only: hide the module's label + (tiny) svg glyph, draw a crisp white
   play triangle in em units so it scales with the button. */
.product-miniature .pv_popupvideo .pv_button_text,
.product-miniature .pv_popupvideo .pv_icon_glyph { display: none; }
.product-miniature .pv_popupvideo::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.62em 0 0.62em 1.05em;            /* triangle pointing right */
  border-color: transparent transparent transparent #fff;
  margin-left: 0.18em;                             /* optical centering */
}