/* A&H Shop Toolbar. Same controls as the product page (ah-product-page): light grey track #f2f5f7, the chosen one dark #192a3d.
   Elementor's kit gives plain buttons Roboto, so the font is set explicitly. */

.woo-listing-top {
	flex-wrap: wrap;
	row-gap: 10px;
}

.woo-listing-top .ah-st-cats {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: #f2f5f7;
	color: #192a3d;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.woo-listing-top .ah-st-cats[hidden] {
	display: none;
}
.woo-listing-top .ah-st-cats svg {
	flex: none;
}
.woo-listing-top .ah-st-cats:active {
	transform: scale(0.97);
}
@media (hover: hover) {
	.woo-listing-top .ah-st-cats:hover {
		background: #e4eaee;
	}
}

.woo-listing-top .ah-st-view {
	display: none;
	gap: 2px;
	padding: 3px;
	border-radius: 9px;
	background: #f2f5f7;
}
.woo-listing-top .ah-st-view button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #3a4f66;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
/* Chosen state from the html attribute, so it is right before the script runs. */
.woo-listing-top .ah-st-view [data-cols="1"],
html[data-ah-cols="2"] .woo-listing-top .ah-st-view [data-cols="2"] {
	background: #192a3d;
	color: #fff;
}
html[data-ah-cols="2"] .woo-listing-top .ah-st-view [data-cols="1"] {
	background: transparent;
	color: #3a4f66;
}

.woo-listing-top .ah-st-cats:focus-visible,
.woo-listing-top .ah-st-view button:focus-visible {
	outline: 2px solid #192a3d;
	outline-offset: 2px;
}

/* Phones (Blocksy's phone breakpoint): controls in one row, the result count under them, and the optional second column. */
@media (max-width: 689.98px) {
	.woo-listing-top {
		gap: 8px;
	}
	.woo-listing-top .ah-st-view {
		display: inline-flex;
		margin-inline-start: auto;
	}
	.woo-listing-top .ah-st-view + .woocommerce-ordering {
		margin-inline-start: 0;
	}
	.woo-listing-top .woocommerce-ordering select {
		width: 38px;
		height: 38px;
		border: 0;
		border-radius: 9px;
		background-color: #f2f5f7;
	}
	.woo-listing-top .woocommerce-ordering .ct-sort-icon {
		color: #3a4f66;
	}
	.woo-listing-top .woocommerce-result-count {
		order: 5;
		flex-basis: 100%;
		font-size: 13px;
	}

	html[data-ah-cols="2"] [data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		--grid-columns-gap: 12px;
		--grid-rows-gap: 24px;
		row-gap: 24px;
	}
	html[data-ah-cols="2"] [data-products] .woocommerce-loop-product__title {
		margin-bottom: 4px;
		font-size: 14px;
		line-height: 1.4;
	}
	html[data-ah-cols="2"] [data-products] .price {
		font-size: 14px;
	}
	/* Badges (sale, hot, new) and the quick view eye follow the smaller picture: Blocksy's own badge variables, closer to the
	   corner and smaller text. One per row keeps Blocksy's sizes. */
	html[data-ah-cols="2"] [data-products] .ct-woo-badges {
		top: 8px;
		inset-inline-start: 8px;
		gap: 4px;
	}
	html[data-ah-cols="2"] [data-products] :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
		--badge-top: 8px;
		--badge-left: 8px;
		--badge-height: 20px;
		--badge-min-width: 0px;
		--badge-padding: 2px 6px;
		--theme-font-size: 10px;
		--theme-line-height: 1;
	}
	html[data-ah-cols="2"] [data-products] .ct-woo-card-extra {
		top: 8px;
		inset-inline-end: 8px;
	}
	/* The quick view eye, smaller and still a circle: live sets a 32px minimum height on it, so every size is set. */
	html[data-ah-cols="2"] [data-products] .ct-woo-card-extra .ct-button {
		--theme-button-min-height: 28px;
		width: 28px;
		min-width: 28px;
		height: 28px;
		min-height: 28px;
		padding: 0;
	}
}

[data-products].ah-st-swap {
	animation: ah-st-swap 0.22s ease-out;
}
@keyframes ah-st-swap {
	from { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
	[data-products].ah-st-swap {
		animation: none;
	}
}