/*
 * Aliances Experience - capa de marca del carrito y de la compra.
 *
 * Sale del marco «carro-de-compras» del Figma (656:266). La reticula del diseno
 * es 1452 px de contenido repartidos en 1000 + 32 + 420: eso es lo unico que se
 * fija en pixeles; el resto va en tokens --ae-* del Kit, asi que un cambio de
 * token repinta tambien esto.
 *
 * Se carga despues de ae-woocommerce.css, que pone los tokens comunes de
 * formulario de toda la tienda; aqui solo va el marco de estas pantallas.
 *
 * Nota sobre las esquinas: el resto del sitio usa border-radius 0, pero los
 * marcos de esta zona y los del area de cliente redondean tarjeta, campos y
 * boton. Se respeta el diseno y se acota a `.ae-carrito`.
 */

/* ---------------------------------------------------------------------------
 * Lienzo
 *
 * El tema sirve estas paginas por index.php y ae-woocommerce.css le pone al div
 * `.woocommerce` un ancho maximo de 1450 con margenes automaticos. Hay que
 * soltar las dos cosas: dejando solo `margin: 0` la caja se queda clavada a la
 * izquierda en cuanto la ventana pasa de 1450. El selector lleva `.orb-main`
 * porque `.woocommerce-page:not(.elementor-page) .woocommerce-breadcrumb` son
 * tres clases y sin ella esto no gana.
 * ------------------------------------------------------------------------ */

.ae-carrito .orb-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background-color: var(--ae-tint);
}


.ae-carrito .orb-main > article,
.ae-carrito .orb-main .woocommerce {
	max-width: none;
	margin: 0;
	padding: 0;
}


.ae-carrito-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1728px;
	margin-inline: auto;
	padding-inline: var(--ae-gutter);
	padding-block: 29px clamp(56px, 7vw, 104px);
}


/* Los avisos de WooCommerce salen fuera del envoltorio; se les da el mismo
   lienzo para que no crucen la pantalla de lado a lado. */

.ae-carrito .orb-main .woocommerce-notices-wrapper:not(:empty) {
	box-sizing: border-box;
	width: 100%;
	max-width: 1728px;
	margin-inline: auto;
	padding-inline: var(--ae-gutter);
	padding-top: 28px;
}


/* ---------------------------------------------------------------------------
 * Migas
 * ------------------------------------------------------------------------ */

.ae-carrito .orb-main {
	/* Las migas miden el ancho con cqw para salir del lienzo de 1728. */
	container-type: inline-size;
}


/* Misma receta que las migas de la ficha (ae-producto.css, ficha-crumb):
   hasta 1600 px con el margen de la web, aunque el lienzo de esta pagina
   sea mas ancho y con el margen por dentro. */
.ae-carrito .orb-main .woocommerce-breadcrumb {
	--ae-crumb-w: min(1600px, 100cqw - 2 * var(--ae-gutter));
	box-sizing: border-box;
	width: var(--ae-crumb-w);
	max-width: none;
	margin: 0 0 24px;
	margin-inline: calc((100% - var(--ae-crumb-w)) / 2);
	padding: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ae-body);
}


.ae-carrito .woocommerce-breadcrumb a {
	color: var(--ae-body);
	text-decoration: none;
	transition: color 0.3s ease;
}


.ae-carrito .woocommerce-breadcrumb a:hover,
.ae-carrito .woocommerce-breadcrumb a:focus-visible {
	color: var(--ae-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}


.ae-carrito .ae-crumb-sep {
	margin-inline: 0;
	color: inherit;
}


/* ---------------------------------------------------------------------------
 * Cabecera
 *
 * El filete de debajo del titulo es el vector de 80x10 del Figma. Va como
 * pseudoelemento y como SVG en linea: es decoracion, no contenido, y asi no
 * pide un fichero mas.
 * ------------------------------------------------------------------------ */

.ae-carrito-cabecera {
	margin: 0 0 40px;
	text-align: center;
}


.ae-carrito .ae-carrito-cabecera .ae-carrito-eyebrow {
	margin: 0 0 2px;
	font-family: var(--ae-font-script), cursive;
	font-size: 22px;
	line-height: 1.2;
	color: var(--ae-accent);
}


.ae-carrito .ae-carrito-cabecera .ae-carrito-titulo {
	margin: 0;
	font-family: var(--ae-font-heading), serif;
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ae-ink);
}


