/* ==========================================================================
   PI Theme — WooCommerce

   WooCommerce trae una hoja propia pensada para themes que no tienen sistema
   de diseño. Acá está desactivada (inc/woocommerce.php § 8) y todo se escribe
   con los tokens de variables.css, para que el checkout no se lea como una
   pantalla de otra web pegada en el medio del sitio.

   Índice
     1. Contenedores y notices
     2. Formularios
     3. Checkout: layout
     4. Checkout: cabecera propia
     5. Checkout: resumen del pedido
     6. Cantidad de entradas
    6b. Datos de los asistentes
     7. Pago y botón final
     8. Pantalla de gracias
     9. Producto y tienda (secundarios)
    9b. Mi cuenta, listados y formularios sueltos
    10. Responsive y accesibilidad
   ========================================================================== */

/* ==========================================================================
   1. Contenedores y notices
   ========================================================================== */

.woocommerce,
.woocommerce-page .entry-content > .woocommerce {
	font-family: var(--pi-font-body);
	color: var(--pi-text);
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--pi-surface);
	border: 1px solid var(--pi-border);
	border-left-width: 3px;
	border-radius: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.woocommerce-message { border-left-color: #1f7a4d; }
.woocommerce-info { border-left-color: var(--pi-primary); }
.woocommerce-error { border-left-color: #b3261e; }

.woocommerce-error li { margin: 0; }
.woocommerce-error li + li { margin-top: 0.4rem; }

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 1rem;
	background: none;
	border: 0;
	padding: 0;
	color: var(--pi-primary);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* El error de cantidad que inyecta assets/js/woocommerce.js */
.pi-qty-error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: #fdeceb;
	border-left: 3px solid #b3261e;
	font-size: 0.875rem;
	color: #7d1c16;
}

/* ==========================================================================
   2. Formularios
   --------------------------------------------------------------------------
   Los mismos campos que assets/css/main.css § 10 define para Contact Form 7.
   Que el checkout se vea distinto al formulario de la landing sería el tipo de
   detalle que hace dudar al visitante justo antes de poner la tarjeta.
   ========================================================================== */

.woocommerce form .form-row {
	display: block;
	margin: 0;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-billing-fields label {
	display: block;
	font-size: var(--pi-small);
	font-weight: 600;
	color: var(--pi-ink);
	margin-bottom: 0.4rem;
}

.woocommerce form .form-row label .required,
.woocommerce form .form-row abbr.required {
	color: var(--pi-primary);
	border: 0;
	text-decoration: none;
}

/* Red de contención para el "(opcional)" del teléfono.
   El campo es obligatorio de los dos lados —lo valida el servidor y lo declara
   el locale de país, que es de donde saca el texto `address-i18n.js`—, pero ese
   texto ya volvió una vez de un lado que no se ve leyendo el PHP. Si una
   versión futura de WooCommerce cambia otra vez de dónde lo saca, que al menos
   no se lea. El de "Empresa / Institución" se deja: ese campo SÍ es opcional y
   la aclaración le ahorra a alguien completarlo al pedo. */
#billing_phone_field label .optional { display: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 0.85rem 1rem;
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	border-radius: 0;
	font-family: var(--pi-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pi-ink);
	transition: border-color var(--pi-dur) var(--pi-ease), box-shadow var(--pi-dur) var(--pi-ease);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 0;
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-primary-100);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--pi-muted);
	opacity: 1;
}

/* Descripción bajo el campo: explica por qué se pide el dato. */
.woocommerce form .form-row .description,
.woocommerce form .form-row span.description {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pi-muted);
}

/* Validación */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #b3261e;
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--pi-border);
}

/* El país queda en el DOM porque WooCommerce y varias pasarelas lo necesitan
   para calcular impuestos, pero pedirlo en pantalla no aporta nada: el evento
   es presencial y en Córdoba. */
.pi-campo-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* `hidden` tiene que ganarle al `display` propio de estos elementos: la
   sección es un grid y los bloques de asistente son fieldsets. Va acotado a
   lo del theme —un `[hidden]` global pisaría los elementos que WooCommerce
   muestra y esconde por su cuenta. */
