/**
 * Biyani Design — Product Archive Header, Category Chips & Filter Toolbar (archive.css)
 *
 * One reusable archive-header component for /shop/, product categories, product tags, and
 * product search (occasion pages keep their editorial template in biyani-occasions.php).
 *
 * Rules (docs/state/2026-09-19/14-DESIGN-BASELINE.md):
 * - Marcellus 400 display headings, centred; Jost body/UI.
 * - Module grid u = 48px control height, gap g = 16px, pill radius 999px.
 * - Frosted glass (.bj-glass recipe) for the off-canvas filter drawer and sort dropdown;
 *   no gold rings on hover; 2px plum outline (#4A1F4F) on :focus-visible.
 */

/* ==========================================================================
   1. Suppress Jaroti's tall archive breadcrumb/title band & tighten top gap
   ========================================================================== */
body.bj-archive .breadcrumb-title-wrapper {
	display: none !important;
}

body.bj-archive .page-container {
	padding-top: 0 !important;
}

body.bj-archive #main-content,
body.bj-archive #primary.site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ==========================================================================
   2. Compact Archive Header (.bj-archive-hdr)
   ========================================================================== */
.bj-archive-hdr {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--bj-space-4, 16px) 0 var(--bj-space-3, 12px);
	margin: 0 auto var(--bj-space-3, 12px);
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12));
}

.bj-archive-hdr__crumb {
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: var(--bj-fs-caption, 12px);
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bj-mute, #716B5B);
	margin: 0 0 6px;
}

.bj-archive-hdr__crumb a {
	color: var(--bj-stone, #4A443C);
	text-decoration: none;
	transition: color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
	.bj-archive-hdr__crumb a:hover {
		color: var(--bj-ink, #1C1A17);
		text-decoration: underline;
	}
}

.bj-archive-hdr__crumb a:focus-visible {
	outline: 2px solid #4A1F4F;
	outline-offset: 2px;
	border-radius: 2px;
}

.bj-archive-hdr__sep {
	margin: 0 6px;
	color: var(--bj-mute, #716B5B);
	opacity: 0.65;
}

.bj-archive-hdr__main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bj-space-3, 12px);
	max-width: 100%;
}

.bj-archive-hdr__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--bj-line-gold, rgba(202, 146, 52, 0.6));
	background: var(--bj-ivory-2, #F5EFE5);
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06));
}

.bj-archive-hdr__thumb-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.bj-archive-hdr__titles {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.bj-archive-hdr--has-thumb .bj-archive-hdr__titles {
	align-items: flex-start;
	text-align: left;
}

.bj-archive-hdr__title {
	font-family: var(--bj-font-display, "Marcellus", Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: var(--bj-fs-h2, 26px) !important;
	line-height: 1.18 !important;
	letter-spacing: 0.01em !important;
	color: var(--bj-ink, #1C1A17) !important;
	margin: 0 !important;
}

.bj-archive-hdr__desc {
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: var(--bj-fs-small, 14px);
	line-height: 1.35;
	color: var(--bj-stone, #4A443C);
	margin: 2px 0 0;
	max-width: 60ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   3. Category Navigation Chips (.bj-archive-nav / .bj-archive-chip)
   ========================================================================== */
.bj-archive-nav {
	width: 100%;
	margin-top: var(--bj-space-3, 12px);
}

.bj-archive-nav__track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--bj-space-2, 8px);
}

.bj-archive-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 6px 18px;
	border-radius: var(--bj-radius-pill, 999px);
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12));
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92));
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: var(--bj-fs-small, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06));
	scroll-snap-align: start;
}

@media (hover: hover) and (pointer: fine) {
	.bj-archive-chip:hover {
		background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85));
		color: var(--bj-ink, #1C1A17) !important;
	}
}

.bj-archive-chip.is-current,
.bj-archive-chip[aria-current="page"] {
	background: var(--bj-ink, #1C1A17) !important;
	border-color: var(--bj-ink, #1C1A17) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.bj-archive-chip.is-current:hover,
	.bj-archive-chip[aria-current="page"]:hover {
		background: var(--bj-ink, #1C1A17) !important;
		color: var(--bj-ivory, #FBF8F3) !important;
	}
}

/* ==========================================================================
   4. Single Toolbar Row (.before-loop-wrapper: Filter · Count · Sort)
   ========================================================================== */
body.bj-archive #primary > .before-loop-wrapper {
	position: static !important;
	z-index: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--bj-space-3, 12px) var(--bj-space-4, 16px) !important;
	margin: 0 0 var(--bj-space-4, 16px) !important;
	padding: 0 !important;
	min-height: 40px !important;
	border: 0 !important;
}

body.bj-archive #primary > .before-loop-wrapper::before,
body.bj-archive #primary > .before-loop-wrapper::after {
	display: none !important;
}

body.bj-archive #primary > .before-loop-wrapper > .woocommerce-notices-wrapper {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 !important;
}

