/**
 * Base común de las páginas de WooCommerce.
 *
 * Carrito, finalizar compra, pagar pedido, pedido recibido y Mi cuenta son la
 * misma secuencia para el cliente, así que comparten tipografía, botones,
 * tablas y avisos. Antes cada una caía en los estilos por defecto de
 * WooCommerce —botones violetas, tablas sin aire— y parecían cuatro sitios.
 *
 * Lo específico de cada pantalla vive en cuenta.css y checkout.css.
 *
 * El carrito y el checkout son de bloques, no las plantillas clásicas: de esas
 * dos pantallas acá sólo se toca el respiro y el título. Lo demás lo pone
 * WooCommerce y ya se ve consistente. Las reglas de tablas y botones de abajo
 * son para "pedido recibido" y "pagar pedido", que sí son clásicas.
 *
 * Sobre la especificidad: WooCommerce pinta sus botones con
 * `.woocommerce a.button.alt`, que suma (0,3,1). Cualquier regla más corta
 * pierde y el botón se queda violeta. Por eso los selectores de acá llevan la
 * clase del body adelante: no es decorativo, es lo que hace que apliquen.
 *
 * @package KosmosTienda
 */

:root {
	/* Medido sobre el sitio: es el rojo de la barra de navegación y el del
	   botón de realizar el pedido. */
	--kosmos-rojo: #c41a1a;
	--kosmos-tinta: #1a1a1a;
	--kosmos-suave: #6b6b6b;
	--kosmos-linea: #e2e2e2;
	--kosmos-fondo: #f7f7f8;
	--kosmos-ok: #1b6647;
	--kosmos-espera: #8a5a00;
	--kosmos-titulo: "ITC Avant Grade", "Avenir", sans-serif;
}

/* ---------- Respiro de la página ---------- */

/*
 * .site-main contiene tanto .page-header (el título) como .page-content.
 * El padding va acá y no en .page-content porque si no el título queda pegado
 * al menú rojo.
 */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* ---------- Títulos ---------- */

/*
 * El peso 700 no es decorativo: ITC Avant Grade está registrada únicamente en
 * bold, así que en 400 o 500 el navegador descarta la familia y cae al
 * fallback sin avisar.
 */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .page-header h1,
.woocommerce-checkout .page-header h1,
.woocommerce-account .page-header h1,
.woocommerce-checkout .woocommerce-order-details__title,
.woocommerce-checkout .woocommerce-column__title,
.woocommerce-checkout .woocommerce-customer-details h2,
.woocommerce-checkout .page-content .woocommerce > h2,
.woocommerce-checkout .page-content .woocommerce > h3,
.woocommerce-checkout form.woocommerce-form-login h2 {
	font-family: var(--kosmos-titulo);
	font-weight: 700;
	color: var(--kosmos-tinta);
}

.woocommerce-checkout .woocommerce-order-details__title,
.woocommerce-checkout .woocommerce-column__title {
	margin: 2.5rem 0 1rem;
	font-size: 1.35rem;
}

/* ---------- Botones ---------- */

/*
 * Primarios: los que hacen avanzar la compra. Incluye el de Zuma, que se pinta
 * con `.button.alt` como cualquier pasarela, así que no hace falta tocar ese
 * plugin para que tome la marca.
 */
.woocommerce-checkout .woocommerce a.button.alt,
.woocommerce-checkout .woocommerce button.button.alt,
.woocommerce-checkout .woocommerce input.button.alt,
.woocommerce-checkout .woocommerce button#place_order,
.woocommerce-checkout .zuma-pago button.button.alt,
.woocommerce-account .woocommerce a.button.alt,
.woocommerce-account .woocommerce button.button.alt {
	background: var(--kosmos-rojo);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .85rem 1.5rem;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}

.woocommerce-checkout .woocommerce a.button.alt:hover,
.woocommerce-checkout .woocommerce button.button.alt:hover,
.woocommerce-checkout .woocommerce input.button.alt:hover,
.woocommerce-checkout .woocommerce button#place_order:hover,
.woocommerce-checkout .zuma-pago button.button.alt:hover,
.woocommerce-account .woocommerce a.button.alt:hover,
.woocommerce-account .woocommerce button.button.alt:hover {
	background: var(--kosmos-rojo);
	color: #fff;
	filter: brightness(.9);
}