.pi-asistentes[hidden],
.pi-asistentes__nota[hidden],
.pi-asistente[hidden] {
	display: none;
}

/* ==========================================================================
   3. Checkout: layout
   ========================================================================== */

.woocommerce-checkout .pi-page-hero p.pi-lead {
	max-width: 46ch;
}

form.woocommerce-checkout,
form.checkout.woocommerce-checkout {
	margin: 0;
}

#customer_details h3,
#order_review_heading {
	font-size: var(--pi-h4);
	margin: 0 0 1.25rem;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

@media (min-width: 560px) {
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last {
		grid-column: span 1;
	}
	.woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

/* Dos columnas: los datos a la izquierda, lo que se paga siempre a la vista
   a la derecha. El resumen queda pegado al scroll para que el total no
   desaparezca mientras se completa el formulario. */
@media (min-width: 1024px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: clamp(36px, 4vw, 68px);
		align-items: start;
	}

	form.checkout.woocommerce-checkout > #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	form.checkout.woocommerce-checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	form.checkout.woocommerce-checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 104px;
	}
}

#customer_details .col2-set,
#customer_details .col-1,
#customer_details .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

#customer_details .col-2:empty {
	display: none;
}

/* Cupón y login: útiles, pero no son lo primero que tiene que ver alguien
   que viene de apretar "Reservar mi lugar". */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	margin-bottom: 0;
	padding: 0.7rem 1rem;
	font-size: 0.875rem;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login {
	margin: 0 0 1.75rem;
	padding: 1.25rem;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
	border-radius: 0;
}

/* ==========================================================================
   4. Checkout: cabecera propia
   ========================================================================== */

.pi-checkout-head {
	margin-bottom: clamp(28px, 3vw, 44px);
	padding-bottom: clamp(20px, 2.5vw, 32px);
	border-bottom: 1px solid var(--pi-border);
}

.pi-checkout-head h2 {
	font-size: var(--pi-h3);
	margin: 0 0 1rem;
}

.pi-checkout-head__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	font-size: 0.9375rem;
	color: var(--pi-text);
}

.pi-checkout-head__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
}

.pi-checkout-head__meta svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--pi-primary);
}

/* ==========================================================================
   5. Checkout: resumen del pedido
   ========================================================================== */

.woocommerce-checkout-review-order {
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	box-shadow: var(--pi-shadow-lg);
	padding: clamp(20px, 2.5vw, 32px);
	transition: opacity var(--pi-dur) var(--pi-ease);
}

/* Mientras se recalcula el total, el bloque baja de opacidad. Sin esto el
   número cambia de golpe y parece un error. */
.woocommerce-checkout-review-order.pi-esta-actualizando {
	opacity: 0.55;
	pointer-events: none;
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
}

.woocommerce-checkout-review-order-table thead th {
	padding: 0 0 0.85rem;
	border-bottom: 1px solid var(--pi-border);
	font-family: var(--pi-font-body);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	text-align: left;
}
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--pi-border);
	vertical-align: middle;
}

.woocommerce-checkout-review-order-table .product-name {
	font-weight: 600;
	color: var(--pi-ink);
	padding-right: 1rem;
}

.woocommerce-checkout-review-order-table .product-total {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout-review-order-table tfoot th {
	text-align: left;
	font-weight: 400;
	color: var(--pi-text);
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 1.15rem;
}

.woocommerce-checkout-review-order-table tfoot .order-total th {
	font-family: var(--pi-font-display);
	font-size: var(--pi-h6);
	font-weight: 500;
	color: var(--pi-ink);
}

.woocommerce-checkout-review-order-table tfoot .order-total td strong {
	font-family: var(--pi-font-display);
	font-size: var(--pi-h5);
	font-weight: 700;
	color: var(--pi-ink);
	letter-spacing: -0.02em;
}

.woocommerce-checkout-review-order-table .includes_tax,
.woocommerce-checkout-review-order-table small {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--pi-muted);
}

