/* ═══════════════════════════════════════
   BLUENET — Shop / product archive CSS
   (Loaded only on shop + product taxonomies.)
═══════════════════════════════════════ */

/* ── Hide "Shop" heading ── */
.woocommerce-products-header,
.woocommerce-products-header__title,
h1.woocommerce-products-header__title {
	display: none !important;
}

/* ── Toolbar: hide result count (also removed in PHP); style sort ── */
.woocommerce-result-count {
	display: none !important;
}

.woocommerce-ordering select {
	font-size: 12px !important;
	border: 0.5px solid #e5e5e5 !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	color: #0d1f3c !important;
}

/*
 * Two-column layout: #primary and #secondary are siblings inside
 * .site-content > .ast-container (Astra + WooCommerce). Flex on .site-main
 * would not wrap the sidebar.
 */
body.ast-woo-shop-archive .site-content > .ast-container {
	display: flex !important;
	gap: 22px !important;
	align-items: flex-start !important;
	min-height: 80vh !important;
}

/* ── Left / right sidebar column ── */
body.woocommerce .woocommerce-sidebar,
body.ast-woo-shop-archive #secondary,
body.post-type-archive-product #secondary,
.woocommerce-page #secondary {
	width: 260px !important;
	min-width: 260px !important;
	flex-shrink: 0 !important;
	position: sticky !important;
	top: 16px !important;
}

/* ── Main column: drop Astra sidebar divider, flush layout ── */
body.ast-woo-shop-archive #primary.content-area.primary,
body.ast-woo-shop-archive #primary {
	border: 0 !important;
	border-left: none !important;
	border-right: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Astra “separate container” adds heavy padding here — keep shop grid compact */
body.ast-woo-shop-archive #primary .ast-woocommerce-container {
	padding: 0 !important;
}

/* ── Sidebar column: remove extra shell padding (widgets keep their own) ── */
body.ast-woo-shop-archive #secondary.widget-area.secondary,
body.ast-woo-shop-archive #secondary {
	padding: 0 !important;
	margin: 0 !important;
	border: 0;
}

body.ast-woo-shop-archive #secondary .sidebar-main {
	padding: 0 !important;
	margin: 0 !important;
}

/* ── WOOF Products Filter — Reset + Filter row ── */
body.ast-woo-shop-archive #secondary .woof_submit_search_form,
.woocommerce-page #secondary .woof_submit_search_form {
	display: none !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container,
.woocommerce-page #secondary .woof_submit_search_form_container {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	margin-top: 10px !important;
	padding: 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container > .button,
.woocommerce-page #secondary .woof_submit_search_form_container > .button {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button.woof_reset_search_form,
.woocommerce-page #secondary .woof_submit_search_form_container button.button.woof_reset_search_form {
	background: #fff !important;
	color: #0d1f3c !important;
	border: 0.5px solid #e5e5e5 !important;
	box-shadow: none !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button.woof_reset_search_form:hover,
.woocommerce-page #secondary .woof_submit_search_form_container button.button.woof_reset_search_form:hover {
	background: #f6f6f4 !important;
	border-color: #c8c8c8 !important;
	color: #0d1f3c !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button.woof_submit_search_form,
.woocommerce-page #secondary .woof_submit_search_form_container button.button.woof_submit_search_form {
	background: #0d1f3c !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(13, 31, 60, 0.14) !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button.woof_submit_search_form:hover,
.woocommerce-page #secondary .woof_submit_search_form_container button.button.woof_submit_search_form:hover {
	background: #1a3460 !important;
	color: #fff !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button.woof_submit_search_form:active,
.woocommerce-page #secondary .woof_submit_search_form_container button.button.woof_submit_search_form:active {
	transform: translateY(1px) !important;
	box-shadow: 0 0 2px rgba(13, 31, 60, 0.12) !important;
}

body.ast-woo-shop-archive #secondary .woof_submit_search_form_container button.button:focus-visible,
.woocommerce-page #secondary .woof_submit_search_form_container button.button:focus-visible {
	outline: 2px solid #0c447c !important;
	outline-offset: 2px !important;
}

