/**
 * NAYÚ · Carrito lateral y barra de envío gratis
 */

/* --- Botón de la cabecera ------------------------------------------------ */

.nayu-carrito-abrir {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.nayu-carrito-abrir:focus-visible {
	outline: 2px solid var(--wp--preset--color--oliva, #6b7a4f);
	outline-offset: 3px;
	border-radius: 2px;
}

.nayu-carrito-abrir__n {
	position: absolute;
	top: -3px;
	right: -5px;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--base, #fdf6ea);
	background: var(--wp--preset--color--magenta, #ff37b8);
	border-radius: 9px;
	font-variant-numeric: tabular-nums;
}

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

.nayu-envio {
	padding: 16px 0 18px;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e7ddc9);
}

.nayu-envio__texto {
	margin: 0 0 10px;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	color: var(--wp--preset--color--contraste, #26261f);
}

.nayu-envio__pista {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--arena, #e7ddc9);
	overflow: hidden;
}

.nayu-envio__relleno {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--wp--preset--color--oliva, #6b7a4f);
	transition: width 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Al conseguirlo cambia el color, no solo el texto: el premio tiene que
   verse sin leer. */
.nayu-envio.esta-conseguido .nayu-envio__relleno {
	background: var(--wp--preset--color--magenta, #ff37b8);
}

.nayu-envio-pagina {
	max-width: 640px;
	margin: 0 auto var(--wp--preset--spacing--40, 2.5rem);
}

.nayu-envio-pagina .nayu-envio {
	border-bottom: 0;
}

/* --- El cajón ------------------------------------------------------------ */

.nayu-carrito-velo {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(38, 38, 31, 0.45);
	opacity: 0;
	transition: opacity 260ms ease;
}

.nayu-carrito-velo.esta-abierto {
	opacity: 1;
}

.nayu-carrito {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: min(400px, 100vw);
	background: var(--wp--preset--color--base, #fdf6ea);
	border-left: 1px solid var(--wp--preset--color--arena, #e7ddc9);
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

.nayu-carrito.esta-abierto {
	transform: translateX(0);
}

body.nayu-carrito-abierto {
	overflow: hidden;
}

.nayu-carrito__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e7ddc9);
}

.nayu-carrito__titulo {
	margin: 0;
	font-size: 1.125rem;
}

.nayu-carrito__cerrar {
	font-size: 28px;
	line-height: 1;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0 4px;
}

.nayu-carrito__cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: 0 22px 22px;
	display: flex;
	flex-direction: column;
}

.nayu-carrito.esta-cargando .nayu-carrito__cuerpo {
	/* Antes bajaba a la mitad y el cajon daba un bandazo visible cada vez que
	   se refrescaba. Con las cantidades cambiando ya en pantalla, esto solo
	   tiene que insinuar que algo esta en camino. */
	opacity: 0.82;
}

/* --- Lista de piezas ----------------------------------------------------- */

.nayu-carrito__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.nayu-carrito__item {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e7ddc9);
}

/* La linea no se apaga al tocar + o -: el numero ya cambio y apagarla solo
   hace parecer que la pagina se ha quedado pensando. */
.nayu-carrito__item.esta-cambiando {
	opacity: 1;
}

/* La que se va a cero si se retira, para que el cambio se entienda antes de
   que el servidor conteste. */
.nayu-carrito__item.se-va {
	opacity: 0.4;
	transition: opacity 160ms ease;
}

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

	.nayu-carrito__item.se-va {
		transition: none;
	}
}

.nayu-carrito__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e7ddc9);
	display: block;
}

.nayu-carrito__datos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.nayu-carrito__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1rem;
	line-height: 1.25;
}

.nayu-carrito__nombre a {
	text-decoration: none;
	color: inherit;
}

.nayu-carrito__variacion {
	margin: 0;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #26261f) 58%, transparent);
}

.nayu-carrito__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 2px;
}

.nayu-carrito__cantidad {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--arena, #e7ddc9);
	border-radius: 2px;
	background: var(--wp--preset--color--superficie, #fff);
}

.nayu-carrito__cantidad button {
	width: 30px;
	height: 30px;
	font-size: 15px;
	line-height: 1;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.nayu-carrito__cantidad span {
	min-width: 24px;
	text-align: center;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.nayu-carrito__precio {
	font-weight: 700;
	font-size: 0.9375rem;
}

.nayu-carrito__quitar {
	align-self: flex-start;
	padding: 0;
	font-family: inherit;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #26261f) 55%, transparent);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

.nayu-carrito__quitar:hover {
	color: var(--wp--preset--color--magenta, #ff37b8);
}

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

.nayu-carrito__pie {
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nayu-carrito__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	font-size: 1rem;
}

.nayu-carrito__subtotal strong {
	font-size: 1.25rem;
}

.nayu-carrito__nota {
	margin: 0;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #26261f) 58%, transparent);
}

.nayu-carrito__pagar,
.nayu-carrito__ver,
.nayu-carrito__seguir {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 15px 20px;
	border-radius: 2px;
}

.nayu-carrito__pagar,
.nayu-carrito__seguir {
	color: var(--wp--preset--color--base, #fdf6ea);
	background: var(--wp--preset--color--oliva, #6b7a4f);
}

.nayu-carrito__pagar:hover,
.nayu-carrito__seguir:hover {
	background: var(--wp--preset--color--oliva-oscuro, #48533a);
	color: var(--wp--preset--color--base, #fdf6ea);
}

.nayu-carrito__ver {
	color: var(--wp--preset--color--oliva-oscuro, #48533a);
	border: 1px solid var(--wp--preset--color--arena, #e7ddc9);
}

.nayu-carrito__vacio {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
	padding: 40px 0;
}

.nayu-carrito__vacio p {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #26261f) 62%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.nayu-carrito,
	.nayu-carrito-velo,
	.nayu-envio__relleno {
		transition: none;
	}
}