/* =============================================================
   Excellent — Proceso de compra
   Cabecera reducida, barra de pasos, acordeón, resumen fijo y
   dirección con autocompletado. Todo sale de tokens.css.
   Ver assets/js/checkout-steps.js y checkout-address.js.
   ============================================================= */

/* --- Lienzo -------------------------------------------------------------- */

.woocommerce-checkout,
.woocommerce-cart {
	background: var(--co-bg);
}

.co-main {
	display: block;
	min-height: 60vh;
	padding-bottom: var(--space-6);
}

/* El título que imprime Bricks sobra aquí: la barra de pasos ya dice dónde
   estás, y en la referencia el lienzo arranca directo en el primer bloque. */
.woocommerce-checkout #brx-content > h1,
.woocommerce-cart #brx-content > h1 { display: none; }

/* Bricks limita su contenedor a un ancho propio; aquí el ancho lo fijan las
   rejillas (--co-container), así que se suelta.
   El margen lateral SÍ se queda: es el único de estas pantallas, porque las
   rejillas de dentro ya no lo llevan. Esta hoja carga después de main.css, así
   que un `padding-inline: 0` aquí dejaba el contenido pegado al borde. */
.woocommerce-checkout #brx-content,
.woocommerce-cart #brx-content {
	width: 100%;
	max-width: none;
	padding-inline: var(--gutter);
}

/* --- Cabecera reducida ---------------------------------------------------- */

.cohead {
	background: var(--c-bg);
	border-bottom: var(--hairline) solid var(--c-line);
}

/* Cabecera y pie viven fuera de #brx-content, así que ponen su propio margen
   lateral. Las rejillas de dentro no: se lo da el contenedor. */
.cohead__inner {
	max-width: var(--co-container);
	margin: 0 auto;
	min-height: var(--co-head-h);
	padding: var(--space-1) var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.cohead__logo img {
	display: block;
	width: auto;
	height: 1.9rem;
}

.cohead__safe {
	display: flex;
	align-items: center;
	gap: var(--space-05);
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--c-ink);
	white-space: nowrap;
}

.cohead__safe svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

/* --- Barra de pasos ------------------------------------------------------- */

.costeps {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.costeps__item {
	display: flex;
	align-items: center;
	gap: var(--space-05);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-mid);
	color: var(--c-muted);
	white-space: nowrap;
}

/* Guion de unión entre pasos: decorativo, no ocupa hueco semántico. */
.costeps__item + .costeps__item::before {
	content: "";
	width: var(--space-2);
	height: var(--hairline);
	margin-right: var(--space-05);
	background: var(--c-line);
}

.costeps__dot {
	width: var(--co-dot);
	height: var(--co-dot);
	border-radius: 50%;
	background: var(--c-line);
	transition: background .25s var(--ease);
}

.costeps__item.is-done,
.costeps__item.is-current {
	color: var(--c-ink);
	font-weight: 600;
}

.costeps__item.is-done .costeps__dot,
.costeps__item.is-current .costeps__dot {
	background: var(--c-ink);
}

/* En pantallas medianas la fila completa no cabe: dejamos solo el paso actual. */
@media (max-width: 1024px) {
	.costeps__item:not(.is-current) .costeps__label { display: none; }
	.costeps__item + .costeps__item::before { width: var(--space-1); }
}

@media (max-width: 640px) {
	.cohead__safe span { display: none; }
	.costeps { gap: var(--space-1); }
}

/* --- Rejilla del checkout ------------------------------------------------- */

/* Sin margen lateral propio: lo pone #brx-content. Ponerlo aquí también lo
   duplicaba y en escritorio dejaba más de 6rem por lado. */
.exc-co__grid {
	max-width: var(--co-container);
	margin: 0 auto;
	padding: var(--flow) 0 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--co-aside-w);
	gap: var(--co-gap);
	align-items: start;
}

/* El resumen es de ancho fijo, así que por debajo de ~1080px se come la columna
   principal en vez de encogerse. Antes el corte estaba en 900 y en un portátil
   normal el contenido quedaba ahogado. */
