/* ==========================================================================
   Wizard Trees · Componentes
   Botones (nodo 16:125) y etiquetas de producto (nodo 16:139), mas las piezas
   de apoyo que el ecommerce necesita y que el nodo no cubre.
   ========================================================================== */

/* ==========================================================================
   Botones · nodo 16:125
   --------------------------------------------------------------------------
   Los tres comparten radio pildora, Monument, versalitas y tracking 0.3.
   El borde de 1.5px transparente en la base hace que primario y secundario
   tengan exactamente la misma caja: en Figma el trazo va por dentro, asi que
   el relleno declarado (16.5) mas el borde (1.5) da los 18 del diseno.
   ========================================================================== */

/* El selector incluye el boton de Gutenberg para que un boton insertado desde
   el editor salga ya con la identidad del theme, sin que nadie tenga que saber
   ninguna clase. Se usa la forma de dos clases para ganar por especificidad a
   los estilos que trae el nucleo, que son de una sola.

   Las variantes van en el <div> envoltorio (.wp-block-button), porque es ahi
   donde el editor escribe las clases adicionales, y se aplican al <a> de
   dentro. Ver las reglas de cada variante mas abajo. */
.wt-btn,
.wp-block-button .wp-block-button__link {
	--wt-btn-pad-y: 16.5px;
	--wt-btn-pad-x: 32.5px;
	--wt-btn-size: 15px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wt-space-1);
	min-height: var(--wt-control-min);
	padding: var(--wt-btn-pad-y) var(--wt-btn-pad-x);
	border: 1.5px solid transparent;
	border-radius: var(--wt-radius-pill);
	background: transparent;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: var(--wt-btn-size);
	/* Regular, no semibold. Monument Extended solo tiene dos cortes con
	   licencia (400 y 800): el 600 que pedia el Figma no existe, y la regla de
	   emparejamiento de CSS busca hacia arriba para todo lo que pase de 500,
	   asi que caia en Ultrabold. Comprobado midiendo en produccion: los pesos
	   600, 700 y 800 renderizan identicos (330.72 px para "SHOP SEEDS" a 40),
	   frente a 234.51 del 400.

	   Ultrabold a 15 px empasta: es un corte pensado para titulares. La regla
	   del sistema queda asi: Ultrabold para tamanos de display, Regular para
	   etiquetas pequenas de interfaz. Los titulares no cambian. */
	font-weight: var(--wt-weight-reg);
	line-height: 1.5;
	letter-spacing: var(--wt-track-btn);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wt-dur) var(--wt-ease),
		border-color     var(--wt-dur) var(--wt-ease),
		filter           var(--wt-dur) var(--wt-ease),
		transform        var(--wt-dur) var(--wt-ease);
}

.wt-btn:hover,
.wt-btn:focus-visible { color: var(--wt-text); }

.wt-btn:active { transform: translateY(1px); }

.wt-btn[disabled],
.wt-btn[aria-disabled="true"],
.wt-btn.is-disabled {
	opacity: var(--wt-disabled-opacity);
	pointer-events: none;
}

/* OJO CON LAS VARIANTES: van SIEMPRE con .wt-btn delante.
   --------------------------------------------------------------------------
   Un boton del theme es un solo elemento (<a class="wt-btn wt-btn--tertiary">).
   Uno de Gutenberg son dos: el <div class="wp-block-button wt-btn--tertiary">
   que lleva las clases, y el <a class="wp-block-button__link"> de dentro, que
   es el que se pinta.

   Si la regla de la variante se escribe suelta (`.wt-btn--tertiary`), casa
   TAMBIEN con ese div. Y el div no tiene ni radio ni relleno, asi que el fondo
   de la variante salia como un rectangulo por detras de la pildora. Se vio el
   2026-09-15 en los tres terciarios de la home —VIEW FULL CATALOGUE, VIEW ALL 6
   STRAINS, VIEW ALL 213 REVIEWS—, que son los unicos con fondo propio; el
   secundario solo pone color de borde y el div no tiene borde, por eso ese no
   se notaba.

   La clase .wt-btn la lleva el <a> del theme y NO la lleva el div de Gutenberg,
   asi que pedirla separa los dos casos sin tocar nada mas. */

/* Primario · una sola accion por pantalla (nodo 16:133).
   Un boton de Gutenberg sin variante declarada sale primario: es lo que se
   espera al insertar un boton sin pensar. */