/* ── WOOF widget wrapper — Astra adds .ast-woo-sidebar-widget padding/border
       around the filter widget. Strip both so the filter card we style
       ourselves hugs the sidebar edge. Class-based so it applies to every
       WOOF_Widget instance (woof_widget-1, woof_widget-2, …). ── */
body.ast-woo-shop-archive #secondary .ast-woo-sidebar-widget.WOOF_Widget,
body.ast-woo-shop-archive #secondary .widget.WOOF_Widget,
.woocommerce-page #secondary .ast-woo-sidebar-widget.WOOF_Widget,
.woocommerce-page #secondary .widget.WOOF_Widget {
	padding: 0 !important;
	border: 0 !important;
}

/* ── WOOF — tighter list / block spacing (plugin defaults are loose) ── */
body.ast-woo-shop-archive #secondary .woof_redraw_zone,
.woocommerce-page #secondary .woof_redraw_zone {
	margin: 0 !important;
	padding: 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_container,
.woocommerce-page #secondary .woof_container {
	margin-bottom: 6px !important;
	padding-bottom: 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_container_inner,
.woocommerce-page #secondary .woof_container_inner {
	margin: 0 !important;
	padding: 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_list label,
.woocommerce-page #secondary .woof_list label {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	line-height: 1.35 !important;
}

body.ast-woo-shop-archive #secondary ul.woof_list li,
.woocommerce-page #secondary ul.woof_list li {
	margin: 0 0 1px 0 !important;
}

/* ── WOOF — cap filter list height so the sidebar stays clean after the
       user clicks "Show more". Has no visible effect when the list fits
       under the cap (default collapsed state). 320px ≈ 12–13 rows. ── */
body.ast-woo-shop-archive #secondary ul.woof_list,
.woocommerce-page #secondary ul.woof_list {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(13, 31, 60, 0.28) transparent;
}

body.ast-woo-shop-archive #secondary ul.woof_list::-webkit-scrollbar,
.woocommerce-page #secondary ul.woof_list::-webkit-scrollbar {
	width: 6px;
}

body.ast-woo-shop-archive #secondary ul.woof_list::-webkit-scrollbar-track,
.woocommerce-page #secondary ul.woof_list::-webkit-scrollbar-track {
	background: transparent;
}

body.ast-woo-shop-archive #secondary ul.woof_list::-webkit-scrollbar-thumb,
.woocommerce-page #secondary ul.woof_list::-webkit-scrollbar-thumb {
	background-color: rgba(13, 31, 60, 0.22);
	border-radius: 3px;
}

body.ast-woo-shop-archive #secondary ul.woof_list::-webkit-scrollbar-thumb:hover,
.woocommerce-page #secondary ul.woof_list::-webkit-scrollbar-thumb:hover {
	background-color: rgba(13, 31, 60, 0.42);
}

/* Pin "Show more / Show less" to the bottom of the scrollable list so the
   user can always collapse without scrolling. */
body.ast-woo-shop-archive #secondary ul.woof_list li.woof_open_hidden_li,
.woocommerce-page #secondary ul.woof_list li.woof_open_hidden_li {
	position: sticky;
	bottom: 0;
	background: #fff;
	margin-top: 4px !important;
	padding-top: 6px;
	z-index: 1;
	box-shadow: 0 -6px 8px -6px rgba(13, 31, 60, 0.18);
}

/* ── WOOF — local term search injected at the top of expanded lists.
       Added by shop-filter-fix.js; styled here so it visually matches the
       sidebar and stays pinned while the user scrolls the list. ── */
body.ast-woo-shop-archive #secondary ul.woof_list li.bluenet-woof-term-search-li,
.woocommerce-page #secondary ul.woof_list li.bluenet-woof-term-search-li {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
	margin: 0 0 6px 0 !important;
	padding: 4px 0 6px 0;
	list-style: none;
	border-bottom: 1px solid rgba(13, 31, 60, 0.08);
}

