/*
 * Carrito y checkout: layout 8/4 con resumen sticky.
 */

/* ---------- Carrito ---------- */

.cart-page,
.checkout-page {
	padding-block: var(--section-gap);
}

@media (max-width: 900px) {
	.cart-page,
	.checkout-page {
		padding-block: var(--section-gap-mobile);
	}
}

.cart-grid {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: var(--gutter);
	align-items: start;
}

@media (max-width: 1024px) {
	.cart-grid {
		grid-template-columns: 1fr;
	}
}

.cart-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: calc(var(--unit) * 5);
}

/*
 * Escala propia del carrito. Aquí la jerarquía la marcan las prendas y el
 * total, no el rótulo de la página: con la escala editorial del resto del
 * sitio el titular pesaba más que la compra.
 */
.cart-heading .headline-xl,
.checkout-heading .headline-xl {
	font-size: clamp(30px, 1.6vw + 20px, 44px);
}

.cart-summary > .headline-md {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

.cart-items-count {
	color: var(--on-surface-variant);
}

/* Cabecera de la lista: sitúa la columna del importe sin dibujar una tabla. */
.cart-items-head {
	display: flex;
	justify-content: space-between;
	color: var(--on-surface-variant);
	padding-bottom: calc(var(--unit) * 1.5);
	border-bottom: 1px solid var(--outline-variant);
}

/*
 * Ítems: la foto en pequeño, el nombre en la tipografía de texto y el importe
 * alineado a la derecha. La prenda se reconoce por la foto; el titular no
 * necesita escala editorial aquí.
 */
.cart-item {
	display: grid;
	grid-template-columns: 104px 1fr auto;
	gap: calc(var(--unit) * 3);
	padding-block: calc(var(--unit) * 3);
	border-bottom: 1px solid var(--outline-variant);
}

.cart-item-image {
	width: 104px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-container);
}

@media (max-width: 640px) {
	.cart-item {
		grid-template-columns: 76px 1fr;
		gap: calc(var(--unit) * 2);
	}
	.cart-item-image {
		width: 76px;
	}
	.cart-item-price {
		grid-column: 2;
		text-align: left;
	}
	.qty-stepper {
		padding: 6px 10px;
		gap: calc(var(--unit) * 1.5);
	}
}

.cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out-expo);
}

.cart-item:hover .cart-item-image img {
	transform: scale(1.05);
}

.cart-item-body {
	min-width: 0;
}

.cart-item-title {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--on-surface);
	margin: 0;
}

.cart-item-unit {
	display: block;
	color: var(--on-surface-variant);
	font-size: 15px;
	margin-top: 4px;
}

.cart-item-excerpt {
	color: var(--on-surface-variant);
	font-size: 14px;
	line-height: 1.5;
	margin: 6px 0 0;
	max-width: 52ch;
}

.cart-item-meta {
	color: var(--on-surface-variant);
	margin-top: 4px;
}

.cart-item-meta dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
}

.cart-item-meta dl.variation dd {
	margin: 0;
}

.cart-item-meta dl.variation dd p {
	margin: 0;
	display: inline;
}

.cart-item-price {
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	text-align: right;
}

.cart-item-actions {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 2);
	flex-wrap: wrap;
	margin-top: calc(var(--unit) * 2);
}

/* Solo el icono: el gesto se entiende y la fila queda limpia. */
.cart-item-remove {
	display: inline-flex;
	color: var(--outline);
	padding: 6px;
	transition: color var(--duration-fast) ease;
}

.cart-item-remove:hover {
	color: var(--error);
}

.cart-item-remove .svg-icon {
	width: 19px;
	height: 19px;
}

/* Stepper de cantidad */
.qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--unit) * 2);
	border: 1px solid var(--outline-variant);
	padding: 5px 12px;
}

.qty-stepper .quantity {
	display: inline-flex;
}

.qty-stepper .quantity label,
.qty-stepper .quantity .screen-reader-text {
	display: none;
}