@media (max-width: 1080px) {
	.exc-co__grid { grid-template-columns: minmax(0, 1fr); }
}

.exc-co__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

/* --- Bloque de paso (acordeón) -------------------------------------------- */

.costep {
	background: var(--c-bg);
	border: var(--hairline) solid var(--c-line);
}

.costep__head { margin: 0; }

.costep__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--co-card-pad);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
}

.costep.is-open .costep__toggle { cursor: default; }

.costep__n {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--co-step-n);
	height: var(--co-step-n);
	border-radius: 50%;
	border: var(--field-border) solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	font-weight: 700;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.costep.is-open .costep__n,
.costep.is-done .costep__n {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

.costep__title {
	flex: 1 1 auto;
	font-size: var(--fs-h5);
	font-weight: 700;
	color: var(--c-muted);
	letter-spacing: var(--tracking-tight);
}

.costep.is-open .costep__title { color: var(--c-ink); }

/* Lápiz de editar: solo en los pasos cerrados, como en la referencia. */
.costep__edit {
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--c-muted);
	opacity: 0;
	clip-path: path( 'M0 12.5V16h3.5L13.8 5.7l-3.5-3.5L0 12.5zM16.7 3a.94.94 0 0 0 0-1.3L14.3.3a.94.94 0 0 0-1.3 0l-1.8 1.8 3.5 3.5L16.7 3z' );
}

.costep:not(.is-open) .costep__edit { opacity: 1; }

.costep__body {
	padding: 0 var(--co-card-pad) var(--co-card-pad);
}

.costep:not(.is-open) .costep__body { display: none; }

/* Resumen de dos líneas bajo la cabecera del paso ya resuelto. */
.costep__resumen {
	padding: 0 var(--co-card-pad) var(--co-card-pad);
	margin-top: calc( var(--space-2) * -1 );
	padding-left: calc( var(--co-card-pad) + var(--co-step-n) + var(--space-1) );
	font-size: var(--fs-sm);
	color: var(--c-body);
	line-height: 1.5;
}

.costep__sub {
	margin: var(--space-3) 0 var(--space-1);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--c-body);
}

.costep__nota {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-sm);
	color: var(--c-body);
}

/* --- Campos dentro de un paso --------------------------------------------- */

.costep__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-1) var(--space-2);
}

.costep__fields .form-row {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

/* Los campos largos ocupan la fila entera. */
.costep__fields #billing_email_field,
.costep__fields #billing_address_1_field,
.costep__fields #billing_address_2_field,
.costep__fields #billing_country_field,
.costep__fields #billing_company_field {
	grid-column: 1 / -1;
}

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

/* --- Conmutador enviar / recoger ------------------------------------------ */

.coswitch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: var(--space-3);
	border: var(--field-border) solid var(--c-ink);
}

.coswitch__opt {
	padding: var(--space-1);
	background: var(--c-bg);
	border: 0;
	cursor: pointer;
	font-family: var(--font-display);
	color: var(--c-body);
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.coswitch__opt strong {
	font-size: var(--fs-base);
	font-weight: 700;
}

.coswitch__opt span { font-size: var(--fs-xs); }

.coswitch__opt.is-active {
	background: var(--c-ink);
	color: var(--c-white);
}

/* --- Lista de tiendas ------------------------------------------------------ */

.costiendas {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--hairline) solid var(--c-line);
}

.costienda { border-bottom: var(--hairline) solid var(--c-line); }

.costienda label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	padding: var(--space-2) 0;
	cursor: pointer;
}

.costienda__txt {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.costienda__txt strong {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-ink);
}

.costienda__txt small {
	font-size: var(--fs-xs);
	color: var(--c-body);
	line-height: 1.4;
}

.costienda__meta {
	flex: none;
	font-size: var(--fs-xs);
	color: var(--c-body);
}

/* --- Métodos de entrega (lista que el JS trae desde el resumen) ------------ */

.cometodos ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--hairline) solid var(--c-line);
}

