/**
 * Carrito lateral de CCM.
 *
 * Paleta del kit de Elementor (#E60000 / #191818), la misma del área de cliente
 * y de la página de carrito. NO el #e63946 viejo de ccm-checkout.
 */

.ccmd {
	--ccmd-tinta: #191818;
	/* El acento vive en UN token. En la referencia aparece exactamente en tres
	   sitios —precio de oferta, ahorro y boton de pagar— y aqui igual, con el
	   rojo de CCM en vez del terracota: cambiar de uno a otro es cambiar esta
	   linea. */
	--ccmd-rojo: #e60000;
	--ccmd-linea: #e8e6e3;
	--ccmd-gris: #7a7570;
	--ccmd-tile: #f4f2ef;
	position: fixed;
	inset: 0;
	/* Siendo un modal, el cajon tiene que quedar por encima de TODO lo que
	   flota en la pagina. Medido en dev el 31-ago: el boton de WhatsApp
	   (`.wa__btn_popup`) esta en 999999999, su globo en 999999998 y la
	   burbuja del carrito de xoo en 9999997 (ese plugin ya no esta) — con 100000 los tres se
	   pintaban sobre el pie del cajon y tapaban «Cotizar pedido». El menu
	   movil de la cabecera (`.ccmts-header__cajon`) usa 1000000000, asi que
	   este va justo encima; nunca se abren a la vez y el cajon lleva
	   `hidden` cuando esta cerrado, de modo que no le roba el paso a nadie. */
	z-index: 1000000001;
}

.ccmd[hidden] { display: none; }

/*
 * Reset de los botones del cajon, con `!important` a proposito.
 *
 * El kit de Elementor de este sitio estiliza TODOS los `button`: medido en dev
 * el 31-ago, la papelera, el mas/menos y el boton de agregar salian con
 * `border: 1px solid #cc3366` y radio propio — recuadros rojos alrededor de
 * cada icono dentro de un cajon blanco. Esas reglas viven en una hoja de otro
 * origen que la pagina no puede leer, asi que no hay forma de calcular que
 * especificidad haria falta para ganarles sin adivinar. Se fija el reset y las
 * pocas reglas que necesitan pintar encima lo declaran tambien.
 *
 * Mismo problema y misma solucion que en la barra flotante de movil.
 *
 * OJO con la especificidad: `.ccmd button` es (0,1,1) y le gana a un
 * `.ccmd__sug-add` (0,1,0) aunque los dos lleven `!important`. Por eso todo lo
 * que necesita pintar encima de este reset va prefijado con `.ccmd`.
 */
.ccmd button {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	min-height: 0 !important;
	font: inherit;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

.ccmd__velo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .28s cubic-bezier(.2, 0, .13, 1);
}

.ccmd.is-abierto .ccmd__velo { opacity: 1; }

.ccmd__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -4px 0 24px rgba(0, 0, 0, .16);
	/* Fuera de pantalla en reposo: `transform` lo resuelve el compositor y no
	   provoca recálculo de maquetación en cada fotograma. */
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.2, 0, .13, 1);
}

.ccmd.is-abierto .ccmd__panel { transform: translateX(0); }

.ccmd__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ccmd-linea);
}

.ccmd__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ccmd-tinta);
}

.ccmd__conteo { margin-left: 6px; font-weight: 400; color: var(--ccmd-gris); }
.ccmd__conteo[hidden] { display: none; }

.ccmd .ccmd__cerrar {
	padding: 4px 8px !important;
	font-size: 26px;
	line-height: 1;
	color: var(--ccmd-gris) !important;
	cursor: pointer;
}

.ccmd__cuerpo { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }

/* ---- Incentivo ---- */

.ccmd__incentivo { padding: 14px 20px; border-bottom: 1px solid var(--ccmd-linea); }

.ccmd__barra {
	height: 6px;
	border-radius: 999px;
	background: var(--ccmd-tile);
	overflow: hidden;
}

.ccmd__barra span {
	display: block;
	height: 100%;
	background: var(--ccmd-rojo);
	transition: width .3s ease;
}