body.bj-archive #primary > .before-loop-wrapper > .woocommerce-notices-wrapper:empty {
	display: none !important;
}

/* Filter trigger pill — always visible on desktop + mobile, opens #ts-filter-widget-area drawer */
body.bj-archive .before-loop-wrapper .filter-widget-area-button {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
}

/* Prevent Jaroti's mobile scroll handler from turning the filter button into a black fixed top bar */
body.bj-archive .before-loop-wrapper .filter-widget-area-button.scrolling {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	z-index: auto !important;
}

body.bj-archive .before-loop-wrapper .filter-widget-area-button > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 40px !important;
	padding: 6px 18px !important;
	border-radius: var(--bj-radius-pill, 999px) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: var(--bj-fs-small, 14px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	width: auto !important;
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06)) !important;
	transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body.bj-archive .before-loop-wrapper .filter-widget-area-button > a::before {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: var(--bj-ink, #1C1A17) !important;
}

@media (hover: hover) and (pointer: fine) {
	body.bj-archive .before-loop-wrapper .filter-widget-area-button > a:hover {
		background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
		color: var(--bj-ink, #1C1A17) !important;
		box-shadow: var(--bj-glass-shadow, 0 4px 16px rgba(18, 14, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55)) !important;
		transform: translateY(-1px) !important;
	}
}

body.bj-archive .before-loop-wrapper .filter-widget-area-button > a:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

/* Piece count */
body.bj-archive .bj-archive-count {
	display: block !important;
	margin: 0 !important;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: var(--bj-fs-small, 14px);
	font-weight: 400;
	color: var(--bj-mute, #716B5B);
	white-space: nowrap;
}

/* Sort control (.woocommerce-ordering) */
body.bj-archive .before-loop-wrapper .woocommerce-ordering {
	margin: 0 0 0 auto !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	position: relative !important;
	z-index: 30 !important;
}

body.bj-archive .before-loop-wrapper .woocommerce-ordering .orderby-label {
	display: none !important;
}

body.bj-archive .before-loop-wrapper .woocommerce-ordering ul.orderby {
	margin: 0 !important;
}

body.bj-archive .before-loop-wrapper .woocommerce-ordering .orderby-current {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 40px !important;
	padding: 6px 16px !important;
	border-radius: var(--bj-radius-pill, 999px) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	background: var(--bj-glass-bg-solid, rgba(255, 253, 248, 0.92)) !important;
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: var(--bj-fs-small, 14px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	box-shadow: var(--bj-glass-shadow-solid, 0 1px 2px rgba(18, 14, 10, 0.06)) !important;
	transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body.bj-archive .before-loop-wrapper .woocommerce-ordering .orderby-current::after {
	position: static !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
	body.bj-archive .before-loop-wrapper .woocommerce-ordering .orderby-current:hover {
		background: var(--bj-glass-bg-hover, rgba(252, 249, 243, 0.85)) !important;
		box-shadow: var(--bj-glass-shadow, 0 4px 16px rgba(18, 14, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55)) !important;
		transform: translateY(-1px) !important;
	}
}

/* Sort dropdown menu — frosted glass surface */
body.bj-archive .woocommerce .woocommerce-ordering .orderby ul.dropdown,
body.bj-archive .woocommerce-ordering .orderby ul.dropdown {
	background: rgba(255, 253, 248, 0.96) !important;
	border: 1px solid var(--bj-line, rgba(28, 26, 23, 0.12)) !important;
	border-radius: var(--bj-radius-card, 12px) !important;
	box-shadow: var(--bj-shadow, 0 8px 24px rgba(28, 26, 23, 0.08)) !important;
	padding: 8px !important;
	right: 0 !important;
	left: auto !important;
}

body.bj-archive .woocommerce-ordering .orderby ul.dropdown::before {
	display: none !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.bj-archive .woocommerce-ordering .orderby ul.dropdown {
		background: rgba(252, 249, 243, 0.92) !important;
		-webkit-backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
		backdrop-filter: var(--bj-glass-blur, blur(14px) saturate(160%)) !important;
	}
}

/* Active filters row (when a color/attribute filter is applied) */
body.bj-archive #primary > .ts-active-filters {
	margin: 0 0 var(--bj-space-2, 8px) !important;
}

body.bj-archive #primary > .ts-active-filters:empty {
	display: none !important;
}

/* ==========================================================================
   5. Off-Canvas Filter Drawer (#ts-filter-widget-area) — Frosted Glass
   ========================================================================== */
body.bj-archive #ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content {
	background: rgba(255, 253, 248, 0.96) !important;
	border-left: 1px solid var(--bj-glass-border, rgba(255, 255, 255, 0.55)) !important;
	box-shadow: -8px 0 32px rgba(18, 14, 10, 0.16) !important;
	color: var(--bj-ink, #1C1A17) !important;
}

body.bj-archive #ts-filter-widget-area.ts-floating-sidebar:not(.active) .ts-sidebar-content {
	transform: translateX(100%) !important;
}

body.bj-archive #ts-filter-widget-area.ts-floating-sidebar.active .ts-sidebar-content {
	transform: translateX(0) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.bj-archive #ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content {
		background: rgba(252, 249, 243, 0.92) !important;
		-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
		backdrop-filter: blur(16px) saturate(160%) !important;
	}
}