.cometodos ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) 0;
	margin: 0;
	border-bottom: var(--hairline) solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-ink);
}

.cometodos ul#shipping_method label {
	flex: 1 1 auto;
	margin: 0;
	cursor: pointer;
}

.cometodos ul#shipping_method .amount {
	font-weight: 600;
}

/* En el checkout la lista se lleva al paso de entrega y esta fila queda vacía.
   Solo allí: en el carrito no hay paso al que llevarla y debe verse. */
.woocommerce-checkout .cosum .woocommerce-shipping-totals { display: none; }

/* --- Botón de avance ------------------------------------------------------- */

/* --- Salida hacia atrás (sobre las tarjetas, no dentro) -------------------- */

.coback {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-05);
	margin-bottom: var(--space-1);
	padding: var(--space-05) 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-body);
	cursor: pointer;
	transition: color .2s var(--ease);
}

.coback:hover { color: var(--c-ink); }

.coback:focus-visible {
	outline: var(--focus-w) solid var(--c-gold);
	outline-offset: 3px;
}

/* Flecha en CSS: una petición menos y hereda el color del enlace. */
.coback__ico {
	width: 0.85rem;
	height: 0.85rem;
	background: currentColor;
	clip-path: path( 'M6.4 1.3 5.5.4 0 5.9l5.5 5.5.9-.9-4-4h11.2V5.3H2.4l4-4z' );
	transition: transform .2s var(--ease);
}

.coback:hover .coback__ico { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
	.coback__ico { transition: none; }
	.coback:hover .coback__ico { transform: none; }
}

.btn-co {
	display: block;
	width: 100%;
	margin-top: var(--space-3);
	min-height: var(--field-h);
	padding: 0 var(--field-pad-x);
	background: var(--c-ink);
	color: var(--c-white);
	border: var(--field-border) solid var(--c-ink);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-mid);
	cursor: pointer;
	transition: background .2s var(--ease);
}

.btn-co:hover { background: var(--c-dark-2); }

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

.exc-co__aside { min-width: 0; }

.cosum {
	position: sticky;
	top: var(--co-sticky-top);
	background: var(--c-bg);
	border: var(--hairline) solid var(--c-line);
	padding: var(--co-card-pad);
}

@media (max-width: 1080px) {
	.cosum { position: static; }
}

/* Al sacar de aquí la vuelta al carrito, el título quedaba pegado a la tabla:
   el aire que daba aquel enlace ahora lo pone el propio margen.
   Se dobla el selector porque `.cart_totals h2` del tema padre gana por
   especificidad y le mete versalita muy espaciada: partía el título en dos. */
.cosum .cosum__title,
.cart_totals .cosum__title {
	margin: 0 0 var(--cosum-sep-y);
	font-size: var(--fs-h5);
	font-weight: 700;
	color: var(--c-ink);
	letter-spacing: var(--tracking-tight);
	line-height: 1.2;
	text-transform: none;
	text-align: left;
	padding: 0;
	border: 0;
}

.cosum__back {
	display: inline-block;
	margin-bottom: var(--cosum-sep-y);
	font-size: var(--fs-xs);
	color: var(--c-body);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cosum__back:hover { color: var(--c-ink); }

/* --- Tabla del resumen ----------------------------------------------------- */

.cosum__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	table-layout: auto;
}

/* Cabecera: solo etiquetas, en versalita fina. */
.cosum__table thead th {
	padding: var(--cell-head-y) var(--cell-pad-x);
	border-bottom: var(--hairline) solid var(--c-line);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: left;
}

.cosum__table thead th.product-total { text-align: right; }

.cosum__table tbody td {
	padding: var(--cosum-sep-y) var(--cell-pad-x);
	border-bottom: var(--hairline) solid var(--c-line);
}

/* --- Línea de producto ----------------------------------------------------- */

.coitem {
	display: flex;
	align-items: flex-start;
	gap: var(--coitem-gap);
}

.coitem__media {
	position: relative;
	flex: none;
	width: var(--coitem-thumb);
}

