/**
 * Estilos para el marcado de WooCommerce.
 *
 * Aqui no se usan utilidades de Tailwind: este marcado lo genera Woo, no
 * nuestras plantillas, asi que no hay ningun fichero que escanear para que
 * las utilidades se generen. Son reglas escritas a mano contra las clases de
 * Woo y leen los mismos tokens --t-* que todo lo demas.
 *
 * Es el acoplamiento que avisa la tabla de riesgos del plan. Va todo en un
 * fichero a proposito: revisar una actualizacion de Woo es mirar aqui.
 * Basado en WooCommerce 11.1.1.
 *
 * Donde el primario se usa como LETRA o como contorno de foco —el precio de
 * la ficha, la pestaña activa, los enlaces de la cuenta— se lee
 * --t-color-primary-texto y, si la skin no lo declara, el primario de
 * siempre. Es para las skins cuyo primario es un color de relleno que no se
 * lee como texto: Taller lo declara, con la tinta.
 */

/* --- Ficha de producto -------------------------------------------------- */

.woocommerce-product-gallery img {
	border-radius: var(--t-radius-card);
	background: var(--t-color-fondo-alt);
}

.product_title {
	font-family: var(--t-font-display);
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.summary .price {
	margin-top: 0.75rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--t-color-primary-texto, var(--t-color-primary));
}

.summary .price del { opacity: 0.5; font-size: 1rem; font-weight: 400; margin-right: 0.5rem; }
.summary .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	margin-top: 1rem;
	color: var(--t-color-tinta-suave);
}

.product_meta {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: var(--t-border-grosor) solid var(--t-color-borde);
	font-size: 0.875rem;
	color: var(--t-color-tinta-suave);
}

/* --- Formularios y botones ---------------------------------------------- */

form.cart { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.quantity input[type="number"],
.woocommerce-cart-form input[type="number"] {
	width: 5rem;
	padding: 0.5rem 0.625rem;
}

.button,
button.button,
a.button,
input.button,
.comment-form .submit,
.wp-element-button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--t-radius-boton);
	background: var(--t-color-primary);
	color: #fff;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.button:hover, button.button:hover, a.button:hover, input.button:hover, .comment-form .submit:hover { opacity: 0.9; }

.button:focus-visible, button.button:focus-visible, a.button:focus-visible, .comment-form .submit:focus-visible {
	outline: 2px solid var(--t-color-primary-texto, var(--t-color-primary));
	outline-offset: 2px;
}

/* El boton secundario de Woo (seguir comprando, actualizar carrito). */
.button.alt--secondary,
.woocommerce-cart-form .button[name="update_cart"] {
	background: transparent;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	color: var(--t-color-tinta);
}

/* --- Avisos ---------------------------------------------------------------
 *
 * El radio es el de tarjeta y no el de boton: un aviso crece en alto —dos
 * lineas, y a veces un boton— y el de boton es una pildora en tres de las
 * cinco skins, que sobre una caja asi la deja con forma de capsula.
 *
 * Y se redondea solo el lado contrario al filete. Con las cuatro esquinas
 * curvas, el filete de 3px se curva con ellas y lo que queda es una media
 * luna despegada del texto, que es justo lo que se veia. A ras, el filete
 * recorre el alto del aviso y hace de marca de color, que es su trabajo.
 *
 * Lo mismo vale para el aviso de "pedido recibido", mas abajo: misma forma,
 * mismo filete.
 */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem;
	border-radius: 0 var(--t-radius-card) var(--t-radius-card) 0;
	border-left: 3px solid var(--t-color-primary);
	background: var(--t-color-fondo-alt);
	font-size: 0.875rem;
	list-style: none;
}

.woocommerce-error { border-left-color: #b32d2e; }

/* Woo pone el boton ANTES del texto en el marcado y lo mandaba a la derecha
   con un float de su hoja, que esta desencolada: se quedaba delante y el
   texto rompia a su alrededor. Vuelve a su sitio sin tocar el marcado.
   El aviso de error se queda fuera porque es un <ul>: sus mensajes van en
   <li> y en una fila flexible se pondrian uno al lado del otro. */
.woocommerce-message,
.woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 1;
	margin-left: auto;
}