.qty-stepper input.qty {
	width: 40px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty-stepper input.qty::-webkit-outer-spin-button,
.qty-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qty-stepper button {
	color: var(--on-surface);
	display: inline-flex;
}

.qty-stepper button:hover {
	color: var(--primary);
}

.qty-stepper .svg-icon {
	width: 17px;
	height: 17px;
}

/* Herramientas: cupón + actualizar */
.cart-tools {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--gutter);
	flex-wrap: wrap;
	padding-top: calc(var(--unit) * 4);
}

.coupon {
	max-width: 320px;
}

.coupon label {
	color: var(--on-surface-variant);
	display: block;
	margin-bottom: 4px;
}

.coupon-row {
	display: flex;
	gap: calc(var(--unit) * 2);
	align-items: flex-end;
}

.coupon-row .btn,
.cart-update {
	padding: 12px 24px;
}

.cart-update:disabled {
	opacity: 0.3;
	cursor: default;
}

.cart-shipping-note {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 2);
	color: var(--on-surface-variant);
	margin-top: calc(var(--unit) * 6);
}

.cart-shipping-note p {
	margin: 0;
}

/* Resumen */
.cart-summary {
	background: var(--surface-container-low);
	padding: calc(var(--unit) * 5);
	position: sticky;
	top: 128px;
}

.cart-summary > .headline-md {
	margin-bottom: calc(var(--unit) * 4);
}

.cart_totals h2 {
	display: none;
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: calc(var(--unit) * 3);
}

.cart_totals th,
.cart_totals td {
	text-align: left;
	padding: calc(var(--unit) * 1) 0;
	font-weight: 400;
	color: var(--on-surface-variant);
	border: 0;
	font-size: var(--text-body-md);
}

.cart_totals td {
	text-align: right;
}

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 3);
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--on-surface);
}

.cart_totals tr.order-total td {
	color: var(--primary);
}

.cart_totals .woocommerce-shipping-destination {
	font-size: 12px;
}

.cart_totals .shipping-calculator-button {
	font-size: 12px;
	text-decoration: underline;
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	padding: 20px 24px;
	background: var(--primary);
	border-color: var(--primary);
	letter-spacing: 0.2em;
	display: flex;
	justify-content: space-between;
}

.wc-proceed-to-checkout .checkout-button::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5 19.5 12 14 17.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5 19.5 12 14 17.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--duration-fast) ease;
}

.wc-proceed-to-checkout .checkout-button:hover::after {
	transform: translateX(4px);
}

.cart-payments {
	margin-top: calc(var(--unit) * 4);
	text-align: center;
}

.cart-payments .label-sm {
	color: var(--on-surface-variant);
	display: block;
	margin-bottom: calc(var(--unit) * 2);
}

.cart-payments-icons {
	display: flex;
	justify-content: center;
	gap: calc(var(--unit) * 2);
	color: var(--outline);
}

.cart-payments-icons .svg-icon {
	width: 26px;
	height: 26px;
}

/* ---------- Carrito vacío ---------- */

.cart-empty-page {
	padding-block: calc(var(--unit) * 10) calc(var(--unit) * 6);
}

/*
 * Momento sereno, no un cartel: panel estrecho y tipografía en la escala del
 * carrito. Con la escala editorial del resto del sitio el titular partía en
 * tres líneas y la página pesaba más que la propia tienda.
 */
.cart-empty-card {
	max-width: 560px;
	margin-inline: auto;
	padding: calc(var(--unit) * 7) calc(var(--unit) * 5) calc(var(--unit) * 6);
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cart-empty-emblem {
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--outline-variant);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: calc(var(--unit) * 3);
}

.cart-empty-icon {
	width: 30px;
	height: 30px;
}

.cart-empty-card .script-accent {
	font-size: 28px;
	margin-bottom: 0;
}

.cart-empty-card .headline-md {
	font-size: 26px;
}

