/*
 * Bristle Up Categories — Frontend Styles
 * Mobile button, drawer, desktop bar, mega-panel.
 * All colours from CSS variables for theme switching.
 */

:root {
	--bristle-bg: #1a1a1a;
	--bristle-bg-panel: #ffffff;
	--bristle-text: #ffffff;
	--bristle-text-panel: #1a1a1a;
	--bristle-text-muted: #6b7280;
	--bristle-border: rgba(255,255,255,0.1);
	--bristle-border-panel: #e5e7eb;
	--bristle-accent: #e63946;
	--bristle-accent-dim: rgba(230,57,70,0.15);
	--bristle-radius: 4px;
	--bristle-shadow: 0 8px 24px rgba(0,0,0,0.15);
	--bristle-z-button: 99;
	--bristle-z-drawer: 9999;
	--bristle-z-bar: 50;
}

/* ============================================================
 * MOBILE BUTTON — injected into Flatsome header
 * ============================================================ */

.bristle-cats-mobile-btn-wrap {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

/* Show only when sticky and only at mobile breakpoint */
.header-wrapper.stuck .bristle-cats-mobile-btn-wrap,
.bristle-cats-mobile-btn-wrap[data-force-visible="1"] {
	display: flex;
}

@media (min-width: 850px) {
	.bristle-cats-mobile-btn-wrap {
		display: none !important;
	}
}

.bristle-cats-mobile-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--bristle-accent);
	color: #fff;
	border: none;
	border-radius: var(--bristle-radius);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
	transition: filter 0.15s ease;
}

.bristle-cats-mobile-btn:hover,
.bristle-cats-mobile-btn:focus {
	filter: brightness(1.1);
	outline: none;
}

.bristle-cats-mobile-btn-icon {
	display: inline-flex;
	align-items: center;
}

.bristle-cats-mobile-btn-label {
	display: inline-block;
}

/* When the button is present in a sticky header, shrink the search.
 * Only applies on mobile — desktop hides the button entirely so the
 * search should keep its normal width. */
@media (max-width: 849px) {
	.header-wrapper.stuck .header-search-form,
	.header-wrapper.stuck .header-search-form-wrapper {
		max-width: 55% !important;
		flex: 1 1 auto !important;
	}

	.header-wrapper.stuck .header-search,
	.header-wrapper.stuck .header-search-form {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Universal-theme fallback selectors */
.bristle-cats-search-shrunk input[type="search"],
.bristle-cats-search-shrunk .search-field {
	max-width: 100% !important;
}

/* ============================================================
 * MOBILE DRAWER
 * ============================================================ */

.bristle-cats-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--bristle-z-drawer);
	pointer-events: none;
	visibility: hidden;
}

.bristle-cats-mobile-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.bristle-cats-mobile-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bristle-cats-mobile-drawer.is-open .bristle-cats-mobile-backdrop {
	opacity: 1;
}

.bristle-cats-mobile-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(85vw, 380px);
	background: var(--bristle-bg-panel);
	color: var(--bristle-text-panel);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: var(--bristle-shadow);
	will-change: transform;
}

.bristle-cats-mobile-drawer--left .bristle-cats-mobile-panel {
	left: 0;
	transform: translateX(-100%);
}

.bristle-cats-mobile-drawer--right .bristle-cats-mobile-panel {
	right: 0;
	transform: translateX(100%);
}

.bristle-cats-mobile-drawer.is-open .bristle-cats-mobile-panel {
	transform: translateX(0);
}

.bristle-cats-mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bristle-border-panel);
	flex-shrink: 0;
}

.bristle-cats-mobile-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bristle-cats-mobile-close {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--bristle-text-muted);
	cursor: pointer;
	padding: 4px 8px;
}

.bristle-cats-mobile-close:hover {
	color: var(--bristle-text-panel);
}

/* v1.3.1: lock the close button to a square box regardless of theme button
 * styling. Flatsome's global `button` rule sets line-height:2.4em,
 * margin-left:1em, padding:0 1.2em and min-height — which stretched the
 * "×" into a tall ellipse (border-radius:50% on a non-square box) and
 * offset it horizontally. Scoping under the drawer ID gives specificity
 * (1,1,0); !important on the dimension/spacing props guarantees we win
 * even against Flatsome's own `button{...!important}` rule. Per-style
 * rules below only set background/colour/border-radius. */