/*
 * Secundarios: acciones que no son la principal de la pantalla, como "Volver
 * a pedir" en el pedido recibido. Contorno en vez de relleno para que no
 * compitan con el botón que sí hay que apretar.
 */
.woocommerce-checkout .woocommerce a.button.order-actions-button,
.woocommerce-checkout .woocommerce a.button.order-again {
	background: #fff;
	color: var(--kosmos-rojo);
	border: 1px solid var(--kosmos-rojo);
	border-radius: 6px;
	padding: .6rem 1.15rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-checkout .woocommerce a.button.order-actions-button:hover,
.woocommerce-checkout .woocommerce a.button.order-again:hover {
	background: var(--kosmos-rojo);
	color: #fff;
}

.woocommerce-checkout .woocommerce .button[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* ---------- Tablas ---------- */

.woocommerce-checkout .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.woocommerce-table {
	width: 100%;
	border: 1px solid var(--kosmos-linea);
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	margin-bottom: 2rem;
}

.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.woocommerce-table th {
	padding: .95rem 1.1rem;
	text-align: left;
	font-weight: 600;
	font-size: .92rem;
	color: var(--kosmos-tinta);
	background: var(--kosmos-fondo);
	border-bottom: 1px solid var(--kosmos-linea);
}

.woocommerce-checkout .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.woocommerce-table td {
	padding: .95rem 1.1rem;
	border-bottom: 1px solid var(--kosmos-linea);
	vertical-align: middle;
}

.woocommerce-checkout .woocommerce table.shop_table tr:last-child td,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce table.woocommerce-table tr:last-child td {
	border-bottom: 0;
}

/* La fila del total cierra la tabla: que se lea como cierre. */
.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child td {
	font-size: 1.05rem;
	font-weight: 700;
	background: var(--kosmos-fondo);
}

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

/*
 * La tira de "número / fecha / correo / total / método de pago". Por defecto
 * es una lista con bullets y sin separación.
 */
.woocommerce-checkout .woocommerce ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	list-style: none;
	margin: 1.5rem 0 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--kosmos-linea);
	border-left: 3px solid var(--kosmos-rojo);
	border-radius: 8px;
	background: #fff;
}

.woocommerce-checkout .woocommerce ul.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kosmos-suave);
}

.woocommerce-checkout .woocommerce ul.woocommerce-order-overview li strong {
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kosmos-tinta);
}

/* ---------- Centrado del bloque del carrito ---------- */

/*
 * El bloque del carrito viene con la clase `alignwide`, y el tema la define
 * así:
 *
 *     .alignwide { margin-inline-start: -80px; margin-inline-end: -80px; }
 *
 * La idea de `alignwide` es que el bloque se salga del ancho del texto. Pero
 * WooCommerce ya le fija `width: 100%`, así que el ancho no cambia: el bloque
 * simplemente **se corre 80 px a la izquierda**. Queda descentrado en todas
 * las pantallas y, por debajo de ~1310 px, el borde izquierdo se va de la
 * ventana —sin barra de desplazamiento que permita llegar—, que es lo que
 * cortaba la columna de productos.
 *
 * El checkout tiene la misma clase pero ya viene con margen 0; se incluye
 * igual para que no dependa de que WooCommerce siga anulándolo.
 */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
	margin-inline: 0;
}

/* ---------- Ayuda por WhatsApp ---------- */

/*
 * El mismo recuadro que está en la ficha de producto, en los pedidos que
 * quedaron esperando el pago. Los valores son los medidos sobre el original:
 * verde #25D366, esquinas de 10 px, 16 px de aire.
 *
 * El icono va como SVG en el marcado —no como fuente de iconos— para que no
 * dependa del kit del tema. En el correo el mismo dibujo viaja como PNG,
 * porque ahí el SVG no se ve.
 */
.kosmos-ayuda {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 2rem;
	padding: 16px;
	border-radius: 10px;
	background: #25D366;
	color: #fff;
}

.kosmos-ayuda__icono {
	display: inline-flex;
	flex: none;
	color: #fff;
}

