/*
Quick-view modal styling. Kept in its own stylesheet, separate from
layout.css/woocommerce.css, since this is new interactive surface area
rather than the existing structural page layout.
*/

/* Hover-revealed quick-view trigger, overlaid on the loop card image —
   same convention as the urgency badge overlay (li.product already has
   position:relative from WooCommerce core).
   Anchored to the TOP of the card (mirroring the urgency badge, which sits
   top-left) rather than the bottom: li.product's position:relative wraps
   the *entire* card (image + title + price + Add to Cart), and title/price
   height varies per product, so a `bottom` offset lands wherever the Add
   to Cart button happens to be — confirmed on the live site, where the two
   buttons ended up occupying almost the exact same pixel range. Anchoring
   to `top` is reliable regardless of card height, since the image always
   starts at the very top of the card. */
.snapkit-quick-view-btn {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	transform: translateY(-0.5rem);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--snapkit-color-text);
	border: none;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	z-index: 8;
}

li.product:hover .snapkit-quick-view-btn,
li.product:focus-within .snapkit-quick-view-btn {
	opacity: 1;
	transform: translateY(0);
}

.snapkit-quick-view {
	position: fixed;
	inset: 0;
	margin: auto;
	max-width: 640px;
	width: calc(100% - 2rem);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	border: none;
	padding: var(--snapkit-space-lg) var(--snapkit-space-md);
	background-color: var(--snapkit-color-base);
}

.snapkit-quick-view::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

.snapkit-quick-view__close {
	position: absolute;
	top: var(--snapkit-space-sm);
	right: var(--snapkit-space-sm);
	background: none;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--snapkit-color-text);
}

.snapkit-quick-view__body {
	display: flex;
	flex-direction: column;
	gap: var(--snapkit-space-md);
}

.snapkit-quick-view__loading {
	text-align: center;
	padding: var(--snapkit-space-xl) 0;
	color: var(--snapkit-color-text-muted);
}

.snapkit-quick-view__media img {
	width: 100%;
	height: auto;
	display: block;
}

.snapkit-quick-view__title {
	margin: 0 0 var(--snapkit-space-xs);
}

.snapkit-quick-view__price {
	color: var(--snapkit-color-accent);
	font-weight: 800;
	font-size: 1.125em;
	margin-bottom: var(--snapkit-space-sm);
}

.snapkit-quick-view__add-to-cart {
	display: inline-block;
	margin-top: var(--snapkit-space-sm);
}

.snapkit-quick-view__full-link {
	display: block;
	margin-top: var(--snapkit-space-sm);
	font-size: 0.875rem;
	color: var(--snapkit-color-text-muted);
	text-decoration: underline;
}

@media (min-width: 600px) {
	.snapkit-quick-view__body {
		flex-direction: row;
		align-items: flex-start;
	}

	.snapkit-quick-view__media {
		width: 45%;
		flex-shrink: 0;
	}
}