/**
 * Home/Categorias com imagem — Figma 259:1670 / 270:13546.
 *
 * Desktop: padding 48/24 · gap 24 · título Heading Medium 24/1.2 (600)
 *   6 colunas iguais, gap 24 · foto quadrada, raio radius-card · nome Label 16, gap 16.
 *   A foto da categoria preenche o quadro (object-fit: cover sobre um arquivo sem recorte no PHP).
 * Mobile (< 782px): padding 32/16 · linha com rolagem lateral · itens 112 px, gap 12.
 */

.cdw-categorias__conteiner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-24);
	max-width: var(--wp--custom--layout--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--space-48) var(--wp--preset--spacing--space-24);
}

.cdw-categorias__titulo {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	/* Figma: font-size/heading-md = 24 neste componente. */
	font-size: 1.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.2;
}

.cdw-categorias__lista {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-categorias__item {
	min-width: 0;
	margin: 0;
}

.cdw-categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-categoria__foto {
	display: block;
	overflow: hidden;
	width: 100%;
	/* Vem de Sua Loja › Produtos › Fotos. Sem escolha: quadrada. */
	aspect-ratio: var(--cdw-categoria-proporcao, 1 / 1);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-categoria__img {
	display: block;
	width: 100%;
	height: 100%;
	/* A foto PREENCHE o quadro inteiro, seja qual for o tamanho enviado: o que sobrar é cortado
	   por igual dos dois lados. O arquivo vem sem recorte do PHP, então o corte é só este. */
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

.cdw-categoria__nome {
	max-width: 100%;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-categoria:hover .cdw-categoria__img {
	transform: scale(1.04);
}

.cdw-categoria:hover .cdw-categoria__nome {
	color: var(--wp--preset--color--brand-text);
}

@media (max-width: 781px) {
	.cdw-categorias__conteiner {
		padding: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-16);
	}

	.cdw-categorias__lista {
		display: flex;
		gap: 12px;
		margin-inline: calc(-1 * var(--wp--preset--spacing--space-16));
		padding-inline: var(--wp--preset--spacing--space-16);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--space-16);
		scrollbar-width: none;
	}

	.cdw-categorias__lista::-webkit-scrollbar {
		display: none;
	}

	.cdw-categorias__item {
		flex: 0 0 112px;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-categoria__img {
		transition: none;
	}
}