.coitem__media .coitem__img,
.coitem__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--c-soft);
}

/* Contador sobre la foto, como en la referencia. */
.coitem__qty {
	position: absolute;
	top: calc( var(--space-05) * -1 );
	right: calc( var(--space-05) * -1 );
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-white);
	font-size: var(--fs-2xs);
	font-weight: 700;
	line-height: 1;
}

.coitem__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.coitem__name {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.35;
}

/* La cantidad ya se ve en la foto; en texto es respaldo para lectores de pantalla
   y pantallas donde la burbuja se pierde. */
.coitem__qtxt {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.coitem__body .variation {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-body);
}

.coitem__body .variation dt,
.coitem__body .variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.coitem__price {
	flex: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
	padding-top: 0.1rem;
}

/* --- Totales ---------------------------------------------------------------- */

.cosum__table tfoot th,
.cosum__table tfoot td {
	padding: var(--cosum-row-y) var(--cell-pad-x);
	border: 0;
	font-weight: 400;
	font-size: var(--fs-sm);
	color: var(--c-body);
	text-align: left;
}

.cosum__table tfoot td {
	text-align: right;
	color: var(--c-ink);
}

/* La fila de producto ya deja aire por debajo; sumarle aquí el hueco de bloque
   abría un vacío de ~44px entre el detalle y los totales. */
.cosum__table tfoot tr:first-child th,
.cosum__table tfoot tr:first-child td {
	padding-top: var(--cosum-row-y);
}

.cosum__table tfoot .order-total th,
.cosum__table tfoot .order-total td {
	padding-top: var(--cosum-row-y);
	border-top: var(--hairline) solid var(--c-line);
	font-size: var(--fs-h6);
	font-weight: 700;
	color: var(--c-ink);
}

/* Aviso de privacidad y notas: aire y tamaño de nota, no de párrafo. */
.cosum .woocommerce-privacy-policy-text p,
.cosum .woocommerce-terms-and-conditions-wrapper p {
	margin: var(--cosum-sep-y) 0 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-muted);
}

/* El botón de confirmar lo mueve el JS hasta aquí. */
.cosum .place-order {
	margin: var(--space-2) 0 0;
	padding: 0;
	float: none;
	width: auto;
}

.cosum #place_order {
	width: 100%;
	min-height: var(--field-h);
	background: var(--c-ink);
	color: var(--c-white);
	border: var(--field-border) solid var(--c-ink);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-mid);
	cursor: pointer;
}

/* =============================================================
   Carrito — misma rejilla y mismo resumen que el checkout
   ============================================================= */

.cart-grid {
	max-width: var(--co-container);
	margin: 0 auto;
	padding: var(--flow) 0 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--co-aside-w);
	gap: var(--co-gap);
	align-items: start;
}

@media (max-width: 1080px) {
	.cart-grid { grid-template-columns: minmax(0, 1fr); }
}

.cart-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* La tabla se apila según el ancho de ESTA columna, no el de la ventana.
	   Es lo que arregla el caso de portátil: con la rejilla a dos columnas el
	   resumen se lleva 22rem y aquí quedan ~300px, pero la ventana sigue siendo
	   "grande", así que ningún media query lo detectaba. Con el zoom del
	   navegador pasaba lo mismo. Ver el @container de abajo. */
	container-type: inline-size;
	container-name: carrito;
}

.cart-main .woocommerce-cart-form {
	background: var(--c-bg);
	border: var(--hairline) solid var(--c-line);
	padding: var(--co-card-pad);
}

.cart-main .woocommerce-cart-form.is-updating { opacity: .55; pointer-events: none; }

/* --- Tabla del carrito ----------------------------------------------------- */

.cart-tabla {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	/* `fixed` con anchos absolutos rompía en portátil: cantidad 8.5rem + precio
	   7rem + quitar 3rem pedían 323px, y con la rejilla a dos columnas a la
	   tarjeta le quedan ~300px por dentro. La columna del producto se quedaba
	   sin sitio y la foto y el nombre se aplastaban contra el borde. Con `auto`
	   las columnas se ajustan a su contenido y el producto se lleva el resto. */
	table-layout: auto;
}

