/**
 * WooCommerce Hierarchical Category Navigation
 * Grid styling for the child-category cards, scoped to a unique ID
 * (#wc-hcn-grid) so it reliably beats theme rules that target the
 * generic "ul.products li.product" markup WooCommerce themes normally
 * style with their own float/width/margin rules. ID + !important is
 * about the strongest override you can get without inline styles.
 */

#wc-hcn-grid.wc-hcn-category-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px !important;
	list-style: none !important;
	margin: 0 0 2em !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}

#wc-hcn-grid > li.wc-hcn-category-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: center !important;
	box-sizing: border-box !important;
	clear: none !important;
	position: relative !important;
}

#wc-hcn-grid .wc-hcn-category-link {
	display: block !important;
	text-decoration: none !important;
	color: inherit !important;
	width: 100% !important;
}

#wc-hcn-grid .wc-hcn-category-thumb {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	margin: 0 0 0.75em !important;
	float: none !important;
}

#wc-hcn-grid .wc-hcn-category-name {
	font-size: 1.05em !important;
	margin: 0 0 0.25em !important;
	line-height: 1.3 !important;
}

#wc-hcn-grid .wc-hcn-category-count {
	display: block !important;
	font-size: 0.85em !important;
	opacity: 0.7 !important;
}

/* Small desktops / large tablets: 3 per row */
@media (max-width: 1024px) {
	#wc-hcn-grid.wc-hcn-category-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 20px !important;
	}
}

/* Mobile and small tablets: exactly 2 per row, always. This rule comes
   last and its max-width is the smallest, so it wins on real phones
   regardless of what the 1024px rule above set. */
@media (max-width: 640px) {
	#wc-hcn-grid.wc-hcn-category-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
		padding: 0 !important;
	}

	#wc-hcn-grid .wc-hcn-category-name {
		font-size: 0.95em !important;
	}

	#wc-hcn-grid .wc-hcn-category-count {
		font-size: 0.8em !important;
	}
}

/* Very small phones: still 2 columns, just a tighter gap */
@media (max-width: 360px) {
	#wc-hcn-grid.wc-hcn-category-grid {
		gap: 10px !important;
	}
}