/**
 * WIST Cart: estructura y estados del carrito y del mini-carrito.
 *
 * POR QUE EXISTE ESTA HOJA
 * ------------------------
 * El sitio no tiene hoja de estilos propia: color, tipografia, espacio, radio
 * y sombra viven en los gestores de Bricks. Esta hoja no declara ninguno de
 * esos valores, los consume por variable. Lo que declara es la ESTRUCTURA de
 * un markup propio, que ningun control del panel puede describir porque el
 * markup no existia antes.
 *
 * Es el mismo criterio de la hoja del plugin de busqueda: solo estructura y
 * estados, cero hex, y sin bordes de un solo lado. Las separaciones van con
 * fondo y espacio, y los contornos con box-shadow de cuatro lados.
 *
 * Lo que si tiene control nativo se expone como control del elemento y no se
 * escribe aqui: fondo de la linea, borde y radio, tipografias, ancho de la
 * miniatura y separacion entre lineas.
 */

/* ------------------------------------------------------------------ */
/* Lista de lineas                                                     */
/* ------------------------------------------------------------------ */

.wist-cart-lines {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-150);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wist-cart-line {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--wist-space-200);
	min-height: 88px;
	padding: var(--wist-space-200);
	background: var(--wist-surface);
	border-radius: var(--wist-radius-md);
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative);
}

.wist-cart-line[hidden] {
	display: none;
}

.wist-cart-line__thumb {
	width: 120px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wist-radius-xs);
	background: var(--wist-canvas);
}

.wist-cart-line__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wist-cart-line__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.wist-cart-line__variant {
	margin-bottom: var(--wist-space-050);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wist-cart-line__name {
	margin-bottom: var(--wist-space-100);
	color: inherit;
	text-decoration: none;
}

.wist-cart-line__name:hover {
	color: var(--wist-blue-base);
}

.wist-cart-line__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 var(--wist-space-050);
	color: var(--wist-ink-secondary);
}

/* Cada pieza se parte entera o no se parte: "Quedan 1" y "$327.17 c/u" son
   unidades de lectura. Sin esto, a anchos estrechos quedaban repartidas en
   dos renglones con el separador suelto en medio. */
.wist-cart-line__meta > * {
	white-space: nowrap;
}

/* El separador desaparece cuando la fila se parte, porque ahi ya no separa
   nada: queda colgando al final de un renglon. */
@media (max-width: 560px) {

	.wist-cart-line__meta > [aria-hidden="true"] {
		display: none;
	}
}

.wist-cart-line__unit,
.wist-cart-line__total {
	font-variant-numeric: tabular-nums;
}

.wist-cart-line__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wist-space-100);
}

.wist-cart-line__total {
	transition: opacity 0.15s ease;
}

.wist-cart-line__remove {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wist-ink-secondary);
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.wist-cart-line__remove:hover {
	color: var(--wist-ink-primary);
}

/* El area tactil se extiende a 44 px sin alterar el tamano visual, como pide
   la seccion 08 del master para los tamanos por debajo del minimo. */
.wist-cart-line__remove {
	position: relative;
}

.wist-cart-line__remove::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 50%;
	width: 100%;
	min-width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------ */
/* Estado de stock                                                     */
/* ------------------------------------------------------------------ */

.wist-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--wist-space-050);
	font-weight: 500;
}

.wist-stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--wist-radius-xs);
	background: currentColor;
}

.wist-stock--instock {
	color: var(--wist-success-base);
}

.wist-stock--onbackorder,
.wist-stock--low {
	color: var(--wist-stock-low-text, var(--wist-warning-base));
}

.wist-stock--outofstock {
	color: var(--wist-danger-base);
}

/* ------------------------------------------------------------------ */
/* Selector de cantidad, compartido con el mini-carrito                */
/* ------------------------------------------------------------------ */

.wist-stepper {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 4px;
	border-radius: var(--wist-radius-lg);
	background: var(--wist-canvas);
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative);
}

.wist-stepper__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--wist-radius-xs);
	background: transparent;
	color: var(--wist-ink-primary);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wist-stepper__btn:hover:not(:disabled) {
	background: var(--wist-border-hairline);
}