/* Cada columna pide lo justo; el ancho lo negocia la tabla. */
.cart-tabla .product-quantity { width: 1%; white-space: nowrap; }
.cart-tabla .product-subtotal { width: 1%; white-space: nowrap; }
.cart-tabla .product-remove   { width: 1%; }

/* Nada de `overflow-wrap: anywhere` aquí: dejaba que el nombre se comprimiera
   hasta 13px de ancho (una letra por línea) en vez de forzar el apilado. */

/* Antes iba `0` arriba y `--space-1` abajo: la fila de encabezados quedaba
   descolgada respecto a las de producto. Ahora simétrica y con su propio
   token, más ceñido: son etiquetas, no contenido. */
.cart-tabla thead th {
	padding: var(--cell-head-y) var(--cell-pad-x);
	border-bottom: var(--hairline) solid var(--c-line);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: left;
}

.cart-tabla thead .product-quantity,
.cart-tabla thead .product-subtotal { text-align: center; }

.cart-tabla tbody td {
	padding: var(--cart-row-y) var(--cell-pad-x);
	border-bottom: var(--hairline) solid var(--c-line);
	vertical-align: middle;
}

.cart-tabla .product-quantity,
.cart-tabla .product-subtotal { text-align: center; }

.cart-tabla .product-subtotal {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
}

.cart-tabla .product-remove { width: 2.5rem; text-align: right; }

.cart-tabla .product-remove .remove {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: var(--fs-md);
	line-height: 1;
	color: var(--c-muted);
	text-decoration: none;
	transition: color .2s var(--ease);
}

.cart-tabla .product-remove .remove:hover { color: var(--c-ink); }

/* --- Línea de producto ----------------------------------------------------- */

.cartline {
	display: flex;
	align-items: flex-start;
	gap: var(--coitem-gap);
}

.cartline__media {
	flex: none;
	width: var(--cartline-thumb);
}

.cartline__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--c-soft);
}

.cartline__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.cartline__name a,
.cartline__name {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.35;
	text-decoration: none;
}

.cartline__name a:hover { text-decoration: underline; }

.cartline__unit {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.cartline__body .variation {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-body);
}

.cartline__body .variation dt,
.cartline__body .variation dd { display: inline; margin: 0; font-weight: 400; }

/* --- Cantidad -------------------------------------------------------------- */

.cart-tabla .quantity {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border: var(--hairline) solid var(--c-line);
	background: var(--c-bg);
}

/* main.css fija `input.qty` en 68px con padding propio: sumado a los ± el
   bloque medía 200px dentro de una celda de 149 y el precio se le montaba. */
.woocommerce .cart-tabla .quantity input.qty {
	width: 2.75rem;
	height: var(--field-h);
	padding: 0;
	border: 0;
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: 600;
	background: none;
	-moz-appearance: textfield;
}

/* Los ± que pinta la plantilla del tema. */
.cart-tabla .quantity .action,
.cart-tabla .quantity button {
	flex: none;
	width: 2rem;
	height: var(--field-h);
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--c-body);
	cursor: pointer;
}

.cart-tabla .quantity .action:hover,
.cart-tabla .quantity button:hover { background: var(--c-soft); color: var(--c-ink); }

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

/* La fila de acciones solo guarda el botón de respaldo y el nonce. */
.cart-tabla .actions {
	padding: var(--space-2) 0 0;
	border-bottom: 0;
	text-align: right;
}

/* Doblado con `.woocommerce` porque el `.button` del tema lo pinta en negro y
   competía con "Finalizar compra", que es la acción que importa aquí. */
.woocommerce .cart-tabla .cart-actualizar,
.cart-actualizar {
	min-height: var(--field-h);
	padding: 0 var(--space-2);
	background: none;
	border: var(--field-border) solid var(--c-line);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-mid);
	text-transform: uppercase;
	color: var(--c-body);
	cursor: pointer;
}

