/**
 * ElementorPlus — Cart (Carrinho WooCommerce): estilos do frontend.
 *
 * Tema escuro inspirado no mockup "Meu Carrinho": cabeçalho com ícone, tabela
 * de itens, coluna lateral de resumo (subtotal/desconto/total), botão de
 * finalizar, cupom, formas de pagamento e selo de compra segura. A seção
 * "Você também pode gostar" reaproveita os cards do Product Grid (eppg-*),
 * então aqui só ajustamos o cabeçalho da seção e o rótulo "Adicionar".
 */

.epcart-wrapper {
	--epcart-accent: #2563eb;
	--epcart-accent-hover: #1d4ed8;
	--epcart-surface: #0e131c;
	--epcart-surface-2: #161c27;
	--epcart-border: #232b39;
	--epcart-text: #ffffff;
	--epcart-muted: #9aa4b2;
	--epcart-radius: 12px;
	--epcart-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a1 1 0 0 0-1 1v1H5a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2h-4V3a1 1 0 0 0-1-1h-4Zm-4 6a1 1 0 0 0-1 1.06l.7 10A2 2 0 0 0 7.7 22h8.6a2 2 0 0 0 2-1.94l.7-10A1 1 0 0 0 18 8H6Zm4 3a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");

	color: var(--epcart-text);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	font-family: inherit;
}

.epcart-wrapper *,
.epcart-wrapper *::before,
.epcart-wrapper *::after {
	box-sizing: border-box;
}

/* =========================================================================
 * Cabeçalho
 * ========================================================================= */
.epcart-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.epcart-header-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.epcart-header-icon {
	display: inline-flex;
	color: var(--epcart-accent);
}

.epcart-header-icon svg {
	width: 40px;
	height: 40px;
}

.epcart-title {
	margin: 0;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--epcart-text);
}

.epcart-subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--epcart-muted);
}

.epcart-continue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--epcart-border);
	border-radius: 10px;
	color: var(--epcart-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: border-color .18s ease, background-color .18s ease;
	white-space: nowrap;
}

.epcart-continue:hover {
	border-color: var(--epcart-accent);
	background: rgba(37, 99, 235, .08);
}

.epcart-continue svg {
	width: 18px;
	height: 18px;
}

/* =========================================================================
 * Corpo: tabela + resumo
 * ========================================================================= */
.epcart-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 24px;
	align-items: start;
}

/* --- Tabela de itens --- */
.epcart-table {
	background: var(--epcart-surface);
	border: 1px solid var(--epcart-border);
	border-radius: var(--epcart-radius);
	overflow: hidden;
}

.epcart-wrapper .epcart-table-head,
.epcart-wrapper .epcart-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px 140px 120px 48px;
	align-items: center;
	gap: 12px;
}

/* Cada célula respeita seu track (evita que conteúdo largo empurre vizinhos). */
.epcart-wrapper .epcart-col {
	min-width: 0;
}

.epcart-table-head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--epcart-border);
}

.epcart-th {
	font-size: 13px;
	font-weight: 600;
	color: var(--epcart-muted);
	text-transform: none;
}

.epcart-th--price,
.epcart-th--qty,
.epcart-th--subtotal {
	text-align: left;
}

.epcart-row {
	padding: 16px 20px;
	border-bottom: 1px solid var(--epcart-border);
}

.epcart-rows .epcart-row:last-child {
	border-bottom: 0;
}

/* Lista de itens com rolagem: evita a página ficar gigante com muitos itens.
   ~4,5 linhas visíveis (cada linha ~128px); o resto rola dentro da caixa. */
.epcart-rows {
	max-height: 576px;
	overflow-y: auto;
	/* overscroll-behavior: auto (padrão): ao chegar ao fim da rolagem interna,
	   o scroll continua na página normalmente, em vez de travar na caixa. */
	overscroll-behavior-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--epcart-border) transparent;
}

/* Barra de rolagem estilizada (WebKit/Chromium) para combinar com o tema. */
.epcart-rows::-webkit-scrollbar {
	width: 8px;
}

.epcart-rows::-webkit-scrollbar-track {
	background: transparent;
}

.epcart-rows::-webkit-scrollbar-thumb {
	background: var(--epcart-border);
	border-radius: 8px;
}

