/**
 * Glotomania — Carrito y Checkout
 *
 * Se pinta dentro del resumen del pedido, que es una columna estrecha.
 * Todo está pensado para ~300 px de ancho y para no pelearse con Bricks:
 * selectores propios con prefijo .gcc-, sin !important y sin tocar clases
 * de WooCommerce Blocks.
 *
 * El morado es el de la barra que ya existía en la tienda (#6a3f99).
 * Se puede cambiar de golpe sobrescribiendo --gcc-acento.
 */

.gcc-envio,
.gcc-recos,
.gcc-sellos {
	--gcc-acento: #6a3f99;
	--gcc-exito: #10893e;
	--gcc-borde: rgba( 0, 0, 0, 0.12 );
	--gcc-suave: rgba( 0, 0, 0, 0.04 );
	box-sizing: border-box;
	width: 100%;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var( --gcc-borde );
	border-radius: 10px;
	background: var( --gcc-suave );
}

/* ------------------------------------------------------------------ */
/* Barra de envío gratis                                               */
/* ------------------------------------------------------------------ */

.gcc-envio {
	margin-top: 12px;
}

.gcc-envio__texto {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.35;
}

.gcc-envio__check {
	color: var( --gcc-exito );
	font-weight: 700;
}

.gcc-envio__pista {
	overflow: hidden;
	height: 10px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.12 );
}

.gcc-envio__relleno {
	height: 100%;
	border-radius: 999px;
	background: var( --gcc-acento );
	transition: width 0.45s ease;
}

.gcc-envio--logrado .gcc-envio__relleno {
	background: var( --gcc-exito );
}