.woocommerce .cart-tabla .cart-actualizar:hover,
.cart-actualizar:hover {
	background: none;
	border-color: var(--c-ink);
	color: var(--c-ink);
}

/* --- Carrito estrecho: la tabla deja de ser tabla ---------------------------
   Se dispara por el ancho de la columna (`@container`), no por el de la
   ventana. En un portátil con la rejilla a dos columnas aquí quedan ~300px
   mientras la ventana mide 1300: con un media query el nombre del producto se
   comprimía hasta 13px y la foto quedaba pegada al borde. El mismo caso se da
   al usar zoom del navegador.
   Cada artículo pasa a ser un bloque: producto arriba, cantidad y precio
   debajo en una línea, y la equis en la esquina. */
@container carrito (max-width: 34rem) {
	.woocommerce-cart-form { padding: var(--space-2); }

	.cart-tabla thead { display: none; }
	.cart-tabla tbody,
	.cart-tabla tr,
	.cart-tabla td { display: block; width: auto; }

	.cart-tabla tbody tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--space-1);
		padding: var(--cart-row-y) 0;
		border-bottom: var(--hairline) solid var(--c-line);
	}

	/* `width: auto` explícito: el `width: 1%` que ajusta las columnas en modo
	   tabla gana por especificidad y aquí dejaba la celda en 0.5px, así que el
	   importe se salía de la tarjeta. */
	.cart-tabla tbody tr.cart_item td {
		width: auto;
		padding: 0;
		border: 0;
	}

	/* Producto a todo el ancho, con hueco a la derecha para la equis. */
	.cart-tabla tbody tr.cart_item .product-name {
		grid-column: 1 / -1;
		padding-right: var(--space-4);
	}

	.cart-tabla tbody tr.cart_item .product-quantity { justify-self: start; }

	/* Sin el `padding-left` de la vista en tabla: aquí se suma al alineado
	   a la derecha y empujaba el importe 15px fuera de la tarjeta. */
	.cart-tabla tbody tr.cart_item .product-subtotal {
		justify-self: end;
		padding-left: 0;
	}

	.cart-tabla tbody tr.cart_item .product-remove {
		position: absolute;
		top: var(--cart-row-y);
		right: 0;
		width: auto;
	}

	/* Botón de actualizar a todo el ancho: a media línea queda descolgado. */
	.cart-tabla .actions { text-align: center; }
	.cart-actualizar { width: 100%; }
}

/* Respaldo para navegadores sin @container: al menos en móvil se apila. */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.cart-tabla thead { display: none; }
		.cart-tabla tbody,
		.cart-tabla tr,
		.cart-tabla td { display: block; width: auto; }
		.cart-tabla tbody tr.cart_item {
			position: relative;
			display: grid;
			grid-template-columns: 1fr auto;
			gap: var(--space-1);
			padding: var(--cart-row-y) 0;
			border-bottom: var(--hairline) solid var(--c-line);
		}
		.cart-tabla tbody tr.cart_item td { padding: 0; border: 0; }
		.cart-tabla tbody tr.cart_item .product-name { grid-column: 1 / -1; padding-right: var(--space-4); }
		.cart-tabla tbody tr.cart_item .product-subtotal { justify-self: end; }
		.cart-tabla tbody tr.cart_item .product-remove { position: absolute; top: var(--cart-row-y); right: 0; width: auto; }
	}
}

/* --- Resumen del carrito --------------------------------------------------- */

.cart-aside { min-width: 0; }

.cart-aside .cart-collaterals { width: auto; float: none; }

.cart-aside .cosum {
	position: sticky;
	top: var(--co-sticky-top);
	background: var(--c-bg);
	border: var(--hairline) solid var(--c-line);
	padding: var(--co-card-pad);
}

/* `.woocommerce table.shop_table` dibuja marco y filete por celda: dentro del
   resumen eso encajonaba cada total. El único filete es el del Total.
   Aquí los totales van en `tbody` (en el checkout van en `tfoot`), así que las
   reglas de alineación hay que repetirlas: si no, los importes se quedan
   pegados a la etiqueta por la izquierda. */
