/* ==========================================================================
   Velas Velia — Productos agotados
   --------------------------------------------------------------------------
   Lógica en inc/woo-stock.php. Tarjetas (catálogo, relacionados, "Más
   vendidos") con badge oscuro "Agotado" y foto atenuada; en la ficha, badge
   junto al precio y mensaje de marca en lugar del formulario de compra.
   ========================================================================== */

/* --- Tarjetas: foto atenuada ----------------------------------------------
   WooCommerce añade la clase .outofstock al <li> de la tarjeta del catálogo;
   "Más vendidos" usa .is-agotado (no pasa por wc_product_class). */
.vv-shop-card.outofstock .vv-product-card__photo img,
.vv-mas-vendidos__card.is-agotado .vv-product-card__photo img {
	filter: grayscale(0.6);
	opacity: 0.72;
	transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.vv-shop-card.outofstock:hover .vv-product-card__photo img,
.vv-mas-vendidos__card.is-agotado:hover .vv-product-card__photo img {
	filter: grayscale(0.3);
	opacity: 0.9;
}

/* --- Ficha: badge junto al precio ----------------------------------------- */
.vv-single__price:has(.vv-single__soldout) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.vv-single__soldout {
	flex: 0 0 auto;
}

/* --- Ficha: mensaje de agotado (simple y variable) ------------------------
   Tono tinta en una caja suave: es información, no un error del cliente. */
.vv-single .stock.out-of-stock.vv-variable__unavailable {
	margin: var(--space-2) 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--gold-200);
	border-radius: var(--radius-md);
	background: var(--gold-100);
	color: var(--ink-900);
	font-weight: var(--fw-medium);
}

/* Variación agotada elegida en el selector (texto "Agotado" de WooCommerce).
   Especificidad (0,4,0) para ganar al color terracota de woo-variable.css,
   que sobre el fondo tinta quedaba ilegible. */
.vv-variable .vv-variable__variation-stock .stock.out-of-stock {
	display: inline-flex;
	margin: var(--space-2) 0 0;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: var(--ink-900);
	color: var(--text-on-brand);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Con una variación agotada elegida no aplica "Bajo pedido · 5 días hábiles". */
.vv-variable:has(.vv-variable__variation-stock .out-of-stock) .vv-variable__note {
	display: none;
}