.epcart-rows::-webkit-scrollbar-thumb:hover {
	background: #364157;
}

/* Coluna Produto (thumb + textos) */
.epcart-col--product {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.epcart-thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 112px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--epcart-surface-2);
}

.epcart-thumb img,
.epcart-thumb--placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.epcart-product-title {
	color: var(--epcart-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.3;
}

.epcart-product-title:hover {
	color: var(--epcart-accent);
}

.epcart-product-meta {
	font-size: 12.5px;
	color: var(--epcart-muted);
}

/* Preço / subtotal */
.epcart-col--price,
.epcart-col--subtotal {
	font-size: 15px;
	color: var(--epcart-text);
}

.epcart-col--subtotal {
	font-weight: 600;
}

.epcart-col--price .woocommerce-Price-amount,
.epcart-col--subtotal .woocommerce-Price-amount,
.epcart-col--price bdi,
.epcart-col--subtotal bdi {
	color: inherit;
}

/* A coluna de quantidade não deve esticar nem invadir o subtotal. */
.epcart-col--qty {
	min-width: 0;
	overflow: visible;
}

/* Quantidade: stepper -/+
   Usamos larguras com !important porque temas/Elementor costumam forçar
   width:100% e paddings em inputs/botões, o que espremia o stepper e fazia o
   input "vazar" por cima da coluna de subtotal. */
.epcart-wrapper .epcart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--epcart-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--epcart-surface-2);
	width: auto;
	max-width: 130px;
	flex: 0 0 auto;
}

.epcart-wrapper .epcart-qty-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	background: transparent;
	color: var(--epcart-text);
	width: 36px !important;
	min-width: 36px;
	height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.epcart-wrapper .epcart-qty-btn:hover {
	background: rgba(37, 99, 235, .14);
	color: var(--epcart-accent);
}

.epcart-wrapper .epcart-qty-btn:active {
	background: rgba(37, 99, 235, .28);
	transform: scale(.92);
}

.epcart-wrapper .epcart-qty-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* Micro-feedback no subtotal da linha ao mudar a quantidade. */
.epcart-subtotal-value {
	display: inline-block;
	transition: transform .18s ease, color .18s ease;
}

.epcart-subtotal-value.epcart-pulse {
	transform: scale(1.12);
	color: var(--epcart-accent);
}

/* Suaviza a troca de valores no resumo. */
.epcart-subtotal,
.epcart-total-value {
	transition: color .18s ease;
}

.epcart-wrapper .epcart-qty-input {
	width: 44px !important;
	min-width: 44px;
	max-width: 44px;
	height: 38px !important;
	border: 0 !important;
	border-left: 1px solid var(--epcart-border) !important;
	border-right: 1px solid var(--epcart-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--epcart-text);
	text-align: center;
	font-size: 14px;
	line-height: 38px;
	-moz-appearance: textfield;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	flex: 0 0 auto;
}

.epcart-qty-input:focus {
	outline: none;
	background: rgba(37, 99, 235, .1);
}

.epcart-qty-input::-webkit-outer-spin-button,
.epcart-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remover item */
.epcart-col--remove {
	display: flex;
	justify-content: flex-end;
}

.epcart-remove {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	background: transparent !important;
	color: var(--epcart-muted);
	width: 36px !important;
	min-width: 36px;
	height: 36px !important;
	padding: 0 !important;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: color .15s ease, background-color .15s ease;
}

.epcart-remove:hover {
	color: #ff5a5a;
	background: rgba(255, 90, 90, .12) !important;
}

/* Ícone de lixeira: usamos o emoji 🗑 como texto no botão. Renderiza em
   qualquer navegador/tema, sem depender de SVG inline nem de CSS mask (que não
   estavam aparecendo neste tema). */
.epcart-wrapper .epcart-remove-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 18px;
	line-height: 1;
}

/* Linha saindo (animação de remoção) */
.epcart-row.is-removing {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

/* Estado vazio */
.epcart-empty-note {
	display: none;
	padding: 40px 20px;
	text-align: center;
	color: var(--epcart-muted);
	font-size: 15px;
}

.epcart-body.is-empty .epcart-empty-note {
	display: block;
}

.epcart-body.is-empty .epcart-table-head {
	display: none;
}

/* =========================================================================
 * Coluna lateral (resumo / pagamentos / segurança)
 * ========================================================================= */
.epcart-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 20px;
}