.cart-empty-page p {
	color: var(--on-surface-variant);
	font-size: 15px;
	max-width: 40ch;
	margin: calc(var(--unit) * 1.5) 0 calc(var(--unit) * 4);
}

.cart-empty-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--unit) * 2);
}

/* Atajos por categoría: la salida más corta desde una bolsa vacía. Van como
   texto, no como pastillas, para no sumar peso al panel. */
.cart-empty-cats {
	margin-top: calc(var(--unit) * 5);
	padding-top: calc(var(--unit) * 3);
	border-top: 1px solid var(--outline-variant);
	width: 100%;
}

.cart-empty-cats .label-sm {
	display: block;
	color: var(--on-surface-variant);
	margin-bottom: calc(var(--unit) * 1.5);
}

.cart-empty-cat-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--unit) * 0.5) calc(var(--unit) * 3);
	margin: 0;
	padding: 0;
}

.cart-empty-cat-list a {
	display: inline-block;
	padding-block: 6px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on-surface);
	border-bottom: 1px solid transparent;
	transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.cart-empty-cat-list a:hover,
.cart-empty-cat-list a:focus-visible {
	color: var(--accent-strong);
	border-bottom-color: var(--accent-strong);
}

.cart-empty-suggest {
	padding-bottom: var(--section-gap);
}

@media (max-width: 900px) {
	.cart-empty-page {
		padding-block: calc(var(--unit) * 6) calc(var(--unit) * 4);
	}
	.cart-empty-card {
		padding: calc(var(--unit) * 5) calc(var(--unit) * 3);
	}
	.cart-empty-actions {
		align-self: stretch;
	}
	.cart-empty-actions .btn {
		width: 100%;
	}
	.cart-empty-suggest {
		padding-bottom: var(--section-gap-mobile);
	}
}

.cart-empty .woocommerce-info {
	justify-content: center;
}

/* ---------- Página de gracias ---------- */

.woocommerce-order {
	padding-block: var(--section-gap-mobile);
}

.woocommerce-thankyou-order-received {
	font-family: var(--font-display);
	font-size: var(--text-headline-md);
	font-style: italic;
	text-align: center;
	margin-bottom: calc(var(--unit) * 6);
}

ul.woocommerce-thankyou-order-details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gutter);
	margin-bottom: calc(var(--unit) * 8);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--on-surface-variant);
}

ul.woocommerce-thankyou-order-details li strong {
	display: block;
	font-size: 16px;
	color: var(--on-surface);
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Checkout propio ----------
 * Pasos en tarjetas a la izquierda, resumen pegajoso a la derecha. Los campos
 * son los del tema: mismo trazo, mismo alto y desplegables con la piel de la
 * casa, incluida la lista —que aquí sí se dibuja en HTML y no la pinta el
 * sistema operativo.
 */

.checkout-page {
	padding-block: calc(var(--unit) * 7) var(--section-gap);
}

.checkout-heading {
	text-align: left;
	margin-bottom: calc(var(--unit) * 5);
}

.checkout-heading .headline-xl {
	font-size: clamp(30px, 1.6vw + 20px, 44px);
	margin-top: calc(var(--unit) * 1);
}

.checkout-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: calc(var(--gutter) * 1.5);
	align-items: start;
}

@media (max-width: 1024px) {
	.checkout-grid {
		grid-template-columns: 1fr;
		gap: var(--gutter);
	}
}

/* ---------- Tarjetas ---------- */

.checkout-card,
.checkout-details-col .woocommerce-shipping-fields,
.checkout-details-col .woocommerce-additional-fields,
.checkout-review-box {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 4);
	margin-bottom: calc(var(--unit) * 3);
}

.checkout-card-title {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--on-surface);
	margin: 0 0 calc(var(--unit) * 1);
}

.checkout-card-hint {
	font-size: 14px;
	color: var(--on-surface-variant);
	margin: 0 0 calc(var(--unit) * 3);
}