.kosmos-ayuda__texto {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.kosmos-ayuda__titulo {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.kosmos-ayuda__bajada {
	font-size: .95rem;
	line-height: 1.45;
	color: #fff;
}

/* ---------- Instrucciones del método de pago ---------- */

/*
 * Lo que el gateway escribe en la página de gracias: "te enviamos el link de
 * pago", "mandá el comprobante por WhatsApp". Es la parte que le dice al
 * cliente que **todavía falta algo**, y salía como un párrafo suelto entre dos
 * bloques, fácil de saltear.
 *
 * WooCommerce lo imprime sin clase ni envoltorio —`wpautop( $this->instructions )`
 * dentro del hook `woocommerce_thankyou_{gateway}`— así que no hay dónde
 * agarrarse salvo la posición: es el párrafo que sigue a la tira del resumen.
 * Si algún día WooCommerce mete algo entre los dos, esta regla deja de aplicar
 * y el aviso vuelve a verse como texto suelto; no rompe nada más.
 *
 * Va en ámbar y no en rojo a propósito: no es un error, es algo pendiente.
 */
.woocommerce-checkout ul.woocommerce-order-overview + p {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin: 0 0 2rem;
	padding: 1.1rem 1.35rem;
	border: 1px solid #f0dcb4;
	border-left: 3px solid var(--kosmos-espera);
	border-radius: 8px;
	background: #fffdf7;
	color: var(--kosmos-tinta);
	font-size: 1rem;
	line-height: 1.55;
}

/* El icono va como SVG embebido: no depende de ninguna fuente de iconos, así
   que no se cae si mañana cambia el kit del tema. */
.woocommerce-checkout ul.woocommerce-order-overview + p::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: .12rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a00' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2v5.6'/%3E%3Ccircle cx='12' cy='16.7' r='1.15' fill='%238a5a00' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-checkout ul.woocommerce-order-overview + p a {
	color: var(--kosmos-rojo);
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- Datos bancarios de la transferencia ---------- */

/*
 * WooCommerce escribe esto en la página de gracias cuando el pago es por
 * transferencia:
 *
 *   section.woocommerce-bacs-bank-details
 *     h2.wc-bacs-bank-details-heading
 *     h3.wc-bacs-bank-details-account-name   ← nombre de la cuenta
 *     ul.wc-bacs-bank-details.order_details.bacs_details
 *     h3 … / ul …                            ← una pareja por cuenta
 *
 * Los títulos quedaban fuera de la regla de tipografía de más arriba —esa pide
 * `.woocommerce > h2` y acá hay una `section` en el medio— así que caían en la
 * fuente del tema. Y las cuentas van una debajo de la otra porque cada `ul` es
 * un bloque.
 *
 * El h3 y su `ul` son **hermanos**, no están envueltos juntos, así que para
 * ponerlos uno al lado del otro hay que colocarlos a mano en la grilla. De ahí
 * los `nth-of-type`: el primer h3 y el primer `ul` van a la columna 1, el
 * segundo par a la columna 2.
 *
 * Está armado para **dos cuentas**, que son las que tiene Kosmos. Con una
 * tercera habría que agregarle su columna; con una sola, ocupa la primera y
 * queda la mitad libre.
 */
.woocommerce-checkout section.woocommerce-bacs-bank-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
	margin: 0 0 2.5rem;
}

.woocommerce-checkout .wc-bacs-bank-details-heading {
	grid-row: 1;
	grid-column: 1 / -1;
	margin: 2.5rem 0 1rem;
	font-family: var(--kosmos-titulo);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--kosmos-tinta);
}

/* El nombre de la cuenta es la tapa de la tarjeta: sin borde abajo, para que
   se lea junto con los datos como una sola pieza. */
.woocommerce-checkout .wc-bacs-bank-details-account-name {
	grid-row: 2;
	margin: 0;
	padding: 1rem 1.25rem .8rem;
	border: 1px solid var(--kosmos-linea);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #fafafa;
	font-family: var(--kosmos-titulo);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--kosmos-tinta);
}

.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details {
	grid-row: 3;
	margin: 0;
	padding: 0 1.25rem 1.1rem;
	border: 1px solid var(--kosmos-linea);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: #fafafa;
	list-style: none;
}

.woocommerce-checkout .wc-bacs-bank-details-account-name:nth-of-type(1),
.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details:nth-of-type(1) {
	grid-column: 1;
}

.woocommerce-checkout .wc-bacs-bank-details-account-name:nth-of-type(2),
.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details:nth-of-type(2) {
	grid-column: 2;
}

/*
 * WooCommerce pinta `.order_details li` flotado y con separador a la derecha,
 * que es lo que hace la tira horizontal del resumen del pedido. Acá, en media
 * pantalla y con una CLABE de 18 dígitos, eso no entra: los datos van uno
 * arriba del otro.
 */
