/**
 * mini-cart.css — el panel del carrito.
 *
 * Va en su propio archivo y no dentro de style.css por dos razones:
 *
 * - Solo se carga cuando hay carrito, que en una tienda de piezas a
 *   medida es casi siempre, pero en el blog no. Los estilos de un
 *   diálogo que no aparece no deberían estar en la ruta crítica del
 *   primer pintado.
 *
 * - Es un bloque con vida propia. Si estuviera dentro de style.css
 *   acabaría desperdigado entre las reglas de la cabecera y las del
 *   catálogo, y las reglas que lo gobiernan —la caja, el velo, el
 *   atrapado de foco— son más fáciles de leer juntas que repartidas.
 *
 * Capas: el velo va por debajo de la cabecera fija (z-index 200) pero
 * por encima de todo lo demás. Si el panel quedara debajo, la cabecera
 * flotaría sobre el diálogo abierto y el cliente no podría ni leerlo
 * ni cerrarlo.
 */

.mini-cart{
	position:fixed;
	inset:0;
	/* 260, por encima de la cabecera (200).

	   Estar FUERA de .site-top —como está, a propósito— no basta para
	   quedar por encima: .site-top es position:fixed con z-index:200 y
	   eso lo convierte en un contexto de apilamiento en la raíz, así
	   que compete de tú a tú. Con 190 el panel se quedaba POR DEBAJO
	   de la cabecera, y eso se notaba en tres cosas: el velo del
	   carrito no oscurecía la cabecera (la página se ve difuminada y
	   la cabecera limpia encima, que parece un fallo de impresión), los
	   botones de la cabecera seguían siendo pulsables por encima del
	   overlay —el del carrito se podía volver a pulsar con el carrito
	   abierto, y el de menú abría el menú móvil encima— y el panel
	   lleva aria-modal="true", o sea que dice que nada de lo que hay
	   detrás debe ser alcanzable.

	   El aviso de "Abre el menú" queda por debajo, y es lo correcto:
	   el menú ya bloquea la página con su propio bloqueo de scroll. */
	z-index:260;
	display:flex;
	justify-content:flex-end;
	/* El velo se oscurece y se difumina al abrir, no de golpe. Es lo
	   que separa "ha aparecido una ventana" de "haappeared una hoja
	   sobre la página". */
	background:rgba(13,10,8,.5);
	backdrop-filter:blur(3px);
	-webkit-backdrop-filter:blur(3px);
	opacity:0;
	transition:opacity var(--dur-2) var(--ease-out);
	/* Este velo cubre la pantalla entera, así que mientras está cerrado
	   tiene que dejar pasar los clics. Se oculta con opacity:0, que es
	   invisible pero NO deja de interceptar los clics: opacity solo
	   afecta al pintado, el elemento sigue ahí, con su tamaño y su
	   z-index. Sin esta línea el carrito cerrado bloqueaba la página
	   entera y no se podía pulsar nada en el sitio.

	   Con pointer-events:none el atributo hidden sigue siendo lo que
	   retira el velo del flujo; esta línea solo cubre el hueco entre
	   que la animación de cierre termina y ese momento. */
	pointer-events:none;
}
.mini-cart.is-open{
	opacity:1;
	/* Abierto sí captura, que es lo que hace de velo. */
	pointer-events:auto;
}
/* El velo cerrado se retira del flujo con el atributo hidden, que es lo
   que mini-cart.js pone y quita. WordPress normalmente lo resetea con una
   regla global, pero ese reset puede faltar si el CSS del tema se
   carga antes que él, y entonces display:flex de arriba gana y el velo
   sigue ocupando la pantalla. Se declara aquí para no depender de ese
   orden. */
.mini-cart[hidden]{display:none;}

/* Con el panel abierto la página de detrás no debe seguir
   desplazándose: si se moviera, el contenido del diálogo se vería
   desfaseado respecto al fondo y parecería un fallo de render. El
   scroll se bloquea con overflow, no con position:fixed, porque
   position:fixed salta la posición del scroll al bloquear y hay que
   devolverla después, así que con overflow basta. */