.cart-aside .cosum__table,
.cart-aside .cosum__table th,
.cart-aside .cosum__table td {
	border: 0;
	border-radius: 0;
}

.cart-aside .cosum__table tbody th,
.cart-aside .cosum__table tbody td {
	padding: var(--cosum-row-y) var(--cell-pad-x);
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--c-body);
	text-align: left;
	vertical-align: top;
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--font-body);
}

.cart-aside .cosum__table tbody td {
	text-align: right;
	color: var(--c-ink);
}

.cart-aside .cosum__table .order-total th,
.cart-aside .cosum__table .order-total td {
	border-top: var(--hairline) solid var(--c-line);
	padding-top: var(--cosum-row-y);
	font-family: var(--font-display);
	font-size: var(--fs-h6);
	font-weight: 700;
	color: var(--c-ink);
	vertical-align: baseline;
}

/* La celda de envío trae radios y dirección, no un importe: se alinea a la
   izquierda pese a la regla general de la columna derecha. */
.cart-aside .cosum__table tbody.woocommerce-shipping-totals td,
.cart-aside .cosum__table .woocommerce-shipping-totals td { text-align: left; }

.cart-aside .woocommerce-shipping-totals th { vertical-align: top; }

/* En móvil WooCommerce repite la etiqueta con ::before; el th ya está visible. */
.cart-aside .cosum__table td::before { content: none; }

@media (max-width: 1080px) {
	.cart-aside .cosum { position: static; }
}

/* Cupón: campo y botón pegados, como en la referencia. */
.cocupon {
	display: flex;
	gap: 0;
	margin-bottom: var(--cosum-sep-y);
}

.cocupon__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--field-h);
	padding: 0 var(--field-pad-x);
	border: var(--hairline) solid var(--c-line);
	border-right: 0;
	font-size: var(--fs-sm);
}

.cocupon__btn {
	flex: none;
	height: var(--field-h);
	padding: 0 var(--space-2);
	background: none;
	border: var(--hairline) solid var(--c-ink);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.cocupon__btn:hover { background: var(--c-ink); color: var(--c-white); }

/* Botón de pasar al pago. */
.wc-proceed-to-checkout { margin-top: var(--space-2); }

.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	min-height: var(--field-h);
	line-height: var(--field-h);
	text-align: center;
	background: var(--c-ink);
	color: var(--c-white);
	border: var(--field-border) solid var(--c-ink);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-mid);
	text-decoration: none;
	transition: background .2s var(--ease);
}

.wc-proceed-to-checkout .checkout-button:hover { background: var(--c-dark-2); }

/* En el carrito los métodos de envío se quedan en el resumen: aquí no hay
   paso de entrega al que llevarlos. La celda es estrecha, así que la etiqueta
   va bajo el radio y no estirada de un borde al otro. */
.cart-aside .woocommerce-shipping-totals td { text-align: left; }

.cart-aside ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-aside ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--space-05);
	margin: 0;
	padding: 0.2rem 0;
	font-size: var(--fs-xs);
	color: var(--c-body);
	text-align: left;
}

.cart-aside ul#shipping_method li input { flex: none; margin: 0; }

.cart-aside ul#shipping_method li label {
	margin: 0;
	display: flex;
	flex: 1 1 auto;
	justify-content: space-between;
	gap: var(--space-1);
	cursor: pointer;
}

.cart-aside .woocommerce-shipping-destination {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--c-muted);
}

.cart-aside .woocommerce-shipping-calculator {
	margin-top: var(--space-1);
	font-size: var(--fs-xs);
}

