/**
 * Bloque "Diseñar producto" en la ficha de producto (frontend/templates/
 * product-button.php) — hasta ahora sin ninguna hoja propia: el botón
 * dependía enteramente de las clases genéricas de WooCommerce/tema
 * (button alt), que en la práctica se veían completamente distintas al
 * botón "Añadir al carrito" de al lado (bordeado y chico) en vez de
 * "consistentes", como decía el comentario original — bug real reportado
 * por el usuario. Reusa los mismos tokens/patrones que ya usa el editor
 * (--wccd-menta para la CTA principal, mismo criterio que
 * .wccd-btn--primary de editor-shell.css) en vez de inventar un lenguaje
 * visual nuevo solo para la ficha de producto.
 *
 * TODO el bloque cuelga de #wccd-product-cta (el ID del contenedor, no
 * solo su clase) a propósito, mismo criterio que ya se usaba solo para
 * #wccd-open-designer: este bloque vive DENTRO de form.cart/.woocommerce,
 * el terreno del tema — un theme "orientado a WooCommerce" (Rey y
 * similares) trae sus propias reglas para ul/li/p ahí adentro, a veces
 * más específicas que una clase sola o directamente con !important. Un
 * ID le gana en especificidad a cualquier combinación de clases sin
 * necesitar !important — bug real reportado por el usuario ("todo el
 * diseño del plugin cambia" con el tema activo): antes solo el botón
 * tenía este blindaje, el resto del bloque (chips, eyebrow, nota) se
 * colaba con clases solas y perdía el empate contra el tema.
 */

#wccd-product-cta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0;
	padding: 20px;
	background: var(--wccd-app-bg);
	border-radius: var(--wccd-radius-card);
}

#wccd-product-cta .wccd-product-cta__eyebrow {
	font-family: var(--wccd-font-mono);
	font-size: var(--wccd-fs-mono-lg);
	font-weight: 500;
	letter-spacing: var(--wccd-label-letter-spacing);
	text-transform: uppercase;
	color: var(--wccd-menta-dark);
}

#wccd-product-cta .wccd-product-cta__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#wccd-product-cta .wccd-product-cta__chips li {
	padding: 6px 12px;
	border: 1px solid var(--wccd-line);
	border-radius: var(--wccd-radius-pill);
	background: var(--wccd-panel);
	font-family: var(--wccd-font-ui);
	font-size: var(--wccd-fs-secondary-sm);
	color: var(--wccd-ink-soft);
}

#wccd-open-designer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 22px;
	border: none;
	border-radius: var(--wccd-radius-row);
	background: var(--wccd-menta);
	color: var(--wccd-menta-ink);
	font-family: var(--wccd-font-ui);
	font-size: var(--wccd-fs-btn-primary);
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--wccd-shadow-float);
	transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
#wccd-open-designer:hover {
	background: var(--wccd-menta-dark);
	color: #fff;
	box-shadow: var(--wccd-shadow-popover);
	transform: translateY(-1px);
}
#wccd-open-designer:active {
	transform: translateY(0);
	box-shadow: var(--wccd-shadow-float);
}
#wccd-open-designer:focus-visible {
	outline: 2px solid var(--wccd-violeta);
	outline-offset: 2px;
}

#wccd-product-cta .wccd-product-cta__note {
	margin: 0;
	text-align: center;
	font-family: var(--wccd-font-ui);
	font-size: var(--wccd-fs-secondary-sm);
	color: var(--wccd-ink-soft);
}