/* Hover quick-view popover on product cards.
   Anchored with position:absolute to li.product (position:relative below) —
   NOT position:fixed. This card also has a `:hover { transform: ... }` lift
   effect (see shop.css); a `transform` on an ancestor makes IT the
   containing block for any position:fixed descendant instead of the
   viewport, so a fixed popover's JS-computed viewport coordinates render
   in completely the wrong place the instant the card is hovered. Absolute
   positioning against the nearest positioned ancestor doesn't have that
   failure mode, and needs no JS-computed coordinates at all. */
.woocommerce ul.products li.product { position: relative; }

.pcseal-quickview {
	position: absolute;
	top: 0;
	/* Sits beside the card, not over it — left: 100% + gap by default.
	   .flip-left (added via JS when there's no room on the right, e.g. the
	   last grid column) mirrors it to the other side instead. */
	left: calc(100% + 12px);
	width: 320px;
	background: var(--surface);
	border-radius: 20px;
	box-shadow:
		0 1px 1px rgba(10, 20, 40, .04),
		0 24px 48px -20px rgba(10, 20, 40, .35),
		0 0 0 1px rgba(29, 148, 255, .08);
	z-index: 200;
	overflow: hidden;
	/* The panel sits directly over the card it belongs to, so without this
	   it would become the new hit-test target under the cursor the moment
	   it appears — flipping the card straight to `mouseleave`. Making it
	   non-interactive lets hit-testing pass through to the card beneath. */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: scale(.96) translateY(6px);
	transform-origin: top left;
	transition: opacity .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1), visibility .18s;
}
.pcseal-quickview.is-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
}
.pcseal-quickview.flip-left {
	left: auto;
	right: calc(100% + 12px);
	transform-origin: top right;
}
.pcseal-quickview-title {
	position: relative;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
	color: var(--ink);
	font-weight: 700;
	font-size: 0.94rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	padding: 16px 18px;
	overflow: hidden;
}
.pcseal-quickview-title::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.22), transparent 60%);
	pointer-events: none;
}
.pcseal-quickview-body {
	padding: 12px 14px 16px;
	max-height: 320px;
	overflow-y: auto;
}
.pcseal-quickview-body .row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	font-size: 0.86rem;
	border-radius: 10px;
	transition: background .12s ease;
}
.pcseal-quickview-body .row .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--accent-tint);
	font-size: 0.85rem;
}
.pcseal-quickview-body .lbl {
	color: var(--muted);
	flex-shrink: 0;
}
.pcseal-quickview-body .val {
	margin-left: auto;
	text-align: right;
	font-weight: 600;
}
.pcseal-quickview-body .val.price {
	color: var(--accent-strong);
	font-family: ui-monospace, monospace;
	font-size: 1rem;
	font-weight: 800;
}
.pcseal-quickview-spec-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--gold-tint);
	color: var(--gold);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: 999px;
	margin: 8px 0 8px 4px;
}
.pcseal-quickview-spec {
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 0 4px;
}
.pcseal-quickview-spec p {
	margin: 0 0 6px;
}
.pcseal-quickview-spec p:last-child {
	margin-bottom: 0;
}

/* Hide on touch-only devices (no real hover) rather than by viewport width —
   a width cutoff also hits ordinary desktop windows (e.g. devtools docked
   open narrows the page well past common breakpoints). */
@media (hover: none) {
	.pcseal-quickview { display: none !important; }

	/* Touch trigger override (see .pcseal-quickview-btn below + quickview.js).
	   `.is-visible` alone is NOT enough to punch through the rule above —
	   mobile Safari/Chrome can fire a synthetic mouseenter on the card itself
	   from an ordinary tap-to-navigate (compatibility mouse events), which
	   would add `.is-visible` too and flash this panel open right before the
	   user leaves the page. `.pcseal-touch-open` is only ever added by the
	   dedicated button's tap handler in quickview.js, never by the
	   mouseenter/mouseleave hover path, so a plain card tap stays silent and
	   only a deliberate button tap can reveal it here. */
	.pcseal-quickview.is-visible.pcseal-touch-open { display: block !important; }
}

/* --- Touch-friendly trigger button (see quickview-button-ui.php). Always
   rendered alongside the wishlist/compare buttons in .pcseal-card-overlays
   (card-overlays.css handles the container's position/pointer-events) — same
   "always visible on every device" convention as those, harmless redundant
   affordance on desktop where hover already opens the panel. --- */
.pcseal-quickview-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--surface);
	color: var(--muted);
	box-shadow: 0 1px 4px rgba(10, 30, 20, .18);
	cursor: pointer;
	transition: color .15s ease, transform .15s ease, background .15s ease;
}
.pcseal-quickview-btn svg {
	display: block;
}
.pcseal-quickview-btn:hover,
.pcseal-quickview-btn:focus-visible {
	color: var(--accent-strong);
	transform: scale(1.08);
}
.pcseal-quickview-btn[aria-expanded="true"] {
	color: var(--accent-strong);
	background: var(--accent-tint);
}