.wist-stepper__btn:active:not(:disabled) {
	transform: scale(0.97);
}

.wist-stepper__btn:disabled {
	color: var(--wist-ink-secondary);
	opacity: 0.45;
	cursor: not-allowed;
}

.wist-stepper__value {
	min-width: 2.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Estado de recalculo                                                 */
/* ------------------------------------------------------------------ */

.brxe-wist-cart-items.is-busy .wist-cart-line__total {
	opacity: 0.4;
}

.brxe-wist-cart-items.is-busy .wist-stepper__btn {
	pointer-events: none;
}

[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Aviso de deshacer                                                   */
/* ------------------------------------------------------------------ */

.wist-cart-undo {
	position: sticky;
	bottom: var(--wist-space-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wist-space-200);
	margin-top: var(--wist-space-150);
	padding: var(--wist-space-150) var(--wist-space-200);
	border-radius: var(--wist-radius-lg);
	background: var(--wist-surface);
	box-shadow: var(--wist-shadow-3), inset 0 0 0 1px var(--wist-border-decorative);
}

.wist-cart-undo[hidden] {
	display: none;
}

.wist-cart-undo__btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wist-blue-base);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Pie de la lista: seguir comprando y cupon                           */
/* -------------------------------------------------------------------
 * Las dos son acciones secundarias y de baja frecuencia. Van como enlaces en
 * los extremos de una misma linea, no como cajas: un boton con contorno y un
 * desplegable sueltos competian entre si y con el CTA del resumen, que es la
 * unica accion primaria de la pagina.
 * ------------------------------------------------------------------ */

.wist-cart-foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wist-space-200);
	flex-wrap: wrap;
	margin-top: var(--wist-space-200);
}

.wist-cart-continue,
.wist-cart-coupon summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wist-space-100);
	min-height: 44px;
	color: var(--wist-ink-secondary);
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.wist-cart-continue:hover,
.wist-cart-coupon summary:hover {
	color: var(--wist-ink-primary);
}

.wist-cart-continue svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.wist-cart-coupon {
	margin-left: auto;
	text-align: right;
}

/* El marcador nativo del desplegable no se puede estilar de forma uniforme
   entre navegadores, asi que se retira y el afordance lo da el subrayado. */
.wist-cart-coupon summary {
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.wist-cart-coupon__form {
	display: flex;
	gap: var(--wist-space-100);
	margin-top: var(--wist-space-100);
}

.wist-cart-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 12rem;
}

.wist-cart-coupon__apply {
	height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--wist-radius-lg);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive);
	color: var(--wist-ink-primary);
	font: 500 1rem/24px Inter, sans-serif;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wist-cart-coupon__apply:hover {
	background: var(--wist-surface);
}

.wist-cart-coupon__apply:active {
	transform: scale(0.97);
}

@media (max-width: 478px) {

	.wist-cart-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.wist-cart-coupon {
		margin-left: 0;
		text-align: left;
	}
}

/* ------------------------------------------------------------------ */
/* Movil: la linea colapsa a la card horizontal de la seccion 09       */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.wist-cart-line {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"thumb body"
			"foot  foot";
		gap: var(--wist-space-150);
	}

	.wist-cart-line__thumb {
		grid-area: thumb;
		width: 88px;
	}

	.wist-cart-line__body {
		grid-area: body;
	}

	.wist-cart-line .wist-stepper {
		grid-area: foot;
		justify-self: start;
		height: 40px;
	}

	.wist-cart-line__right {
		grid-area: foot;
		justify-self: end;
		flex-direction: row;
		align-items: center;
		gap: var(--wist-space-150);
	}
}

/* ------------------------------------------------------------------ */
/* Mini-carrito                                                        */
/* -------------------------------------------------------------------
 * Migrado desde el elemento Code de la plantilla del header, para que el
 * stepper tenga una sola implementacion. Se corrigieron de paso el radio de
 * 999px, el de 50% y los hex de respaldo, que contradecian la escala cerrada
 * y la regla de cero hex fuera del Color Manager.
 * ------------------------------------------------------------------ */

