/**
 * Shop grid 2/3 column toggle.
 *
 * Default shop archive layout is 3 columns on desktop. When the visitor
 * picks the 2-column view, JS adds .gp-cols-2 to <ul class="products"> and
 * we override the grid. Mobile (<=600px) and tablet (<=992px) responsive
 * layouts are untouched — the toggle only applies at desktop widths.
 */

/* Toggle control in the shop toolbar */
.gp-cols-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.gp-cols-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	color: #7c7c7c;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.gp-cols-toggle__btn + .gp-cols-toggle__btn {
	margin-left: -1px;
}

.gp-cols-toggle__btn:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.gp-cols-toggle__btn:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.gp-cols-toggle__btn:hover {
	color: #191919;
	border-color: #c9c9c9;
}

.gp-cols-toggle__btn.is-active {
	color: #191919;
	background: #f2f2f2;
	border-color: #191919;
	position: relative;
	z-index: 1;
}

.gp-cols-toggle__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* 2-column override — desktop only, mirror the theme's 993px breakpoint.
   Higher specificity than the default grid rule so it wins. */
@media (min-width: 993px) {
	body.woocommerce ul.products.gp-cols-2,
	body.woocommerce-page ul.products.gp-cols-2 {
		grid-template-columns: repeat(2, minmax(10px, 1fr));
	}

	/* Fallback for the float-based width classes the theme applies. */
	ul.products.gp-cols-2 li.product {
		width: 49.9%;
	}
}