body.ast-woo-shop-archive #secondary ul.woof_list .bluenet-woof-term-search,
.woocommerce-page #secondary ul.woof_list .bluenet-woof-term-search {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 28px 6px 10px;
	font-size: 13px;
	line-height: 1.3;
	color: #0d1f3c;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px 14px;
	/* Inline magnifier SVG — no extra HTTP request, brand navy stroke. */
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230d1f3c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22/%3E%3C/svg%3E");
	border: 1px solid rgba(13, 31, 60, 0.2);
	border-radius: 4px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.ast-woo-shop-archive #secondary ul.woof_list .bluenet-woof-term-search:focus,
.woocommerce-page #secondary ul.woof_list .bluenet-woof-term-search:focus {
	border-color: rgba(13, 31, 60, 0.5);
	box-shadow: 0 0 0 2px rgba(13, 31, 60, 0.1);
}

body.ast-woo-shop-archive #secondary ul.woof_list .bluenet-woof-term-search::placeholder,
.woocommerce-page #secondary ul.woof_list .bluenet-woof-term-search::placeholder {
	color: rgba(13, 31, 60, 0.45);
}

/* "No matches" hint while a query is typed. */
body.ast-woo-shop-archive #secondary ul.woof_list li.bluenet-woof-term-search-empty,
.woocommerce-page #secondary ul.woof_list li.bluenet-woof-term-search-empty {
	list-style: none;
	padding: 6px 4px;
	margin: 4px 0 !important;
	color: rgba(13, 31, 60, 0.55);
	font-size: 12px;
	font-style: italic;
}

body.ast-woo-shop-archive #secondary .woof_childs_list,
.woocommerce-page #secondary .woof_childs_list {
	padding: 0 0 0 12px !important;
	margin: 2px 0 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_list_checkbox li div,
.woocommerce-page #secondary .woof_list_checkbox li div {
	margin-top: 0 !important;
}

body.ast-woo-shop-archive #secondary .woof_container_inner h4,
.woocommerce-page #secondary .woof_container_inner h4 {
	margin: 0 0 6px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* ── Shop main content: kill default margins so the products grid hugs the
       sidebar cleanly when the toolbar / search row spans full width. ── */
body.ast-woo-shop-archive #primary.content-area.primary,
.woocommerce-page #primary.content-area.primary {
	margin: 0 0 30px !important;
}

/* ── Shop toolbar: full-width FiboSearch (B2B catalog has no sort dropdown).
       Mobile injects a filter-drawer button in front of the search via CSS
       further below. ── */
.bluenet-shop-toolbar {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px 16px !important;
	margin: 0 0 14px !important;
}

.bluenet-mobile-filter-toggle,
.bluenet-filter-drawer-header,
.bluenet-filter-backdrop {
	display: none;
}