.epcart-summary,
.epcart-payments,
.epcart-secure {
	background: var(--epcart-surface);
	border: 1px solid var(--epcart-border);
	border-radius: var(--epcart-radius);
	padding: 20px;
}

.epcart-summary-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.epcart-summary-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--epcart-muted);
}

.epcart-summary-value {
	color: var(--epcart-text);
	font-weight: 600;
}

.epcart-summary-line--discount .epcart-summary-value {
	color: #22c55e;
}

/* Sem desconto: esconde a linha inteira (mostra só quando há cupom aplicado). */
.epcart-summary-line--discount.is-zero {
	display: none;
}

.epcart-summary-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--epcart-border);
}

.epcart-summary-total .epcart-summary-label {
	font-size: 18px;
	font-weight: 700;
	color: var(--epcart-text);
}

.epcart-total-value {
	font-size: 24px;
	font-weight: 800;
	color: var(--epcart-accent);
}

.epcart-total-value .woocommerce-Price-amount,
.epcart-total-value bdi {
	color: inherit;
}

/* Botão finalizar */
.epcart-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	width: 100%;
	padding: 14px 18px;
	background: var(--epcart-accent);
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	transition: background-color .18s ease, transform .05s ease;
}

.epcart-checkout:hover {
	background: var(--epcart-accent-hover);
	color: #fff;
}

.epcart-checkout:active {
	transform: translateY(1px);
}

.epcart-checkout svg {
	width: 18px;
	height: 18px;
}

/* Cupom */
.epcart-coupon {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--epcart-border);
}

.epcart-coupon-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
}

.epcart-coupon-title svg {
	width: 18px;
	height: 18px;
	color: var(--epcart-muted);
}

.epcart-coupon-form {
	display: flex;
	gap: 8px;
}

.epcart-coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--epcart-border);
	border-radius: 9px;
	background: var(--epcart-surface-2);
	color: var(--epcart-text);
	font-size: 14px;
}

.epcart-coupon-input::placeholder {
	color: var(--epcart-muted);
}

.epcart-coupon-input:focus {
	outline: none;
	border-color: var(--epcart-accent);
}

.epcart-coupon-apply {
	flex: 0 0 auto;
	appearance: none;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--epcart-border);
	border-radius: 9px;
	background: transparent;
	color: var(--epcart-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.epcart-coupon-apply:hover {
	border-color: var(--epcart-accent);
	background: rgba(37, 99, 235, .1);
}

.epcart-coupon-apply.is-loading {
	opacity: .6;
	pointer-events: none;
}

.epcart-coupon-msg {
	margin-top: 10px;
	font-size: 13px;
	min-height: 0;
}

.epcart-coupon-msg.is-error {
	color: #ff6b6b;
}

.epcart-coupon-msg.is-success {
	color: #22c55e;
}

.epcart-coupon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.epcart-coupon-list:empty {
	margin-top: 0;
}

.epcart-coupon-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 12px;
	background: rgba(34, 197, 94, .12);
	border: 1px solid rgba(34, 197, 94, .35);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #22c55e;
}

.epcart-coupon-remove {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

/* Formas de pagamento */
.epcart-payments-title,
.epcart-secure-text strong {
	font-size: 15px;
	font-weight: 700;
}

.epcart-payments-title {
	margin: 0 0 14px;
}

.epcart-payments-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 10px;
}

.epcart-payment {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px;
	border: 1px solid var(--epcart-border);
	border-radius: 10px;
	background: var(--epcart-surface-2);
	text-align: center;
}

.epcart-payment-icon {
	display: inline-flex;
	color: var(--epcart-text);
}

.epcart-payment-icon svg {
	width: 26px;
	height: 26px;
}

.epcart-payment-icon--pix { color: #32bcad; }
.epcart-payment-icon--boleto { color: #e8e8e8; }

.epcart-payment-label {
	font-size: 10.5px;
	line-height: 1.2;
	color: var(--epcart-muted);
}

/* Compra segura */
.epcart-secure {
	display: flex;
	align-items: center;
	gap: 12px;
}

.epcart-secure-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--epcart-accent);
}