.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details li {
	float: none;
	width: auto;
	margin: 0;
	padding: .6rem 0;
	border: 0;
	border-top: 1px solid var(--kosmos-linea);
	font-size: .76rem;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--kosmos-suave);
}

.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details li:first-child {
	border-top: 0;
}

/*
 * El número es lo que la persona va a copiar: grande, con cifras de ancho fijo
 * y partible, porque una CLABE no entra de una línea en una columna angosta.
 */
.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details li strong {
	display: block;
	margin-top: .15rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kosmos-tinta);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/* En teléfono no hay dos columnas: se vuelve al apilado, y las filas explícitas
   de la grilla dejan de aplicar solas al no haber grilla. */
@media (max-width: 40em) {
	.woocommerce-checkout section.woocommerce-bacs-bank-details {
		display: block;
	}

	.woocommerce-checkout ul.wc-bacs-bank-details.bacs_details {
		margin-bottom: 1.25rem;
	}
}

/* ---------- Pago desde el exterior ---------- */

/*
 * Lo imprime `class-kosmos-internacional.php` justo después de las cuentas de
 * WooCommerce. Es una tarjeta más, con el mismo fondo, borde y tipografía,
 * pero a todo el ancho y con sus tres bancos en columnas: así se distingue de
 * las cuentas nacionales sin parecer de otro sitio.
 */
/* El -1rem se descuenta de los 2.5rem que dejan las cuentas de arriba: queda la
   misma separación de 1.5rem que hay entre ellas. */
.woocommerce-checkout .kosmos-internacional {
	margin: -1rem 0 2.5rem;
	padding: 1rem 1.25rem 1.1rem;
	border: 1px solid var(--kosmos-linea);
	border-radius: 8px;
	background: #fafafa;
}

.woocommerce-checkout .kosmos-internacional__titulo {
	margin: 0 0 .3rem;
	font-family: var(--kosmos-titulo);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--kosmos-tinta);
}

.woocommerce-checkout .kosmos-internacional__bajada {
	margin: 0 0 .9rem;
	font-size: .9rem;
	color: var(--kosmos-suave);
}

.woocommerce-checkout .kosmos-internacional__bloques {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 1.5rem;
}

.woocommerce-checkout .kosmos-internacional__bloque h4 {
	margin: 0;
	padding: .6rem 0 .4rem;
	border-bottom: 2px solid var(--kosmos-linea);
	font-family: var(--kosmos-titulo);
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kosmos-tinta);
}

.woocommerce-checkout .kosmos-internacional__bloque ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mismo par etiqueta → valor que las cuentas de arriba. */
.woocommerce-checkout .kosmos-internacional__bloque li {
	margin: 0;
	padding: .6rem 0;
	border-top: 1px solid var(--kosmos-linea);
	font-size: .76rem;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--kosmos-suave);
}

.woocommerce-checkout .kosmos-internacional__bloque li:first-child {
	border-top: 0;
}

.woocommerce-checkout .kosmos-internacional__bloque li strong {
	display: block;
	margin-top: .15rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kosmos-tinta);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

@media (max-width: 56em) {
	.woocommerce-checkout .kosmos-internacional__bloques {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .kosmos-internacional__bloque + .kosmos-internacional__bloque {
		margin-top: .8rem;
	}
}

/* ---------- Direcciones del pedido ---------- */

/*
 * Mismo clearfix que rompe el layout en Mi cuenta: WooCommerce le pone
 * ::before y ::after a .col2-set, y con un contenedor en grid esos
 * pseudo-elementos se vuelven celdas y corren las columnas.
 */
.woocommerce-checkout .woocommerce-columns--addresses::before,
.woocommerce-checkout .woocommerce-columns--addresses::after {
	display: none;
}

.woocommerce-checkout .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.woocommerce-checkout .woocommerce-columns--addresses .col-1,
.woocommerce-checkout .woocommerce-columns--addresses .col-2 {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-checkout .woocommerce-columns--addresses address {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--kosmos-linea);
	border-radius: 8px;
	background: #fff;
	font-style: normal;
	line-height: 1.7;
}

/* ---------- Avisos ---------- */

/*
 * Los tres avisos de WooCommerce —añadido al carrito, información y error—
 * quedaban con el gris y el borde verde por defecto de WooCommerce, que no es
 * de ningún lado. Misma tarjeta para los tres, con una línea de color a la
 * izquierda que es lo único que cambia.
 *
 * El selector lleva el elemento adelante (`div.`) porque WooCommerce los pinta
 * con `.woocommerce-message`, misma especificidad que la nuestra: sin el
 * elemento, quién gana dependería del orden de carga de las hojas.
 *
 * Elementor los saca de `.woocommerce-notices-wrapper` —que deja oculto— y los
 * vuelve a dibujar en `.e-woocommerce-notices-wrapper`, así que el estilo no
 * puede depender del contenedor.
 */
div.woocommerce-message,
div.woocommerce-info,
div.woocommerce-error,
ul.woocommerce-error,
.woocommerce div.woocommerce-message,
.woocommerce div.woocommerce-info,
.woocommerce div.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--kosmos-linea);
	border-left: 3px solid var(--kosmos-rojo);
	border-radius: 8px;
	background: #fff;
	color: var(--kosmos-tinta);
	font-size: .95rem;
	line-height: 1.5;
	list-style: none;
}

