.loop-produtos {
	padding: var(--spacing-lg) 0;
}

.loop-produtos__layout {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-lg, 40px);
}

/* Sidebar */
.loop-produtos__sidebar {
	flex: 0 0 350px;
	background: var(--cor-branco);
	padding: 24px;
	border-radius: var(--radius-sm, 5px);
}

/* Fora de uma página de categoria (sem termo resolvido): um grupo (pai +
   filhas) por categoria de nível 1, empilhados — ver
   act_render_loop_produtos_sidebar(). */
.loop-produtos__sidebar--all {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 24px);
}

.loop-produtos__sidebar--all .loop-produtos__sidebar-group {
	padding-bottom: var(--spacing-md, 24px);
	border-bottom: 1px solid #e5e5e5;
}

.loop-produtos__sidebar--all .loop-produtos__sidebar-group:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.loop-produtos__sidebar-parent {
	display: block;
	margin-bottom: 16px;
	font-weight: 700;
	font-size: var(--fs-5);
	text-decoration: none;
}

.loop-produtos__sidebar-parent .categoria-titulo__destaque {
	color: var(--cor-principal, #6c0a09);
}

/* Fora de uma página de categoria, o título vira botão de expandir/recolher
   (ver act_render_loop_produtos_sidebar_group()) — reset dos estilos padrão
   de <button> pra continuar igual ao link, + seta indicando o estado. */
.loop-produtos__sidebar-parent--toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
}

.loop-produtos__sidebar-parent--toggle::after {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--cor-secundaria, #bb423b);
	border-bottom: 2px solid var(--cor-secundaria, #bb423b);
	transform: rotate(45deg);
	transition: transform var(--transition-fast);
}

.loop-produtos__sidebar-parent--toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.loop-produtos__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Sem isso, o "display:flex" acima venceria o "display:none" que o
   atributo [hidden] normalmente aplicaria (regra do autor sempre vence a
   padrão do navegador) — a lista ficava com display:flex mesmo "escondida",
   quebrando o expandir/recolher do modo "todas as categorias". */
.loop-produtos__sidebar-list[hidden] {
	display: none;
}

.loop-produtos__sidebar-item a {
	font-weight: 700;
	font-size: var(--fs-7);
	color: var(--cor-destaque-secundaria);
	text-decoration: none;
}

.loop-produtos__sidebar-item a:hover {
	opacity: 0.8;
}

.loop-produtos__sidebar-item--current {
	display: flex;
	align-items: center;
	gap: 8px;
}

.loop-produtos__sidebar-item--current a {
	color: var(--cor-secundaria, #bb423b);
}

.loop-produtos__sidebar-arrow {
	display: inline-flex;
	color: var(--cor-secundaria, #bb423b);
	flex-shrink: 0;
}

/* Main area */
.loop-produtos__main {
	flex: 1 1 0;
	min-width: 0;
}

.loop-produtos__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: rgba(0, 0, 0, .06);
	margin-bottom: 24px;
}

.loop-produtos__select {
	flex: 1 1 200px;
	background: var(--cor-branco);
}

.loop-produtos__select select {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 14px 18px;
	font-size: 1.125rem;
	color: var(--cor-destaque-secundaria);
	appearance: none;
	cursor: pointer;
}

.loop-produtos__count {
	font-size: 1.125rem;
	color: var(--cor-destaque-secundaria);
	margin: 0 0 24px;
}

.loop-produtos__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

.loop-produtos__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.loop-produtos__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.loop-produtos__grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.loop-produtos__grid--cols-6 {
	grid-template-columns: repeat(6, 1fr);
}

.loop-produtos-card {
	display: block;
	background: var(--cor-branco);
	border-radius: var(--radius-sm, 5px);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--transition-fast);
}

.loop-produtos-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.loop-produtos-card__swatch {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--cor-extra);
}

.produto-swatch__color,
.loop-produtos-card__swatch img,
.produto-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loop-produtos-card__title {
	display: block;
	padding: 16px 12px;
	text-align: center;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--cor-destaque-secundaria);
}

.loop-produtos-empty {
	padding: var(--spacing-lg);
	background: var(--cor-branco);
	border-radius: var(--radius-sm);
	text-align: center;
	color: #757575;
}

.loop-produtos__pagination {
	margin-top: 32px;
}

.loop-produtos__pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.loop-produtos__pagination a,
.loop-produtos__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	background: var(--cor-branco);
	border-radius: var(--radius-sm, 4px);
	color: var(--cor-destaque-secundaria);
	text-decoration: none;
}

.loop-produtos__pagination .current {
	background: var(--cor-secundaria, #bb423b);
	color: var(--cor-branco);
}

@media (max-width: 991px) {
	.loop-produtos__layout {
		flex-direction: column;
	}

	.loop-produtos__sidebar {
		flex-basis: auto;
		width: 100%;
	}

	.loop-produtos__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 576px) {
	.loop-produtos__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.loop-produtos__select {
		flex-basis: 100%;
	}
}