/* ML Ofertas — vitrine */

.mlo-vitrine {
	--mlo-cols: 4;
	--mlo-cols-tablet: 3;
	--mlo-cols-mobile: 2;
	--mlo-gap: 16px;
	--mlo-card-bg: #fff;
	--mlo-card-borda: #e6e6e6;
	--mlo-texto: #333;
	--mlo-texto-suave: #6b7280;
	--mlo-preco: #111;
	--mlo-verde: #00a650;
	--mlo-amarelo: #fff159;
	--mlo-azul: #3483fa;
	--mlo-raio: 12px;

	box-sizing: border-box;
	width: 100%;
}

.mlo-vitrine *,
.mlo-vitrine *::before,
.mlo-vitrine *::after {
	box-sizing: border-box;
}

.mlo-vitrine__titulo {
	margin: 0 0 16px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.mlo-vitrine__palco {
	position: relative;
}

/* ---------- Grade ---------- */

.mlo-grid {
	display: grid;
	grid-template-columns: repeat(var(--mlo-cols), minmax(0, 1fr));
	gap: var(--mlo-gap);
}

/* ---------- Card ---------- */

.mlo-card {
	background: var(--mlo-card-bg);
	border: 1px solid var(--mlo-card-borda);
	border-radius: var(--mlo-raio);
	overflow: hidden;
	display: flex;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mlo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.mlo-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.mlo-card__link:hover,
.mlo-card__link:focus {
	text-decoration: none;
	color: inherit;
}

.mlo-card__media {
	position: relative;
	height: 190px;
	background: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.mlo-card__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
}

.mlo-card__img--vazia {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e9e9e9 10px, #e9e9e9 20px);
	border-radius: 6px;
}

.mlo-badge {
	position: absolute;
	top: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
	letter-spacing: 0.2px;
}

.mlo-badge--desconto {
	left: 8px;
	background: var(--mlo-verde);
	color: #fff;
}

.mlo-badge--selo {
	right: 8px;
	background: var(--mlo-amarelo);
	color: #2d2d2d;
	text-transform: uppercase;
	font-size: 0.62rem;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mlo-card__corpo {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

.mlo-card__titulo {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--mlo-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mlo-card__precos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
}

.mlo-preco-antigo {
	font-size: 0.78rem;
	color: var(--mlo-texto-suave);
	text-decoration: line-through;
}

.mlo-preco {
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mlo-preco);
}

.mlo-card__parcelas {
	margin: 0;
	font-size: 0.76rem;
	color: var(--mlo-verde);
}

.mlo-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.mlo-tag {
	font-size: 0.7rem;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 6px;
	background: #f3f4f6;
	color: var(--mlo-texto-suave);
	white-space: nowrap;
}

.mlo-tag--frete {
	background: rgba(0, 166, 80, 0.12);
	color: #087443;
	font-weight: 600;
}

.mlo-tag--rating small {
	opacity: 0.75;
}

.mlo-card__botao {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--mlo-azul);
	color: #fff;
	font-size: 0.86rem;
	font-weight: 600;
	padding: 9px 12px;
	border-radius: 8px;
	transition: background 0.16s ease;
}

.mlo-card:hover .mlo-card__botao {
	background: #2968c8;
}

.mlo-disclosure {
	margin: 14px 0 0;
	font-size: 0.74rem;
	color: var(--mlo-texto-suave);
	line-height: 1.5;
}

.mlo-vazio {
	padding: 18px;
	border: 1px dashed #cfcfcf;
	border-radius: 10px;
	color: #6b7280;
	text-align: center;
}

/* ---------- Layout lista ---------- */

.mlo-layout-lista .mlo-grid {
	grid-template-columns: 1fr;
}

.mlo-layout-lista .mlo-card__link {
	flex-direction: row;
	align-items: stretch;
}

.mlo-layout-lista .mlo-card__media {
	flex: 0 0 180px;
	height: auto;
	min-height: 150px;
}

.mlo-layout-lista .mlo-card__titulo {
	-webkit-line-clamp: 3;
	font-size: 1rem;
}

.mlo-layout-lista .mlo-card__botao {
	align-self: flex-start;
	padding-left: 22px;
	padding-right: 22px;
}

/* ---------- Layout carrossel ---------- */

.mlo-layout-carrossel .mlo-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.mlo-layout-carrossel .mlo-grid::-webkit-scrollbar {
	display: none;
}

.mlo-layout-carrossel .mlo-card {
	flex: 0 0 calc((100% - (var(--mlo-gap) * (var(--mlo-cols) - 1))) / var(--mlo-cols));
	scroll-snap-align: start;
}

.mlo-nav {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	z-index: 3;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--mlo-card-borda);
	background: #fff;
	color: #333;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mlo-nav:hover {
	background: #f5f5f5;
}

.mlo-nav--prev {
	left: -14px;
}

.mlo-nav--next {
	right: -14px;
}

.mlo-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
	.mlo-grid {
		grid-template-columns: repeat(var(--mlo-cols-tablet), minmax(0, 1fr));
	}

	.mlo-layout-carrossel .mlo-card {
		flex-basis: calc((100% - (var(--mlo-gap) * (var(--mlo-cols-tablet) - 1))) / var(--mlo-cols-tablet));
	}
}

@media (max-width: 767px) {
	.mlo-grid {
		grid-template-columns: repeat(var(--mlo-cols-mobile), minmax(0, 1fr));
	}

	.mlo-layout-carrossel .mlo-card {
		flex-basis: calc((100% - (var(--mlo-gap) * (var(--mlo-cols-mobile) - 1))) / var(--mlo-cols-mobile));
	}

	.mlo-card__media {
		height: 140px;
	}

	.mlo-preco {
		font-size: 1.08rem;
	}

	.mlo-layout-lista .mlo-card__link {
		flex-direction: column;
	}

	.mlo-layout-lista .mlo-card__media {
		flex-basis: auto;
		height: 160px;
	}

	.mlo-nav {
		display: none;
	}
}

/* ---------- Tema escuro ---------- */

@media (prefers-color-scheme: dark) {
	.mlo-vitrine:not([data-tema="light"]) {
		--mlo-card-bg: #1c1f26;
		--mlo-card-borda: #2c313b;
		--mlo-texto: #e7e9ee;
		--mlo-texto-suave: #9aa3b2;
		--mlo-preco: #fff;
	}

	.mlo-vitrine:not([data-tema="light"]) .mlo-card__media {
		background: #f7f7f7;
	}

	.mlo-vitrine:not([data-tema="light"]) .mlo-tag {
		background: #262b34;
	}

	.mlo-vitrine:not([data-tema="light"]) .mlo-nav {
		background: #1c1f26;
		color: #e7e9ee;
	}
}