#bristle-cats-mobile-drawer .bristle-cats-mobile-close {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	font-size: 18px;
}

.bristle-cats-mobile-body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	-webkit-overflow-scrolling: touch;
}

/* ============================================================
 * DRAWER LIST (accordion)
 * ============================================================ */

.bristle-cats-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bristle-cats-item {
	border-bottom: 1px solid var(--bristle-border-panel);
	position: relative;
}

.bristle-cats-item.is-featured > .bristle-cats-row > .bristle-cats-link {
	font-weight: 700;
	color: var(--bristle-accent);
}

.bristle-cats-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	color: inherit;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
}

.bristle-cats-link:hover {
	background: var(--bristle-accent-dim);
	color: var(--bristle-accent);
}

.bristle-cats-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	flex-shrink: 0;
}

.bristle-cats-label {
	flex: 1;
}

/* v1.4.0: row container wrapping link + toggle. Keeps the toggle aligned
 * to the link row at any depth (the toggle used to be absolutely
 * positioned inside the <li>, which broke once children expanded). */
.bristle-cats-row {
	display: flex;
	align-items: center;
	position: relative;
}
.bristle-cats-row > .bristle-cats-link {
	flex: 1 1 auto;
	min-width: 0;
}

.bristle-cats-toggle {
	flex: 0 0 auto;
	margin-right: 8px;
	width: 36px;
	height: 36px;
	background: none;
	border: 1px solid var(--bristle-border-panel);
	border-radius: var(--bristle-radius);
	font-size: 18px;
	line-height: 1;
	color: var(--bristle-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bristle-cats-toggle[aria-expanded="true"] span {
	transform: rotate(45deg);
}

.bristle-cats-toggle span {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* v1.4.0: with the toggle now an in-flow flex item (not absolute), we only
 * need to neutralise Flatsome's global button styling — Flatsome's
 * `button{padding:0 1.2em}` (no box-sizing on the default cascade) would
 * otherwise inflate the toggle width. Scoped under the drawer ID with
 * !important to beat Flatsome's own !important button rule. Vertical
 * centring is handled by the row's align-items:center, so no positioning
 * is needed here anymore. */
#bristle-cats-mobile-drawer .bristle-cats-toggle {
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}

/* Nested list — collapsed by default */
.bristle-cats-item > .bristle-cats-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: rgba(0,0,0,0.02);
}

.bristle-cats-item.is-open > .bristle-cats-list {
	/* v1.4.0: raised from 2000px so deeply nested (up to 6-level) branches
	 * with many items don't clip when expanded. The max-height accordion
	 * technique needs a finite ceiling; this is generous enough for a
	 * realistic category tree while keeping the open transition snappy. */
	max-height: 6000px;
}

.bristle-cats-depth-1 .bristle-cats-link {
	padding-left: 36px;
	font-size: 14px;
}

.bristle-cats-depth-2 .bristle-cats-link {
	padding-left: 52px;
	font-size: 13px;
}

.bristle-cats-depth-3 .bristle-cats-link {
	padding-left: 68px;
	font-size: 13px;
	color: var(--bristle-text-muted);
}

/* v1.4.0: depths 4 and 5 now indent distinctly (were both 84px) so all
 * six levels (depth 0–5) are visually stepped. */
.bristle-cats-depth-4 .bristle-cats-link {
	padding-left: 84px;
	font-size: 12px;
	color: var(--bristle-text-muted);
}

.bristle-cats-depth-5 .bristle-cats-link {
	padding-left: 100px;
	font-size: 12px;
	color: var(--bristle-text-muted);
}

/* ============================================================
 * DESKTOP BAR
 * ============================================================ */

.bristle-cats-desktop {
	display: none;
	position: relative;
	z-index: var(--bristle-z-bar);
	background: var(--bristle-bg);
	color: var(--bristle-text);
	border-top: 1px solid var(--bristle-border);
	border-bottom: 1px solid var(--bristle-border);
}

@media (min-width: 850px) {
	.bristle-cats-desktop {
		display: block;
	}
}

.bristle-cats-desktop-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

.bristle-cats-bar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
}