/* --- Carrito y checkout -------------------------------------------------- */

.woocommerce-cart-form table,
.cart_totals table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce-cart-form th,
.cart_totals th,
.woocommerce-checkout-review-order-table th { text-align: left; font-weight: 600; }

.woocommerce-cart-form td,
.woocommerce-cart-form th,
.cart_totals td,
.cart_totals th,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	padding: 0.75rem 0.5rem;
	border-bottom: var(--t-border-grosor) solid var(--t-color-borde);
	vertical-align: middle;
}

.woocommerce-cart-form .product-thumbnail img { width: 4rem; border-radius: var(--t-radius-boton); }

.cart_totals, .woocommerce-checkout-review-order {
	margin-top: 2rem;
	padding: 1.25rem;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	border-radius: var(--t-radius-card);
	background: var(--t-color-fondo-alt);
}

/* --- Maqueta del checkout ------------------------------------------------
   WooCommerce reparte los campos en dos columnas (.col-1 facturacion, .col-2
   envio y notas) y pone el resumen del pedido debajo, a todo el ancho. Eso
   deja las notas del pedido flotando arriba a la derecha, sin nada que las
   acompane, y el total a un scroll de distancia mientras se teclea la
   direccion.

   Se le da la vuelta desde aqui, sin sobrescribir la plantilla: el orden del
   DOM ya sirve tal cual, y una plantilla menos es un override menos que
   revisar cada vez que WooCommerce se actualiza.

   Una columna de campos a la izquierda, el resumen a la derecha y fijo. El
   ancho de la columna de campos esta acotado a proposito: un campo de "Codigo
   postal" de 600px invita a escribir en el la direccion entera. */
@media (min-width: 62rem) {
	form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);

		/* La primera fila se fija a su contenido —el encabezado del resumen—
		   porque #customer_details abarca las dos y, con filas automaticas, el
		   navegador le reparte su altura: la fila del encabezado pasaba de 46
		   a 158px y el panel caia 200px por debajo de su propio titulo. */
		grid-template-rows: min-content 1fr;
		align-items: start;

		/* Separacion solo entre columnas. Entre el encabezado del resumen y el
		   panel no hace falta: son la misma pieza. */
		gap: 0 3rem;
	}

	/* Los campos ocupan la primera columna; el encabezado del resumen y el
	   resumen, la segunda. wc-order-attribution-inputs no pinta nada pero es
	   un hijo mas del formulario, y sin esto ocuparia una celda. */
	form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
	form.checkout > #order_review { grid-column: 2; grid-row: 2; }
	form.checkout > wc-order-attribution-inputs { display: none; }

	/* En dos columnas, facturacion va encima de envio y de las notas, no al
	   lado: son el mismo hilo de lectura.

	   Se gana por especificidad y no por orden: la regla que reparte .col2-set
	   en dos esta mas abajo en este fichero, y apoyarse en quien va despues
	   convierte reordenar el fichero en romper la maqueta. */
	form.checkout .col2-set { grid-template-columns: none; }

	/* Lo que hace que se sienta como un checkout moderno y no como un
	   formulario largo: el total no se va de la pantalla. top deja hueco para
	   la cabecera, que no es fija pero si lo fuera taparia el borde. */
	form.checkout > #order_review {
		position: sticky;
		top: 1.5rem;
	}

	form.checkout > #order_review_heading { margin-top: 0; }

	/* El margen que separa el panel cuando va debajo, a todo el ancho, aqui lo
	   despega de su encabezado. */
	form.checkout > #order_review { margin-top: 0; }
}