.ae-carrito-cabecera::after {
	content: "";
	display: block;
	width: 80px;
	height: 10px;
	margin: 14px auto 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'%3E%3Cpath d='M0 5h30M50 5h30' stroke='%23EAC1BF' stroke-width='1'/%3E%3Cpath d='M40 1.5 43.5 5 40 8.5 36.5 5z' fill='none' stroke='%23A16363' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}


/* ---------------------------------------------------------------------------
 * Reticula
 *
 * 1000 + 32 + 420 en el diseno. La columna del resumen se fija y la de los
 * articulos coge lo que queda, que a 1728 son exactamente esos 1000.
 * ------------------------------------------------------------------------ */

.ae-carrito-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 32px;
	align-items: start;
}


.ae-carrito-lado {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 24px;
}


/* El envoltorio que WooCommerce exige alrededor del resumen no debe pintar
   nada ni abrir hueco: la rejilla ya separa. */

.ae-carrito .cart-collaterals {
	width: auto;
	margin: 0;
	padding: 0;
}


.ae-carrito .cart-collaterals::before,
.ae-carrito .cart-collaterals::after {
	display: none;
}


/*
 * `woocommerce-layout.css` flota el resumen y lo deja al 48% de su contenedor,
 * pensando en un carrito a dos columnas dentro del contenido. Aqui el
 * contenedor ya es la columna de 420, asi que ese 48% son 202 px y el titulo
 * parte en dos lineas. El selector necesita cuatro clases: el de WooCommerce
 * (`.woocommerce .cart-collaterals .cart_totals`) son tres.
 */

.ae-carrito .ae-carrito-lado .cart-collaterals .cart_totals,
.ae-carrito .ae-carrito-lado .cart-collaterals .cross-sells {
	float: none;
	width: auto;
}


/* ---------------------------------------------------------------------------
 * Tarjeta
 * ------------------------------------------------------------------------ */

.ae-carrito-card {
	box-sizing: border-box;
	padding: clamp(24px, 3vw, 48px);
	background-color: #FFFFFF;
	border-radius: 8px;
}


.ae-carrito-card + .ae-carrito-card {
	margin-top: 24px;
}


.ae-carrito-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ae-line);
}


.ae-carrito .ae-carrito-card-titulo {
	margin: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ae-ink);
}


.ae-carrito .ae-carrito-card-recuento {
	margin: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ae-body);
}


/* ---------------------------------------------------------------------------
 * Articulos
 *
 * Cinco columnas: miniatura, nombre, cantidad, importe y la cruz de quitar.
 * ------------------------------------------------------------------------ */

/* Dos clases: la regla del kit `.orb-main ul` (clase + etiqueta) ponia 22px a la izquierda y 18px abajo. */
.ae-carrito .ae-carrito-items {
	margin: 0;
	padding: 0;
	list-style: none;
}


.ae-carrito-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 104px 110px 28px;
	gap: 20px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--ae-line);
}


.ae-carrito-item-media img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 6px;
	background-color: var(--ae-tint);
}


.ae-carrito .ae-carrito-item-nombre {
	margin: 0 0 4px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ae-ink);
}


.ae-carrito .ae-carrito-item-nombre a {
	color: inherit;
	text-decoration: none;
	transition: color 300ms ease;
}


.ae-carrito .ae-carrito-item-nombre a:hover,
.ae-carrito .ae-carrito-item-nombre a:focus-visible {
	color: var(--ae-accent);
}


/* Las variaciones que imprime WooCommerce. */

.ae-carrito .ae-carrito-item-datos .variation {
	margin: 0 0 4px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ae-body);
}


.ae-carrito .ae-carrito-item-datos .variation dt,
.ae-carrito .ae-carrito-item-datos .variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}


.ae-carrito .ae-carrito-item-datos .variation dd + dt::before {
	content: " · ";
}


.ae-carrito .ae-carrito-item-datos .variation p {
	display: inline;
	margin: 0;
}


.ae-carrito .backorder_notification {
	margin: 4px 0 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ae-accent);
}


.ae-carrito .ae-carrito-item-unidad {
	margin: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ae-body);
}