.bristle-cats-bar-item {
	position: static;
	white-space: nowrap;
}

.bristle-cats-bar-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 18px;
	color: var(--bristle-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 3px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.bristle-cats-bar-link:hover,
.bristle-cats-bar-item.is-open > .bristle-cats-bar-link {
	color: var(--bristle-accent);
	border-bottom-color: var(--bristle-accent);
}

.bristle-cats-bar-item.is-featured > .bristle-cats-bar-link {
	color: var(--bristle-accent);
}

.bristle-cats-bar-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.bristle-cats-bar-caret {
	font-size: 10px;
	opacity: 0.7;
}

/* Mega panel */
.bristle-cats-panel-wrap {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--bristle-bg-panel);
	color: var(--bristle-text-panel);
	box-shadow: var(--bristle-shadow);
	border-top: 1px solid var(--bristle-border-panel);
	z-index: 1;
}

.bristle-cats-bar-item.is-open .bristle-cats-panel-wrap {
	display: block;
}

.bristle-cats-panel-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px 28px;
	/* v1.5.1: cap to the viewport and scroll internally. A large panel (many
	 * columns / now-collapsible deep levels) was unreachable below the fold
	 * when the bar is stuck to the fixed header, because the page can't
	 * scroll a panel that's anchored to a fixed element.
	 * v1.5.2: use a JS-measured offset (sticky header + admin bar + bar
	 * height) instead of Flatsome's unreliable sticky-height var; the 140px
	 * fallback only applies if the JS measurement hasn't run yet. */
	max-height: calc(100vh - var(--bristle-cats-sticky-offset, 140px) - 8px);
	overflow-y: auto;
}

/* v1.5.1: sticky top bar holding the manual close button, so it stays
 * reachable while the panel scrolls. Background matches the panel so the
 * scrolling columns pass cleanly beneath it. */
.bristle-cats-panel-bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: var(--bristle-bg-panel);
	padding: 14px 0 10px;
	margin-bottom: 4px;
}

/* v1.5.1: big manual close button. Scoped under the desktop ID with
 * !important on dimension/spacing props to pre-empt Flatsome's global
 * <button> styling (line-height:2.4em / margin / padding / min-height) —
 * the same defensive pattern used for the drawer buttons. */
#bristle-cats-desktop .bristle-cats-panel-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 9px 18px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	background: var(--bristle-accent);
	color: #fff;
	border: none;
	border-radius: var(--bristle-radius);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	cursor: pointer;
}

#bristle-cats-desktop .bristle-cats-panel-close:hover {
	filter: brightness(1.1);
}

.bristle-cats-panel-close .bristle-cats-panel-close-x {
	font-size: 20px;
	line-height: 1;
}

.bristle-cats-panel-columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px 32px;
}

.bristle-cats-panel-column {
	min-width: 0;
}

.bristle-cats-panel-col-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--bristle-text-panel);
	text-decoration: none;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--bristle-accent);
}

.bristle-cats-panel-col-header:hover {
	color: var(--bristle-accent);
}

.bristle-cats-panel-col-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.bristle-cats-panel-column.is-featured .bristle-cats-panel-col-header {
	background: var(--bristle-accent-dim);
	padding: 8px 12px;
	border-bottom: none;
	border-radius: var(--bristle-radius);
}

/* Inside panel, lists render flat (no accordion) */
.bristle-cats-panel-column .bristle-cats-list {
	padding-top: 4px;
}

.bristle-cats-panel-column .bristle-cats-item {
	border-bottom: none;
}

.bristle-cats-panel-column .bristle-cats-link {
	padding: 4px 0;
	font-size: 13px;
	color: var(--bristle-link, var(--bristle-text-muted));
}

.bristle-cats-panel-column .bristle-cats-link:hover {
	background: transparent;
	color: var(--bristle-link-hover, var(--bristle-accent));
}