.wt-btn.wt-btn--primary,
.wp-block-button .wp-block-button__link,
.wp-block-button.wt-btn--primary .wp-block-button__link {
	background-image: var(--wt-grad-primary);
}

.wt-btn.wt-btn--primary:hover,
.wt-btn.wt-btn--primary:focus-visible,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible { filter: brightness(1.12); }

/* Secundario · la alternativa real (comprar online vs. tienda fisica). */
.wt-btn.wt-btn--secondary,
.wp-block-button.wt-btn--secondary .wp-block-button__link {
	border-color: var(--wt-border-contrast);
	background-image: none;
}

.wt-btn.wt-btn--secondary:hover,
.wt-btn.wt-btn--secondary:focus-visible,
.wp-block-button.wt-btn--secondary .wp-block-button__link:hover,
.wp-block-button.wt-btn--secondary .wp-block-button__link:focus-visible {
	border-color: var(--wt-text);
	filter: none;
}

/* Terciario · navegacion dentro de una tarjeta. */
.wt-btn.wt-btn--tertiary,
.wp-block-button.wt-btn--tertiary .wp-block-button__link {
	--wt-btn-pad-y: 12.5px;
	--wt-btn-pad-x: 24.5px;
	--wt-btn-size: 13px;
	background-color: var(--wt-fill-subtle);
	background-image: none;
}

.wt-btn.wt-btn--tertiary:hover,
.wt-btn.wt-btn--tertiary:focus-visible,
.wp-block-button.wt-btn--tertiary .wp-block-button__link:hover,
.wp-block-button.wt-btn--tertiary .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, .12);
	filter: none;
}

/* Tamano pequeno. No esta en el nodo de fundamentos, pero la home lo usa en
   dos sitios con las mismas medidas: el boton de anadir de la tarjeta de
   producto (20:36) y el terciario de la cabecera de drops (20:8). 45 de alto
   frente a los 48 del normal, texto de 12.5.

   11.5 + 1.5 de borde = los 13 del nodo; 20.5 + 1.5 = los 22. */
.wt-btn.wt-btn--sm,
.wp-block-button.wt-btn--sm .wp-block-button__link {
	--wt-btn-pad-y: 11.5px;
	--wt-btn-pad-x: 20.5px;
	--wt-btn-size: 12.5px;

	min-height: 0;
}

.wt-btn.wt-btn--block { display: flex; width: 100%; }

/* Fila de botones · gap 18 del nodo 16:125. */
.wt-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

/* ==========================================================================
   Etiquetas de producto · nodo 16:139
   --------------------------------------------------------------------------
   Formula unica en las seis: relleno al 14 % del color, borde al 40 %, texto
   al 100 %. Solo cambia el color base.

   Los puntos de 7 px salen de Figma como SVG exportado. Aqui se dibujan con
   border-radius: son circulos solidos del color del chip, sin ambiguedad de
   trazado, y evitan tres peticiones HTTP a assets que caducan.
   ========================================================================== */

.wt-chip {
	--wt-chip-color:  var(--wt-text-2);
	--wt-chip-bg:     rgba(187, 188, 188, .14);
	--wt-chip-border: rgba(187, 188, 188, .40);

	display: inline-flex;
	align-items: center;
	padding: 6px 11px;
	border: 1px solid var(--wt-chip-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-chip-bg);
	color: var(--wt-chip-color);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-micro);
	font-weight: var(--wt-weight-bold);
	line-height: 1.5;
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Tamano pequeno, el que usa la tarjeta de producto de la home (20:23). El
   nodo de fundamentos define el chip a un solo tamano, pero las tarjetas de
   drops lo bajan a 10.5 con relleno 10/5 para que quepan dos por fila en 262
   de ancho. */
.wt-chip--sm {
	padding: 5px 9px;
	font-size: 10.5px;
	letter-spacing: .5px;
}

.wt-chip--sm.wt-chip--status {
	gap: 6px;
	padding-inline: 7px 9px;
}

.wt-chip--sm.wt-chip--status::before {
	width: 6px;
	height: 6px;
}

/* Variante con punto: EN STOCK / ULTIMAS UNIDADES / AGOTADO. */
.wt-chip--status {
	gap: 7px;
	padding-inline: 9px 11px;
}

.wt-chip--status::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.wt-chip--in-stock {
	--wt-chip-color:  var(--wt-stock-in);
	--wt-chip-bg:     rgba(74, 222, 128, .14);
	--wt-chip-border: rgba(74, 222, 128, .40);
}