/* Los tres encabezados del formulario: facturacion, envio y "Tu pedido".
   Los pintaba la hoja de WooCommerce, desencolada, y despues se sostenian de
   rebote en las reglas de prosa que page.php aplicaba a toda la pagina. Al
   dejar de tratar las paginas de tienda como prosa se quedaron en texto
   normal, y el formulario perdio sus tres secciones. */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading,
.woocommerce-checkout h3 {
	margin: 2rem 0 1rem;
	font-family: var(--t-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: var(--t-tracking-display);
	color: var(--t-color-tinta);
}

.woocommerce-checkout .woocommerce-billing-fields h3:first-child { margin-top: 0; }

/* Menos "¿Enviar a una direccion diferente?", que WooCommerce marca como h3
   pero es una casilla que despliega una seccion. Es un encabezado de verdad en
   el arbol del documento y conviene que lo siga siendo, pero pintarlo a 20px
   con una casilla al lado lo hace gritar mas que el titulo al que acompana. */
#ship-to-different-address {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: normal;
}

#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

#ship-to-different-address input[type="checkbox"] {
	width: auto;
	margin: 0;
	accent-color: var(--t-color-primary);
}

/* El mensaje que WooCommerce pone bajo el campo que falla. Su hoja lo colorea;
   sin esto sale en el tamano y el color del texto normal y se lee como una
   indicacion de ayuda, justo lo contrario de lo que es. */
.checkout-inline-error-message {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: #b32d2e;
}

.woocommerce-checkout .form-row { margin-bottom: 1rem; }

/* Acotado a las etiquetas del formulario y no a cualquier label del checkout:
   en bloque estaban bien para nombre o direccion, pero tiraban a la linea de
   abajo la etiqueta de cada metodo de pago, que va al lado de su radio. */
.woocommerce-checkout .form-row > label,
.woocommerce-checkout .woocommerce-input-wrapper > label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
}

/* Metodos de pago. WooCommerce los pinta como una lista de radios y los coloca
   desde su hoja, que va desencolada: sin esto quedan sueltos bajo la tabla. */
.wc_payment_methods {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--t-border-grosor) solid var(--t-color-borde);
}

.wc_payment_methods li {
	padding: 0.875rem 0;
	border-bottom: var(--t-border-grosor) solid var(--t-color-borde);
}

.wc_payment_methods li > label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
}

.wc_payment_methods input[type="radio"] {
	width: auto;
	margin: 0;
	accent-color: var(--t-color-primary);
}

/* La descripcion del metodo la inyecta WooCommerce con JavaScript al elegirlo. */
.wc_payment_methods .payment_box {
	margin: 0.5rem 0 0 1.5rem;
	font-size: 0.875rem;
	color: var(--t-color-tinta-suave);
}

.wc_payment_methods .payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--t-color-tinta-suave);
}

.woocommerce-checkout #place_order { margin-top: 1.25rem; }

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	width: 100%;
	padding: 0.5rem 0.75rem;
}

/* --- Ordenacion y paginacion --------------------------------------------- */

.woocommerce-ordering select {
	padding: 0.375rem 0.5rem;
}