.ae-carrito-item-unidad-nota {
	margin-left: 4px;
	font-size: 12px;
	color: #9C918B;
}


/* La caja de cantidad. */

.ae-carrito .ae-carrito-item-cantidad .quantity {
	display: block;
	float: none;
	margin: 0;
}


.ae-carrito .ae-carrito-item-cantidad input.qty {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--ae-line);
	border-radius: 6px;
	background-color: #FFFFFF;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	text-align: center;
	color: var(--ae-ink);
}


.ae-carrito .ae-carrito-item-cantidad input.qty:focus {
	border-color: var(--ae-accent);
	outline: 2px solid rgba(161, 99, 99, .18);
}


.ae-carrito .ae-carrito-item-total {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: var(--ae-ink);
}


/*
 * «(incl. impuestos)» detras de cada importe.
 *
 * WooCommerce lo cuelga de todos los precios cuando la tienda muestra con IVA
 * incluido. Repetido en cada linea es ruido: la tarjeta ya lo dice una vez,
 * bajo el total, y ahi ademas con la cuota desglosada. Se apaga en las lineas y
 * se deja donde informa.
 */

.ae-carrito .ae-carrito-item-total .tax_label,
.ae-carrito .ae-carrito-item-unidad .tax_label,
.ae-carrito .ae-carrito-linea .tax_label,
.ae-carrito .ae-carrito-resumen-item-total .tax_label {
	display: none;
}


/* La cruz de quitar: sin fondo, del color del texto y de marca al pasar.
   WooCommerce la pinta en rojo con !important, asi que hay que responderle. */

.ae-carrito .ae-carrito-item-quitar a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0 0 0 auto;
	border-radius: 50%;
	background: none;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	color: #B9AFA9 !important;
	transition: background-color 300ms ease, color 300ms ease;
}


.ae-carrito .ae-carrito-item-quitar a.remove:hover,
.ae-carrito .ae-carrito-item-quitar a.remove:focus-visible {
	background-color: var(--ae-tint) !important;
	color: var(--ae-accent) !important;
}


/* ---------------------------------------------------------------------------
 * Acciones: cupon y actualizar
 * ------------------------------------------------------------------------ */

.ae-carrito-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
}


.ae-carrito-cupon {
	flex: 1 1 320px;
	max-width: 420px;
}


.ae-carrito .ae-carrito-cupon label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--ae-ink);
}


.ae-carrito-cupon-campos {
	display: flex;
	gap: 8px;
}


.ae-carrito .ae-carrito-cupon input.input-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--ae-line);
	border-radius: 6px;
	background-color: #FFFFFF;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-ink);
}


.ae-carrito .ae-carrito-cupon input.input-text::placeholder {
	color: #B9AFA9;
	opacity: 1;
}


/* Boton secundario: contorno, no macizo. El macizo es el de tramitar. */

.ae-carrito .button.ae-carrito-boton-fino {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 10px 20px;
	border: 1px solid var(--ae-accent);
	border-radius: 4px;
	background-color: transparent;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ae-accent);
	transition: background-color 300ms ease, color 300ms ease;
}


.ae-carrito .button.ae-carrito-boton-fino:hover:not([disabled]),
.ae-carrito .button.ae-carrito-boton-fino:focus-visible {
	background-color: var(--ae-accent);
	color: #FFFFFF;
}


/*
 * «Actualizar carrito» es la red de seguridad de quien no tenga JS: con JS, el
 * campo de cantidad se envia solo y el boton sale deshabilitado. Se deja
 * visible pero apagado en vez de esconderlo, que sin JS haria falta.
 */

.ae-carrito .button.ae-carrito-actualizar[disabled] {
	opacity: .45;
	cursor: default;
}


/* ---------------------------------------------------------------------------
 * Seguir comprando
 * ------------------------------------------------------------------------ */

.ae-carrito .ae-carrito-seguir {
	margin: 20px 0 0;
}


.ae-carrito .ae-carrito-seguir a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 300ms ease;
}


.ae-carrito .ae-carrito-seguir a:hover,
.ae-carrito .ae-carrito-seguir a:focus-visible {
	color: var(--ae-accent-dark);
}