/* ==========================================================================
   6. Cantidad de entradas
   --------------------------------------------------------------------------
   El stepper en sí (`.pi-qty`) vive en assets/css/main.css § 16, porque lo
   comparte con la sección "Comprar ahora" de la home y esta hoja solo se
   encola en las páginas de la tienda.

   Acá va la tarjeta que lo contiene en el checkout. Está arriba del
   formulario y no dentro de la tabla del resumen a propósito: ahí la cantidad
   se leía como un dato impreso y nadie la tocaba.
   ========================================================================== */

.pi-checkout-qty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: clamp(24px, 3vw, 40px);
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid var(--pi-border);
	border-left: 3px solid var(--pi-primary);
	background: var(--pi-white);
}

.pi-checkout-qty__texto {
	flex: 1 1 16rem;
}

.pi-checkout-qty__texto h3 {
	font-size: var(--pi-h4);
	margin: 0 0 0.35em;
}

.pi-checkout-qty__texto p {
	margin: 0;
	font-size: var(--pi-small);
	color: var(--pi-muted);
	max-width: 44ch;
}

.pi-checkout-qty__control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem 1.1rem;
}

.pi-checkout-qty__precio {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	font-size: var(--pi-small);
	color: var(--pi-muted);
}

/* Los dos precios se imprimen siempre y el JS esconde el que no corresponde.
   Un hijo de grilla con `display` propio ignoraría el atributo `hidden`, así
   que se declara explícito: si esta regla falta, se ven los dos precios a la
   vez y no se entiende cuál se paga. */
.pi-checkout-qty__precio [hidden] {
	display: none;
}

.pi-checkout-qty__cuotas,
.pi-producto__cuotas {
	font-size: var(--pi-small);
	color: var(--pi-muted);
}

.pi-producto__cuotas {
	margin: -0.5rem 0 1.25rem;
}

.pi-checkout-qty__total {
	color: var(--pi-ink);
}

.pi-checkout-qty__total strong {
	font-size: 1.0625rem;
}

/* Mientras el carrito se actualiza, el total que se ve todavía es el viejo:
   atenuarlo evita que alguien lea un número que está por cambiar. */
.pi-checkout-qty.pi-esta-actualizando .pi-checkout-qty__precio {
	opacity: 0.5;
}

.pi-checkout-qty .pi-qty-error {
	flex: 1 1 100%;
	margin: 0;
}


/* ==========================================================================
   6b. Datos de los asistentes
   --------------------------------------------------------------------------
   Cada entrada es nominal, así que con N entradas hacen falta N personas.
   Esta sección tiene que leerse como una lista de fichas, no como un
   formulario más largo: por eso cada asistente va en su propia caja con su
   número arriba.

   El MARKUP lo imprime el plugin pi-entradas; acá está solo cómo se ve. Es el
   reparto de siempre: los datos del evento son del plugin, la presentación es
   del theme.
   ========================================================================== */

/* La sección vive DENTRO de la columna de facturación, pegada a los campos del
   comprador, así que el separador de arriba es más chico que cuando era un
   bloque suelto del checkout. */
.pi-asistentes {
	margin-top: clamp(20px, 2.2vw, 32px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--pi-border);
}

.pi-asistentes h3 {
	font-size: var(--pi-h4);
	margin: 0 0 0.5em;
}

.pi-asistentes__intro {
	margin: 0 0 0.75rem;
	font-size: var(--pi-small);
	color: var(--pi-muted);
	max-width: 62ch;
}

/* Se cargan datos de terceros: el aviso de consentimiento tiene que estar a la
   vista, no escondido en la política de privacidad. */
.pi-asistentes__aviso {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pi-muted);
	max-width: 62ch;
}

/* La casilla decide si se piden 1 o N fichas, así que tiene que verse como
   un control, no como una nota al pie. */
.pi-asistentes__soy {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.85rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--pi-border);
	background: var(--pi-surface);
	font-weight: 600;
	cursor: pointer;
}

.pi-asistentes__soy input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--pi-primary);
	flex: 0 0 auto;
}