body.bj-archive #ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content > .close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	top: 12px !important;
	right: 12px !important;
	border-radius: 999px !important;
	background: rgba(28, 26, 23, 0.05) !important;
	border: 1px solid rgba(28, 26, 23, 0.14) !important;
	color: var(--bj-ink, #1C1A17) !important;
}

body.bj-archive #ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content > .close::after {
	color: var(--bj-ink, #1C1A17) !important;
	font-size: 20px !important;
	line-height: 44px !important;
}

body.bj-archive #ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content > .close:focus-visible {
	outline: 2px solid #4A1F4F !important;
	outline-offset: 3px !important;
}

body.bj-archive #ts-filter-widget-area .widget-title-wrapper .widget-title {
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: var(--bj-fs-eyebrow, 12px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--bj-ink, #1C1A17) !important;
}

/* Safety: hide price, brand, and duplicate category widgets in the drawer even if cached markup renders them */
body.bj-archive #ts-filter-widget-area .widget_price_filter,
body.bj-archive #ts-filter-widget-area .product-filter-by-brand,
body.bj-archive #ts-filter-widget-area .ts-product-categories-widget,
body.bj-archive #ts-filter-widget-area .widget_product_categories {
	display: none !important;
}

/* ==========================================================================
   6. Responsive (≤767px phones)
   ========================================================================== */
@media (max-width: 767px) {
	.bj-archive-hdr {
		padding: 6px 0 8px;
		margin-bottom: 8px;
	}

	.bj-archive-hdr__crumb {
		font-size: 11px;
		margin-bottom: 2px;
	}

	.bj-archive-hdr__thumb {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}

	.bj-archive-hdr__title {
		font-size: 22px !important;
		line-height: 1.15 !important;
	}

	.bj-archive-hdr__desc {
		font-size: 12px;
		margin-top: 1px;
		max-width: 88vw;
	}

	.bj-archive-nav {
		margin-top: 6px;
		width: calc(100% + 30px);
		margin-left: -15px;
		margin-right: -15px;
	}

	.bj-archive-nav__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding: 0 15px 2px;
		gap: 6px;
	}

	.bj-archive-nav__track::-webkit-scrollbar {
		display: none;
	}

	.bj-archive-chip {
		min-height: 32px;
		padding: 4px 12px;
		font-size: 13px;
	}

	body.bj-archive #primary > .before-loop-wrapper {
		flex-wrap: nowrap !important;
		gap: 8px !important;
		margin-bottom: 8px !important;
		min-height: 32px !important;
	}

	body.bj-archive .before-loop-wrapper .filter-widget-area-button > a,
	body.bj-archive .before-loop-wrapper .woocommerce-ordering .orderby-current {
		min-height: 32px !important;
		padding: 4px 12px !important;
		font-size: 12px !important;
	}

	body.bj-archive .bj-archive-count {
		font-size: 12px;
	}
}

/* ==========================================================================
   7. Archive layout gutters & demo control suppression (moved from controls.css S10 / S14)
   ========================================================================== */
/* QA S10: the floating currency disc (fixed, x32-72 at 1512) sits over the first-column card
   price on shop/search/category at the fold. A 1200 max-width would drop the archive from 4 to 3
   cards per row (columns-4 grid math), so instead give archives a wide side gutter at the 1512
   tier the disc lives in, clearing every price column, plus bottom padding so the disc can't sit
   over the footer copyright row either. */
@media (min-width: 1280px) {
	body.archive.woocommerce #main-content,
	body.search.woocommerce #main-content,
	body.tax-product_cat.woocommerce #main-content {
		padding-left: 72px !important;
		padding-right: 72px !important;
	}
}
body.archive.woocommerce,
body.search.woocommerce,
body.tax-product_cat.woocommerce {
	padding-bottom: 120px !important;
}

/* QA S14: hide the theme demo Brand filter and column-count switcher on archives — they don't
   match the product model (no brand taxonomy) or the fixed 4-column grid. */
.ts-product-columns-dropdown,
.widget-container.product-filter-by-brand {
	display: none !important;
}