.wt-chip--low-stock {
	--wt-chip-color:  var(--wt-stock-low);
	--wt-chip-bg:     rgba(245, 165, 36, .14);
	--wt-chip-border: rgba(245, 165, 36, .40);
}

.wt-chip--out-stock {
	--wt-chip-color:  var(--wt-stock-out);
	--wt-chip-bg:     rgba(244, 91, 91, .14);
	--wt-chip-border: rgba(244, 91, 91, .40);
}

/* Atributos de producto. En el nodo, INDICA y SOLO TIENDA comparten el mismo
   morado pese a ser ejes distintos (genetica vs. canal). Se mantienen como
   variantes separadas para poder diferenciarlas sin tocar el marcado. */
.wt-chip--genetics,
.wt-chip--channel {
	--wt-chip-color:  var(--wt-purple);
	--wt-chip-bg:     rgba(177, 106, 255, .14);
	--wt-chip-border: rgba(177, 106, 255, .40);
}

.wt-chip--spec {
	--wt-chip-color:  var(--wt-text-2);
	--wt-chip-bg:     rgba(187, 188, 188, .14);
	--wt-chip-border: rgba(187, 188, 188, .40);
}

/* Fila de chips · gap 12 del nodo 16:139. */
.wt-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cuando el chip es un filtro clicable necesita area tactil de 44 px.
   El chip informativo mide 31 y no la necesita. */
.wt-chip--action {
	position: relative;
	cursor: pointer;
}

.wt-chip--action::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	transform: translateY(-50%);
	height: var(--wt-tap-min);
}

.wt-chip--action:hover,
.wt-chip--action:focus-visible {
	background: var(--wt-chip-border);
	color: var(--wt-bg);
}

.wt-chip--action[aria-pressed="true"] {
	background: var(--wt-chip-color);
	color: var(--wt-bg);
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.wt-card {
	display: flex;
	flex-direction: column;
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	overflow: hidden;
	transition:
		border-color var(--wt-dur) var(--wt-ease),
		transform    var(--wt-dur) var(--wt-ease);
}

.wt-card:hover,
.wt-card:focus-within {
	border-color: var(--wt-purple-deep);
}

.wt-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--wt-raised);
	overflow: hidden;
}

.wt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--wt-ease);
}

.wt-card:hover .wt-card__media img { transform: scale(1.04); }

/* Velo sobre imagen · degradado del nodo 16:87. */
.wt-card__media--veil::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wt-grad-veil);
	opacity: .35;
	pointer-events: none;
}

.wt-card__badges {
	position: absolute;
	inset: var(--wt-space-2) var(--wt-space-2) auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-1);
	pointer-events: none;
}

.wt-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wt-space-2);
	padding: var(--wt-space-3);
}

.wt-card__title {
	margin: 0;
	font-size: var(--wt-size-h3);
	font-weight: var(--wt-weight-semi);
	line-height: var(--wt-lh-tight);
	letter-spacing: var(--wt-track-display);
}

.wt-card__title a {
	color: inherit;
	text-decoration: none;
}

/* El enlace cubre la tarjeta entera sin anidar <a> dentro de <a>. */
.wt-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wt-card { position: relative; }

.wt-card__meta {
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
	line-height: var(--wt-lh-tight);
}

.wt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	margin-top: auto;
	padding-top: var(--wt-space-2);
}

/* Los controles del pie deben quedar por encima del enlace de la tarjeta. */
.wt-card__foot > * { position: relative; z-index: 2; }

.wt-price {
	font-family: var(--wt-font-display);
	font-size: var(--wt-size-body-l);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-track-display);
}

.wt-price del {
	margin-inline-end: var(--wt-space-1);
	color: var(--wt-text-3);
	font-size: var(--wt-size-caption);
	font-weight: var(--wt-weight-reg);
}

.wt-price ins {
	color: var(--wt-purple);
	text-decoration: none;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.wt-field {
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-1);
	margin-bottom: var(--wt-space-3);
}

.wt-field label,
label {
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
	font-weight: var(--wt-weight-med);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	min-height: var(--wt-control-min);
	padding: var(--wt-space-1) var(--wt-space-2);
	background: var(--wt-raised);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-body);
	transition: border-color var(--wt-dur) var(--wt-ease);
}

textarea { min-height: 140px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--wt-text-3); }

input:focus,
textarea:focus,
select:focus { border-color: var(--wt-purple); }

input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wt-purple);
}

