/* Grelha — !important para vencer a regra do Easy Posts do Oxygen
   (`#_posts_grid-… > .oxy-posts` tem especificidade de ID). O Oxygen impõe:
   12 colunas, `grid-auto-rows: minmax(min-content,1fr)` e `align-items:stretch`,
   que esticam as linhas e criam um efeito "masonry" com cartões de alturas
   desiguais. Anulamos tudo para ter uma grelha normal e regular. */
.oxy-posts {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	grid-auto-rows: auto !important;   /* linha = altura do conteúdo (sem 1fr a esticar) */
	align-items: start !important;     /* cartão não estica até à altura da linha */
	gap: 24px !important;
}

/* O Easy Posts atribui a cada item `grid-column: span N` E `grid-row: span N`
   variáveis (ex.: span 6/span 4 colunas, span 4/span 2/span 3 linhas) → é isto que
   cria o efeito "masonry". Anular AMBOS para cada cartão ocupar 1 célula igual. */
.oxy-posts > .ls-card {
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Título com altura reservada p/ 2 linhas → as linhas da grelha alinham mesmo
   quando uns títulos têm 1 linha e outros 2. */
.ls-card__title {
	min-height: 2.6em;
}

.ls-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ls-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }

.ls-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-color: #f5f5f5;
}

.ls-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ls-card__title { font-weight: 600; color: #1a1a1a; text-decoration: none; line-height: 1.3; }
.ls-card__title:hover { color: #000; }
.ls-card__price { color: #555; font-size: .95rem; }
.ls-card__price del { opacity: .6; margin-right: .35em; }
.ls-card__price ins { text-decoration: none; font-weight: 600; }

.ls-card__btn {
	margin-top: auto;
	display: inline-block;
	text-align: center;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--ppc-accent, #2abfb0);
	color: #fff;
	text-decoration: none;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.ls-card__btn:hover { filter: brightness(.95); }

.view-more-button[data-loading="1"] { opacity: .7; pointer-events: none; }