.pi-asistentes__nota {
	margin: 0 0 1.5rem;
	font-size: var(--pi-small);
	color: var(--pi-muted);
	max-width: 62ch;
}

.pi-asistentes__lista {
	display: grid;
	gap: 1.25rem;
}

.pi-asistente {
	margin: 0;
	padding: 1.15rem 1.25rem 1.35rem;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
}

.pi-asistente__titulo {
	padding: 0 0.5rem;
	margin-left: -0.5rem;
	font-family: var(--pi-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pi-primary);
}

.pi-asistente__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin-top: 0.35rem;
}

@media (min-width: 560px) {
	.pi-asistente__grid {
		grid-template-columns: 1fr 1fr;
	}
	.pi-asistente__grid .pi-span-2 {
		grid-column: 1 / -1;
	}
}
/* ==========================================================================
   7. Pago y botón final
   ========================================================================== */

#payment,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

#payment ul.payment_methods li {
	margin: 0;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--pi-border);
	font-size: 0.9375rem;
}
#payment ul.payment_methods li:last-child {
	border-bottom: 0;
}

#payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	font-weight: 600;
	color: var(--pi-ink);
	cursor: pointer;
}

#payment ul.payment_methods li input[type="radio"] {
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--pi-primary);
	margin: 0;
}

#payment ul.payment_methods li img {
	max-height: 26px;
	width: auto;
	margin-left: 0.5rem;
	vertical-align: middle;
}

#payment div.payment_box {
	position: relative;
	margin: 0.85rem 0 0;
	padding: 0.9rem 1.1rem;
	background: var(--pi-surface);
	border: 0;
	border-left: 3px solid var(--pi-primary);
	border-radius: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--pi-text);
}
#payment div.payment_box::before {
	display: none;
}
#payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Campos de la pasarela (Payway/Decidir)
   --------------------------------------------------------------------------
   La pasarela dibuja los campos de la tarjeta —número, mes, año, CVV— con su
   propio markup, SIN las clases `.form-row`/`.input-text` de WooCommerce. Sin
   estas reglas caen con el layout crudo del plugin: labels flotados y campos a
   media fila que se desalinean (el "CVV:" queda pegado al año, como en el
   reporte).

   Se linealiza todo a una columna dentro de la caja del método de pago y se le
   calca el look de campo del resto del checkout. El selector arranca en
   `#payment div.payment_box` para no tocar nada fuera de la pasarela. Se
   excluyen los `hidden` —un `display:block` los volvería visibles— y los
   radio/checkbox, que no son campos de texto. */
#payment div.payment_box p {
	float: none;
	width: 100%;
	margin: 0 0 0.9rem;
}
#payment div.payment_box label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 0.4rem;
	font-size: var(--pi-small);
	font-weight: 600;
	color: var(--pi-ink);
	text-align: left;
}
#payment div.payment_box input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
#payment div.payment_box select {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0.85rem 1rem;
	background: var(--pi-white);
	border: 1px solid var(--pi-border);
	border-radius: 0;
	font-family: var(--pi-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pi-ink);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
#payment div.payment_box input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):focus,
#payment div.payment_box select:focus {
	outline: 0;
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-primary-100);
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--pi-muted);
}
.woocommerce-terms-and-conditions-checkbox-text {
	font-size: 0.875rem;
	color: var(--pi-text);
}

#payment .form-row.place-order {
	margin: 1.5rem 0 0;
	padding: 0;
}

.woocommerce #payment #place_order,
#place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.05rem 2.25rem;
	background: var(--pi-primary);
	color: #fff;
	border: 0;
	border-radius: var(--pi-radius-pill);
	font-family: var(--pi-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease), transform var(--pi-dur) var(--pi-ease);
}
#place_order:hover {
	background: var(--pi-accent);
	transform: translateY(-2px);
}
#place_order:active {
	transform: translateY(0);
}
#place_order:disabled {
	opacity: 0.6;
	cursor: wait;
	transform: none;
}