/* En el cajon (Bricks pone .widget_shopping_cart_content en columna flex a
   toda la altura), la lista es lo unico que desplaza: subtotal y botones
   quedan siempre a la vista, haya dos lineas o veinte. */
.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Nivel 0 de la sección 07: sin sombra, contorno de 1 px. Sobre el vidrio del
   panel la sombra apenas se leía y las tarjetas quedaban invisibles. El
   contorno va con box-shadow interior de cuatro lados, que no suma altura a
   la caja y no es un acento lateral. */
/* Compactas (2026-09-17): miniatura de 48, nombre a dos lineas como maximo,
   precio en la misma fila y el resto debajo. El mini-carrito es un resumen,
   no necesita la jerarquia de la pagina del carrito. */
.woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
	margin-bottom: var(--wist-space-100);
	padding: 12px 12px 12px 72px;
	border: none;
	border-radius: var(--wist-radius-md);
	background: var(--wist-surface);
	box-shadow: inset 0 0 0 1px var(--wist-border-decorative);
}

.woocommerce-mini-cart-item img {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 48px;
	height: 48px;
	border-radius: var(--wist-radius-xs);
	object-fit: cover;
}

.woocommerce-mini-cart-item > a:not(.remove) {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--wist-ink-primary);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

/* Desarma el contenedor para poder ordenar precio y estado por separado. */
.wist-mc-meta {
	display: contents;
}

.wist-mc-price {
	order: 2;
	color: var(--wist-ink-primary);
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-mini-cart-item .wist-stock {
	order: 3;
	flex-basis: 100%;
	padding: 2px 0 6px;
	font-size: 0.75rem;
	font-weight: 600;
}

.woocommerce-mini-cart-item .wist-stepper {
	order: 4;
	height: 32px;
}

.woocommerce-mini-cart-item .wist-stepper__btn {
	width: 28px;
	height: 28px;
	font-size: 1rem;
}

.woocommerce-mini-cart-item .wist-stepper__value {
	min-width: 1.5rem;
	font-size: 0.8125rem;
}

/* La equis original de WooCommerce se sustituye por icono mas texto. */
.woocommerce-mini-cart-item .remove.remove_from_cart_button {
	order: 5;
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	color: var(--wist-ink-secondary);
	font-size: 0;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.woocommerce-mini-cart-item .remove.remove_from_cart_button:hover {
	opacity: 1;
}

.woocommerce-mini-cart-item .remove.remove_from_cart_button::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--wist-icon-trash) center / contain no-repeat;
	mask: var(--wist-icon-trash) center / contain no-repeat;
}

.woocommerce-mini-cart-item .remove.remove_from_cart_button::after {
	content: "Eliminar";
	font-size: 0.75rem;
}

/* El icono se dibuja con mascara para que tome el color por currentColor y
   siga al modo oscuro. Antes iba como SVG incrustado con el gris literal. */
