/* Popup Leads — Waitlist banner on out-of-stock catalog cards.
   Injected by waitlist-catalog.js onto .vale-product-card--oos. Loads only on shop/archive pages. */

.plwl-card {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center; /* text centered */
	gap: 10px;
	padding: 15px 15px;
	background: #0e0e0e; /* solid — no see-through overlay over the photo */
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: background .15s ease;
}
.plwl-card:hover { background: #000; }

.plwl-card__text {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.plwl-card__arrow {
	flex: 0 0 auto;
	font-size: 19px;
	line-height: 1;
	transition: transform .15s ease;
}
.plwl-card:hover .plwl-card__arrow { transform: translateX(3px); }

/* the card image wrap is already position:relative (it holds absolute badges),
   but guard it in case a theme update changes that */
.vale-product-card--oos .vale-product-card__image { position: relative; }

/* no hover "View Product" overlay on sold-out cards — the waitlist banner replaces it */
.vale-product-card--oos .vale-product-card__overlay { display: none !important; }

/* The theme fades the WHOLE sold-out card (opacity:.55), which would also fade our
   banner — a child can't be more opaque than its parent. So drop the card-level fade
   and re-apply it only to the photo + info, leaving the banner fully opaque on top. */
.vale-product-card--oos { opacity: 1 !important; }
.vale-product-card--oos .vale-product-card__image-link,
.vale-product-card--oos .vale-product-card__placeholder,
.vale-product-card--oos .vale-product-card__info { opacity: .55; }

@media (max-width: 767px) {
	.plwl-card { padding: 11px 11px; gap: 7px; }
	.plwl-card__text { font-size: 13px; }
	.plwl-card__arrow { font-size: 16px; }
}