/* Los <input type=submit> de WordPress y WooCommerce no admiten ::before,
   asi que el estilo de boton se aplica por clase desde inc/. */
input[type="submit"],
button[type="submit"] {
	font-family: var(--wt-font-display);
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.wt-notice {
	padding: var(--wt-space-2) var(--wt-space-3);
	border: 1px solid var(--wt-border);
	border-left-width: 3px;
	border-radius: var(--wt-radius-card);
	background: var(--wt-raised);
	font-size: var(--wt-size-caption);
}

.wt-notice--success { border-left-color: var(--wt-stock-in); }
.wt-notice--warning { border-left-color: var(--wt-stock-low); }
.wt-notice--error   { border-left-color: var(--wt-stock-out); }

/* ==========================================================================
   Paginacion
   ========================================================================== */

.wt-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wt-space-1);
	margin-top: var(--wt-space-8);
}

.wt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wt-tap-min);
	min-height: var(--wt-tap-min);
	padding-inline: var(--wt-space-1);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
	text-decoration: none;
}

.wt-pagination .page-numbers:hover,
.wt-pagination .page-numbers:focus-visible {
	border-color: var(--wt-purple);
	color: var(--wt-text);
}

.wt-pagination .page-numbers.current {
	background-image: var(--wt-grad-primary);
	border-color: transparent;
	color: var(--wt-text);
}

/* ==========================================================================
   Piezas de chasis
   --------------------------------------------------------------------------
   La cabecera vive en layout.css porque si sale del nodo 18:13. El pie, los
   widgets y la barra lateral de aqui abajo no estan en ningun nodo: son
   construccion de Palo Seco con los tokens del sistema.
   ========================================================================== */

/* --- Widgets ---------------------------------------------------------------- */

.wt-widget + .wt-widget {
	margin-top: var(--wt-space-5);
	padding-top: var(--wt-space-5);
	border-top: 1px solid var(--wt-border);
}

.wt-widget__title {
	margin: 0 0 var(--wt-space-2);
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-micro);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

.wt-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-widget li + li { margin-top: var(--wt-space-1); }

.wt-widget a {
	color: var(--wt-text-2);
	font-size: var(--wt-size-caption);
	text-decoration: none;
}

.wt-widget a:hover,
.wt-widget a:focus-visible { color: var(--wt-text); }

.wt-shop__sidebar {
	position: sticky;
	top: calc(var(--wt-header-h) + var(--wt-space-3));
	padding: var(--wt-space-3);
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-card);
}

@media (max-width: 1024px) {
	.wt-shop__sidebar { position: static; }
}

/* --- Navegacion entre entradas ------------------------------------------------ */

.wt-post-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wt-gutter);
	margin-top: var(--wt-space-8);
	padding-top: var(--wt-space-5);
	border-top: 1px solid var(--wt-border);
}

.wt-post-nav a {
	color: var(--wt-text);
	font-size: var(--wt-size-caption);
	text-decoration: none;
}

.wt-post-nav .nav-next { text-align: right; }

/* --- Comentarios ---------------------------------------------------------------- */

.wt-comments__list li {
	padding: var(--wt-space-3) 0;
	border-bottom: 1px solid var(--wt-border);
}

.wt-comments .comment-meta {
	color: var(--wt-text-3);
	font-size: var(--wt-size-caption);
}

.wt-comments .avatar { border-radius: 50%; }

.comment-form { margin-top: var(--wt-space-5); }

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--wt-space-1);
}

.comment-form .comment-form-cookies-consent input { width: auto; }


/* ==========================================================================
   Tarjeta de producto · nodos 20:21 (home) y 23:102 (catalogo)
   --------------------------------------------------------------------------
   Es LA MISMA tarjeta en los dos sitios: 302 de ancho, imagen cuadrada con
   resplandor, etiquetas, nombre, cruce y un pie con precio y boton. Se
   comprobo nodo contra nodo antes de unificarla.

   Vivia en home.css con el nombre .wt-drop, que era correcto mientras solo
   existia en la seccion de drops de la portada. Al entrar el catalogo dejo de
   serlo por dos motivos: el nombre habla de una seccion y no de un componente,
   y sobre todo home.css NO se carga en la tienda, asi que la tarjeta se habria
   quedado sin estilos. Aqui la carga todo el sitio.
   ========================================================================== */

.wt-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: 20px;
	overflow: hidden;
	transition:
		border-color var(--wt-dur) var(--wt-ease),
		transform    var(--wt-dur) var(--wt-ease);
}

