/*#########################*/
/*#### CATEGORY GRID */
/*#########################*/
#product-category {
	padding: 20px 0;
}

#product-category .listing-interface {
	border-top: 2px solid #dee2e6;
	border-bottom: 2px solid #dee2e6;
	padding: 20px 0;
	margin-bottom: 30px;
	margin-top: 20px;
}

#product-category #display-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

#product-category #display-control .col-md-4,
#product-category #display-control .col-md-2,
#product-category #display-control .col-6 {
	padding: 0 10px;
}

#product-category #display-control .input-group {
	display: flex;
	align-items: center;
}

#product-category #display-control .input-group-text {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-right: none;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

#product-category #display-control .form-select {
	border-left: none;
	padding: 8px 12px;
	font-size: 14px;
}

#product-category #display-control .form-select:focus {
	border-color: #007bff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#product-category #product-list {
	margin-bottom: 30px;
}

#product-category #product-list .col {
	margin-bottom: 25px;
}

/* Results and Pagination */
#product-category .results-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-top: 1px solid #dee2e6;
	margin-top: 30px;
}

#product-category .results-pagination .results {
	font-size: 14px;
	color: #6c757d;
}

#product-category .results-pagination .pagination {
	margin: 0;
}

/* View Toggle Buttons */
.view-toggle {
	display: flex;
	gap: 8px;
}

.view-toggle button {
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.view-toggle button:hover,
.view-toggle button.active {
	background: #007bff;
	color: #fff;
	border-color: #007bff;
}

/* Responsive */
@media (max-width: 768px) {
	#product-category #display-control {
		flex-direction: column;
	}
	
	#product-category #display-control > div {
		width: 100%;
	}
	
	#product-category #display-control .input-group {
		width: 100%;
	}
	
	#product-category #product-list {
		margin: 0 -10px;
	}
	
	#product-category #product-list .col {
		padding: 0 10px;
	}
}