.checkout-details-col .woocommerce-shipping-fields h3,
.checkout-details-col .woocommerce-additional-fields h3 {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--on-surface);
	margin: 0 0 calc(var(--unit) * 2);
}

/* La casilla de "enviar a otra dirección" es el título de su tarjeta. */
.checkout-details-col #ship-to-different-address {
	margin: 0;
}

.checkout-details-col #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	cursor: pointer;
}

/* ---------- Campos ----------
 * Dos columnas donde el dato es corto (nombre, ciudad, código postal) y una
 * sola donde el dato es largo. Rellenar deja de ser una escalera infinita.
 */

.checkout-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--unit) * 2) var(--gutter);
}

.checkout-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
	margin: 0;
	padding: 0;
}

.checkout-fields .form-row-wide,
.checkout-fields #billing_country_field,
.checkout-fields #billing_address_1_field,
.checkout-fields #billing_address_2_field,
.checkout-fields #billing_email_field,
.checkout-fields #billing_company_field {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.checkout-fields {
		grid-template-columns: 1fr;
	}
	.checkout-card,
	.checkout-review-box,
	.checkout-details-col .woocommerce-shipping-fields,
	.checkout-details-col .woocommerce-additional-fields {
		padding: calc(var(--unit) * 3) calc(var(--unit) * 2.5);
	}
}

.checkout-page .form-row label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	margin-bottom: 6px;
}

.checkout-page .required {
	color: var(--accent-strong);
	text-decoration: none;
}

.checkout-page .form-row input.input-text,
.checkout-page .form-row textarea,
.checkout-page .form-row select {
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--outline-variant);
	border-radius: 0;
	background: var(--surface);
	padding: 13px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--on-surface);
}

.checkout-page .form-row select {
	padding-right: 42px;
}

.checkout-page .form-row textarea {
	min-height: 110px;
	resize: vertical;
}

.checkout-page .form-row input.input-text:focus,
.checkout-page .form-row textarea:focus,
.checkout-page .form-row select:focus {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 1px var(--accent-strong);
}

.checkout-page .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.checkout-page .form-row.woocommerce-invalid input.input-text,
.checkout-page .form-row.woocommerce-invalid select {
	border-color: var(--error);
}

.checkout-page .form-row .description {
	font-size: 13px;
	color: var(--on-surface-variant);
	margin-top: 6px;
}

/* Casillas: cuadro dibujado, como en los filtros del catálogo. */
.checkout-page input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	border: 1px solid var(--outline);
	background: var(--surface);
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
	transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.checkout-page input[type="checkbox"]:checked {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
}

.checkout-page input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--on-accent);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.checkout-page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 14px;
	color: var(--on-surface);
	margin: 0;
}

/* ---------- Desplegable con buscador ----------
 * WooCommerce monta país y región con selectWoo: la lista es HTML, así que
 * se puede vestir entera. Es la única forma de que un desplegable largo deje
 * de parecer del sistema.
 */

.checkout-page .select2-container .select2-selection--single {
	height: 52px;
	border: 1px solid var(--outline-variant);
	border-radius: 0;
	background: var(--surface);
	display: flex;
	align-items: center;
	padding: 0 42px 0 14px;
}

.checkout-page .select2-container--focus .select2-selection--single,
.checkout-page .select2-container--open .select2-selection--single {
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 1px var(--accent-strong);
}

.checkout-page .select2-container .select2-selection__rendered {
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--on-surface);
	line-height: 1.4;
}

.checkout-page .select2-container .select2-selection__placeholder {
	color: var(--outline);
}

/* Su flecha por la del tema. */
.checkout-page .select2-container .select2-selection__arrow {
	height: 50px;
	right: 12px;
	width: 18px;
}

.checkout-page .select2-container .select2-selection__arrow b {
	border: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.select2-dropdown {
	border: 1px solid var(--accent-strong);
	border-radius: 0;
	background: var(--surface-container-lowest);
	box-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.35);
}