.ccmd__incentivo-texto { margin: 8px 0 0; font-size: 13px; color: var(--ccmd-tinta); }
.ccmd__incentivo.is-logrado .ccmd__incentivo-texto { font-weight: 600; }

/* ---- Líneas ---- */

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

.ccmd__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ccmd-linea);
}

.ccmd__foto {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 4px;
	background: var(--ccmd-tile);
}

.ccmd__datos { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.ccmd__nombre {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ccmd-tinta);
	text-decoration: none;
	transition: color .12s ease;
}

/*
 * El nombre es un enlace a la ficha, y en reposo no lo parece: va en tinta y
 * sin subrayado, igual que el texto de al lado. El rojo al pasar por encima es
 * lo que lo delata como pulsable.
 *
 * Tambien detras de `hover: hover`: en tactil se quedaria rojo el ultimo que
 * se toco, y en una lista de productos eso se lee como «este esta
 * seleccionado», que no significa nada aqui.
 */
@media ( hover: hover ) {
	.ccmd__nombre:hover {
		color: var(--ccmd-rojo);
	}
}

/* El teclado ve lo mismo, y ademas subrayado: el foco no se puede confiar
   solo al color. */
.ccmd__nombre:focus-visible {
	color: var(--ccmd-rojo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccmd__detalle {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--ccmd-gris);
}

.ccmd__precio { margin-top: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }

/*
 * El precio de oferta en rojo con el normal tachado al lado. WooCommerce ya
 * emite <del> y <ins>; solo hay que vestirlos. El <ins> llega con subrayado
 * por defecto del navegador y hay que quitarselo, o el precio parece un enlace.
 */
.ccmd__precio del { margin-right: 6px; font-weight: 400; color: var(--ccmd-gris); }
.ccmd__precio ins { text-decoration: none; color: var(--ccmd-rojo); }

/* La columna derecha: papelera arriba, contador abajo. */
.ccmd__lado {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	min-height: 64px;
}

.ccmd__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ccmd-linea);
	border-radius: 4px;
	overflow: hidden;
}

