/**
 * Llama - Shop Category Grouping layout.
 *
 * Scoped to the Loop Grid only. Does not override the outer loop container
 * display; groups span full width inside Elementor's grid via grid-column.
 * Inner product grids reuse Elementor grid classes copied from the loop container.
 */

.elementor-widget-loop-grid .elementor-loop-container.llama-grouped > .llama-group,
.elementor-widget-loop-grid .elementor-loop-container.llama-grouped > .e-load-more-anchor {
	grid-column: 1 / -1;
}

.llama-group {
	display: block;
	margin: 0 0 var( --llama-section-spacing, 1.5rem );
	background: var( --llama-group-bg, transparent );
}

.llama-group__title {
	margin: 0 0 0.5rem;
	font-size: var( --llama-parent-size, 1.125rem );
	line-height: 1.3;
	font-weight: 600;
	color: var( --llama-parent-color, inherit );
}

.llama-subgroup {
	display: block;
	margin: 0 0 var( --llama-child-spacing, 1rem );
}

.llama-subgroup__title {
	margin: 0 0 0.5rem;
	font-size: var( --llama-child-size, 1rem );
	line-height: 1.35;
	font-weight: 500;
	color: var( --llama-child-color, inherit );
}

/* Fallback when Elementor grid classes are unavailable on the container. */
.llama-grid.llama-grid--fallback-columns {
	display: grid;
	grid-template-columns: repeat( var( --llama-columns, 3 ), minmax( 0, 1fr ) );
	gap: var( --llama-grid-gap, 24px );
}

/* When Elementor grid classes are present, let Elementor + theme CSS define columns. */
.llama-grid.elementor-grid {
	display: grid;
	gap: var( --llama-grid-gap, var( --grid-row-gap, 24px ) ) var( --llama-grid-gap, var( --grid-column-gap, 24px ) );
}

.llama-grid > .e-loop-item {
	margin: 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

@media ( max-width: 767px ) {
	.llama-grid.llama-grid--fallback-columns {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 479px ) {
	.llama-grid.llama-grid--fallback-columns {
		grid-template-columns: 1fr;
	}
}