/* v1.6.0: the desktop panel auto-expands the first N levels (set in
 * Desktop → "Auto-expand depth"); render seeds those items with .is-open
 * and .bristle-cats-auto. Auto-expanded items show their children with no
 * ceiling and no toggle; the remaining (collapsed) items keep the base
 * max-height:0 and get a click-to-expand toggle (handled by the desktop bar
 * JS). This replaces v1.5.1's hardcoded depth-3 rules. */

/* Auto-expanded levels: fully open (no 6000px ceiling, unlike the click
 * transition) so a wide auto-expanded column never clips. */
#bristle-cats-desktop .bristle-cats-panel-column .bristle-cats-auto > .bristle-cats-list {
	max-height: none !important;
	overflow: visible;
}

/* No toggle on auto-expanded items — only the deeper, collapsed levels get
 * one. */
#bristle-cats-desktop .bristle-cats-panel-column .bristle-cats-auto > .bristle-cats-row > .bristle-cats-toggle {
	display: none !important;
}

/* Size the visible (collapsed-level) panel toggles. !important on
 * dimension/spacing defeats Flatsome's global <button> styling. */
#bristle-cats-desktop .bristle-cats-panel-column .bristle-cats-toggle {
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 0 0 6px !important;
	line-height: 1 !important;
	font-size: 13px;
	box-sizing: border-box !important;
}

.bristle-cats-panel-column .bristle-cats-depth-2 .bristle-cats-link {
	padding-left: 0;
	font-size: 12px;
}

.bristle-cats-panel-column .bristle-cats-depth-3 .bristle-cats-link {
	padding-left: 8px;
	font-size: 12px;
}

/* v1.4.0: desktop panel indentation for the deeper levels (4–5). Without
 * these, depths 4–5 would inherit the base mobile indentation (84/100px),
 * which overflows a narrow mega-menu column. Keep the panel steps small. */
.bristle-cats-panel-column .bristle-cats-depth-4 .bristle-cats-link {
	padding-left: 16px;
	font-size: 12px;
}

.bristle-cats-panel-column .bristle-cats-depth-5 .bristle-cats-link {
	padding-left: 24px;
	font-size: 12px;
}

/* v1.5.0: "All {category}" shortcut link. Accent-coloured so it reads as a
 * "shop all" affordance distinct from the real subcategory rows. Shared by
 * the desktop mega-menu and the mobile drawer. !important on colour beats
 * the per-depth and per-style link colours without chasing specificity. */
.bristle-cats-all-link {
	color: var(--bristle-all-link, var(--bristle-accent)) !important;
	font-weight: 600;
}
.bristle-cats-all-link:hover {
	color: var(--bristle-all-link-hover, var(--bristle-all-link, var(--bristle-accent))) !important;
	text-decoration: underline;
}

/* Fallback only: applied via .is-sticky when the bar sits OUTSIDE Flatsome's
 * .header-wrapper (non-standard placement). In the default placement the bar
 * rides inside the wrapper and this rule is never applied (see
 * applyDesktopSticky in frontend.js). JS overrides `top` with the measured
 * header height; the CSS variable here is just a last-resort value. */
.bristle-cats-desktop[data-sticky="1"].is-sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--flatsome--header--sticky-height, 80px);
	z-index: 100;
}

/* v1.6.1: when the bar lives inside Flatsome's .header-wrapper (the default
 * below_menu / above_menu placement), keep it BELOW the header's own
 * stacking layers — .header-main (z-index:10) and .header-bottom
 * (z-index:9) — so Flatsome's own dropdowns render ABOVE our bar instead of
 * being clipped by it. The account menu (.nav-dropdown, z-index:9) lives
 * inside .header-main, so with our bar at the previous z-index:50/100 the
 * bar painted over the dropdown. The mega-panel is unaffected: the whole
 * .header-wrapper is z-index:1001, so everything inside it (bar + panel)
 * still sits above page content regardless of this low local value, and the
 * panel drops below the bar — it never overlaps the header rows above. */
.header-wrapper .bristle-cats-desktop,
.header-wrapper .bristle-cats-desktop[data-sticky="1"].is-sticky {
	z-index: 8;
}