.select2-search--dropdown {
	padding: calc(var(--unit) * 1.5);
}

.select2-container .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--outline-variant);
	border-radius: 0;
	background: var(--surface);
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface);
}

.select2-results__option {
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface-variant);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--accent-strong);
	color: var(--on-accent);
}

/* ---------- Resumen ---------- */

@media (min-width: 1025px) {
	.checkout-review-col {
		position: sticky;
		top: calc(var(--header-h-min) + var(--unit) * 3);
	}
}

.checkout-review-box .checkout-card-title {
	margin-bottom: calc(var(--unit) * 3);
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	text-align: left;
	border: 0;
	padding: calc(var(--unit) * 1.5) 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--on-surface-variant);
}

.woocommerce-checkout-review-order-table td {
	text-align: right;
	color: var(--on-surface);
}

/* Pieza del pedido: foto con su cantidad en una insignia. */
.woocommerce-checkout-review-order-table .review-item {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--unit) * 2);
	padding-block: calc(var(--unit) * 2);
	border-bottom: 1px solid var(--outline-variant);
	text-align: left;
}

.review-item-media {
	position: relative;
	flex-shrink: 0;
	width: 62px;
}

.review-item-media img {
	width: 62px;
	height: 78px;
	object-fit: cover;
	display: block;
	background: var(--surface-container);
}

.review-item-qty {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--accent-strong);
	color: var(--on-accent);
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

.review-item-body {
	flex: 1;
	min-width: 0;
}

.review-item-name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--on-surface);
	line-height: 1.35;
}

.review-item-meta {
	display: block;
	font-size: 13px;
	color: var(--on-surface-variant);
	margin-top: 2px;
}

.review-item-meta dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
}

.review-item-meta dl.variation dd,
.review-item-meta dl.variation dt {
	margin: 0;
}

.review-item-meta dl.variation p {
	margin: 0;
	display: inline;
}

.review-item-price {
	white-space: nowrap;
	font-size: 15px;
	color: var(--on-surface);
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .cart-discount th,
.woocommerce-checkout-review-order-table .cart-discount td,
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table .fee td,
.woocommerce-checkout-review-order-table .tax-total th,
.woocommerce-checkout-review-order-table .tax-total td {
	padding-top: calc(var(--unit) * 2);
}

/* Métodos de envío dentro del resumen. */
.woocommerce-checkout-review-order-table .shipping th {
	vertical-align: top;
}

.woocommerce-shipping-totals ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--unit) * 1);
	text-align: right;
}

.woocommerce-shipping-totals ul#shipping_method li {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: calc(var(--unit) * 1);
}

.woocommerce-shipping-totals ul#shipping_method label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 14px;
	color: var(--on-surface);
}

.woocommerce-shipping-totals .woocommerce-shipping-destination {
	font-size: 13px;
	color: var(--on-surface-variant);
	margin: calc(var(--unit) * 1) 0 0;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 3);
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--on-surface);
}

/* ---------- Pago ---------- */

.woocommerce-checkout-payment {
	margin-top: calc(var(--unit) * 3);
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 3);
}

.woocommerce-checkout-payment ul.payment_methods {
	list-style: none;
	margin: 0 0 calc(var(--unit) * 3);
	padding: 0;
	display: grid;
	gap: calc(var(--unit) * 1);
}

/*
 * Cada método es una fila elegible completa: el radio y el nombre a la
 * izquierda, el logotipo de la pasarela alineado a la derecha. La marca del
 * proveedor acredita, no encabeza; por eso va al tamaño de un sello y nunca
 * compite con el nombre del método.
 */
.woocommerce-checkout-payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 2);
	background: var(--surface);
	transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.woocommerce-checkout-payment ul.payment_methods li:hover {
	border-color: var(--outline);
}

