/*
 * Panel lateral del carrito.
 *
 * Hereda de .une-drawer todo lo estructural -posición, scrim, la transición de
 * entrada- así que acá solo va lo que es propio del contenido. Si algo de esto
 * empieza a redefinir cómo entra o dónde se posa, va en el bloque .une-drawer
 * de style.css, que es el que manda para los dos paneles.
 */

.une-cart-drawer__panel {
	/* Un poco más ancho que el menú: acá hay una miniatura, un nombre largo y
	   dos líneas de talla y grabado, y a 340px el nombre se parte en tres. */
	width: min(92vw, 400px);
	gap: 0;
	padding: 0;
}

.une-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 12px 16px 22px;
	border-bottom: 1px solid var(--une-color-border, #d3c8d5);
}

.une-cart-drawer__title {
	margin: 0;
	font-family: var(--une-font-ui, inherit);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: var(--une-ui-letter-spacing, 0.08em);
	text-transform: uppercase;
}

.une-cart-drawer__head .une-drawer__close {
	align-self: center;
	flex: 0 0 auto;
}

/* Los productos hacen el scroll, no el panel entero: si lo hiciera el panel, el
   total y el botón de pagar se irían hacia abajo con una bolsa de seis piezas,
   que es justo cuando más falta hacen a la vista. */
.une-cart-drawer__items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px 22px;
}

.une-cart-drawer__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--une-color-border, #d3c8d5);
}

.une-cart-drawer__item:last-child {
	border-bottom: 0;
}

.une-cart-drawer__img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--une-radius-md, 16px);
	background: var(--une-color-bg-secondary, #e7dfe8);
}

.une-cart-drawer__img--vacia {
	display: block;
}

.une-cart-drawer__datos {
	min-width: 0;
}

.une-cart-drawer__nombre {
	margin: 0 0 4px;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.35;
}

.une-cart-drawer__meta {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--une-color-text-soft, #79657b);
}

.une-cart-drawer__linea {
	margin: 0;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

.une-cart-drawer__vacio,
.une-cart-drawer__cargando {
	margin: 0;
	padding: 28px 0;
	font-size: 0.9rem;
	color: var(--une-color-text-soft, #79657b);
}

.une-cart-drawer__foot {
	flex: 0 0 auto;
	display: grid;
	gap: 10px;
	padding: 18px 22px 24px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
	background: var(--une-color-surface, #fff);
}

.une-cart-drawer__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-family: var(--une-font-ui, inherit);
	font-size: 0.82rem;
	letter-spacing: var(--une-ui-letter-spacing, 0.08em);
	text-transform: uppercase;
}

.une-cart-drawer__total strong {
	font-family: var(--une-font-body, inherit);
	font-size: 1.24rem;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.une-cart-drawer__nota {
	margin: 0 0 2px;
	font-size: 0.78rem;
	color: var(--une-color-text-soft, #79657b);
}

.une-cart-drawer__btn {
	display: block;
	padding: 13px 20px;
	border: 1px solid var(--une-color-border, #d3c8d5);
	border-radius: var(--une-radius-btn, 10px);
	background: var(--une-color-surface, #fff);
	color: var(--une-color-brand, #644b68);
	font-family: var(--une-font-ui, inherit);
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.une-cart-drawer__btn--primary {
	border-color: var(--une-color-brand, #644b68);
	background: var(--une-color-brand, #644b68);
	color: #fff;
}

.une-cart-drawer__btn--primary:hover,
.une-cart-drawer__btn--primary:focus-visible {
	background: #785a7c;
	border-color: #785a7c;
	color: #fff;
}

.une-cart-drawer__btn:not(.une-cart-drawer__btn--primary):hover,
.une-cart-drawer__btn:not(.une-cart-drawer__btn--primary):focus-visible {
	background: var(--une-color-bg, #f4f0f5);
}

@media (prefers-reduced-motion: reduce) {
	.une-cart-drawer__btn {
		transition: none;
	}
}

/*
 * El aviso de WooCommerce, en la paleta.
 *
 * Con el panel andando casi no se ve -se quita cuando confirma lo mismo que el
 * panel- pero sigue saliendo sin JS, con un cupón o con un error de stock, y
 * ahí llegaba con la barra verde de la hoja de WooCommerce, que es el unico
 * verde de la tienda.
 *
 * Solo el borde y el fondo: el texto lo pone WooCommerce y puede ser largo.
 */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--une-color-brand, #644b68);
	background: var(--une-color-bg-secondary, #e7dfe8);
	color: var(--une-color-text, #2f2031);
	border-radius: var(--une-radius-md, 16px);
}

.woocommerce-message .button,
.woocommerce-info .button {
	border-radius: var(--une-radius-btn, 10px);
}