.woocommerce-mini-cart-item .remove.remove_from_cart_button {
	--wist-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Foco y movimiento reducido                                          */
/* ------------------------------------------------------------------ */

.wist-stepper__btn:focus-visible,
.wist-cart-line__remove:focus-visible,
.wist-cart-undo__btn:focus-visible,
.wist-cart-continue:focus-visible,
.wist-cart-line__name:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.wist-stepper__btn,
	.wist-cart-continue,
	.wist-cart-line__total {
		transition: none;
	}

	.wist-stepper__btn:active:not(:disabled),
	.wist-cart-continue:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */

.wist-cart-coupon {
	margin-top: var(--wist-space-200);
}

.wist-cart-coupon summary {
	color: var(--wist-ink-secondary);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	list-style: none;
}

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

.wist-cart-coupon summary:hover,
.wist-cart-coupon summary:focus-visible {
	color: var(--wist-ink-primary);
}

.wist-cart-coupon__form {
	display: flex;
	gap: var(--wist-space-100);
	max-width: 24rem;
	margin-top: var(--wist-space-100);
}

.wist-cart-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Panel del mini-carrito                                              */
/* -------------------------------------------------------------------
 * Sin vidrio, y por una razon tecnica ademas de estetica: el panel cuelga
 * cinco niveles por dentro de #brxe-wnsec1, la seccion sticky del header, que
 * ya declara backdrop-filter. Un elemento con backdrop-filter crea un backdrop
 * root, y un descendiente que declare el suyo solo puede muestrear lo que se
 * pinta DENTRO de ese root. Detras del panel, dentro del header, no hay nada,
 * asi que el desenfoque no tiene imagen que procesar y el efecto no se ve.
 *
 * Para que funcionara habria que sacar el panel del arbol del header, al top
 * layer con <dialog> y showModal(), como se hizo con el overlay de busqueda.
 * Se decidio dejarlo solido: el header ya es de vidrio y dos capas
 * translucidas superpuestas se leen peor que una superficie limpia.
 *
 * El color de fondo se declara desde el panel de Bricks. Aqui solo queda la
 * elevacion de nivel 4, que es la que la seccion 07 asigna a drawers.
 * ------------------------------------------------------------------ */

.brxe-woocommerce-mini-cart .cart-detail {
	border: 0;
	box-shadow: var(--wist-shadow-4), inset 0 0 0 1px var(--wist-border-hairline);
}

/* Cajon lateral (2026-09-17). Bricks pone .widget_shopping_cart_content en
   columna flex a toda la altura con 30 px de relleno; aqui va el del sistema
   y hueco arriba para la aspa, que Bricks posiciona absoluta. */
/* Franja de cabecera reservada: 24 arriba + 40 de aspa + 16 = 80 px. El
   titulo y la aspa viven ahi en absoluto, asi que la lista nunca sube hasta
   la aspa, tenga o no titulo el fragmento. Hace falta porque WooCommerce
   reutiliza los fragmentos del mini-carrito desde sessionStorage mientras el
   carrito no cambie: un navegador con copia anterior al hook del titulo
   pintaba la primera linea debajo de la aspa (visto en iPhone, 2026-09-17). */
.brxe-woocommerce-mini-cart .cart-detail.off-canvas .widget_shopping_cart_content {
	gap: var(--wist-space-200);
	padding: var(--wist-space-1000) var(--wist-space-300) max(var(--wist-space-300), env(safe-area-inset-bottom));
}

/* Titulo del cajon, lo imprime functions.php en woocommerce_before_mini_cart. */
.wist-mc-title {
	position: absolute;
	top: var(--wist-space-300);
	left: var(--wist-space-300);
	right: var(--wist-space-1000);
	margin: 0;
	color: var(--wist-ink-primary);
	font-family: Outfit, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 2.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.brxe-woocommerce-mini-cart .cart-detail .bricks-mini-cart-close {
	top: var(--wist-space-300);
	right: var(--wist-space-300);
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: var(--wist-radius-xs);
	color: var(--wist-ink-primary);
	font-size: 1.375rem;
	cursor: pointer;
}

.brxe-woocommerce-mini-cart .cart-detail .bricks-mini-cart-close:hover {
	background-color: var(--wist-canvas);
}

.brxe-woocommerce-mini-cart .cart-detail .bricks-mini-cart-close:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 2px;
}

/* Subtotal como fila de resumen sobre los botones. */
.woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding-top: var(--wist-space-200);
	box-shadow: 0 -1px 0 0 var(--wist-border-hairline);
	color: var(--wist-ink-secondary);
	font-size: 0.9375rem;
	font-weight: 500;
}

.woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--wist-ink-primary);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Vacio: centrado y en tinta secundaria, sin la caja de aviso de WooCommerce. */
.woocommerce-mini-cart__empty-message {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	margin: 0;
	color: var(--wist-ink-secondary);
	font-size: 0.9375rem;
	text-align: center;
}