.mini-cart-open{overflow:hidden;}

.mini-cart-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	width:min(440px,100%);
	height:100%;
	background:var(--paper);
	border-left:1px solid var(--line);
	box-shadow:-24px 0 60px rgba(17,17,17,.14);
	/* Entra deslizándose desde la derecha. Es el gesto que dice "esto
	   está en el mismo sitio donde estabas", no en otro. */
	transform:translateX(100%);
	transition:transform var(--dur-3) var(--ease-out);
	overscroll-behavior:contain;
}
.mini-cart.is-open .mini-cart-panel{transform:translateX(0);}

/* --- Cabecera ---------------------------------------------------- */
.mini-cart-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	padding:22px 24px 18px;
	border-bottom:1px solid var(--line);
	flex-shrink:0;
}
.mini-cart-title{
	margin:0;
	font-family:var(--font-display);
	font-size:1.05rem;
	font-weight:800;
	letter-spacing:-.01em;
	display:flex;
	align-items:baseline;
	gap:10px;
}
.mini-cart-total-items{
	font-family:var(--font-display);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.mini-cart-close{
	flex-shrink:0;
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	border:1px solid var(--line);
	border-radius:50%;
	color:var(--ink);
	cursor:pointer;
	transition:border-color var(--dur-2) var(--ease-out),
	           background-color var(--dur-2) var(--ease-out);
}
.mini-cart-close:hover,
.mini-cart-close:focus-visible{
	border-color:var(--ink);
	background:var(--paper-soft);
}

/* --- Lista de piezas --------------------------------------------- */
.mini-cart-body{
	flex:1 1 auto;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	padding:4px 24px;
}
.mini-cart-empty{
	padding:52px 0;
	text-align:center;
}
.mini-cart-empty p{margin:0 0 10px;font-size:.95rem;}
.mini-cart-empty-hint{
	color:var(--muted-ink);
	font-size:.86rem;
	line-height:1.55;
	max-width:30ch;
	margin-inline:auto;
}

.mini-cart-items{
	list-style:none;
	margin:0;
	padding:0;
}
.mini-cart-item{
	display:grid;
	/* La miniatura y el texto en una columna, el precio y el botón de
	   quitar en la derecha. El precio baja si no cabe: se alinea al
	   final de su celda y no se parte nunca a la mitad. */
	grid-template-columns:1fr auto;
	grid-template-areas:
		"link  price"
		"link  remove";
	align-items:center;
	gap:2px 16px;
	padding:18px 0;
	border-bottom:1px solid var(--line);
}
.mini-cart-item:last-child{border-bottom:0;}

.mini-cart-item-link{
	grid-area:link;
	display:grid;
	grid-template-columns:72px 1fr;
	gap:14px;
	align-items:start;
	text-decoration:none;
	color:inherit;
	min-width:0;
}
.mini-cart-item-media{
	display:block;
	overflow:hidden;
	background:var(--paper-soft);
	border:1px solid var(--line);
	line-height:0;
}
.mini-cart-item-media img{
	display:block;
	width:100%;
	height:54px;
	object-fit:cover;
}
.mini-cart-item-info{
	display:flex;
	flex-direction:column;
	gap:5px;
	min-width:0;
}
.mini-cart-item-name{
	font-size:.94rem;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.005em;
}
.mini-cart-item-link:hover .mini-cart-item-name{text-decoration:underline;text-underline-offset:3px;}

/* Los atributos elegidos en el configurador (especie, acabado, medidas).
   WooCommerce los imprime como <dl>; aquí se compactan para que la línea
   quepa junto a la miniatura sin romper la tarjeta. */
.mini-cart-item dl{
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:2px 8px;
	font-size:.74rem;
	color:var(--muted-ink);
	line-height:1.4;
}
.mini-cart-item dl dt,
.mini-cart-item dl dd{
	margin:0;
	display:inline;
	font-size:inherit;
}
.mini-cart-item dl dt{
	font-weight:600;
	color:var(--ink);
}
.mini-cart-item dl dd::before{content:"· ";}
.mini-cart-item dl p{margin:0;}

.mini-cart-item-qty{
	font-family:var(--font-display);
	font-size:.78rem;
	font-weight:600;
	color:var(--muted-ink);
}
.mini-cart-item-price{
	grid-area:price;
	align-self:start;
	font-weight:800;
	font-size:.9rem;
	white-space:nowrap;
	text-align:right;
}
.mini-cart-item-price del{
	color:var(--muted-ink);
	font-weight:500;
	margin-right:4px;
}
.mini-cart-item-price ins{text-decoration:none;}

.mini-cart-item-remove{
	grid-area:remove;
	align-self:end;
	justify-self:end;
	width:26px;
	height:26px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.15rem;
	line-height:1;
	color:var(--muted-ink);
	text-decoration:none;
	border-radius:50%;
	transition:color var(--dur-2) var(--ease-out),
	           background-color var(--dur-2) var(--ease-out);
}
.mini-cart-item-remove:hover,
.mini-cart-item-remove:focus-visible{
	color:var(--ink);
	background:var(--paper-soft);
}

/* --- Pie: subtotal y acciones ------------------------------------ */
.mini-cart-foot{
	flex-shrink:0;
	padding:18px 24px 24px;
	border-top:1px solid var(--line);
	background:var(--paper);
}
.mini-cart-subtotal{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	margin:0 0 6px;
	font-size:.92rem;
}
.mini-cart-subtotal strong{
	font-family:var(--font-display);
	font-weight:800;
	font-size:1.2rem;
}
.mini-cart-subtotal del{
	color:var(--muted-ink);
	font-weight:500;
	margin-right:6px;
}
.mini-cart-subtotal ins{text-decoration:none;}

/* El aviso de envío e impuestos se pone aquí, en gris y en pequeño, y
   no antes del subtotal: es la duda que surge después de ver la cifra,
   no antes. */
.mini-cart-note{
	margin:0 0 16px;
	font-size:.76rem;
	line-height:1.5;
	color:var(--muted-ink);
}
.mini-cart-actions{
	display:grid;
	gap:9px;
}
.mini-cart-actions .btn{
	width:100%;
	justify-content:center;
	margin:0;
}
.mini-cart-actions .btn-primary{order:-1;}

/* --- Error de red ------------------------------------------------ */
/* Cuando la petición de fragmentos falla, el panel lo dice en vez de
   quedarse en silencio. Se muestra como una banda bajo la cabecera
   para que se lea sin tener que cerrar nada. */
.mini-cart[data-mini-cart-error]::after{
	content:attr(data-mini-cart-error);
	display:block;
	padding:10px 24px;
	background:#FDF3E3;
	border-bottom:1px solid var(--line);
	border-left:3px solid var(--mustard-deep);
	font-size:.76rem;
	line-height:1.45;
	color:var(--ink);
}

/* --- Móvil ------------------------------------------------------- */
@media (max-width:600px){
	.mini-cart-panel{
		/* En móvil la hoja ocupa todo el ancho: un panel de 440px
		   sobre una pantalla de 375px no deja sitio a la página y no se
		   entiende que se pueda cerrar mirando el fondo. */
		width:100%;
		border-left:0;
		box-shadow:none;
	}
	.mini-cart-head{padding:18px 18px 14px;}
	.mini-cart-body{padding:2px 18px;}
	.mini-cart-foot{padding:16px 18px 20px;}
}

/* --- prefers-reduced-motion ------------------------------------- */
/* Las clases de estado (.is-open, .mini-cart-open) se siguen aplicando
   porque no son decoración: sin ellas el panel no abriría. Lo que no se
   ejecuta es el desplazamiento y el difuminado. */
@media (prefers-reduced-motion:reduce){
	.mini-cart,
	.mini-cart-panel{
		transition:none;
	}
	.mini-cart-panel{transform:none;}
}