.woocommerce-pagination ul { display: flex; gap: 0.375rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: block;
	padding: 0.375rem 0.75rem;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	border-radius: var(--t-radius-boton);
	text-decoration: none;
}
.woocommerce-pagination .current { background: var(--t-color-primary); color: #fff; border-color: transparent; }

/* --- Pestañas y relacionados --------------------------------------------- */

.woocommerce-tabs { margin-top: 3rem; }
.woocommerce-tabs .tabs { display: flex; gap: 1.5rem; list-style: none; padding: 0 0 0.75rem; margin: 0 0 1.5rem; border-bottom: var(--t-border-grosor) solid var(--t-color-borde); }
.woocommerce-tabs .tabs a { text-decoration: none; color: var(--t-color-tinta-suave); }
.woocommerce-tabs .tabs .active a { color: var(--t-color-primary-texto, var(--t-color-primary)); font-weight: 600; }

.related, .upsells { margin-top: 3rem; }
.related > h2, .upsells > h2 {
	font-family: var(--t-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

/* --- Valoraciones --------------------------------------------------------
 *
 * Woo dibuja las estrellas con su propia tipografia de iconos, que viene en
 * la hoja que desencolamos. Se rehacen con el caracter ★ del sistema: no
 * depende de ningun fichero de fuente ni de la ruta donde Woo lo publique,
 * que cambia entre versiones.
 *
 * La tecnica es la suya: dos capas de cinco estrellas superpuestas, la de
 * relleno recortada al ancho en porcentaje que Woo pone en el style inline.
 */

.star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.6em;
	height: 1.25em;
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	line-height: 1.25;
	letter-spacing: 0.08em;
}

.star-rating::before,
.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
}

.star-rating::before { color: var(--t-color-borde); }

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	/* Empuja el texto accesible fuera del alto del contenedor. El aria-label
	   del padre ya nombra la valoracion, asi que no se pierde nada. */
	padding-top: 1.5em;
	white-space: nowrap;
}

.star-rating span::before { color: var(--t-color-primary); }

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
}

.woocommerce-review-link { color: var(--t-color-tinta-suave); text-decoration: none; }
.woocommerce-review-link:hover { color: var(--t-color-primary-texto, var(--t-color-primary)); }

/* La tarjeta del listado: la estrella va debajo del nombre. */
.products .star-rating { margin: 0.25rem 0; font-size: 0.85rem; }

/* --- Selector de estrellas del formulario de reseña ----------------------
 *
 * Este marcado no existe en el HTML: lo construye wc-single-product.js
 * sustituyendo un <select>. Sin CSS se ve como una fila de numeros sueltos.
 */

p.stars { margin: 0.25rem 0 1rem; }

p.stars span {
	display: inline-flex;
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 1.25rem;
	letter-spacing: 0.08em;
}

p.stars a {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	text-decoration: none;
	text-indent: -999em; /* Oculta el numero, deja el ::before */
	color: var(--t-color-borde);
}

p.stars a::before {
	content: "★";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.3em;
	text-indent: 0;
	line-height: 1.3;
	text-align: center;
}

/* Al pasar por encima se rellenan esta y las anteriores. */
p.stars:hover a::before { color: var(--t-color-primary); }
p.stars a:hover ~ a::before { color: var(--t-color-borde); }

p.stars a:focus-visible { outline: 2px solid var(--t-color-primary-texto, var(--t-color-primary)); outline-offset: 2px; }

/* Ya elegida: Woo pone .selected en el <p> y .active en la estrella clicada.
   Se rellenan todas y se vacian solo las POSTERIORES a la activa, que es lo
   que deja rellenas la activa y las anteriores. */
p.stars.selected a::before { color: var(--t-color-primary); }
p.stars.selected a.active ~ a::before { color: var(--t-color-borde); }

/* --- Lista de reseñas ----------------------------------------------------- */

.commentlist { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.commentlist .review {
	padding: 1rem 0;
	border-top: var(--t-border-grosor) solid var(--t-color-borde);
}

.commentlist .comment_container { display: flex; gap: 0.875rem; align-items: flex-start; }
.commentlist img.avatar { width: 2.75rem; height: 2.75rem; border-radius: 999px; }
.commentlist .comment-text { flex: 1; min-width: 0; }
.commentlist .meta { font-size: 0.875rem; color: var(--t-color-tinta-suave); margin: 0.25rem 0 0.5rem; }
.commentlist .woocommerce-review__author { font-weight: 600; color: var(--t-color-tinta); }
.commentlist .description { font-size: 0.9375rem; }

/* --- Producto variable ---------------------------------------------------
 *
 * .variations es una tabla con th.label y td.value. Sin reglas, el selector,
 * el enlace de limpiar y el boton se pisan en una sola linea.
 */

.variations { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0; }
.variations th,
.variations td { padding: 0.375rem 0; text-align: left; vertical-align: middle; border: 0; }
.variations th.label { width: 8rem; font-weight: 500; font-size: 0.9375rem; }

.variations select {
	width: 100%;
	max-width: 16rem;
	padding: 0.5rem 0.75rem;
}

/* Woo lo muestra y oculta por JS; solo hay que darle aire cuando aparece. */
.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--t-color-tinta-suave);
}