.epcart-secure-icon svg {
	width: 30px;
	height: 30px;
}

.epcart-secure-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.epcart-secure-text span {
	font-size: 12.5px;
	color: var(--epcart-muted);
	line-height: 1.35;
}

/* =========================================================================
 * Você também pode gostar (cabeçalho + ajustes nos cards eppg-*)
 * ========================================================================= */
.epcart-reco {
	margin-top: 32px;
}

.epcart-reco-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.epcart-reco-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.epcart-reco-subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--epcart-muted);
}

.epcart-reco-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--epcart-accent);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.epcart-reco-more:hover {
	color: var(--epcart-accent-hover);
}

.epcart-reco-more svg {
	width: 16px;
	height: 16px;
}

/* A grade de recomendação usa o wrapper do Product Grid; removemos o padding
   lateral herdado para alinhar com o restante do carrinho. */
.epcart-reco .eppg-wrapper {
	padding-left: 0;
	padding-right: 0;
}

/* 8 colunas fixas por padrão. As colunas têm largura fixa (1fr repetido),
   então mesmo com 1 item ele ocupa 1/8 da largura e alinha à esquerda — não
   estica para preencher a linha. (o controle do Elementor pode sobrescrever) */
.epcart-reco .eppg-grid {
	--eppg-cols: 8;
	--eppg-gap: 22px;
	justify-content: start;
	justify-items: stretch;
}

/* Os cards de recomendação usam a marcação e o CSS do Product Grid (eppg-*):
   categoria + preço SOBRE a capa, botão de carrinho circular e título abaixo.
   Herdamos tudo do product-grid.css para ficar IDÊNTICO ao widget de grade.
   Único ajuste: título um pouco menor nesta seção. */
.epcart-reco .eppg-wrapper .eppg-title {
	font-size: 13.5px;
}