/* Al top layer con la Popover API (wist-cart.js): el header es de vidrio y un
   ancestro con backdrop-filter atrapa a los descendientes fijos. El navegador
   trae estilos propios para [popover] (inset 0, margen auto, borde, relleno,
   ancho al contenido) que hay que devolver a los del cajon. El ancho lo pone
   el control del elemento, con la especificidad del id. */
.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover] {
	inset: 0 0 0 auto;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	transition: transform 0.2s ease-in-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover]:not(:popover-open) {
	transform: translateX(100%);
}

@starting-style {

	.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover]:popover-open {
		transform: translateX(100%);
	}
}

.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover]::backdrop {
	background-color: rgba(31, 31, 65, 0.45);
	transition: opacity 0.2s ease-in-out, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

/* El velo de Bricks queda atrapado en el header igual que el panel. */
.brxe-woocommerce-mini-cart .off-canvas-overlay {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover],
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas[popover]::backdrop {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Botones del mini-carrito                                            */
/* -------------------------------------------------------------------
 * El elemento expone UN solo juego de controles de botón y WooCommerce pinta
 * dos, "Ver carrito" y "Finalizar compra", con la misma clase .button. Desde
 * el panel no se pueden distinguir.
 *
 * Además, los controles del elemento emiten su regla con la especificidad del
 * id (#brxe-xxxx), que le gana a cualquier regla de clases por muchas que
 * sean. Por eso el color de fondo y el de texto se retiraron del panel: si
 * siguieran ahí, el secundario nunca podría dejar de ser azul sin recurrir a
 * !important o a escribir el id del elemento en esta hoja, que se rompería al
 * duplicar el elemento.
 *
 * En el panel quedan radio y tipografía, que sí son comunes a los dos.
 * ------------------------------------------------------------------ */

/* Primario: "Finalizar compra". */
.woocommerce-mini-cart__buttons .button.checkout {
	background-color: var(--wist-blue-base);
	color: var(--wist-blue-on);
}

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-150);
	margin: 0;
}

.woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.woocommerce-mini-cart__buttons .button.checkout:hover {
	background-color: var(--wist-blue-base-hover);
}

.woocommerce-mini-cart__buttons .button.checkout:active {
	background-color: var(--wist-blue-base-active);
}

.woocommerce-mini-cart__buttons .button:active {
	transform: scale(0.97);
}

.woocommerce-mini-cart__buttons .button:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

/* Secundario: "Ver carrito". Contorno con box-shadow interior, no con border,
   para que mida lo mismo que el primario. Un borde de 1 px sumaría 2 px de
   alto y rompería la correspondencia con la tabla de la sección 08. */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
	background-color: transparent;
	/* Contorno con el token interactivo, no con el decorativo: sobre el vidrio
	   del panel el decorativo queda por debajo del umbral de lectura. */
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive);
	color: var(--wist-ink-primary);
}

.woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background-color: var(--wist-surface);
}

.woocommerce-mini-cart__buttons .button:not(.checkout):active {
	background-color: var(--wist-surface);
}