.woocommerce-variation-price { margin: 1rem 0; }
.woocommerce-variation-description { color: var(--t-color-tinta-suave); font-size: 0.9375rem; }
.woocommerce-variation-availability { font-size: 0.875rem; }

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1rem;
}

/* Tabla de atributos de la pestaña "Información adicional". */
.shop_attributes { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.shop_attributes th,
.shop_attributes td {
	padding: 0.625rem 0;
	text-align: left;
	border-bottom: var(--t-border-grosor) solid var(--t-color-borde);
}
.shop_attributes th { width: 10rem; font-weight: 500; color: var(--t-color-tinta-suave); }
.shop_attributes p { margin: 0; }

/* --- Ofertas y existencias ------------------------------------------------ */

.onsale {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: var(--t-color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
}

/* En la ficha, la etiqueta va sobre la imagen.
 *
 * El ancla es .tienda-ficha-galeria, la columna del tema, y no la galeria de
 * Woo: la etiqueta (10) y la galeria (20) cuelgan del mismo hook, asi que son
 * HERMANAS. Poner la galeria en relativo no sujeta a la etiqueta —parece que
 * si al leer el marcado— y sin ancestro posicionado el absolute se cuelga del
 * bloque contenedor inicial: la etiqueta se iba a la esquina de la pagina.
 */
.single-product .tienda-ficha-galeria { position: relative; }
.single-product .onsale { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; }

/* Precio rebajado: el anterior tachado y atenuado. */
.price del, .amount del { opacity: 0.55; font-weight: 400; }
.price ins, .amount ins { text-decoration: none; }

.stock { margin: 0.75rem 0 0; font-size: 0.875rem; }
.stock.in-stock { color: var(--t-color-tinta-suave); }
.stock.out-of-stock,
p.out-of-stock { color: #b32d2e; font-weight: 500; }
.stock.available-on-backorder { color: var(--t-color-tinta-suave); font-style: italic; }

/* --- Campos de formulario fuera del checkout ------------------------------
 *
 * Los de Mi cuenta usan .input-text, que no pasa por las reglas de
 * .woocommerce-checkout.
 *
 * El de reseña no usa nada: WooCommerce lo emite con <textarea id="comment">
 * e <input id="author">, sin una sola clase, y su hoja los estilaba por id.
 * Por eso van por tipo y acotados al formulario, no por una clase que no
 * llega nunca.
 */

.input-text,
input.qty,
.woocommerce-Input,
.comment-form textarea,
.comment-form select,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	padding: 0.5rem 0.75rem;
	font: inherit;
}

.input-text:not(.qty) { width: 100%; max-width: 28rem; }
input.qty { width: 5rem; text-align: center; }

/* El radio del textarea ya no vive aqui: lo pone skins/controles.css para
   TODOS los de la tienda, no solo para los dos que conocia esta hoja —la
   resena y las notas del pedido—. La razon sigue siendo la misma: un campo
   de una linea es alto de boton y la pildora le sienta bien; un area con ese
   radio sale como un ovalo. */

.comment-form label,
.woocommerce-form-row label,
.woocommerce form .form-row label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }

.required { color: #b32d2e; text-decoration: none; border: 0; }

/* --- Formulario de reseña -------------------------------------------------
 *
 * Lo pinta comment_form(), que es de WordPress: lo unico con clase es el <p>
 * que envuelve cada campo. El titulo ni siquiera es un encabezado —es un
 * <span role="heading">— asi que sin regla sale del tamaño del texto corrido,
 * igual que el <h2> del listado, al que el reset le quita el suyo.
 */

.woocommerce-Reviews-title {
	font-family: var(--t-font-display);
	font-size: 1.5rem;
	font-weight: 600;
}

#review_form_wrapper { margin-top: 2.5rem; }

.comment-reply-title {
	display: block;
	font-family: var(--t-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.comment-notes {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: var(--t-color-tinta-suave);
}

/* El reset deja los parrafos a cero, y cada campo del formulario va en uno. */
.comment-form p,
.comment-form-rating { margin: 0 0 1rem; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea { width: 100%; max-width: 28rem; }

.comment-form textarea { display: block; min-height: 7rem; resize: vertical; }

/* La casilla de las cookies es la unica etiqueta que va al lado de su campo
   y no encima, asi que deshace la regla de arriba para ella sola. */
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; }
/* Alinea la casilla con la primera linea cuando la etiqueta ocupa varias. */
.comment-form-cookies-consent input { margin-top: 0.3rem; }
.comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 400; }

.comment-form .form-submit { margin-top: 1.5rem; }

/* --- Mi cuenta ------------------------------------------------------------
 *
 * Estas clases NO estaban en las hojas que desencolamos: WooCommerce solo las
 * estila en sus CSS de compatibilidad con los temas de WordPress. Es decir,
 * cada tema tiene que maquetar esto. No es una regresion nuestra, es un hueco
 * que siempre estuvo ahi.
 */

.woocommerce-account .woocommerce { display: grid; gap: 2rem; }

@media (min-width: 48rem) {
	/* Solo si el menu esta de verdad. Sin sesion iniciada los dos hijos de
	   .woocommerce son otros —el envoltorio de avisos, vacio, y el bloque de
	   acceso y registro— y el vacio se quedaba la columna del menu: el
	   formulario entero se iba a la derecha con un hueco de 14rem al lado. */
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 14rem 1fr;
		align-items: start;
	}
}

/* --- Acceso y registro ----------------------------------------------------
 *
 * Los dos encabezados llegan pelados, que es lo que hace el reset con un h2,
 * y las filas del formulario son <p>, a los que tambien deja sin margen: sin
 * estas reglas, titulo, etiquetas y campos salen pegados unos a otros.
 */

#customer_login h2 {
	font-family: var(--t-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.woocommerce-account .form-row { margin: 0 0 1rem; }
.woocommerce-account .form-row:last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-form-register > p:not(.form-row) {
	font-size: 0.8125rem;
	color: var(--t-color-tinta-suave);
}

.woocommerce-LostPassword { margin: 1rem 0 0; font-size: 0.875rem; }
.woocommerce-LostPassword a { color: var(--t-color-primary-texto, var(--t-color-primary)); }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--t-radius-boton);
	color: var(--t-color-tinta-suave);
	text-decoration: none;
	font-size: 0.9375rem;
}

.woocommerce-MyAccount-navigation-link a:hover { background: var(--t-color-fondo-alt); color: var(--t-color-tinta); }

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--t-color-primary-suave);
	color: var(--t-color-primary-texto, var(--t-color-primary));
	font-weight: 600;
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Direcciones: Woo las maqueta con su propia rejilla col2-set. */
.col2-set { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .col2-set { grid-template-columns: 1fr 1fr; } }
.col2-set .title h3,
.woocommerce-Address-title h3 { font-family: var(--t-font-display); font-size: 1.125rem; font-weight: 600; margin: 0; }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.woocommerce-Address-title .edit { font-size: 0.875rem; color: var(--t-color-primary-texto, var(--t-color-primary)); text-decoration: none; }