/* Seleccionado: el borde se cierra en el acento y la fila se aclara. */
.woocommerce-checkout-payment ul.payment_methods li:has(input.input-radio:checked) {
	border-color: var(--accent-strong);
	background: var(--surface-container-lowest);
}

.woocommerce-checkout-payment ul.payment_methods li label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	min-width: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 15px;
	color: var(--on-surface);
	cursor: pointer;
}

/*
 * El logotipo de la pasarela llega en su tamaño natural (el de Wompi son
 * 307×173 px). Sin este tope se pinta a tamaño real y se come la fila.
 */
.woocommerce-checkout-payment ul.payment_methods li label img {
	max-height: 24px;
	width: auto;
	max-width: 110px;
	margin-left: auto;
	float: none;
	border: 0;
	padding: 0;
	opacity: 0.9;
	transition: opacity var(--duration-fast) ease;
}

.woocommerce-checkout-payment ul.payment_methods li:has(input.input-radio:checked) label img {
	opacity: 1;
}

/* El recuadro de detalle ocupa la fila entera bajo el método elegido. */
.woocommerce-checkout-payment ul.payment_methods li .payment_box {
	flex: 1 0 100%;
}

.woocommerce-checkout-payment .payment_box {
	background: var(--surface-container);
	border: 0;
	margin: calc(var(--unit) * 2) 0 0;
	padding: calc(var(--unit) * 2);
	font-size: 14px;
	color: var(--on-surface-variant);
}

.woocommerce-checkout-payment .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout-payment .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--on-surface-variant);
}

.woocommerce-checkout-payment #place_order {
	width: 100%;
	padding: 20px 24px;
	letter-spacing: 0.16em;
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--on-accent);
}

.woocommerce-checkout-payment #place_order:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* Radios del pago y del envío, con el trazo de la casa. */
.checkout-page input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	border: 1px solid var(--outline);
	border-radius: 999px;
	background: var(--surface);
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
}

.checkout-page input[type="radio"]:checked {
	border-color: var(--accent-strong);
}

.checkout-page input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 999px;
	background: var(--accent-strong);
}

/* ---------- Cupón ----------
 * Va arriba y no dentro del resumen: su formulario no puede anidarse dentro
 * del formulario del pedido sin romper el marcado.
 */

.checkout-page-coupon,
.woocommerce-form-coupon-toggle {
	max-width: var(--container-max);
	margin: 0 auto calc(var(--unit) * 2);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-left: 2px solid var(--accent);
}

.checkout .checkout_coupon {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 3);
	margin-bottom: calc(var(--unit) * 3);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: calc(var(--unit) * 2);
	align-items: end;
}

.checkout .checkout_coupon p {
	margin: 0;
}

.checkout .checkout_coupon .form-row {
	margin: 0;
	padding: 0;
}

.checkout .checkout_coupon input.input-text {
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--outline-variant);
	background: var(--surface);
	padding: 13px 14px;
	font-family: var(--font-body);
	font-size: 15px;
}

@media (max-width: 640px) {
	.checkout .checkout_coupon {
		grid-template-columns: 1fr;
	}
}

/* ---------- Cupón dentro del resumen ----------
 * Va entre las piezas y el subtotal, en el crema de base para que se lea como
 * parte del recuento y no como otra tarjeta. Compacto: es un campo opcional,
 * no un paso del proceso.
 */

.woocommerce-checkout-review-order-table .coupon-row td {
	padding: calc(var(--unit) * 1.5) 0;
	text-align: left;
}

.summary-coupon {
	background: var(--surface);
	border: 1px solid var(--outline-variant);
}

.summary-coupon > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--unit) * 1.5);
	padding: 10px calc(var(--unit) * 2);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--on-surface-variant);
	transition: color var(--duration-fast) ease;
}

.summary-coupon > summary::-webkit-details-marker {
	display: none;
}

.summary-coupon > summary:hover {
	color: var(--accent-strong);
}