.ae-carrito .ae-carrito-seguir svg {
	flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
 * Resumen del pedido
 * ------------------------------------------------------------------------ */

.ae-carrito-resumen {
	box-sizing: border-box;
	width: auto;
	padding: 32px;
	background-color: #FFFFFF;
	border-radius: 8px;
	float: none;
}


.ae-carrito .ae-carrito-resumen-titulo {
	margin: 0 0 24px;
	font-family: var(--ae-font-heading), serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ae-ink);
}


/* Los articulos, solo en el checkout. */

/* Dos clases: la regla del kit `.orb-main ul` (clase + etiqueta) ponia 22px a la izquierda y 18px abajo. */
.ae-carrito .ae-carrito-resumen-items {
	margin: 0 0 20px;
	padding: 0 0 20px;
	list-style: none;
	border-bottom: 1px solid var(--ae-line);
}


.ae-carrito-resumen-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
}


.ae-carrito-resumen-item + .ae-carrito-resumen-item {
	margin-top: 16px;
}


.ae-carrito-resumen-item-media {
	position: relative;
	display: block;
}


.ae-carrito-resumen-item-media img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	background-color: var(--ae-tint);
}


/* La cantidad, como pastilla sobre la esquina de la miniatura. */

.ae-carrito-resumen-item-cantidad {
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background-color: var(--ae-accent);
	font-family: var(--ae-font-body), sans-serif;
	font-size: 11px;
	line-height: 1;
	color: #FFFFFF;
}


.ae-carrito-resumen-item-nombre {
	display: block;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ae-ink);
}


.ae-carrito-resumen-item-total {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--ae-ink);
}


/* Las lineas de totales. */

.ae-carrito-resumen-lineas {
	display: grid;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ae-line);
}


.ae-carrito .ae-carrito-linea {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ae-body);
}


.ae-carrito .ae-carrito-linea > span:last-child {
	text-align: right;
	color: var(--ae-ink);
}


/* La linea de envio puede traer una lista de metodos y hasta la calculadora:
   ahi el par etiqueta/valor deja de caber en una fila. */

.ae-carrito .ae-carrito-linea--bloque {
	display: block;
}


.ae-carrito .ae-carrito-linea--bloque .ae-carrito-linea-etiqueta {
	display: block;
	margin-bottom: 6px;
}


.ae-carrito .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}


.ae-carrito .woocommerce-shipping-methods li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
}


.ae-carrito .woocommerce-shipping-methods label {
	margin: 0;
	font-size: 15px;
	color: var(--ae-ink);
}


.ae-carrito .woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--ae-accent);
}


.ae-carrito .woocommerce-shipping-destination,
.ae-carrito .woocommerce-shipping-contents {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ae-body);
}


.ae-carrito .ae-carrito-gratis {
	color: #3F7D5A;
}


/* El total. */

.ae-carrito-total {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-top: 18px;
}


.ae-carrito-total-etiqueta {
	display: block;
}


.ae-carrito-total-palabra {
	display: block;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ae-ink);
}


.ae-carrito-total-nota {
	display: block;
	margin-top: 2px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: #9C918B;
}


.ae-carrito-total-cifra {
	font-family: var(--ae-font-heading), serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: var(--ae-accent);
}


/* WooCommerce mete su propia nota de impuestos dentro de la cifra. */

.ae-carrito .ae-carrito-total-cifra .includes_tax {
	display: block;
	margin-top: 2px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 12px;
	color: #9C918B;
}


/* El boton macizo. */

.ae-carrito .ae-carrito-tramitar {
	margin: 24px 0 0;
	padding: 0;
}


.ae-carrito .ae-carrito-tramitar .button,
.ae-carrito .ae-carrito-boton {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	padding: 14px 20px;
	border: 0;
	border-radius: 4px;
	background-color: var(--ae-accent);
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: background-color 300ms ease;
}


.ae-carrito .ae-carrito-tramitar .button:hover,
.ae-carrito .ae-carrito-tramitar .button:focus-visible {
	background-color: var(--ae-accent-dark);
	color: #FFFFFF;
}


.ae-carrito .ae-carrito-boton[aria-disabled="true"] {
	background-color: #D9C4C4;
	cursor: default;
}


/* ---------------------------------------------------------------------------
 * Garantias
 * ------------------------------------------------------------------------ */