.woocommerce-orders-table,
.woocommerce-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table th,
.woocommerce-table td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: var(--t-border-grosor) solid var(--t-color-borde); }

/* --- Listado: cuenta de resultados y titulo ------------------------------- */

.woocommerce-result-count { margin: 0; }
.woocommerce-products-header__title,
.page-title { font-family: var(--t-font-display); }

/* --- Galeria e imagenes de relleno ---------------------------------------- */

.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img,
img.woocommerce-placeholder {
	border-radius: var(--t-radius-card);
	background: var(--t-color-fondo-alt);
}
.woocommerce-product-gallery__image--placeholder img { opacity: 0.5; }

/* Las miniaturas no vienen en el HTML: las escribe flexslider cuando el
   producto tiene mas de una foto, y quien las ponia en fila era la hoja de
   Woo que desencolamos. Sin esto cada <li> ocupa la columna entera y se
   apilan una debajo de otra.

   Van a 5rem y no al cuarto de columna que les daba Woo: la miniatura se
   sirve a 100 px y estirada a mas sale borrosa. */
.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.flex-control-thumbs li { width: 5rem; }
.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover { opacity: 1; }

/* --- Pedido recibido y detalle de pedido ---------------------------------
 *
 * Esta pagina no existe hasta que hay un pedido, asi que su marcado se
 * escapa de cualquier auditoria hecha sobre una tienda sin ventas. Aparecio
 * al cerrar el primer flujo de compra completo.
 */

