/* Products columns */
.products-columns{
	display:flex;
	align-items:center;
	margin-left:auto;
}

/* hide real radios */
.columns-select input[type="radio"]{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

/* labels are the icons */
.columns-select label{
	display:inline-block;
	cursor:pointer;
	padding: 5px 8px;
}

/* the “square” icon */
.columns-select label::before{
	content:'';
	background-color:var(--border-color-dark);
	width:21px;
	height:19px;
	display:inline-block;
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-size:contain;
	mask-size:contain;
	transition:var(--transition);
}

/* icons per value */
.columns-select label[data-cols="2"]::before{
	-webkit-mask-image:url('../../../icons/grid-filled-2.svg');
	mask-image:url('../../../icons/grid-filled-2.svg');
}
.columns-select label[data-cols="3"]::before{
	-webkit-mask-image:url('../../../icons/grid-filled-3.svg');
	mask-image:url('../../../icons/grid-filled-3.svg');
}
.columns-select label[data-cols="4"]::before{
	-webkit-mask-image:url('../../../icons/grid-filled-4.svg');
	mask-image:url('../../../icons/grid-filled-4.svg');
}

/* checked / hover state – use sibling selector */
.columns-select input[type="radio"]:checked + label::before,
.columns-select label:hover::before{
	background-color:var(--color-text);
}

@media screen and (max-width: 992px){
	.products-per-page,
	.products-columns{
		display: none;
	}
}