/* ═══════════════════════════════════════════════════════════════
   Mel Puro (categoria "meis-puros") — landing page dedicada
   (mobile-first). Usa as variáveis de cor e o card de produto
   (.bestsellers-card) já existentes na home — ver home.css. Sem
   tokens/paleta próprios. Bloco B2B reaproveita o componente real
   .b2b-banner* (também de home.css) via get_template_part.

   O filtro de florada vive na sidebar (.loja-layout__sidebar), a
   mesma estrutura da /loja/ e do template genérico, e usa a marcação
   de widget (.shop-filter-widget) — por isso não há estilo de filtro
   aqui: ele vem pronto de woocommerce.css.
   ═══════════════════════════════════════════════════════════════ */

.page-shell--mel {
	background: var(--supramel-color-bg);
}

/* ── Grid de produtos ─────────────────────────────────────────────
   Reaproveita .bestsellers-card da home (mesmo componente/estilo).
   O card não tem largura própria: ela vem 100% da coluna do grid.

   Na home o grid ocupa os 1200px do container e roda em 4 colunas,
   dando um card de ~285px. Aqui ele divide a linha com a sidebar de
   filtros, então sobram ~904px — em 4 colunas o card cairia para
   ~211px (menor que o da home, com a foto encolhendo junto). Em 3
   colunas dá ~288px, praticamente o mesmo card da home. Por isso as
   3 colunas aqui não são preferência: são o que mantém o card no
   tamanho para o qual foi desenhado. */

@media (min-width: 901px) {
	.bestsellers-grid.mel-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Abaixo de 901px a .loja-layout já colapsa para uma coluna só
   (woocommerce.css) e a sidebar passa a ficar acima do grid. Uma lista
   vertical de floradas ali empurraria os produtos ~150px para baixo, e
   quebrar em duas linhas ainda custa uma linha a mais — então a faixa
   vira carrossel horizontal e ocupa uma linha só, role para ver o
   resto. Mesmo comportamento dos outros carrosséis do tema. */
@media (max-width: 900px) {
	.shop-filter-widget--florada ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Ver as notas em .cat-grid (home.css): prende o arrasto à faixa,
		   e impede que o transbordo dos itens conte para a área rolável
		   do documento no WebKit do iOS — sem isto a página inteira passa
		   a rolar de lado. */
		overscroll-behavior-x: contain;
		contain: paint;
		/* O overflow-x recorta também na vertical: sem folga, o anel de
		   foco do link sai cortado em cima e embaixo. */
		padding-block: 0.25rem;
		gap: 1.25rem;
		scrollbar-width: none;
	}

	.shop-filter-widget--florada ul::-webkit-scrollbar {
		display: none;
	}

	.shop-filter-widget--florada li {
		flex: 0 0 auto;
	}

	.shop-filter-widget--florada li a {
		white-space: nowrap;
	}
}

/* home.css transforma .bestsellers-grid num carrossel horizontal
   (display:flex) abaixo de 767px — aqui é uma listagem de categoria
   com paginação, não um carrossel de destaque, então volta a ser
   grid estático de 2 colunas nesse breakpoint (mesmo tratamento
   aplicado em Própolis e Cera de Abelha). */
@media (max-width: 767px) {
	.bestsellers-grid.mel-product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		flex-wrap: wrap;
		overflow-x: visible;
		scroll-snap-type: none;
		padding: 0.5rem 0 1rem;
	}

	.bestsellers-grid.mel-product-grid .bestsellers-card {
		flex: unset;
		max-width: none;
		scroll-snap-align: none;
	}
}

.bestsellers-card__btn[aria-disabled="true"] {
	background: var(--supramel-color-border);
	color: var(--supramel-color-text-soft);
	cursor: not-allowed;
	pointer-events: none;
}