/*
 * CT Systems - tarjeta unificada de compra
 *
 * La misma estructura semantica sirve para carrito, checkout y mini-cart.
 * La composicion parte de mobile y crece por espacio disponible; ninguna
 * superficie depende de offsets absolutos para ubicar sus controles.
 */

html body :is(.ctsys-carrito-lista-pagina, .ctsys-checkout-productos__lista) {
	display: grid;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	overflow: visible;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(56px, 64px) minmax(0, 1fr) 44px;
	grid-template-areas:
		"imagen datos quitar"
		"compra compra compra";
	align-items: start;
	column-gap: 10px;
	row-gap: 12px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ct-borde, #e5e5e5);
	border-radius: 16px;
	background: var(--ct-superficie, #fff);
	box-shadow: 0 8px 22px rgb(0 0 0 / 6%);
	overflow: hidden;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini):last-child {
	margin-bottom: 0;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__imagen {
	display: grid;
	grid-area: imagen;
	align-self: start;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	aspect-ratio: 1;
	box-sizing: border-box;
	border: 1px solid var(--ct-borde-suave, #f0f0f0);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__imagen > :is(a, span),
html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__imagen :is(img, .ctsys-media) {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	object-fit: contain;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos {
	display: flex;
	grid-area: datos;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos > * {
	min-width: 0;
	max-width: 100%;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__nombre, .ctsys-carrito-linea__titulo) {
	display: -webkit-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	color: var(--ct-tinta, #111111);
	font-size: .94rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-decoration: none;
	text-wrap: wrap;
	overflow-wrap: anywhere;
	word-break: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__nombre, .ctsys-carrito-linea__titulo) > a {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__plazo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 3px 8px;
	border: 0;
	border-radius: 999px;
	background: var(--ct-cyan-tinte, #f5f5f5);
	color: var(--ct-cyan, #111111);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__unitario {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	color: var(--ct-tinta-suave, #667085);
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* El correo es un metadato de la línea, no un segundo título. */
html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__correo {
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	color: var(--ct-tinta-suave, #667085);
	font-size: .76rem;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__correo-etiqueta {
	color: var(--ct-tinta, #111111);
	font-size: inherit;
	font-weight: 600;
}

/* WooCommerce imprime los datos por línea como <dl class="variation"> en
 * carrito y checkout. Se conserva ese contrato y se compacta solo su lectura. */
html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos > .variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 6px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: var(--ct-tinta-suave, #667085);
	font-size: .76rem;
	font-weight: 400;
	line-height: 1.3;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos > .variation dt {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--ct-tinta, #111111);
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos > .variation dd {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__datos > .variation dd p {
	display: inline;
	margin: 0;
	padding: 0;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__compra {
	display: grid;
	grid-area: compra;
	grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__cantidad {
	display: block;
	width: 120px;
	min-width: 120px;
	margin: 0;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad, .quantity) {
	display: grid;
	grid-template-columns: 44px 32px 44px;
	grid-template-rows: 44px;
	align-items: stretch;
	width: 120px;
	height: 44px;
	min-width: 120px;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--ct-borde, #e5e5e5);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad, .quantity) input.qty,
html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-cantidad__valor {
	display: grid;
	grid-column: 2;
	grid-row: 1;
	place-items: center;
	width: 32px;
	height: 44px;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-inline: 1px solid var(--ct-borde-suave, #f0f0f0);
	border-radius: 0;
	background: #fff;
	color: var(--ct-tinta, #111111);
	font-size: .92rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	appearance: textfield;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad, .quantity) input.qty::-webkit-inner-spin-button,
html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad, .quantity) input.qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion, .ctsys-cantidad__accion) {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--ct-cyan, #111111);
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion--bajar, .ctsys-cantidad__accion--bajar) {
	grid-column: 1;
	grid-row: 1;
	border-right: 1px solid var(--ct-borde-suave, #f0f0f0);
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion--subir, .ctsys-cantidad__accion--subir) {
	grid-column: 3;
	grid-row: 1;
	border-left: 1px solid var(--ct-borde-suave, #f0f0f0);
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion, .ctsys-cantidad__accion) svg {
	display: block;
	width: 14px;
	height: 14px;
	stroke: currentColor;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion, .ctsys-cantidad__accion):is(:hover, :focus-visible) {
	background: var(--ct-hover-sutil, #f7f7f7);
	color: #111111;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-sync-cantidad__accion, .ctsys-cantidad__accion):disabled {
	cursor: not-allowed;
	opacity: .42;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__total {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	margin: 0;
	color: var(--ct-tinta, #111111);
	font-size: 1.08rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	text-align: right;
	white-space: nowrap;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__precio {
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__quitar, .ctsys-checkout-linea__eliminar, .ctsys-carrito-linea__eliminar) {
	display: inline-flex;
	grid-area: quitar;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ct-cyan, #111111);
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__quitar, .ctsys-checkout-linea__eliminar, .ctsys-carrito-linea__eliminar) svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__quitar, .ctsys-checkout-linea__eliminar, .ctsys-carrito-linea__eliminar):is(:hover, :focus-visible) {
	background: var(--ct-hover-sutil, #f7f7f7);
	color: #111111;
	outline: 2px solid transparent;
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini).ctsys-carrito-linea--unidad-fija .ctsys-carrito-linea__compra {
	grid-template-columns: minmax(0, 1fr);
}

html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini).ctsys-carrito-linea--unidad-fija .ctsys-carrito-linea__total {
	justify-self: end;
}

html body #ctsys-carrito-panel {
	max-width: 100vw;
	overflow-x: hidden;
}

html body #ctsys-carrito-panel .ctsys-carrito-panel__contenido {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

html body #ctsys-carrito-panel .ctsys-carrito-panel__contenido .ctsys-carrito-lista {
	display: grid;
	grid-auto-rows: min-content;
	align-content: start;
	gap: 10px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	scrollbar-gutter: stable;
}

html body :is(.ctsys-carrito-linea.is-sync-pending, .ctsys-carrito.is-sync-pending, .ctsys-checkout-productos.is-sync-pending) {
	opacity: .82;
	transition: opacity 120ms var(--ct-ease, ease);
}

html body .ctsys-carrito-linea.is-removing {
	opacity: .42;
	pointer-events: none;
}

@media (min-width: 768px) {
	html body.woocommerce-cart .ctsys-carrito-linea--tarjeta {
	grid-template-columns: minmax(96px, 112px) minmax(0, 1fr) 44px;
	grid-template-areas:
		"imagen datos quitar"
		"compra compra compra";
	column-gap: 16px;
	row-gap: 14px;
	padding: 16px;
	}

	html body.woocommerce-cart .ctsys-carrito-linea--tarjeta .ctsys-carrito-linea__imagen {
		width: 100%;
	}

	html body :is(.woocommerce-checkout .ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) {
		grid-template-columns: minmax(80px, 96px) minmax(0, 1fr) 44px;
		grid-template-areas:
			"imagen datos quitar"
			"compra compra compra";
		column-gap: 14px;
		row-gap: 12px;
		padding: 14px;
	}

	html body :is(.woocommerce-checkout .ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__nombre,
	html body :is(.woocommerce-checkout .ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__titulo {
		font-size: .96rem;
	}
}

@media (min-width: 1024px) {
	html body.woocommerce-cart .ctsys-carrito-linea--tarjeta {
		grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) minmax(218px, max-content) 44px;
		grid-template-areas: "imagen datos compra quitar";
		align-items: center;
		gap: 16px;
		min-height: 152px;
		padding: 12px;
	}

	html body.woocommerce-cart .ctsys-carrito-linea--tarjeta .ctsys-carrito-linea__compra {
		grid-template-columns: minmax(120px, 120px) minmax(110px, 1fr);
		gap: 14px;
	}

	html body.woocommerce-cart .ctsys-carrito-linea--tarjeta .ctsys-carrito-linea__total {
		padding-left: 16px;
		border-left: 1px solid var(--ct-borde, #e5e5e5);
		font-size: clamp(1.18rem, 1.45vw, 1.45rem);
	}

	html body #ctsys-carrito-panel .ctsys-carrito-linea--mini {
		grid-template-columns: minmax(72px, 80px) minmax(0, 1fr) 44px;
	}
}

@media (max-width: 430px) {
	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) {
		grid-template-columns: minmax(56px, 64px) minmax(0, 1fr) 44px;
		grid-template-areas:
			"imagen datos quitar"
			"compra compra compra";
		column-gap: 8px;
		row-gap: 10px;
		padding: 10px;
		border-radius: 14px;
	}

	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__compra {
		gap: 10px;
	}

	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) :is(.ctsys-carrito-linea__nombre, .ctsys-carrito-linea__titulo) {
		font-size: .9rem;
	}

	html body #ctsys-carrito-panel .ctsys-carrito-linea--mini {
		grid-template-columns: minmax(56px, 64px) minmax(0, 1fr) 44px;
	}
}

@media (max-width: 360px) {
	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) {
		grid-template-columns: 56px minmax(0, 1fr) 44px;
		column-gap: 7px;
		padding-inline: 9px;
	}

	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__total {
		font-size: 1rem;
	}

	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__compra {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	html body :is(.ctsys-carrito-linea--tarjeta, #ctsys-carrito-panel .ctsys-carrito-linea--mini) .ctsys-carrito-linea__total {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body :is(.ctsys-carrito-linea.is-sync-pending, .ctsys-carrito.is-sync-pending, .ctsys-checkout-productos.is-sync-pending) {
		transition: none;
	}
}