.bluenet-mobile-filter-toggle {
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 9px 14px;
	background: #0d1f3c;
	color: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(13, 31, 60, 0.14);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.bluenet-mobile-filter-toggle__icon {
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%205h18v2H3V5zm4%206h10v2H7v-2zm3%206h4v2h-4v-2z%22/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%205h18v2H3V5zm4%206h10v2H7v-2zm3%206h4v2h-4v-2z%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.bluenet-mobile-filter-toggle__badge {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #0d1f3c;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.bluenet-mobile-filter-toggle__badge[hidden] {
	display: none !important;
}

.bluenet-shop-toolbar__search {
	flex: 1 1 auto !important;
	min-width: 220px !important;
	max-width: none !important;
	width: 100% !important;
	order: 0;
}

/* Make FiboSearch fill the toolbar slot cleanly (override its widget defaults). */
.bluenet-shop-toolbar__search .dgwt-wcas-search-wrapp,
.bluenet-shop-toolbar__search .js-dgwt-wcas-search-wrapp {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.bluenet-shop-toolbar__search .dgwt-wcas-search-form,
.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp {
	margin: 0 !important;
}

/* Tighter input height to align with the sort dropdown. We avoid setting
   line-height equal to height because that interferes with the magnifier's
   auto-centering and pushes the icon off-axis. */
.bluenet-shop-toolbar__search .dgwt-wcas-search-input {
	height: 38px !important;
	line-height: 1.4 !important;
	font-size: 13px !important;
	padding: 0 44px 0 14px !important;
	box-sizing: border-box !important;
}

/* Re-place FiboSearch's submit button (which wraps the magnifier SVG) on the
   LEFT of the input, stripped of its default dark pill so it reads as a plain
   icon. The plugin defaults it to top:0/right:0 with a #333 background. */
.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp {
	position: relative !important;
}

.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	position: absolute !important;
	top: 22px !important;
	right: 22px !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	text-shadow: none !important;
	line-height: 1 !important;
}

.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover,
.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:focus,
.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:active {
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0.85 !important;
}

/* Kill the little arrow pseudo-element WP normally attaches to the dark pill. */
.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:before {
	display: none !important;
}

.bluenet-shop-toolbar__search .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier {
	position: static !important;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	margin: 0 !important;
	opacity: 0.6 !important;
	fill: #475569 !important;
}

body.ast-woo-shop-archive .ast-woocommerce-container .woocommerce-products-header {
	margin-bottom: 0 !important;
}

/* ── Sidebar widget cards ── */
.woocommerce-page #secondary .widget,
.woocommerce-page aside.widget-area .widget {
	background: #fff !important;
	border: 0.5px solid #e5e5e5 !important;
	border-radius: 10px !important;
	padding: 12px 12px 12px !important;
	margin-bottom: 10px !important;
}

/* ── Sidebar widget titles ── */
.woocommerce-page #secondary .widget-title,
.woocommerce-page aside .widget-title {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #0d1f3c !important;
	margin-bottom: 8px !important;
	padding-bottom: 6px !important;
	border-bottom: 0.5px solid #e5e5e5 !important;
}

/* ── Filter list ── */
.woocommerce-page #secondary .widget ul li {
	font-size: 13px !important;
	color: #444 !important;
	padding: 2px 0 !important;
	border: none !important;
}

.woocommerce-page #secondary .widget ul li a {
	color: #444 !important;
	text-decoration: none !important;
}

.woocommerce-page #secondary .widget ul li a:hover {
	color: #0d1f3c !important;
}

/* ── Price slider ── */
.woocommerce-page .price_slider_wrapper .ui-slider {
	background: #e5e5e5 !important;
	border: none !important;
}

.woocommerce-page .price_slider_wrapper .ui-slider-range {
	background: #0d1f3c !important;
}

.woocommerce-page .price_slider_wrapper .ui-slider-handle {
	background: #0d1f3c !important;
	border: none !important;
	border-radius: 50% !important;
}

.woocommerce-page a.button.wc-forward,
.woocommerce-page button.wc-forward {
	background: #0d1f3c !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-size: 12px !important;
	padding: 6px 14px !important;
	border: none !important;
}

/* ── Product grid column ── */
body.post-type-archive-product #primary,
.woocommerce-page #primary {
	flex: 1 !important;
	min-width: 0 !important;
}

/* ── Product grid columns ── */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	align-items: stretch !important;
	gap: 12px !important;
	margin: 0 !important;
}

/* ── Product card (flex column so “View product” aligns across the row) ── */

.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: #fff !important;
	border: 0.5px solid #e5e5e5 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: 100% !important;
	transition: border-color 0.2s, transform 0.2s !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	flex-shrink: 0 !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.woocommerce ul.products li.product:hover {
	border-color: #0d1f3c !important;
	transform: translateY(-2px) !important;
}

/* ── Product image ── */
.woocommerce ul.products li.product img {
	width: 100% !important;
	height: 200px !important;
	object-fit: contain !important;
	padding: 12px !important;
	background: #f8f8f6 !important;
	display: block !important;
}