@media (prefers-reduced-motion: reduce) {

	.woocommerce-mini-cart__buttons .button {
		transition: none;
	}

	.woocommerce-mini-cart__buttons .button:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Resumen: destino del envio                                          */
/* -------------------------------------------------------------------
 * WooCommerce imprime bajo la fila de envio un parrafo con la direccion
 * completa del cliente. Con una sola zona y envio gratis sin condiciones no
 * aporta nada: el importe no depende del destino, asi que son tres lineas de
 * ruido en la caja que decide la compra.
 *
 * Se retira con CSS y no en el servidor porque ese parrafo se imprime con un
 * printf directo dentro de cart/cart-shipping.php, sin filtro ni accion que
 * permita intervenirlo. Las alternativas eran forkear la plantilla de
 * WooCommerce, que habria que mantener en cada actualizacion, o hacer cirugia
 * de cadenas sobre su salida. Una regla es menos deuda que las dos.
 *
 * display:none, no una tecnica de ocultamiento visual: el dato tampoco le
 * sirve al lector de pantalla, y la direccion se confirma en el checkout.
 * ------------------------------------------------------------------ */

.woocommerce-shipping-destination {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Capsula flotante de movil                                           */
/* -------------------------------------------------------------------
 * Por debajo de 992 px las dos columnas del carrito se apilan y el resumen
 * queda al final del scroll. Sin esto el cliente no sabe cuanto va a pagar
 * hasta recorrer toda la lista.
 *
 * El umbral es 992 y no 768 porque 991 es el breakpoint en el que la columna
 * del resumen deja de ser sticky y pasa debajo de la lista. El problema lo
 * crea el apilado, no el ancho del telefono.
 *
 * Capsula y no barra de borde a borde: separada de los bordes se lee como un
 * objeto que flota sobre el contenido, y deja ver que hay pagina debajo. El
 * vidrio refuerza eso mismo.
 *
 * Aqui el vidrio SI funciona, a diferencia del panel del mini-carrito: la
 * capsula no cuelga de ningun ancestro con backdrop-filter, asi que su
 * backdrop es la pagina y hay contenido real que desenfocar.
 *
 * Visible desde la carga, no a partir del scroll. Se retira solo cuando la
 * tarjeta del resumen entra en pantalla, que es cuando el total ya esta a la
 * vista y repetirlo sobra.
 * ------------------------------------------------------------------ */

.wist-cart-bar {
	display: none;
}

@media (max-width: 991px) {

	.wist-cart-bar {
		position: fixed;
		right: var(--wist-space-200);
		bottom: calc( var(--wist-space-200) + env( safe-area-inset-bottom, 0px ) );
		left: var(--wist-space-200);
		z-index: 100;
		display: flex;
		align-items: center;
		gap: var(--wist-space-200);
		width: auto;
		max-width: 30rem;
		margin: 0 auto;
		padding: var(--wist-space-100) var(--wist-space-100) var(--wist-space-100) var(--wist-space-200);
		border-radius: var(--wist-radius-2xl);
		background: var(--wist-glass);
		-webkit-backdrop-filter: blur(28px) saturate(190%);
		backdrop-filter: blur(28px) saturate(190%);
		box-shadow: var(--wist-shadow-4), inset 0 0 0 1px var(--wist-border-hairline);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.wist-cart-bar[hidden] {
		display: none;
	}

	/* Salida: cede el sitio a la tarjeta del resumen en vez de desaparecer de
	   golpe. Solo opacidad y transform, que no obligan a recalcular layout. */
	.wist-cart-bar.is-out {
		opacity: 0;
		transform: translateY( var(--wist-space-100) ) scale( 0.98 );
		pointer-events: none;
	}

	.wist-cart-bar__amount {
		display: flex;
		flex-direction: column;
		flex: 0 1 auto;
		min-width: 0;
		line-height: 1.2;
	}

	.wist-cart-bar__label {
		color: var(--wist-ink-secondary);
		font-size: 0.75rem;
	}

	.wist-cart-bar__amount strong {
		font-size: 1.125rem;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.wist-cart-bar__cta {
		display: flex;
		flex: 0 1 auto;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-left: auto;
		padding: 10px 24px;
		border-radius: var(--wist-radius-lg);
		background: var(--wist-blue-base);
		color: var(--wist-blue-on);
		font: 500 1rem/24px Inter, sans-serif;
		white-space: nowrap;
		text-decoration: none;
		transition: background-color 0.15s ease, transform 0.1s ease;
	}

	.wist-cart-bar__cta:hover {
		background: var(--wist-blue-base-hover);
	}

	.wist-cart-bar__cta:active {
		transform: scale(0.97);
	}

	.wist-cart-bar__cta:focus-visible {
		outline: 2px solid var(--wist-blue-base);
		outline-offset: 3px;
	}

	/* El aviso de deshacer se apoya sobre la capsula. */
	.wist-cart-undo {
		bottom: calc( var(--wist-space-1000) + env( safe-area-inset-bottom, 0px ) );
	}
}

@media (prefers-reduced-motion: reduce) {

	.wist-cart-bar,
	.wist-cart-bar__cta {
		transition: none;
	}

	.wist-cart-bar__cta:active {
		transform: none;
	}
}