.cart-aside .shipping-calculator-button {
	color: var(--c-body);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cart-aside .shipping-calculator-button:hover { color: var(--c-ink); }

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

.woocommerce-cart .cart-empty {
	text-align: center;
	font-size: var(--fs-h5);
	color: var(--c-ink);
	margin: var(--space-5) 0 var(--space-2);
}

.woocommerce-cart .return-to-shop { text-align: center; margin-bottom: var(--space-6); }

/* --- Pie reducido ---------------------------------------------------------- */

.cofoot {
	margin-top: var(--space-5);
	border-top: var(--hairline) solid var(--c-line);
	background: var(--c-bg);
}

.cofoot__inner {
	max-width: var(--co-container);
	margin: 0 auto;
	padding: var(--flow) var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	align-items: center;
	justify-content: space-between;
}

.cofoot__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
}

.cofoot__links a,
.cofoot__legal {
	font-size: var(--fs-xs);
	color: var(--c-body);
	margin: 0;
}

.cofoot__links a:hover { color: var(--c-ink); }

/* =============================================================
   Dirección con autocompletado y ubicación
   ============================================================= */

.exc-addr {
	position: relative;
}

/* El campo es el de WooCommerce; solo dejamos sitio al botón de ubicación. */
.exc-addr__input {
	padding-right: calc( var(--addr-geo-size) + var(--field-pad-x) ) !important;
}

/* --- Botón "usar mi ubicación" ------------------------------------------ */

.exc-addr__geo {
	position: absolute;
	top: calc( var(--field-h) / 2 );
	right: calc( var(--field-pad-x) / 2 );
	transform: translateY(-50%);
	width: var(--addr-geo-size);
	height: var(--addr-geo-size);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-body);
	cursor: pointer;
	transition: color .2s var(--ease);
}

.exc-addr__geo:hover,
.exc-addr__geo:focus-visible {
	color: var(--c-ink);
}

.exc-addr__geo:focus-visible {
	outline: var(--focus-w) solid var(--c-gold);
	outline-offset: 2px;
}

.exc-addr__geo svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.exc-addr__geo svg circle:first-child {
	fill: currentColor;
	stroke: none;
}

.exc-addr__geo.is-loading {
	animation: exc-addr-pulse 1s var(--ease) infinite;
}

@keyframes exc-addr-pulse {
	50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.exc-addr__geo.is-loading { animation: none; opacity: .5; }
}

/* --- Desplegable de sugerencias ----------------------------------------- */

.exc-addr__list {
	position: absolute;
	z-index: 20;
	top: calc( 100% + var(--hairline) );
	left: 0;
	right: 0;
	max-height: var(--addr-list-max);
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--c-bg);
	border: var(--hairline) solid var(--c-line);
	box-shadow: var(--shadow-md);
}

.exc-addr__item {
	display: flex;
	gap: var(--space-1);
	align-items: flex-start;
	padding: var(--addr-item-y) var(--field-pad-x);
	cursor: pointer;
	border-bottom: var(--hairline) solid var(--c-line);
}

.exc-addr__item:last-child { border-bottom: 0; }

.exc-addr__item:hover,
.exc-addr__item.is-active {
	background: var(--c-soft);
}

/* Pin dibujado en CSS: evita una petición más y hereda el color del token. */
.exc-addr__pin {
	flex: none;
	width: var(--addr-pin);
	height: var(--addr-pin);
	margin-top: 0.15em;
	background: var(--c-muted);
	clip-path: path( 'M8 0C4.7 0 2 2.7 2 6c0 4.5 6 10 6 10s6-5.5 6-10c0-3.3-2.7-6-6-6zm0 8.2A2.2 2.2 0 1 1 8 3.8a2.2 2.2 0 0 1 0 4.4z' );
}

.exc-addr__item:hover .exc-addr__pin,
.exc-addr__item.is-active .exc-addr__pin {
	background: var(--c-gold);
}

.exc-addr__txt {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.exc-addr__txt strong {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.35;
}

.exc-addr__txt small {
	font-size: var(--fs-xs);
	color: var(--c-body);
	line-height: 1.35;
}

/* --- Mensaje de estado --------------------------------------------------- */

.exc-addr__note {
	margin: var(--addr-note-gap) 0 0;
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-body);
}

.exc-addr__note.is-ok   { color: var(--c-ok); }
.exc-addr__note.is-warn { color: var(--c-wait); }