/* Aviso (Woo inativo / sem itens) no editor. */
.epcart-notice {
	padding: 16px 18px;
	border: 1px dashed var(--epcart-border, #232b39);
	border-radius: 10px;
	color: #9aa4b2;
	background: rgba(255, 255, 255, .02);
	font-size: 14px;
}

/* =========================================================================
 * Responsivo
 *
 * Importante: a grade de recomendação (.epcart-reco .eppg-grid) tem
 * especificidade maior que as media queries do product-grid.css, então
 * PRECISAMOS redefinir --eppg-cols aqui por breakpoint — senão ficaria com 8
 * colunas até no celular. Os valores do controle do Elementor (responsivos)
 * têm especificidade de {{WRAPPER}} e sobrescrevem estes fallbacks.
 * ========================================================================= */

/* ── Notebooks / telas médias ──────────────────────────────────────────── */
@media (max-width: 1200px) {
	.epcart-reco .eppg-grid { --eppg-cols: 6; }
}

/* ── Tablet (a coluna lateral desce e vira uma faixa horizontal) ────────── */
@media (max-width: 1024px) {
	.epcart-body {
		grid-template-columns: 1fr;
	}

	.epcart-aside {
		position: static;
		/* Resumo ocupa a linha toda; pagamentos e segurança lado a lado. */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		align-items: start;
	}

	.epcart-summary {
		grid-column: 1 / -1;
	}

	.epcart-reco .eppg-grid { --eppg-cols: 5; }
}

/* ── Tablet estreito / paisagem de celular ─────────────────────────────── */
@media (max-width: 820px) {
	.epcart-reco .eppg-grid { --eppg-cols: 4; }
}

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.epcart-title {
		font-size: 22px;
	}

	.epcart-subtitle {
		font-size: 13px;
	}

	.epcart-header-icon svg {
		width: 30px;
		height: 30px;
	}

	/* Cabeçalho empilha; "Continuar comprando" vira largura total. */
	.epcart-header {
		gap: 12px;
	}

	.epcart-continue {
		width: 100%;
		justify-content: center;
	}

	/* Coluna lateral volta a empilhar (uma coisa embaixo da outra). */
	.epcart-aside {
		grid-template-columns: 1fr;
	}

	/* Painéis com menos padding para ganhar espaço. */
	.epcart-summary,
	.epcart-payments,
	.epcart-secure {
		padding: 16px;
	}

	/* --------------------------------------------------------------------
	 * MOBILE: cada item vira um CARD elegante.
	 *
	 *   +--------------------------------------------------+
	 *   | [capa]  Título do produto               (X)      |
	 *   |         Categoria                                |
	 *   |         Preço unitário                           |
	 *   |  ----------------------------------------------  |
	 *   |  [ −  N  + ]                 Subtotal  R$ 00,00   |
	 *   +--------------------------------------------------+
	 * ------------------------------------------------------------------ */

	/* A "tabela" perde a moldura única; cada linha é um card independente. */
	.epcart-table {
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.epcart-table-head {
		display: none !important;
	}

	.epcart-rows {
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-height: 68vh;
		padding-right: 2px; /* respiro para a barra de rolagem */
	}

	.epcart-wrapper .epcart-row {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"product product"
			"price   price"
			"qty     subtotal";
		gap: 4px 12px;
		padding: 14px;
		background: var(--epcart-surface);
		border: 1px solid var(--epcart-border);
		border-radius: var(--epcart-radius);
	}

	/* Bloco capa + título/categoria. */
	.epcart-col--product {
		grid-area: product;
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding-right: 34px; /* espaço para o X no canto */
	}

	.epcart-col--product .epcart-thumb {
		width: 80px;
		height: 110px;
	}

	.epcart-product-title {
		font-size: 14.5px;
	}

	/* Preço unitário: etiqueta alinhada com o texto (após a capa). */
	.epcart-col--price {
		grid-area: price;
		margin-left: 92px; /* 80 capa + 12 gap */
		font-size: 13.5px;
		color: var(--epcart-text);
	}

	.epcart-col--price::before {
		content: attr(data-label) ": ";
		color: var(--epcart-muted);
		font-size: 12px;
		font-weight: 500;
		margin-right: 3px;
	}

	/* Divisória contínua acima da barra inferior (full width do card). */
	.epcart-wrapper .epcart-row::after {
		content: "";
		grid-column: 1 / -1;
		grid-row: 3;
		align-self: start;
		height: 1px;
		margin-top: 2px;
		background: var(--epcart-border);
	}

	/* Barra inferior: stepper à esquerda. */
	.epcart-col--qty {
		grid-area: qty;
		display: flex;
		align-items: center;
		margin-top: 12px;
	}

	/* Subtotal à direita, na mesma barra. */
	.epcart-col--subtotal {
		grid-area: subtotal;
		justify-self: end;
		align-self: center;
		text-align: right;
		font-size: 16px;
		font-weight: 700;
		white-space: nowrap;
		margin-top: 12px;
	}

	.epcart-col--subtotal::before {
		content: attr(data-label) ": ";
		color: var(--epcart-muted);
		font-size: 12px;
		font-weight: 500;
		margin-right: 5px;
	}

	/* Botão remover: X no canto superior direito do card. */
	.epcart-col--remove {
		position: absolute;
		top: 10px;
		right: 10px;
		justify-content: flex-end;
	}

	/* Cabeçalho da seção de recomendação empilha ("Ver mais" embaixo). */
	.epcart-reco-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.epcart-reco-title {
		font-size: 20px;
	}

	/* Mobile: 2 colunas × 3 linhas = 6 produtos (o excedente é escondido). */
	.epcart-reco .eppg-grid { --eppg-cols: 2; }

	.epcart-reco .eppg-grid > .eppg-card:nth-child(n+7) {
		display: none !important;
	}

	/* Formas de pagamento: ícones um pouco mais compactos. */
	.epcart-payments-list {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}

	/* Rolagem interna dos itens cresce um pouco (tela pequena aproveita mais). */
	.epcart-rows {
		max-height: 70vh;
	}
}

/* ── Celular estreito ──────────────────────────────────────────────────── */
@media (max-width: 400px) {
	.epcart-reco .eppg-grid { --eppg-cols: 2; }
}

/* Reduz o movimento para quem prefere (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
	.epcart-wrapper * {
		transition: none !important;
		animation: none !important;
	}
}