/* Dos clases: la regla del kit `.orb-main ul` (clase + etiqueta) ponia 22px a la izquierda y 18px abajo. */
.ae-carrito-lado .ae-carrito-garantias {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}


.ae-carrito-garantia {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--ae-line);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .5);
}


.ae-carrito-garantia-icono {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--ae-tint);
	color: var(--ae-accent);
}


.ae-carrito-garantia-titulo {
	display: block;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ae-ink);
}


.ae-carrito-garantia-desc {
	display: block;
	margin-top: 4px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ae-body);
}


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

.ae-carrito-vacio {
	padding: 48px 0 32px;
	text-align: center;
}


.ae-carrito-vacio-icono {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 24px;
	border-radius: 50%;
	border: 1px solid var(--ae-line);
	color: var(--ae-accent);
}


.ae-carrito .ae-carrito-vacio-titulo {
	margin: 0 0 12px;
	font-family: var(--ae-font-heading), serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ae-ink);
}


.ae-carrito .ae-carrito-vacio-texto {
	max-width: 52ch;
	margin: 0 auto;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ae-body);
}


/* ---------------------------------------------------------------------------
 * Checkout: datos del cliente y formas de pago
 *
 * Facturacion y envio se apilan: en una columna de 1000 px caben al lado, pero
 * el envio solo aparece al marcar «enviar a otra direccion» y la fila queda
 * coja la mitad de las veces.
 * ------------------------------------------------------------------------ */

.ae-carrito .ae-checkout-datos {
	display: block;
}


.ae-carrito .ae-checkout-datos::before,
.ae-carrito .ae-checkout-datos::after {
	display: none;
}


.ae-carrito .ae-checkout-datos .col-1,
.ae-carrito .ae-checkout-datos .col-2 {
	float: none;
	width: auto;
}


.ae-carrito .ae-checkout-datos .col-2:not(:empty) {
	margin-top: 28px;
}


.ae-carrito .ae-checkout-datos h3,
.ae-carrito .ae-checkout-pago .ae-carrito-card-titulo {
	margin: 0 0 20px;
	font-family: var(--ae-font-heading), serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ae-ink);
}


.ae-carrito .ae-checkout-datos #ship-to-different-address {
	margin: 0 0 16px;
}


.ae-carrito .ae-checkout-datos #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--ae-ink);
}


.ae-carrito .ae-checkout-datos #ship-to-different-address input {
	accent-color: var(--ae-accent);
}


/* Los campos, con los mismos tokens que el area de cliente. */

.ae-carrito form .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}


.ae-carrito form .form-row-first,
.ae-carrito form .form-row-last {
	box-sizing: border-box;
	float: none;
	width: 100%;
}


.ae-carrito form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ae-ink);
}


.ae-carrito form .form-row .required {
	color: var(--ae-accent);
	text-decoration: none;
}


.ae-carrito form input.input-text,
.ae-carrito form textarea,
.ae-carrito form select,
.ae-carrito form .select2-selection {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--ae-line);
	border-radius: 6px;
	background-color: #FFFFFF;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-ink);
}


.ae-carrito form textarea {
	min-height: 110px;
	resize: vertical;
}


.ae-carrito form input.input-text::placeholder,
.ae-carrito form textarea::placeholder {
	color: #B9AFA9;
	opacity: 1;
}


.ae-carrito form input.input-text:focus,
.ae-carrito form textarea:focus,
.ae-carrito form select:focus {
	border-color: var(--ae-accent);
	outline: 2px solid rgba(161, 99, 99, .18);
}


/* En pantalla ancha, nombre y apellidos —y CP y poblacion— comparten fila. */

@media (min-width: 768px) {
	.ae-carrito form .form-row-first,
	.ae-carrito form .form-row-last {
		display: inline-block;
		width: calc(50% - 10px);
		vertical-align: top;
	}

	.ae-carrito form .form-row-first {
		margin-right: 16px;
	}
}


/* Formas de pago.
 *
 * WooCommerce le pone a este bloque un fondo gris lila y esquinas redondeadas
 * desde `#payment`, que es un id: con una sola clase no hay forma de ganarle.
 * De ahi las dos clases delante.
 */

.ae-carrito .ae-checkout-pago #payment,
.ae-carrito .ae-checkout-pago .woocommerce-checkout-payment {
	padding: 0;
	border-radius: 0;
	background: none;
}