/* ── Product title (max 2 lines; fixed block height keeps buttons aligned) ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0d1f3c !important;
	padding: 8px 12px 3px !important;
	line-height: 1.4 !important;
	/* Two line-heights so short titles still leave room and card bottoms line up */
	min-height: calc(2 * 1.4 * 1em) !important;
}

/* ── Category label (Astra) ── */
.woocommerce ul.products li.product .ast-woo-product-category {
	width: fit-content !important;
	max-width: fit-content !important;
	align-self: flex-start !important;
	font-size: 10px !important;
	color: #0c447c !important;
	background: #e6f1fb !important;
	padding: 2px 8px !important;
	border-radius: 20px !important;
	margin: 0 12px 5px !important;
	display: inline-block !important;
}

/* ── Price ── */
.woocommerce ul.products li.product .price {
	font-size: 12px !important;
	color: #888 !important;
	padding: 0 12px 6px !important;
	display: block !important;
}

/* ── Card button (pinned to bottom of summary area)
   inline-flex + auto top margin keeps the CTA vertically centered inside
   its own box and anchored to the bottom of the flex-column summary. ── */
.woocommerce ul.products li.product .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: auto 12px 12px !important;
	margin-top: auto !important;
	width: calc(100% - 24px) !important;
	min-height: 36px !important;
	flex-shrink: 0 !important;
	background: #0d1f3c !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 8px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
}

.woocommerce ul.products li.product .button:hover {
	background: #1a3460 !important;
	color: #fff !important;
}

/* ── Pagination ── */
.woocommerce nav.woocommerce-pagination ul {
	border: none !important;
	margin-top: 30px !important;
	display: flex !important;
	gap: 6px !important;
	justify-content: center !important;
}