@media ( prefers-reduced-motion: reduce ) {
	.gcc-envio__relleno {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Recomendaciones                                                     */
/* ------------------------------------------------------------------ */

.gcc-recos {
	container-type: inline-size;
}

.gcc-recos__titulo {
	margin: 0 0 12px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.3;
}

.gcc-recos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcc-reco {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var( --gcc-borde );
}

.gcc-reco:last-child {
	border-bottom: 0;
}

.gcc-reco__img {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
}

.gcc-reco__cuerpo {
	flex: 1 1 140px;
	min-width: 0;
}

/*
 * max() en vez de un tamaño fijo: sigue escalando si la tienda sube el
 * tamaño base, pero nunca baja de 14 px, que es donde un nombre de
 * producto empieza a costar de leer en móvil.
 */
.gcc-reco__nombre {
	display: -webkit-box;
	overflow: hidden;
	font-size: max( 14px, 0.85em );
	line-height: 1.35;
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gcc-reco__precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.85em;
}

.gcc-reco__antes {
	opacity: 0.6;
}

.gcc-reco__ahora {
	font-weight: 700;
}

.gcc-reco__ahorro {
	padding: 1px 6px;
	border-radius: 999px;
	background: var( --gcc-exito );
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
}

.gcc-reco__error {
	margin: 4px 0 0;
	color: #b32d2e;
	font-size: 0.8em;
}

.gcc-reco__boton {
	flex: 0 0 auto;
	align-self: center;
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid var( --gcc-acento );
	border-radius: 999px;
	background: transparent;
	color: var( --gcc-acento );
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gcc-reco__boton:hover:not( [disabled] ),
.gcc-reco__boton:focus-visible {
	background: var( --gcc-acento );
	color: #fff;
}

.gcc-reco__nombre:focus-visible,
.gcc-reco__boton:focus-visible {
	outline: 2px solid var( --gcc-acento );
	outline-offset: 2px;
}

.gcc-reco__boton[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Sellos de confianza                                                 */
/* ------------------------------------------------------------------ */

.gcc-sellos {
	list-style: none;
}

/* Mínimo de 14 px: son promesas de confianza, no letra pequeña. */
.gcc-sellos__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	font-size: max( 14px, 0.82em );
	line-height: 1.4;
	opacity: 0.85;
}

.gcc-sellos__item:last-child {
	margin-bottom: 0;
}

@container ( max-width: 340px ) {
	.gcc-reco__boton {
		flex-basis: 100%;
		width: 100%;
	}
}

@media ( max-width: 480px ) {
	.gcc-envio,
	.gcc-recos,
	.gcc-sellos {
		padding: 14px;
	}
}

.gcc-sellos__check {
	flex: 0 0 auto;
	color: var( --gcc-exito );
	font-weight: 700;
}

/* ==================================================================== */
/* DISEÑO DE LA PÁGINA DE CARRITO                                       */
/*                                                                      */
/* Medido en producción el 28/07/2026 a 1440 px:                        */
/*   · tabla de productos ...... 351 px                                 */
/*   · columna izquierda ....... 1218 px  (se estira para igualar)      */
/*   · HUECO EN BLANCO ......... 867 px = 71 % de la columna            */
/*                                                                      */
/* La causa no era falta de contenido, sino que todo estaba apretado    */
/* en la barra lateral de 357 px mientras la de 663 px quedaba vacía.   */
/*                                                                      */
/* TODO lo de este bloque va acotado a .woocommerce-cart. El checkout   */
/* no se toca: su maquetación ya funciona y gusta como está.            */
/* ==================================================================== */

/* -------------------------------------------------------------------- */
/* SOBRE EL ANCHO: NO se toca, y es deliberado.                          */
/*                                                                       */
/* En global-custom-css hay esta regla vuestra:                          */
/*   .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {        */
/*     max-width: 1100px !important; }                                   */
/*                                                                       */
/* Fija el mismo ancho para carrito y checkout. Ensanchar solo el        */
/* carrito dejaría un salto visible al pasar de una página a la otra,    */
/* y el checkout es el que ya gusta como está. Si algún día se quiere    */
/* más ancho, el sitio correcto es esa regla global —cambiando las dos   */
/* páginas a la vez—, no un pisotón con !important desde aquí.           */
/*                                                                       */
/* El hueco en blanco no venía del ancho: venía del reparto. Se corrige  */
/* moviendo las recomendaciones, no estirando la página.                 */
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/* Resumen pegajoso en escritorio                                        */
/*                                                                       */
/* align-self: flex-start es IMPRESCINDIBLE, no decorativo: .wc-block-   */
/* cart es flex y por defecto estira los hijos a la misma altura. Una    */
/* barra lateral estirada ocupa toda la caja y sticky no tiene por dónde */
/* deslizarse, así que no hace absolutamente nada. Es el mismo motivo    */
/* por el que la regla del CSS global de Bricks nunca funcionó aquí.     */
/* -------------------------------------------------------------------- */

/*
 * El corte es 769px, no el 782 de WordPress, para encajar exactamente con
 * la regla de móvil que ya existe en el CSS global (max-width: 768px). Si
 * usáramos 783 quedaría una franja de 769-782 px sin botón fijo ni pegajoso.
 */
@media ( min-width: 769px ) {

	/*
	 * Dos pegajosos que se reparten el trabajo según lo largo que sea el
	 * carrito, porque ninguno de los dos basta solo:
	 *
	 *   · La BARRA LATERAL cubre los carritos largos. Con muchos productos
	 *     la columna izquierda es mucho más alta y la barra tiene recorrido
	 *     de sobra para acompañar todo el scroll.
	 *
	 *   · El BOTÓN cubre los carritos cortos. Con dos productos la barra
	 *     lateral mide casi lo mismo que la columna (771 frente a 835 px
	 *     medidos), así que solo tiene 64 px de recorrido y por sí sola no
	 *     serviría de nada. El botón, en cambio, dispone de 693 px dentro
	 *     de la barra.
	 *
	 * Es el mismo mecanismo del checkout —sticky con bottom—, que es lo que
	 * se pidió replicar.
	 */
	.woocommerce-cart .wc-block-cart__sidebar {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}

	.woocommerce-cart .wc-block-cart__submit {
		position: sticky;
		bottom: 20px;
		z-index: 99;
	}

	/*
	 * Neutraliza la regla del CSS global DENTRO del carrito y solo en
	 * escritorio. En global-custom-css existe:
	 *
	 *   .wc-block-checkout__actions, .wc-block-cart__submit-container {
	 *     position: sticky !important; bottom: 20px !important; }
	 *
	 * En el checkout funciona y se respeta. En el carrito nunca pudo
	 * funcionar: ese contenedor mide exactamente lo mismo que el botón
	 * (78 px los tres niveles), así que no tiene ni un píxel por donde
	 * deslizarse. Ahora además estorbaría, porque el pegado lo hacen las
	 * dos reglas de arriba. Se puede quitar '.wc-block-cart__submit-
	 * container' de esa regla global sin romper nada.
	 */
	.woocommerce-cart .wc-block-cart__submit-container {
		position: static !important;
		bottom: auto !important;
	}
}

/* -------------------------------------------------------------------- */
/* Recomendaciones en la columna principal, en fila                      */
/*                                                                       */
/* SOLO ESCRITORIO, y no es una precaución de más.                       */
/*                                                                       */
/* Medido en móvil (375 px) con la tarjeta en vertical:                  */
/*   bloque entero .... 1441 px   (compacto: 467 px)                     */
/*   imagen .......... 218x218    (compacto: 48x48)                      */
/*   botón ........... 218x414    (compacto: 248x36)                     */
/*                                                                       */
/* El botón de 414 px de alto es lo peor: el tema le aplica              */
/* flex-basis:100%, y en una tarjeta en columna eso deja de afectar al   */
/* ancho y pasa a estirar la ALTURA. En horizontal era inofensivo.       */
/*                                                                       */
/* El JS ya decide no montar aquí las recomendaciones en móvil, pero     */
/* esta media query es la segunda barrera: si alguien gira el móvil tras */
/* cargar en horizontal, el bloque no puede reventar.                    */
/* -------------------------------------------------------------------- */

.gcc-recos-principal {
	margin-top: 32px;
}

@media ( min-width: 769px ) {

	/* Aquí no separa de los totales, sino que abre sección propia. */
	.gcc-recos--fila {
		margin: 0;
		padding-top: 24px;
	}

	.gcc-recos--fila .gcc-recos__titulo {
		margin-bottom: 16px;
		font-size: 1.05em;
	}

	.gcc-recos--fila .gcc-recos__lista {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
		gap: 16px;
	}

	.gcc-recos--fila .gcc-reco {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px;
		border: 1px solid var( --gcc-borde );
		border-bottom: 1px solid var( --gcc-borde );
		border-radius: 10px;
		text-align: center;
	}

	.gcc-recos--fila .gcc-reco__img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 8px;
	}

	.gcc-recos--fila .gcc-reco__nombre {
		font-size: max( 14px, 0.9em );
		-webkit-line-clamp: 2;
	}

	.gcc-recos--fila .gcc-reco__precio {
		justify-content: center;
		font-size: 0.95em;
	}

	/*
	 * flex: none anula el flex-basis:100% que impone el tema. Sin esto el
	 * botón se estira a lo alto en cuanto la tarjeta va en columna.
	 *
	 * margin-top: auto lo empuja al fondo de la tarjeta: así los tres
	 * botones quedan alineados aunque los nombres de producto ocupen una
	 * o dos líneas. Antes esa alineación salía de rebote por el
	 * flex-basis del tema, que es justo lo que rompía el móvil.
	 */
	.gcc-recos--fila .gcc-reco__boton {
		flex: none;
		align-self: stretch;
		margin-top: auto;
		padding: 10px 14px;
	}
}

/* -------------------------------------------------------------------- */
/* MÓVIL: NO SE TOCA, Y ES DELIBERADO                                    */
/*                                                                       */
/* En móvil el botón del carrito YA está fijo y siempre visible. Lo hace */
/* esta regla vuestra de global-custom-css:                              */
/*                                                                       */
/*   @media (max-width: 768px) {                                         */
/*     .wc-block-components-checkout-place-order-button,                 */
/*     .wc-block-cart__submit-button { position: fixed; bottom: 15px; }  */
/*   }                                                                   */
/*                                                                       */
/* Comprobado en producción el 28/07/2026 a 375x812: el botón se queda   */
/* clavado a 727 px del borde superior en TODAS las posiciones de scroll */
/* (0, 600, 1400 y 3000). Y como esa misma regla cubre también el botón  */
/* del checkout, carrito y checkout ya se comportan igual en móvil.      */
/*                                                                       */
/* Añadir aquí otra barra fija habría creado dos reglas peleándose por   */
/* el mismo elemento. Lo que faltaba era solo el escritorio.             */
/* -------------------------------------------------------------------- */