/*
 * Products page (page 2081) category tile grid.
 *
 * The page's Elementor data sets every category tile container to width 25%,
 * but that data was authored programmatically and Elementor 4.1.4 emits no
 * --width declaration for it. Above 767px the tiles therefore carry no width
 * constraint at all (flex: 0 1 auto), so each tile fills the row and all 31
 * category tiles stack vertically.
 *
 * This restores the authored four-across grid using Elementor's own --width
 * custom property, subtracting the container's 20px column gap so the row
 * fits exactly four tiles. It steps down to three and then two columns at
 * 1200px and 860px, the same breakpoints nt-design.css already uses.
 *
 * Scoped to the three tile rows on this page only. No other page, template
 * or element is affected.
 */

.elementor-2081 .elementor-element-196a5c7 > .e-con-inner > .e-con,
.elementor-2081 .elementor-element-8b55ba3 > .e-con-inner > .e-con,
.elementor-2081 .elementor-element-b3beb64 > .e-con-inner > .e-con {
	--width: calc( ( 100% - ( var( --column-gap, 20px ) * 3 ) ) / 4 );
}

@media (max-width: 1200px) {

	.elementor-2081 .elementor-element-196a5c7 > .e-con-inner > .e-con,
	.elementor-2081 .elementor-element-8b55ba3 > .e-con-inner > .e-con,
	.elementor-2081 .elementor-element-b3beb64 > .e-con-inner > .e-con {
		--width: calc( ( 100% - ( var( --column-gap, 20px ) * 2 ) ) / 3 );
	}
}

@media (max-width: 860px) {

	.elementor-2081 .elementor-element-196a5c7 > .e-con-inner > .e-con,
	.elementor-2081 .elementor-element-8b55ba3 > .e-con-inner > .e-con,
	.elementor-2081 .elementor-element-b3beb64 > .e-con-inner > .e-con {
		--width: calc( ( 100% - var( --column-gap, 20px ) ) / 2 );
	}
}