div.woocommerce-message,
.woocommerce div.woocommerce-message {
	border-left-color: var(--kosmos-ok);
}

/*
 * El icono va absoluto por defecto, con un padding-left grande que lo compensa.
 * Como ahora el aviso es flex, lo pasamos a ser una celda más: así el texto
 * nunca se le monta encima por largo que sea.
 */
div.woocommerce-message::before,
div.woocommerce-info::before,
div.woocommerce-error::before,
ul.woocommerce-error::before,
.woocommerce div.woocommerce-message::before,
.woocommerce div.woocommerce-info::before,
.woocommerce div.woocommerce-error::before {
	position: static;
	margin: 0;
	flex: none;
}

/*
 * WooCommerce le da foco al aviso para que los lectores de pantalla lo anuncien.
 * Ese foco programático dibuja un anillo azul alrededor de la caja, que se lee
 * como un error cuando en realidad es la confirmación de que se agregó algo.
 * Se lo sacamos sólo a ese caso: quien navegue con teclado sigue viéndolo.
 */
div.woocommerce-message:focus:not(:focus-visible),
div.woocommerce-info:focus:not(:focus-visible),
div.woocommerce-error:focus:not(:focus-visible) {
	outline: none;
}

/* El botón del aviso ("Ver carrito") es secundario: no es la acción principal. */
div.woocommerce-message a.button,
.woocommerce div.woocommerce-message a.button {
	margin-left: auto;
	padding: .5rem 1.1rem;
	background: #fff;
	color: var(--kosmos-rojo);
	border: 1px solid var(--kosmos-rojo);
	border-radius: 6px;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}

div.woocommerce-message a.button:hover,
.woocommerce div.woocommerce-message a.button:hover {
	background: var(--kosmos-rojo);
	color: #fff;
}

/* ---------- Acceso desde el pedido recibido y pagar pedido ---------- */

/*
 * Cuando alguien abre el enlace del pedido sin sesión, WooCommerce muestra el
 * formulario de acceso en crudo en medio de la página. Le damos la misma
 * tarjeta que en Mi cuenta.
 */
.woocommerce-checkout .woocommerce form.woocommerce-form-login {
	max-width: 30rem;
	margin: 1.5rem 0 2rem;
	padding: 1.75rem;
	border: 1px solid var(--kosmos-linea);
	border-radius: 8px;
	background: #fff;
}

.woocommerce-checkout .woocommerce form.woocommerce-form-login label {
	display: block;
	margin-bottom: .3rem;
	font-size: .9rem;
	font-weight: 600;
}

.woocommerce-checkout .woocommerce form.woocommerce-form-login input[type="text"],
.woocommerce-checkout .woocommerce form.woocommerce-form-login input[type="password"] {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--kosmos-linea);
	border-radius: 6px;
	font-size: 1rem;
}

.woocommerce-checkout .woocommerce form.woocommerce-form-login input:focus {
	outline: 2px solid var(--kosmos-rojo);
	outline-offset: 1px;
	border-color: var(--kosmos-rojo);
}

.woocommerce-checkout .woocommerce form.woocommerce-form-login button.button {
	width: 100%;
	margin-top: .75rem;
	padding: .85rem 1rem;
	background: var(--kosmos-rojo);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

/* ---------- Móvil ---------- */

@media (max-width: 48em) {
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.woocommerce-checkout .woocommerce ul.woocommerce-order-overview {
		gap: 1rem;
	}

	div.woocommerce-message a.button,
	.woocommerce div.woocommerce-message a.button {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}
}