.summary-coupon-caret {
	width: 15px;
	height: 15px;
	color: var(--accent);
	transition: transform var(--duration-fast) ease;
}

.summary-coupon[open] .summary-coupon-caret {
	transform: rotate(180deg);
}

.summary-coupon-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: calc(var(--unit) * 1);
	padding: 0 calc(var(--unit) * 2) calc(var(--unit) * 2);
}

.summary-coupon-body input {
	width: 100%;
	min-height: 40px;
	border: 1px solid var(--outline-variant);
	border-radius: 0;
	background: var(--surface-container-lowest);
	padding: 9px 12px;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-surface);
}

.summary-coupon-body input:focus {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 1px var(--accent-strong);
}

.summary-coupon-apply {
	min-height: 40px;
	padding: 9px 16px;
	border: 1px solid var(--accent-strong);
	background: transparent;
	color: var(--accent-strong);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.summary-coupon-apply:hover {
	background: var(--accent-strong);
	color: var(--on-accent);
}

.summary-coupon-apply:disabled {
	opacity: 0.5;
	cursor: default;
}

.summary-coupon-feedback {
	margin: calc(var(--unit) * 1.5) 0 0;
	font-size: 13px;
	color: var(--green);
}

.summary-coupon-feedback.is-error {
	color: var(--error);
}

/* ==========================================================================
   Confirmación de pedido (/order-received/)
   El momento después de pagar: primero el alivio, luego los datos, luego el
   calendario. La jerarquía de la página sigue ese orden y nada más compite.
   ========================================================================== */

.order-received-page {
	padding-block: calc(var(--unit) * 10) calc(var(--unit) * 12);
	max-width: 860px;
}

/* ---------- Llegada ---------- */

.order-arrival-title {
	color: var(--heading);
	margin: 0;
}

.order-arrival--failed .order-arrival-title {
	color: var(--error);
}

.order-arrival-lead {
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--on-surface-variant);
	max-width: 58ch;
	margin: calc(var(--unit) * 2) 0 0;
}

.order-arrival-lead p {
	margin: 0;
}

.order-arrival-lead p + p {
	margin-top: calc(var(--unit) * 1);
}

/* Si la pasarela devuelve su propio aviso de error, hereda el tono de error
   del tema en vez del recuadro plano de WooCommerce. */
.order-arrival-lead .woocommerce-error {
	list-style: none;
	margin: 0;
	padding: calc(var(--unit) * 2);
	background: var(--error-container);
	color: var(--on-error-container);
	border: 0;
	font-size: var(--text-body-md);
}

/* El mismo filete que abre la pantalla de entrada: cierra el saludo y ata la
   confirmación al resto de la marca. */
.order-rule {
	display: block;
	width: 140px;
	height: 1px;
	background: var(--outline);
	margin-top: calc(var(--unit) * 4);
}

.order-arrival-mail {
	margin: calc(var(--unit) * 3) 0 0;
	color: var(--on-surface-variant);
	font-size: var(--text-body-md);
}

.order-arrival-mail strong {
	color: var(--on-surface);
	font-weight: 600;
}

.order-arrival-actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--unit) * 2);
	margin-top: calc(var(--unit) * 4);
}

/* ---------- Datos del pedido ---------- */

/*
 * Los divisores se dibujan con el `gap` sobre el fondo del contenedor: así
 * salen bien con tres o con cuatro datos y en cualquier ancho, sin reglas
 * `nth-child` que se descuadran al cambiar el número de celdas.
 */
.order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: calc(var(--unit) * 6) 0 0;
	padding: 1px;
	border: 0;
	background: var(--outline-variant);
}

.order-fact {
	padding: calc(var(--unit) * 2.5);
	background: var(--surface-container-lowest);
}

.order-fact dt {
	margin: 0;
	color: var(--on-surface-variant);
}

.order-fact dd {
	margin: 6px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--on-surface);
	line-height: 1.3;
}

.order-fact dd .amount {
	font-weight: 600;
}