.ae-carrito .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ae-line);
	border-radius: 8px;
	overflow: hidden;
}


/* Sin pasarelas configuradas la lista queda vacia, y un marco vacio debajo del
   aviso parece un fallo de pintado. */

.ae-carrito .wc_payment_methods:empty {
	display: none;
}


.ae-carrito .wc_payment_method {
	padding: 16px 20px;
}


.ae-carrito .wc_payment_method + .wc_payment_method {
	border-top: 1px solid var(--ae-line);
}


.ae-carrito .wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 16px;
	color: var(--ae-ink);
	cursor: pointer;
}


.ae-carrito .wc_payment_method input[type="radio"] {
	accent-color: var(--ae-accent);
}


.ae-carrito .payment_box {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-radius: 6px;
	background-color: var(--ae-tint);
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ae-body);
}


.ae-carrito .payment_box::before {
	display: none;
}


.ae-carrito .woocommerce-privacy-policy-text {
	margin: 18px 0 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ae-body);
}


.ae-carrito .woocommerce-terms-and-conditions-wrapper {
	margin-top: 18px;
}


/* El boton de confirmar el pedido, macizo y a todo el ancho. */

.ae-carrito .place-order {
	margin: 22px 0 0;
	padding: 0;
}


.ae-carrito #place_order {
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	padding: 14px 20px;
	border: 0;
	border-radius: 4px;
	background-color: var(--ae-accent);
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #FFFFFF;
	transition: background-color 300ms ease;
}


.ae-carrito #place_order:hover,
.ae-carrito #place_order:focus-visible {
	background-color: var(--ae-accent-dark);
}


/* ---------------------------------------------------------------------------
 * Pedido recibido y pagar pedido
 *
 * No tienen marco propio en el Figma y su marcado lo sirve WooCommerce entero,
 * asi que en vez de plantilla se les da aqui el mismo lienzo y la misma
 * tarjeta.
 * ------------------------------------------------------------------------ */

.ae-carrito .woocommerce-order,
.ae-carrito .woocommerce-order-pay {
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	padding: clamp(24px, 3vw, 48px);
	background-color: #FFFFFF;
	border-radius: 8px;
}


/*
 * El aire va como padding del contenedor, no como margen de la tarjeta:
 * .orb-main pinta el rosado pero no tiene padding ni borde, y el margen de la
 * tarjeta lo atravesaba (colapso de margenes) y quedaba fuera, en blanco. La
 * tarjeta salia pegada al borde del rosado arriba y abajo.
 */
.ae-carrito .orb-main .woocommerce:has(> .woocommerce-order) {
	padding-block: 28px clamp(56px, 7vw, 104px);
	padding-inline: var(--ae-gutter);
}


.ae-carrito .woocommerce-order {
	margin-block: 0;
}


.ae-carrito .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	font-family: var(--ae-font-heading), serif;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ae-ink);
}


/* ---------------------------------------------------------------------------
 * Venta cruzada, debajo de la reticula
 * ------------------------------------------------------------------------ */

.ae-carrito .ae-carrito-cruzados:not(:empty) {
	margin-top: 56px;
}


.ae-carrito .cross-sells h2 {
	margin: 0 0 24px;
	font-family: var(--ae-font-heading), serif;
	font-size: 26px;
	font-weight: 500;
	color: var(--ae-ink);
}