.wt-pcard:hover,
.wt-pcard:focus-within {
	border-color: var(--wt-purple-deep);
}

/* --- Imagen ----------------------------------------------------------------
   300x300 con un resplandor detras del producto. El degradado del nodo tiene
   centro en 150,183.33 y radio 166.67 sobre la caja de 300, y sus paradas ya
   describen una caida progresiva (0.35 / 0.675 / 0.8375 / 0.91875 / 1), asi
   que aqui no hace falta reescribirlas: el diseno ya lo resolvio bien. */

.wt-pcard__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: radial-gradient(
		ellipse 55.56% 55.56% at 50% 61.11%,
		rgba(122, 63, 191, .35)     0%,
		rgba( 73, 43, 109, .675)   50%,
		rgba( 48, 33,  67, .8375)  75%,
		rgba( 35, 28,  47, .91875) 87.5%,
		var(--wt-surface)         100%
	);
}

.wt-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 400ms var(--wt-ease);
}

.wt-pcard:hover .wt-pcard__img {
	transform: scale(1.04);
}

/* Agotado: la imagen se apaga. En el nodo 23:196 la foto va claramente mas
   oscura que la de las tarjetas comprables, y es la senal que se lee antes que
   la etiqueta. */
.wt-pcard.is-unavailable .wt-pcard__media {
	filter: saturate(.55) brightness(.72);
}

.wt-pcard__badge {
	position: absolute;
	left: 16px;
	top: 16px;
	pointer-events: none;
}

/* --- Cuerpo ----------------------------------------------------------------
   Relleno 20 en el nodo 20:21. Los huecos entre piezas son distintos (14, 6,
   18), asi que van con margen y no con gap. */

.wt-pcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
}

.wt-pcard__attrs {
	gap: 7px;
	margin-bottom: 14px;
}

.wt-pcard__title {
	margin: 0;
	font-size: 21px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
}

.wt-pcard__title a {
	color: inherit;
	text-decoration: none;
}

/* El enlace del titulo cubre la tarjeta entera. El boton del pie se sube por
   encima con z-index, igual que en las tarjetas de categoria. */
.wt-pcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wt-pcard__lineage {
	margin: 6px 0 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
}

/* mt auto pega el pie al fondo: las tarjetas de una fila no tienen por que
   tener el mismo texto y aun asi los botones deben quedar alineados. */
.wt-pcard__foot {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin-top: auto;
	padding-top: 18px;
}

.wt-pcard__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wt-pcard__amount {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 18px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
}

/* WooCommerce envuelve el precio en <span class="woocommerce-Price-amount">,
   y en las ofertas mete <del> e <ins>. Se hereda todo del contenedor. */
.wt-pcard__amount .woocommerce-Price-amount { font: inherit; }
.wt-pcard__amount del { margin-inline-end: 6px; color: var(--wt-text-3); font-size: 13px; font-weight: var(--wt-weight-reg); }
.wt-pcard__amount ins { color: var(--wt-purple); text-decoration: none; }

/* Linea que sustituye al precio cuando no se puede comprar. */
.wt-pcard__unavailable {
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.4;
}

.wt-pcard__pack,
.wt-pcard__note {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 10.5px;
	letter-spacing: .4px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* WooCommerce anade .added_to_cart despues de anadir por AJAX. */
.wt-pcard__foot .added_to_cart {
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	text-decoration: none;
}

/* El aviso de «esto todavia no funciona» dentro de una tarjeta va mas
   apretado que el de los formularios de la home. */
.wt-pcard__foot .wt-form-note {
	font-size: 11px;
}


/* ==========================================================================
   Estrellas de valoracion · nodo 35:12
   --------------------------------------------------------------------------
   Componente compartido, lo pinta wt_get_rating_stars(). El hueco llega por
   variable desde PHP porque cambia segun donde se use.

   Vivian en home.css, y por lo mismo que la tarjeta de producto tuvieron que
   salir de ahi: las usa tambien la ficha (nodo 24:97) y home.css no se carga en
   la tienda. Sin estilos, .wt-star es un <svg> en display block y las cinco
   estrellas salian una debajo de otra.
   ========================================================================== */

.wt-stars {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-star-gap, 3px);
	color: var(--wt-star);
	line-height: 0;
}

.wt-star {
	display: block;
	flex: 0 0 auto;
}

.wt-star--empty {
	color: var(--wt-text-3);
	opacity: .45;
}