@media (max-width: 720px) {
	.order-facts {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Qué sigue ahora ---------- */

.order-next {
	margin-top: calc(var(--unit) * 8);
}

.order-next .headline-md {
	color: var(--heading);
	margin: 0 0 calc(var(--unit) * 4);
}

.order-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--unit) * 4);
}

/* Hilo que une los pasos: el pedido es un recorrido, no tres avisos sueltos. */
.order-step {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: calc(var(--unit) * 2.5);
	align-items: start;
}

.order-step::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 44px;
	bottom: calc(var(--unit) * -4);
	width: 1px;
	background: var(--outline-variant);
}

.order-step:last-child::before {
	display: none;
}

.order-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--outline-variant);
	background: var(--surface-container-lowest);
	color: var(--on-surface-variant);
}

.order-step-icon .svg-icon {
	width: 20px;
	height: 20px;
}

/* El paso cumplido se marca con el acento; los pendientes esperan en gris. */
.order-step.is-done .order-step-icon {
	border-color: var(--accent-strong);
	background: var(--accent-strong);
	color: var(--on-accent);
}

.order-step-body {
	display: block;
	padding-top: 2px;
}

.order-step-title {
	display: block;
	font-weight: 600;
	font-size: 16px;
	color: var(--on-surface);
}

.order-step-text {
	display: block;
	margin-top: 4px;
	color: var(--on-surface-variant);
	font-size: 15px;
	line-height: 1.55;
	max-width: 56ch;
}

/* ---------- Tabla del pedido y direcciones (las pinta el gancho del core) ---------- */

.order-received-page .woocommerce-order-details,
.order-received-page .woocommerce-customer-details {
	margin-top: calc(var(--unit) * 8);
}

.order-received-page .woocommerce-order-details__title,
.order-received-page .woocommerce-column__title {
	font-family: var(--font-display);
	font-size: var(--text-headline-md);
	line-height: 1.15;
	color: var(--heading);
	margin: 0 0 calc(var(--unit) * 3);
}

.order-received-page table.order_details {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-md);
}

.order-received-page table.order_details th,
.order-received-page table.order_details td {
	padding: calc(var(--unit) * 2);
	text-align: left;
	border-bottom: 1px solid var(--outline-variant);
	vertical-align: top;
}

.order-received-page table.order_details thead th {
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
}

.order-received-page table.order_details td.product-total,
.order-received-page table.order_details th.product-total,
.order-received-page table.order_details tfoot td {
	text-align: right;
	white-space: nowrap;
}

.order-received-page table.order_details tfoot th {
	font-weight: 600;
	color: var(--on-surface-variant);
}

.order-received-page table.order_details tfoot tr:last-child th,
.order-received-page table.order_details tfoot tr:last-child td {
	font-size: 18px;
	color: var(--on-surface);
	border-bottom: 0;
}

.order-received-page table.order_details a {
	color: var(--on-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.order-received-page .wc-item-meta,
.order-received-page .product-quantity {
	color: var(--on-surface-variant);
	font-size: 14px;
}

.order-received-page .wc-item-meta {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.order-received-page .wc-item-meta p {
	margin: 0;
	display: inline;
}

.order-received-page .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: calc(var(--unit) * 4);
}

.order-received-page .woocommerce-columns--addresses address {
	font-style: normal;
	line-height: 1.7;
	color: var(--on-surface-variant);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 2.5);
	background: var(--surface-container-lowest);
}

/* ---------- Cierre ---------- */

.order-close {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--unit) * 2);
	margin-top: calc(var(--unit) * 8);
	padding-top: calc(var(--unit) * 5);
	border-top: 1px solid var(--outline-variant);
}

@media (max-width: 600px) {
	.order-received-page {
		padding-block: calc(var(--unit) * 6) calc(var(--unit) * 8);
	}
	.order-close .btn {
		width: 100%;
		justify-content: center;
	}
}