.ccmd .ccmd__menos,
.ccmd .ccmd__mas {
	width: 30px;
	height: 30px;
	color: var(--ccmd-tinta) !important;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ccmd .ccmd__menos:hover:not(:disabled),
.ccmd .ccmd__mas:hover:not(:disabled) { background: var(--ccmd-tile) !important; }

.ccmd .ccmd__mas:disabled { color: #c4c4c4 !important; cursor: not-allowed; }

.ccmd__cantidad {
	min-width: 26px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.ccmd .ccmd__quitar {
	display: flex;
	color: var(--ccmd-gris) !important;
	cursor: pointer;
}

.ccmd__quitar svg { width: 17px; height: 17px; }
.ccmd .ccmd__quitar:hover { color: var(--ccmd-tinta) !important; }

/* ---- Espera ---- */

/*
 * El aviso de «estoy en ello».
 *
 * La espera no se puede quitar: `remove_cart_item()` cuesta ~925 ms el solo
 * porque por dentro vuelve a cotizar el flete, y el arranque de WordPress otros
 * ~900 ms. Lo que se puede es dejar de parecer colgado. Medido en dev el
 * 31-ago: 3.748 ms sin ningun aviso al cliente en todo ese rato.
 */

.ccmd__item.is-esperando,
.ccmd__item.is-quitando {
	opacity: .45;
	pointer-events: none;
	transition: opacity .12s ease;
}

/* Quitar se ve distinto de cambiar: el precio tachado dice que esa linea se va. */
.ccmd__item.is-quitando .ccmd__precio { text-decoration: line-through; }

/*
 * El pie NO enseña un total inventado mientras espera: enseña barras. Adelantar
 * una cifra antes de que el servidor la confirme seria enseñar algo distinto de
 * lo que hay en el carrito de verdad, que es la regla de este cajon.
 */
.ccmd__pie.is-esperando .ccmd__linea-total > *,
.ccmd__pie.is-esperando .ccmd__subtotal strong,
.ccmd__brilla {
	color: transparent !important;
	background: linear-gradient( 90deg, var(--ccmd-linea) 25%, #f6f4f2 50%, var(--ccmd-linea) 75% );
	background-size: 300% 100%;
	border-radius: 3px;
	animation: ccmd-brillo 1.1s ease-in-out infinite;
}

.ccmd__pie.is-esperando .ccmd__pagar,
.ccmd__pie.is-esperando .ccmd__whatsapp {
	opacity: .5;
	pointer-events: none;
}

@keyframes ccmd-brillo {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

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

	/* Sin animacion sigue leyendose como espera: las barras se quedan quietas. */
	.ccmd__pie.is-esperando .ccmd__linea-total > *,
	.ccmd__pie.is-esperando .ccmd__subtotal strong,
	.ccmd__brilla {
		animation: none;
		background: var( --ccmd-linea );
	}
}

/* ---- Sugeridos ---- */

.ccmd__sugeridos { padding: 18px 0 18px 20px; border-bottom: 1px solid var(--ccmd-linea); }

.ccmd__sugeridos-titulo {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ccmd-tinta);
}

.ccmd__carrusel {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 20px 4px 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ccmd__carrusel::-webkit-scrollbar { display: none; }

/*
 * Tarjeta horizontal: foto a la izquierda, texto y accion a la derecha. En
 * vertical el nombre de estos productos —«Cabina Amplificada 15 Pulgadas
 * Bluetooth»— parte en cinco renglones y la tarjeta crece el doble que sus
 * vecinas; en horizontal la altura la fija la foto y todas empatan.
 */
.ccmd__sug {
	flex: 0 0 252px;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--ccmd-linea);
	border-radius: 6px;
	background: #fff;
}

.ccmd__sug-foto { display: block; }

.ccmd__sug-foto img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	border-radius: 4px;
	background: var(--ccmd-tile);
}

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

.ccmd__sug-nombre {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ccmd-tinta);
	text-decoration: none;
	/* Dos renglones y elipsis: el tercero empujaria el boton fuera de la caja. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ccmd__sug-precio { font-size: 13px; font-weight: 600; }
.ccmd__sug-precio del { margin-right: 5px; font-weight: 400; color: var(--ccmd-gris); }
.ccmd__sug-precio ins { text-decoration: none; color: var(--ccmd-rojo); }

.ccmd .ccmd__sug-add {
	align-self: flex-start;
	min-height: 30px !important;
	padding: 0 18px !important;
	border-radius: 999px !important;
	background: var(--ccmd-tinta) !important;
	color: #fff !important;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.ccmd .ccmd__sug-add:hover { background: #000 !important; }

/* Mientras el servidor confirma el añadido. Mismo criterio que el pie: no se
   dice «añadido» hasta que lo esté. */
.ccmd .ccmd__sug-add.is-esperando {
	opacity: .5;
	cursor: progress;
}

/* ---- Vacío y pie ---- */

.ccmd__vacio { padding: 40px 20px; text-align: center; color: var(--ccmd-gris); }
.ccmd__seguir { display: inline-block; margin-top: 12px; color: var(--ccmd-tinta); font-weight: 600; }

/*
 * El pie se queda pegado abajo.
 *
 * Vive DENTRO de `.ccmd__cuerpo`, que es el que hace scroll (`overflow-y:
 * auto`), asi que `position: sticky; bottom: 0` lo ancla al borde inferior del
 * area visible en vez de al de la ventana. No hay que sacarlo del flujo ni
 * darle una altura fija: sigue midiendo lo que mida su contenido, que cambia
 * —el incentivo de envio aparece y desaparece, y el subtotal pasa a barras
 * mientras recalcula—.
 *
 * `margin-top: auto` SE QUEDA y no sobra: con pocos productos no hay scroll y
 * es lo que empuja el pie al fondo del panel. Con muchos, manda el sticky. Los
 * dos casos, una sola regla.
 *
 * `z-index` porque los sugeridos pasan por debajo al desplazarse; sin el, sus
 * tarjetas se verian a traves del pie.
 *
 * La sombra hacia ARRIBA no es adorno: es lo que dice que la lista sigue por
 * encima del borde. Con solo el filete de 1px, un carrito largo parecia
 * terminar justo ahi.
 */
.ccmd__pie {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: auto;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ccmd-linea);
	background: #fff;
	box-shadow: 0 -6px 14px -10px rgba( 0, 0, 0, .28 );
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ccmd__linea-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 14px;
}

/* El ahorro en el acento, encima del subtotal: es la unica cifra del pie que
   el cliente lee como buena noticia. */
.ccmd__ahorro { color: var(--ccmd-rojo); }
.ccmd__ahorro + .ccmd__subtotal { margin-top: -4px; }

.ccmd__subtotal strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.ccmd__pagar,
.ccmd__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 4px;
	text-decoration: none;
	box-sizing: border-box;
}