.pi-trust--checkout {
	justify-content: center;
	margin-top: 1.25rem;
	gap: 0.5rem 1.25rem;
}

/* Overlay de "procesando" de WooCommerce */
.blockUI.blockOverlay {
	background: var(--pi-white) !important;
	opacity: 0.6 !important;
}

/* ==========================================================================
   8. Pantalla de gracias
   ========================================================================== */

.woocommerce-order {
	max-width: var(--pi-narrow-width);
}

/* Marca de confirmación. Es la única esquina redonda de la pantalla y va a
   propósito: el kit usa cantos rectos, pero un tilde dentro de un cuadrado se
   lee como una casilla de formulario y no como una confirmación. */
.pi-gracias__marca {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.5rem;
	color: var(--pi-white);
	background: var(--pi-ok);
	border-radius: 50%;
}

.pi-gracias__marca svg { display: block; }

/* "Qué sigue". WooCommerce cierra la pantalla con la tabla del pedido y la
   dirección de facturación —información contable— así que este bloque es el
   único que responde qué hacer el día del evento. Por eso va destacado. */
.pi-gracias__pasos {
	margin-top: 2.75rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--pi-surface);
	border: 1px solid var(--pi-border);
	border-left: 3px solid var(--pi-primary);
}

.pi-gracias__pasos h2 {
	font-size: var(--pi-h5);
	margin: 0 0 1.25rem;
}

.pi-gracias__pasos ul {
	list-style: none;
	display: grid;
	gap: 1rem;
	margin: 0 0 1.75rem;
	padding: 0;
}

.pi-gracias__pasos li {
	display: grid;
	/* Columna fija para el icono: los textos arrancan alineados aunque uno
	   ocupe una línea y otro tres. */
	grid-template-columns: 20px 1fr;
	gap: 0.85rem;
	align-items: start;
	margin: 0;
	font-size: 0.9375rem;
	line-height: var(--pi-lh-body);
	color: var(--pi-text);
}

.pi-gracias__pasos li svg {
	/* Alineado con la primera línea del texto, no con el alto del <li>. */
	margin-top: 0.3em;
	color: var(--pi-primary);
}

.pi-gracias__pasos strong { color: var(--pi-ink); }

.woocommerce-thankyou-order-received {
	font-family: var(--pi-font-display);
	font-size: var(--pi-h6);
	font-weight: 500;
	line-height: 1.25;
	color: var(--pi-ink);
	margin-bottom: 1.75rem;
}

ul.woocommerce-order-overview,
ul.order_details {
	list-style: none;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0 0 2.5rem;
	padding: 0;
	background: var(--pi-border);
	border: 1px solid var(--pi-border);
}

ul.woocommerce-order-overview li {
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--pi-white);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pi-secondary);
	border: 0;
}

ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--pi-font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pi-ink);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--pi-h5);
	margin-bottom: 1rem;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin-bottom: 2.5rem;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--pi-border);
	text-align: left;
}
.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
	text-align: right;
}

/* ==========================================================================
   9. Producto y tienda
   --------------------------------------------------------------------------
   Secundarios: el recorrido de compra no pasa por acá. Se estilan igual para
   que nadie se encuentre con una página cruda si llega por un link directo o
   por el buscador.
   ========================================================================== */

.woocommerce div.product .product_title {
	font-size: var(--pi-h2);
	margin-bottom: 0.35em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--pi-font-display);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	color: var(--pi-ink);
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
}
.woocommerce div.product p.price del {
	font-size: 0.5em;
	font-weight: 400;
	color: var(--pi-muted);
	margin-right: 0.4rem;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin: 1.5rem 0;
}

.woocommerce .quantity input.qty {
	width: 78px;
	min-height: 48px;
	padding: 0 0.5rem;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
	font-family: var(--pi-font-body);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	color: var(--pi-ink);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1rem 2.25rem;
	background: var(--pi-primary);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--pi-radius-pill);
	font-family: var(--pi-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease), transform var(--pi-dur) var(--pi-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--pi-accent);
	color: #fff;
	transform: translateY(-2px);
}

