/* =============================================================================
   stw2026 — Quick View trigger presentation

   The stw-quick-view plugin injects its trigger button client-side into the
   archive card's media element (.stw-qv-host) and toggles a .stw-qv-hover
   class on the <html> element when the viewport is wide and supports hover.
   Its own CSS (stw-quick-view/assets/css/quick-view.css) draws two variants:
   a full-width white bar revealed on hover (desktop) and a "View" pill
   (touch / narrow). This file replaces both with one compact, always-visible
   circular eye-icon button in the image's bottom-right corner, so the control
   no longer covers the bottom of the product photo.

   Both visible label spans are hidden; the button keeps the plugin's own
   aria-label ("Quick view: {product name}"), which is its accessible name.

   Bottom-right because the product badge (.stw-card__badge) sits top-left and
   nothing else the card renders lives in that corner.

   Why the selectors are prefixed with `html`. The plugin's rules are at most
   (0,2,0) — e.g. `.stw-qv-hover .stw-qv-trigger`. Qualifying with the html tag
   gives (0,2,1), which wins regardless of which stylesheet loaded first. The
   plugin's `.stw-qv-host:hover` reveal rule is (0,4,0) but only sets
   opacity:1 / transform:none, which this file also sets.
   ========================================================================== */

html .stw-qv-host .stw-qv-trigger {
	top: auto;
	right: 8px;
	bottom: 8px;
	left: auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
	opacity: 1;
	transform: none;
	transition: color 0.15s ease, box-shadow 0.15s ease;
}

html .stw-qv-host .stw-qv-trigger .stw-qv-trigger__label,
html .stw-qv-host .stw-qv-trigger .stw-qv-trigger__label-compact {
	display: none;
}

html .stw-qv-host .stw-qv-trigger:hover {
	box-shadow: 0 3px 12px rgb(0 0 0 / 26%);
}

html .stw-qv-host .stw-qv-trigger:focus-visible {
	outline: 2px solid var(--stw-ink, #111);
	outline-offset: 2px;
}

@media (max-width: 767.98px) {
	html .stw-qv-host .stw-qv-trigger {
		right: 6px;
		bottom: 6px;
		width: 32px;
		height: 32px;
	}
}