/* Body class for "replace_menu" — hide Flatsome main nav */
.has-bristle-cats--replace_menu .header-nav-main {
	display: none !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.bristle-cats-mobile-panel,
	.bristle-cats-mobile-backdrop,
	.bristle-cats-item > .bristle-cats-list,
	.bristle-cats-toggle span {
		transition: none !important;
	}
}

/* ============================================================
 * v1.2.0 — MOBILE: always-visible variant
 *
 * When body has the `bristle-cats-mobile-btn-always` class (set by
 * Bristle_Cats_Mobile::add_body_class when mobile.always_visible
 * setting is on), the button shows regardless of header sticky state.
 * ============================================================ */
body.bristle-cats-mobile-btn-always .bristle-cats-mobile-btn-wrap {
	display: flex;
}

/* ============================================================
 * v1.2.0 — DESKTOP SIMPLE-DRAWER MODE
 *
 * Activated when body has `bristle-cats-desktop-mode-simple`. The bar
 * is hidden on small screens (same breakpoint as the mega-menu bar)
 * because the mobile button + drawer covers that case.
 * ============================================================ */
.bristle-cats-simple-bar {
	display: none;
	position: relative;
	background: var(--bristle-bg);
	color: var(--bristle-text);
	border-top: 1px solid var(--bristle-border);
	border-bottom: 1px solid var(--bristle-border);
	z-index: 100;
}

/* v1.2.2: previous version unconditionally set display:block on the bar
 * at desktop width when the body class was present, overriding the
 * `hidden` HTML attribute that the template renders. That meant the
 * bar appeared in the footer (its rendered position) for the brief
 * window between page load and the JS positioning + un-hiding it.
 * Same class of bug fixed in v1.1.6 for the edit modal. Now the
 * selector excludes `[hidden]` so the user-agent rule wins until
 * JS removes the attribute. */
@media (min-width: 850px) {
	body.bristle-cats-desktop-mode-simple .bristle-cats-simple-bar:not([hidden]) {
		display: block;
	}
}

.bristle-cats-simple-bar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.bristle-cats-simple-bar-btn:hover,
.bristle-cats-simple-bar-btn:focus {
	background: rgba(255,255,255,0.05);
	outline: none;
}

.bristle-cats-simple-bar-btn:focus-visible {
	box-shadow: inset 0 0 0 2px var(--bristle-accent);
}

/* When the bar is "stuck" with the Flatsome header, position it like
 * we do the mega-menu bar — fixed below the floating header at the
 * height the JS measures in applyDesktopSticky(). */
.bristle-cats-simple-bar.is-sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--flatsome--header--sticky-height, 80px);
	z-index: 100;
}

/* Backdrop, shared by all drawer directions */
.bristle-cats-simple-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 99998;
	opacity: 0;
	transition: opacity 200ms ease;
}
.bristle-cats-simple-backdrop.is-open {
	opacity: 1;
}

/* Drawer base — direction-specific positioning below.
 *
 * v1.2.2: split out the `display: flex` into a `:not([hidden])` rule.
 * Previously the drawer was display:flex unconditionally, which left it
 * present at z-index 99999 even when JS set `hidden` after the close
 * animation. For modal direction (centered, opacity 0 when not open)
 * this produced an invisible click-eater over the page centre — the
 * drawer would intercept clicks that visually appear to be on the page
 * underneath. Same bug class as the v1.1.6 admin modal fix.
 *
 * Why not use `pointer-events: none` instead? Because the drawer needs
 * pointer events during the close transition (so a user clicking the
 * Close button during the fade-out gets a chance to interact), and we
 * also need clicks consumed during the open animation. Tying visibility
 * to the `hidden` attribute is the cleanest match for how the JS already
 * manages drawer lifecycle (removeAttr + addClass on open, removeClass
 * then attr-after-timeout on close).
 */
.bristle-cats-simple-drawer {
	position: fixed;
	background: #fff;
	color: #222;
	z-index: 99999;
	box-shadow: 0 16px 48px rgba(0,0,0,0.25);
	flex-direction: column;
	transition: transform 250ms ease;
}
.bristle-cats-simple-drawer:not([hidden]) {
	display: flex;
}

