/**
 * MLC Toolkit — CRO
 * ---------------------------------------------------------------------------
 * Los bloques de la ficha y del carrito reutilizan la card y la rejilla del
 * feed (`feed.css`): aquí solo está el contenedor del bloque.
 */

/* ==========================================================================
   Bloque de productos (upselling y cross-selling)
   ========================================================================== */
.mlc-cro {
	width: 100% !important;
	max-width: var(--mlc-container) !important;
	margin-inline: auto !important;
	padding-block: clamp(24px, 4vw, 48px) !important;
	font-family: var(--mlc-font-family) !important;
	color: var(--mlc-color-text) !important;
}

.mlc-cro__title {
	margin-bottom: clamp(20px, 3vw, 40px) !important;
}

/* Al añadir desde el bloque del carrito, la card (y el bloque, si era la
   última) se ocultan con `hidden`. Como la card declara `display`, el
   atributo necesita su regla explícita para surtir efecto. */
.mlc-cro[hidden],
.mlc-cro .mlc-card[hidden] {
	display: none !important;
}

/* ==========================================================================
   Ventas cruzadas del mini-carrito (compactas)
   ========================================================================== */
.mlc-cro-drawer {
	flex: 0 0 auto !important;
	padding: var(--mlc-space-md) var(--mlc-space-lg) !important;
	border-top: 1px solid var(--mlc-color-line) !important;
	background-color: var(--mlc-color-bg) !important;
}

.mlc-cro-drawer__title {
	margin: 0 0 var(--mlc-space-sm) !important;
	font-family: var(--mlc-font-family) !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
	color: var(--mlc-color-text) !important;
}

.mlc-cro-drawer__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mlc-cro-drawer__item {
	display: flex !important;
	align-items: center !important;
	gap: var(--mlc-space-sm) !important;
	padding: var(--mlc-space-sm) 0 !important;
}

.mlc-cro-drawer__item + .mlc-cro-drawer__item {
	border-top: 1px solid var(--mlc-color-line) !important;
}

.mlc-cro-drawer__media {
	flex: 0 0 48px !important;
	width: 48px !important;
}

.mlc-cro-drawer__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	background-color: var(--mlc-color-white) !important;
}

.mlc-cro-drawer__info {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.mlc-cro-drawer__name {
	overflow: hidden !important;
	font-weight: var(--mlc-fw-semibold) !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	color: var(--mlc-color-text) !important;
	text-decoration: none !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.mlc-cro-drawer__name:hover {
	color: var(--mlc-color-accent) !important;
}

.mlc-cro-drawer__price {
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	color: var(--mlc-color-text) !important;
}

.mlc-cro-drawer__price del {
	font-weight: var(--mlc-fw-regular) !important;
	color: var(--mlc-color-text-soft) !important;
}

.mlc-cro-drawer__price ins {
	text-decoration: none !important;
}

.mlc-cro-drawer__add {
	flex: 0 0 auto !important;
	padding: 8px 12px !important;
	border: 1px solid var(--mlc-color-text) !important;
	border-radius: var(--mlc-radius) !important;
	background-color: var(--mlc-color-white) !important;
	color: var(--mlc-color-text) !important;
	font-family: var(--mlc-font-family) !important;
	font-weight: var(--mlc-fw-bold) !important;
	font-size: 12px !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color var(--mlc-transition), color var(--mlc-transition) !important;
}

.mlc-cro-drawer__add:hover,
.mlc-cro-drawer__add:focus-visible {
	background-color: var(--mlc-color-text) !important;
	color: var(--mlc-color-white) !important;
}