.ccmd__pagar {
	background: var(--ccmd-rojo);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .14s ease;
}

/*
 * Al pasar por encima: negro con letras blancas.
 *
 * Decision del dueño, tomada sobre el diseño en pantalla. Se probo antes un
 * rojo oscurecido —para no salir del color de marca— y lo descarto: el
 * contraste del negro contra el rojo del reposo se nota mas, y el boton se
 * lee como pulsable en vez de como el mismo rojo un poco apagado.
 *
 * `--ccmd-tinta` y no `#000`: es el negro que ya usan el texto y la cabecera,
 * asi que el hover no introduce un color que no exista en la paleta.
 *
 * Detras de `hover: hover` A PROPOSITO. En pantalla tactil no hay puntero: un
 * `:hover` suelto se queda PEGADO tras el toque, y el cliente se iria al
 * checkout dejando atras un boton negro. El cajon se usa sobre todo en movil,
 * asi que este detalle no es teorico.
 */
@media ( hover: hover ) {
	.ccmd__pagar:hover {
		background: var(--ccmd-tinta);
		color: #fff;
	}
}

/* El teclado ve lo mismo que el raton. */
.ccmd__pagar:focus-visible {
	background: var(--ccmd-tinta);
	color: #fff;
}

.ccmd__whatsapp {
	border: 1px solid var(--ccmd-linea);
	color: var(--ccmd-tinta);
	font-size: 14px;
	font-weight: 600;
}

.ccmd__ver {
	text-align: center;
	font-size: 12.5px;
	color: var(--ccmd-gris);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccmd__aviso { margin: 12px 20px; padding: 10px 12px; border-left: 3px solid var(--ccmd-rojo); background: var(--ccmd-tile); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
	.ccmd__velo,
	.ccmd__panel,
	.ccmd__barra span { transition: none; }
}

/* ---- Esqueleto de la primera carga ---- */

/*
 * Lo que se ve mientras el fragmento viaja.
 *
 * La rejilla es la MISMA que `.ccmd__item` (64px / 1fr / auto, gap 14,
 * padding 16 20) para que las barras esten donde van a estar los productos y
 * el contenido real no de un salto al llegar.
 *
 * El brillo lo pone `.ccmd__brilla`, que es la misma regla que usa el pie
 * cuando recalcula: un solo idioma para «estoy en ello» en todo el cajon.
 */

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

.ccmd__esq-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ccmd-linea);
}

/* Escalonadas: leidas como una onda dicen «viene en camino» mejor que tres
   barras latiendo al unisono, que parece un error intermitente. */
.ccmd__esq-item:nth-child( 2 ) .ccmd__brilla { animation-delay: .12s; }
.ccmd__esq-item:nth-child( 3 ) .ccmd__brilla { animation-delay: .24s; }

.ccmd__esq-foto {
	width: 64px;
	height: 64px;
	border-radius: 4px;
}

.ccmd__esq-datos {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.ccmd__esq-barra { height: 12px; border-radius: 3px; }
.ccmd__esq-barra--larga { width: 82%; }
.ccmd__esq-barra--corta { width: 46%; }

.ccmd__esq-precio {
	width: 58px;
	height: 14px;
	border-radius: 3px;
	margin-top: 4px;
}

/*
 * El texto sigue ahi para quien no ve el esqueleto.
 *
 * `[data-ccmd-cuerpo]` es `aria-live="polite"` con `aria-busy="true"`: si se
 * quitara la frase, un lector de pantalla anunciaria el cajon vacio y sin
 * explicacion. El esqueleto va `aria-hidden` porque es decoracion; la frase
 * es la que informa.
 */
.ccmd__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}