.bristle-cats-simple-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e5e5;
	background: #fafafa;
}

.bristle-cats-simple-drawer-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.bristle-cats-simple-drawer-close {
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	padding: 0 8px;
}

.bristle-cats-simple-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

/* === Direction: left === */
body.bristle-cats-desktop-dir-left .bristle-cats-simple-drawer {
	top: 0;
	left: 0;
	bottom: 0;
	width: min(420px, 90vw);
	transform: translateX(-100%);
}
body.bristle-cats-desktop-dir-left .bristle-cats-simple-drawer.is-open {
	transform: translateX(0);
}

/* === Direction: right === */
body.bristle-cats-desktop-dir-right .bristle-cats-simple-drawer {
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 90vw);
	transform: translateX(100%);
}
body.bristle-cats-desktop-dir-right .bristle-cats-simple-drawer.is-open {
	transform: translateX(0);
}

/* === Direction: top === */
body.bristle-cats-desktop-dir-top .bristle-cats-simple-drawer {
	top: 0;
	left: 0;
	right: 0;
	max-height: 80vh;
	transform: translateY(-100%);
}
body.bristle-cats-desktop-dir-top .bristle-cats-simple-drawer.is-open {
	transform: translateY(0);
}

/* === Direction: modal (center) === */
body.bristle-cats-desktop-dir-modal .bristle-cats-simple-drawer {
	top: 50%;
	left: 50%;
	width: min(720px, 90vw);
	max-height: 80vh;
	transform: translate(-50%, -50%) scale(0.92);
	opacity: 0;
	border-radius: 8px;
	transition: transform 200ms ease, opacity 200ms ease;
}
body.bristle-cats-desktop-dir-modal .bristle-cats-simple-drawer.is-open {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* Reduced motion: skip transitions */
@media (prefers-reduced-motion: reduce) {
	.bristle-cats-simple-drawer,
	.bristle-cats-simple-backdrop {
		transition: none !important;
	}
}

/* ============================================================
 * v1.2.3 — Mobile button shares the row with the search
 *
 * The JS relocator wraps the search target and the button in a
 * .bristle-cats-search-row container so they share the line.
 * Without this, the button wraps to a new line below the search
 * because the search element's parent is typically block-level
 * (or the search itself claims width:100%), leaving no room.
 *
 * Layout: flex row, search takes available space (flex:1 + min-width:0
 * so it can shrink past its content width), button keeps its natural
 * width. align-items:center vertically centers them.
 * ============================================================ */
.bristle-cats-search-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/* v1.3.2: back to center alignment. v1.3.1 used stretch, which made
	 * the button as tall as the search field — too big. The original
	 * button size was correct; it only looked "high" because Flatsome's
	 * global button margin offset its box within the centered row. We now
	 * center the natural-size button and zero that inherited margin
	 * (below), which is the actual fix for the off-centre look. */
	align-items: center;
	gap: 8px;
	width: 100%;
}

.bristle-cats-search-row > *:not([data-bristle-mobile-btn]) {
	flex: 1 1 auto;
	min-width: 0;
}

.bristle-cats-search-row > [data-bristle-mobile-btn] {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* The button's own width control. We don't force a fixed percentage —
 * the button takes its content width (icon + label), which on most
 * sites is around 30-40% of the row, leaving the search the rest.
 * Users who want a different split can override min-width / max-width
 * on this selector via a child theme.
 *
 * v1.3.2: natural height (no stretch), margin zeroed. Zeroing the margin
 * cancels Flatsome's global `button{margin-left:1em}` (and any inherited
 * vertical margin), which is what made the centered button look offset.
 */
.bristle-cats-search-row > [data-bristle-mobile-btn] .bristle-cats-mobile-btn {
	white-space: nowrap;
	margin: 0;
}

/* ============================================================
 * v1.3.0 — MOBILE DRAWER STYLE VARIANTS
 *
 * Four selectable looks chosen via the mobile.drawer_style setting.
 * Each is scoped under .bristle-cats-drawer-style-<style> on the drawer
 * root, with enough specificity (2 classes) to override the base
 * single-class drawer rules above.
 *
 * Fonts: we prefer a condensed display face (Oswald etc.) if the site
 * already loads one, but never force an external font request — the
 * stacks fall back gracefully to narrow system faces. To get the exact
 * mockup look, add Oswald via the theme's typography settings.
 * ============================================================ */