.woocommerce ul.products {
	list-style: none;
	display: grid;
	gap: var(--pi-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
	text-align: left;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--pi-h6);
	margin: 0.85rem 0 0.35rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var(--pi-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 1.5rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	color: var(--pi-muted);
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pi-ink);
	border-bottom-color: var(--pi-primary);
}


/* ==========================================================================
   9b. Mi cuenta, listados y formularios sueltos
   --------------------------------------------------------------------------
   Páginas que WooCommerce arma solo y que casi nadie mira hasta que alguien
   las mira: "mi cuenta", el listado de pedidos, la recuperación de contraseña
   y la paginación de la tienda. Sin estas reglas se ven con los estilos por
   defecto del navegador, porque la hoja genérica de Woo está desactivada.

   Solo CSS: no se copia ninguna plantilla PHP al theme. Cada plantilla copiada
   es una que hay que revisar en cada actualización de WooCommerce.
   ========================================================================== */

/* --- Navegación lateral --- */

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
}

.woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--pi-border);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.8rem 1rem;
	font-size: var(--pi-small);
	font-weight: 600;
	color: var(--pi-text);
	text-decoration: none;
	transition: background-color var(--pi-dur) var(--pi-ease), color var(--pi-dur) var(--pi-ease);
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pi-surface);
	color: var(--pi-primary);
}

.woocommerce-MyAccount-navigation li.is-active a {
	box-shadow: inset 3px 0 0 var(--pi-primary);
}

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

/* --- Tablas de listado (pedidos, descargas) --- */

.woocommerce table.shop_table,
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pi-border);
	border-radius: 0;
	font-size: var(--pi-small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--pi-border);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background: var(--pi-surface);
	font-family: var(--pi-font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pi-ink);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* En mobile la tabla de pedidos se apila: cuatro columnas en 360px no entran
   de ninguna forma que se pueda leer. */
@media (max-width: 599px) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tr {
		display: block;
		border-bottom: 1px solid var(--pi-border);
	}

	.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: 0.5rem 1rem;
	}

	.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--pi-muted);
	}
}

/* --- Formularios sueltos: login, registro, contraseña perdida --- */

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 34rem;
	margin: 0 0 2rem;
	padding: clamp(18px, 2.2vw, 28px);
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
	border-radius: 0;
}

.woocommerce form .form-row-wide {
	width: 100%;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.woocommerce-form__label-for-checkbox input {
	accent-color: var(--pi-primary);
}

/* --- Paginación de la tienda --- */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 0.6rem;
	border: 1px solid var(--pi-border);
	background: var(--pi-white);
	color: var(--pi-text);
	font-size: var(--pi-small);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--pi-primary);
	border-color: var(--pi-primary);
	color: #fff;
}

/* --- Productos relacionados --- */

.woocommerce .related.products,
.woocommerce .upsells.products {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--pi-border);
}

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	font-size: var(--pi-h4);
	margin: 0 0 1.5rem;
}
/* ==========================================================================
   10. Responsive y accesibilidad
   ========================================================================== */

@media (max-width: 1023px) {
	form.checkout.woocommerce-checkout > #order_review_heading {
		margin-top: 2.5rem;
	}
}

@media (max-width: 559px) {
	.woocommerce-checkout-review-order {
		padding: 1.25rem;
		margin-inline: calc(var(--pi-gutter) * -0.5);
	}

	.pi-checkout-head__meta {
		flex-direction: column;
		gap: 0.5rem;
	}

	ul.woocommerce-order-overview {
		grid-template-columns: 1fr;
	}
}

/* Foco visible en todo lo que se puede tabular. */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.pi-qty__btn:focus-visible {
	outline: 2px solid var(--pi-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	#place_order {
		transition: none;
	}
	#place_order:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover {
		transform: none;
	}
}

/* Espacio que ocupa el header fijo cuando la página no lleva .pi-page-hero
   (ficha de producto: el título lo imprime WooCommerce). */
.pi-woo-offset {
	height: clamp(96px, 9vw, 140px);
}