.woocommerce-notice,
.woocommerce-thankyou-order-received {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 0 var(--t-radius-card) var(--t-radius-card) 0;
	border-left: 3px solid var(--t-color-primary);
	background: var(--t-color-primary-suave);
	font-weight: 500;
}

/* Resumen de cabecera: numero, fecha, correo, total y metodo de pago. */
.woocommerce-order-overview {
	display: grid;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	border-radius: var(--t-radius-card);
	background: var(--t-color-fondo-alt);
	list-style: none;
}

@media (min-width: 40rem) {
	.woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

.woocommerce-order-overview li {
	font-size: 0.8125rem;
	color: var(--t-color-tinta-suave);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	color: var(--t-color-tinta);
	text-transform: none;
	letter-spacing: 0;
	/* Un correo largo desborda su columna y se pega al dato de al lado. */
	overflow-wrap: anywhere;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-family: var(--t-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

/* Tabla de lineas del pedido. shop_table la usan varias vistas de Woo. */
.shop_table,
.order_details {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin-bottom: 2rem;
}

.shop_table th,
.shop_table td,
.order_details th,
.order_details td {
	padding: 0.75rem 0.5rem;
	text-align: left;
	border-bottom: var(--t-border-grosor) solid var(--t-color-borde);
	vertical-align: top;
}

.shop_table thead th,
.order_details thead th {
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--t-color-tinta-suave);
}

.shop_table tfoot th { font-weight: 500; }
.shop_table tfoot tr:last-child th,
.shop_table tfoot tr:last-child td { font-weight: 700; font-size: 1.0625rem; border-bottom: 0; }

.shop_table .product-total,
.shop_table .product-quantity,
.order_details td.product-total { text-align: right; }
.shop_table tfoot td { text-align: right; }

.shop_table .product-name a { color: inherit; text-decoration: none; }
.shop_table .product-name a:hover { color: var(--t-color-primary-texto, var(--t-color-primary)); }
.shop_table .wc-item-meta { margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--t-color-tinta-suave); }

/* Datos del cliente: facturacion y envio en dos columnas. */
.woocommerce-customer-details .addresses { display: grid; gap: 2rem; }
@media (min-width: 40rem) {
	.woocommerce-customer-details .addresses { grid-template-columns: 1fr 1fr; }
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	color: var(--t-color-tinta-suave);
	padding: 1rem;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	border-radius: var(--t-radius-card);
}

.woocommerce-customer-details--email,
.woocommerce-customer-details--phone { margin: 0.5rem 0 0; font-size: 0.875rem; }

/* Datos bancarios que muestra la transferencia al confirmar. */
.wc-bacs-bank-details {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: var(--t-border-grosor) solid var(--t-color-borde);
	border-radius: var(--t-radius-card);
	list-style: none;
}
.wc-bacs-bank-details-heading { font-family: var(--t-font-display); font-size: 1.125rem; font-weight: 600; }