/* Shared display font stack for the "bold" styles. */
.bristle-cats-drawer-style-tactical .bristle-cats-mobile-header h2,
.bristle-cats-drawer-style-tactical .bristle-cats-label,
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-header h2,
.bristle-cats-drawer-style-editorial .bristle-cats-label,
.bristle-cats-drawer-style-grid .bristle-cats-mobile-header h2,
.bristle-cats-drawer-style-grid .bristle-cats-tile-name {
	font-family: 'Oswald', 'Bebas Neue', 'Archivo Narrow', 'Arial Narrow', sans-serif;
}

/* ---------- STYLE: TACTICAL (dark, brand-matched) ---------- */
.bristle-cats-drawer-style-tactical .bristle-cats-mobile-panel {
	background: #0d0d0f;
	color: #f1f1f4;
}
.bristle-cats-drawer-style-tactical .bristle-cats-mobile-header {
	padding: 22px 20px 18px;
	border-bottom: 2px solid var(--bristle-accent);
}
.bristle-cats-drawer-style-tactical .bristle-cats-mobile-header h2 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 22px;
}
.bristle-cats-drawer-style-tactical .bristle-cats-mobile-close {
	border-radius: 50%;
	background: var(--bristle-accent);
	color: #fff;
}
.bristle-cats-drawer-style-tactical .bristle-cats-item {
	border-bottom: 1px solid #1d1d22;
}
.bristle-cats-drawer-style-tactical .bristle-cats-link {
	border-left: 3px solid transparent;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 500;
	font-size: 15px;
	color: #f1f1f4;
	transition: background 160ms ease, border-color 160ms ease;
}
.bristle-cats-drawer-style-tactical .bristle-cats-item.is-open > .bristle-cats-row > .bristle-cats-link,
.bristle-cats-drawer-style-tactical .bristle-cats-link:hover {
	background: #15151a;
	border-left-color: var(--bristle-accent);
	color: #fff;
}
.bristle-cats-drawer-style-tactical .bristle-cats-toggle {
	border: none;
	background: #1d1d22;
	color: var(--bristle-accent);
	border-radius: 6px;
}
.bristle-cats-drawer-style-tactical .bristle-cats-item > .bristle-cats-list {
	background: #08080a;
}
.bristle-cats-drawer-style-tactical .bristle-cats-depth-1 .bristle-cats-link {
	color: #a9a9b4;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}
.bristle-cats-drawer-style-tactical .bristle-cats-depth-1 .bristle-cats-link:hover { color: #fff; }

/* ---------- STYLE: MINIMAL (light, clean) ---------- */
.bristle-cats-drawer-style-minimal .bristle-cats-mobile-panel {
	background: #ffffff;
	color: #1a1a1a;
}
.bristle-cats-drawer-style-minimal .bristle-cats-mobile-header {
	padding: 26px 22px 20px;
	border-bottom: 1px solid #ececec;
}
.bristle-cats-drawer-style-minimal .bristle-cats-mobile-header h2 {
	color: #111;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 600;
}
.bristle-cats-drawer-style-minimal .bristle-cats-mobile-close { color: #999; }
.bristle-cats-drawer-style-minimal .bristle-cats-item { border-bottom: 1px solid #f1f1f1; }
.bristle-cats-drawer-style-minimal .bristle-cats-link {
	font-weight: 600;
	font-size: 15px;
	color: #1a1a1a;
}
.bristle-cats-drawer-style-minimal .bristle-cats-link:hover {
	background: transparent;
	color: var(--bristle-accent);
}
.bristle-cats-drawer-style-minimal .bristle-cats-toggle {
	border: none;
	background: transparent;
	color: #c0c0c0;
	font-size: 20px;
}
.bristle-cats-drawer-style-minimal .bristle-cats-item.is-open > .bristle-cats-toggle,
.bristle-cats-drawer-style-minimal .bristle-cats-toggle[aria-expanded="true"] { color: var(--bristle-accent); }
.bristle-cats-drawer-style-minimal .bristle-cats-item > .bristle-cats-list { background: #fafafa; }

/* ---------- STYLE: EDITORIAL (bold, big type, index numbers) ---------- */
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-panel {
	background: #f7f5f0;
	color: #0d0d0f;
	width: min(90vw, 420px);
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-header {
	padding: 28px 24px 16px;
	border-bottom: none;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-header h2 {
	color: #0d0d0f;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-close { color: #555; }
/* Index counter on top-level items. */
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list {
	counter-reset: bristle-cat;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list > .bristle-cats-item {
	counter-increment: bristle-cat;
	border-top: 1px solid #ddd9d0;
	border-bottom: none;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list > .bristle-cats-item:last-child {
	border-bottom: 1px solid #ddd9d0;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list > .bristle-cats-item > .bristle-cats-row > .bristle-cats-link::before {
	content: counter(bristle-cat, decimal-leading-zero);
	font-size: 11px;
	color: var(--bristle-accent);
	font-weight: 700;
	margin-right: 12px;
	font-feature-settings: 'tnum';
	align-self: flex-start;
	padding-top: 4px;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list > .bristle-cats-item > .bristle-cats-row > .bristle-cats-link {
	padding: 18px 24px;
}
.bristle-cats-drawer-style-editorial .bristle-cats-mobile-body > .bristle-cats-list > .bristle-cats-item > .bristle-cats-row > .bristle-cats-link .bristle-cats-label {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.bristle-cats-drawer-style-editorial .bristle-cats-link:hover { background: transparent; color: var(--bristle-accent); }
.bristle-cats-drawer-style-editorial .bristle-cats-toggle {
	border: none; background: transparent;
	color: var(--bristle-accent); font-size: 22px;
}
.bristle-cats-drawer-style-editorial .bristle-cats-item > .bristle-cats-list { background: transparent; }
.bristle-cats-drawer-style-editorial .bristle-cats-depth-1 .bristle-cats-link {
	font-size: 15px; color: #555; padding-left: 48px;
}

/* ---------- STYLE: GRID (tiles) ---------- */
.bristle-cats-drawer-style-grid .bristle-cats-mobile-panel {
	background: #101015;
	color: #f1f1f4;
	width: min(90vw, 420px);
}
.bristle-cats-drawer-style-grid .bristle-cats-mobile-header {
	padding: 22px 18px 16px;
	border-bottom: 1px solid #22222a;
}
.bristle-cats-drawer-style-grid .bristle-cats-mobile-header h2 {
	color: #fff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
}
.bristle-cats-drawer-style-grid .bristle-cats-mobile-close {
	border-radius: 8px;
	background: #22222a; color: #fff;
}
.bristle-cats-drawer-style-grid .bristle-cats-mobile-body { padding: 16px; }
.bristle-cats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.bristle-cats-tile {
	background: linear-gradient(160deg, #1b1b22, #141419);
	border: 1px solid #26262f;
	border-radius: 14px;
	padding: 16px 14px;
	min-height: 92px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	color: #f1f1f4;
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	position: relative;
	overflow: hidden;
}
.bristle-cats-tile::after {
	content: '';
	position: absolute; top: 0; right: 0;
	width: 40px; height: 40px;
	background: radial-gradient(circle at top right, rgba(224,32,42,0.4), transparent 70%);
}
.bristle-cats-tile:hover {
	border-color: var(--bristle-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(224,32,42,0.5);
}
.bristle-cats-tile-icon {
	width: 30px; height: 30px; border-radius: 8px;
	background: #26262f;
	display: flex; align-items: center; justify-content: center;
	color: var(--bristle-accent);
}
.bristle-cats-tile-icon img { width: 20px; height: 20px; object-fit: contain; }
.bristle-cats-tile-name {
	font-weight: 600; font-size: 14px;
	text-transform: uppercase; letter-spacing: 0.02em;
	line-height: 1.15;
}
.bristle-cats-tile--wide {
	grid-column: 1 / -1;
	min-height: 0;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.bristle-cats-tile--wide .bristle-cats-tile-name { font-size: 15px; }