.page-numbers > li {
	border: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 0.5px solid #e5e5e5 !important;
	border-radius: 6px !important;
	color: #0d1f3c !important;
	font-size: 13px !important;
	padding: 6px 12px !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #0d1f3c !important;
	color: #fff !important;
	border-color: #0d1f3c !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	body.ast-woo-shop-archive .site-content > .ast-container {
		flex-direction: column !important;
	}

	.bluenet-shop-toolbar {
		align-items: center !important;
		flex-wrap: nowrap !important;
		gap: 10px !important;
		margin-bottom: 14px !important;
	}

	.bluenet-mobile-filter-toggle {
		display: inline-flex !important;
		flex: 0 0 auto !important;
		order: 0;
	}

	.bluenet-shop-toolbar__search {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
		order: 1;
	}

	body.bluenet-filter-drawer-open {
		overflow: hidden !important;
		touch-action: none;
	}

	/*
	 * CLS FIX: the off-canvas drawer is the DEFAULT mobile state — applied at
	 * first paint from this render-blocking stylesheet, with no dependency on
	 * JavaScript. Previously the sidebar rendered in-flow (full width) and was
	 * only pulled out of flow once `shop-filter-fix.js` added
	 * `bluenet-mobile-filter-ready`; because that script runs late (heavy
	 * main-thread work), the whole filter panel collapsed out of the layout
	 * after paint, producing a large Cumulative Layout Shift. Keeping it
	 * off-canvas from the start removes that shift entirely. JS now only toggles
	 * `.is-open`. A <noscript> fallback (printed by the toolbar renderer)
	 * restores the in-flow sidebar when JavaScript is unavailable.
	 */
	body.post-type-archive-product #secondary,
	body.ast-woo-shop-archive #secondary,
	.woocommerce-page #secondary {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: min(86vw, 360px) !important;
		min-width: 0 !important;
		max-width: 360px !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		z-index: 99999 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
		box-shadow: -12px 0 34px rgba(13, 31, 60, 0.18) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		transform: translateX(105%);
		transition: transform 0.24s ease;
	}

	body #secondary.is-open {
		transform: translateX(0) !important;
	}

	body.bluenet-mobile-filter-ready #secondary .sidebar-main {
		padding: 14px !important;
	}

	/*
	 * Defensive: some Astra layouts / third-party CSS collapse the WOOF widget
	 * area on mobile (display:none, height:0, visibility:hidden). Inside the
	 * drawer we *want* it expanded, so force it back regardless of those rules.
	 */
	body.bluenet-mobile-filter-ready #secondary,
	body.bluenet-mobile-filter-ready #secondary .sidebar-main,
	body.bluenet-mobile-filter-ready #secondary .sidebar-main > *,
	body.bluenet-mobile-filter-ready #secondary .ast-woo-sidebar-widget,
	body.bluenet-mobile-filter-ready #secondary .widget,
	body.bluenet-mobile-filter-ready #secondary .woof,
	body.bluenet-mobile-filter-ready #secondary .woof_redraw_zone,
	body.bluenet-mobile-filter-ready #secondary .woof_container,
	body.bluenet-mobile-filter-ready #secondary .woof_container_inner,
	body.bluenet-mobile-filter-ready #secondary .woof_list,
	body.bluenet-mobile-filter-ready #secondary .woof_submit_search_form_container {
		visibility: visible !important;
		opacity: 1 !important;
	}

	body.bluenet-mobile-filter-ready #secondary .sidebar-main,
	body.bluenet-mobile-filter-ready #secondary .sidebar-main > *,
	body.bluenet-mobile-filter-ready #secondary .widget,
	body.bluenet-mobile-filter-ready #secondary .ast-woo-sidebar-widget {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		width: auto !important;
	}

	.bluenet-filter-drawer-header {
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 14px 12px;
		background: #fff;
		border-bottom: 1px solid rgba(13, 31, 60, 0.1);
		box-shadow: 0 8px 14px -14px rgba(13, 31, 60, 0.35);
	}

	.bluenet-filter-drawer-title {
		color: #0d1f3c;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.bluenet-filter-drawer-close {
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: #f6f6f4;
		color: #0d1f3c;
		border: 1px solid rgba(13, 31, 60, 0.12);
		border-radius: 999px;
		box-shadow: none;
		font-size: 24px;
		font-weight: 400;
		line-height: 1;
		cursor: pointer;
	}

	.bluenet-filter-backdrop {
		position: fixed;
		inset: 0;
		z-index: 99998;
		display: block;
		background: rgba(13, 31, 60, 0.46);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.bluenet-filter-backdrop.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	body.bluenet-mobile-filter-ready #secondary .widget,
	body.bluenet-mobile-filter-ready #secondary aside.widget {
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-top: 0 !important;
		margin-bottom: 0 !important;
	}

	body.bluenet-mobile-filter-ready #secondary .woof_submit_search_form_container {
		position: sticky;
		bottom: 0;
		z-index: 15;
		margin: 12px -12px -12px !important;
		padding: 12px !important;
		background: #fff;
		border-top: 1px solid rgba(13, 31, 60, 0.1);
		box-shadow: 0 -12px 22px -20px rgba(13, 31, 60, 0.45);
	}

	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/*
	 * AJAX loader: shrink on small screens so the pill doesn't dominate the
	 * drawer / mobile viewport. The base size is injected as inline <style> by
	 * shop-filter-fix.js, so we override with high-specificity selectors.
	 */
	#bluenet-woof-loader {
		padding: 7px 14px !important;
		border-radius: 14px !important;
	}

	#bluenet-woof-loader .bnwl-spinner {
		width: 56px !important;
		height: 20px !important;
		gap: 6px !important;
	}

	#bluenet-woof-loader .bnwl-spinner span {
		width: 8px !important;
		height: 8px !important;
	}
}

@media (max-width: 480px) {
	#bluenet-woof-loader {
		padding: 6px 12px !important;
		border-radius: 12px !important;
	}

	#bluenet-woof-loader .bnwl-spinner {
		width: 48px !important;
		height: 18px !important;
		gap: 5px !important;
	}

	#bluenet-woof-loader .bnwl-spinner span {
		width: 7px !important;
		height: 7px !important;
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	body.bluenet-mobile-filter-ready #secondary,
	.bluenet-filter-backdrop {
		transition: none !important;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}