/* ---------------------------------------------------------------------------
 * Pantallas estrechas
 * ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.ae-carrito-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ae-carrito-lado {
		position: static;
	}
}


@media (max-width: 767px) {
	.ae-carrito-wrap {
		/* 15 px bajo el menu, como las migas de la ficha en movil. */
		padding-block: 15px 56px;
	}

	.ae-carrito-cabecera {
		margin-bottom: 28px;
	}

	/*
	 * En movil la fila de cinco columnas no cabe. Se reparte en dos filas por
	 * areas: la miniatura ocupa las dos a la izquierda, el nombre y la cruz
	 * arriba, y la cantidad con el importe debajo.
	 */
	.ae-carrito-item {
		grid-template-columns: 72px 88px minmax(0, 1fr) 24px;
		grid-template-areas:
			"media datos    datos quitar"
			"media cantidad total total";
		column-gap: 12px;
		row-gap: 12px;
		align-items: start;
	}

	.ae-carrito-item-media {
		grid-area: media;
	}

	.ae-carrito-item-media img {
		width: 72px;
		height: 72px;
	}

	.ae-carrito-item-datos {
		grid-area: datos;
	}

	.ae-carrito-item-quitar {
		grid-area: quitar;
	}

	.ae-carrito-item-cantidad {
		grid-area: cantidad;
		max-width: none;
	}

	.ae-carrito-item-total {
		grid-area: total;
		align-self: center;
		text-align: right;
	}

	.ae-carrito-acciones {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * `flex: 1 1 320px` en una columna es 320 px de ALTO, no de ancho: en
	 * `flex-direction: column` la base mide sobre el eje principal. Dejaba un
	 * palmo de blanco entre el cupon y el boton de actualizar.
	 */
	.ae-carrito-cupon {
		flex: 0 0 auto;
		max-width: none;
	}

	.ae-carrito-resumen {
		padding: 24px;
	}
}


/* ---------------------------------------------------------------------------
 * Pedido recibido: resumen y detalles
 *
 * woocommerce.css pinta el resumen como una lista flotante con separadores
 * discontinuos a la derecha y la sangria de la lista. En movil los flotantes
 * caen uno debajo de otro y cada separador queda a una altura distinta. Aqui
 * pasa a rejilla: cuatro columnas en escritorio, dos por dos en movil.
 *
 * La tabla heredaba de ae-woocommerce.css un borde en cada celda. En una tabla
 * de dos columnas y seis filas eso es una cuadricula; se queda en lineas
 * horizontales con los importes alineados a la derecha.
 *
 * El mismo marcado sale en Mi cuenta > Ver pedido; esto solo actua en
 * .ae-carrito, que es la pagina de finalizar compra.
 * ------------------------------------------------------------------------ */

.ae-carrito .woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, max-content));
	gap: 18px 40px;
	margin: 0 0 48px;
	padding: 20px 0;
	list-style: none;
	border-block: 1px solid var(--ae-line);
}

/* Clearfix de WooCommerce: en una rejilla serian dos celdas vacias. */
.ae-carrito .woocommerce-order ul.woocommerce-order-overview::before,
.ae-carrito .woocommerce-order ul.woocommerce-order-overview::after {
	content: none;
}

.ae-carrito .woocommerce-order ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ae-body);
}

.ae-carrito .woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ae-ink);
}

.ae-carrito .woocommerce-order-details__title,
.ae-carrito .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 12px;
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details th,
.ae-carrito .woocommerce-order table.woocommerce-table--order-details td {
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--ae-line);
	background: transparent;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	vertical-align: top;
	text-align: left;
	color: var(--ae-ink);
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details th:first-child,
.ae-carrito .woocommerce-order table.woocommerce-table--order-details td:first-child {
	padding-right: 16px;
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details th:last-child,
.ae-carrito .woocommerce-order table.woocommerce-table--order-details td:last-child {
	text-align: right;
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details thead th {
	padding-top: 0;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ae-body);
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details tfoot th {
	color: var(--ae-body);
}

/* La fila del total es la unica que lleva la nota de impuestos. */
.ae-carrito .woocommerce-order table.woocommerce-table--order-details tfoot tr:has(.includes_tax) th,
.ae-carrito .woocommerce-order table.woocommerce-table--order-details tfoot tr:has(.includes_tax) td {
	font-weight: 600;
	color: var(--ae-ink);
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details .includes_tax {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ae-body);
}

.ae-carrito .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.ae-carrito .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	vertical-align: middle;
}

.ae-carrito .woocommerce-order .order-actions-button {
	padding: 10px 18px;
}

@media (max-width: 767px) {
	.ae-carrito .woocommerce-order ul.woocommerce-order-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 20px;
		margin-bottom: 36px;
		padding: 18px 0;
	}

	.ae-carrito .woocommerce-order ul.woocommerce-order-overview li strong {
		font-size: 15px;
	}

	.ae-carrito .woocommerce-order table.woocommerce-table--order-details th,
	.ae-carrito .woocommerce-order table.woocommerce-table--order-details td {
		font-size: 14.5px;
	}
}