/**
 * Bristle Up Categories · the phone header row (v1.49.0, WO-056 A / R-192.1).
 *
 * Printed only while the switch is on (Bristle_Cats_Header_Row). It dresses the `.bristle-cats-search-row` that
 * frontend.js builds; every rule is under `body.bristle-hrow`, inside that row, and under 850 px (the one rule at 850 px
 * and up only hides the search key). A FiboSearch box anywhere else, and the desktop header, are never selected.
 *
 * WHY THE ROW'S CHILDREN LOSE THEIR LIST STYLE (DIAGNOSIS-056): wrapped in the row's div, Flatsome's header item
 * (`li.header-search-form`) is no longer matched by Flatsome's child rule `.nav>li{display:inline-block;
 * list-style:none;margin:0 7px}`, so it becomes a list item with the disc of `ul{list-style:disc}` (its marker line pushes
 * the field 18 px down) and gets `li{margin-bottom:.6em}` back. This sheet gives it what `.nav>li` gave it.
 *
 * !important, only where a rule must beat one (DECIDED, WO-056): the switch's background (an inline `style` attribute
 * printed by class-guides.php), its text colour (guides.css sets `color: #fff !important`), and the opened search's
 * position (Flatsome's `.relative { position: relative !important }` on the search item).
 *
 * The button type is 12 px up to 389 px wide and 13 px from 390 px: one clamp() (no second media query) — under 390 the
 * middle term is 0 or negative, from 390 it is 1000 px or more.
 */

@media (max-width: 849px) {

	/* ---------------------------------------------------------------- the row and its children */
	body.bristle-hrow .bristle-cats-search-row {
		align-items: center;
		gap: 8px;
		list-style: none;
	}
	body.bristle-hrow .bristle-cats-search-row > * {
		list-style: none;
		margin: 0;
	}
	/* The header's search item (an li on Flatsome; the Categories wrap can be an li too, and keeps its own display). */
	body.bristle-hrow .bristle-cats-search-row > li:not([data-bristle-mobile-btn]) {
		display: block;
		padding: 0;
	}
	body.bristle-hrow .bristle-cats-search-row > [data-bristle-mobile-btn],
	body.bristle-hrow .bristle-cats-search-row > [data-bristle-guides-btn] {
		flex: 0 0 auto;
		align-items: center;
	}

	/* ---------------------------------------------------------------- FiboSearch: one 40 px box */
	body.bristle-hrow .bristle-cats-search-row .header-search-form-wrapper,
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-search-wrapp,
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-search-form {
		margin: 0;
		min-width: 0;
	}
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-sf-wrapp {
		display: flex;
		align-items: stretch;
		box-sizing: border-box;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 1.5px solid #cfcfcf;
		border-radius: 8px;
		background: #fff;
		box-shadow: none;
		overflow: hidden;
	}
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-sf-wrapp:focus-within {
		border-color: #222;
	}
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
		flex: 1 1 auto;
		box-sizing: border-box;
		width: auto;
		min-width: 0;
		height: 100%;
		min-height: 0;
		margin: 0;
		padding: 0 0 0 11px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		line-height: normal;
	}
	/* The key is a flex item (in the flow, not FiboSearch's absolute key) but stays a positioned box with no offset:
	   FiboSearch places its magnifier (`.dgwt-wcas-ico-magnifier`, absolute, centred) and its arrow (`::before`,
	   left -6px) against it. */
	body.bristle-hrow .bristle-cats-search-row .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
		position: relative;
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 37px;
		min-width: 0;
		height: 100%;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		line-height: 1;
	}

	/* ---------------------------------------------------------------- the two buttons: the same box, no icons */
	body.bristle-hrow .bristle-cats-search-row .bristle-cats-mobile-btn,
	body.bristle-hrow .bristle-cats-search-row .bristle-guides-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0 12px;
		border: 0;
		border-radius: 8px;
		font-size: clamp(12px, (100vw - 389px) * 1000, 13px);
		font-weight: 800;
		line-height: 1;
		letter-spacing: .05em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	body.bristle-hrow .bristle-cats-search-row .bristle-cats-mobile-btn-icon,
	body.bristle-hrow .bristle-cats-search-row .bristle-guides-btn__icon {
		display: none;
	}
	body.bristle-hrow .bristle-cats-search-row .bristle-cats-mobile-btn:focus-visible,
	body.bristle-hrow .bristle-cats-search-row .bristle-guides-btn:focus-visible,
	body.bristle-hrow .bristle-cats-search-row .bristle-hrow-key:focus-visible {
		outline: 2px solid #222;
		outline-offset: 2px;
	}

	/* Each button's colour: Categories the plugin accent, the switch its world's (the colour its inline style prints). */
	body.bristle-hrow .bristle-cats-search-row .bristle-cats-mobile-btn {
		--bristle-hrow-c: var(--bristle-accent);
		--bristle-hrow-t: var(--bristle-hrow-tint-accent, #f2f2f2);
	}
	body.bristle-hrow .bristle-cats-search-row .bristle-guides-btn--guides {
		--bristle-hrow-c: var(--bristle-guides-color);
		--bristle-hrow-t: var(--bristle-hrow-tint-guides, #f2f2f2);
	}
	body.bristle-hrow .bristle-cats-search-row .bristle-guides-btn--shop {
		--bristle-hrow-c: var(--bristle-shop-color);
		--bristle-hrow-t: var(--bristle-hrow-tint-shop, #f2f2f2);
	}

	/* ---------------------------------------------------------------- the looks (the mockup's CSS) */
	body.bristle-hrow--solid .bristle-cats-search-row .bristle-cats-mobile-btn {
		background: var(--bristle-hrow-c);
		color: #fff;
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
	}
	body.bristle-hrow--solid .bristle-cats-search-row .bristle-guides-btn {
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
	}

	body.bristle-hrow--outline .bristle-cats-search-row .bristle-cats-mobile-btn {
		background: #fff;
		color: var(--bristle-hrow-c);
		box-shadow: inset 0 0 0 1.5px var(--bristle-hrow-c);
	}
	body.bristle-hrow--outline .bristle-cats-search-row .bristle-guides-btn {
		background: #fff !important;
		color: var(--bristle-hrow-c) !important;
		box-shadow: inset 0 0 0 1.5px var(--bristle-hrow-c);
	}

	body.bristle-hrow--soft .bristle-cats-search-row .bristle-cats-mobile-btn {
		background: var(--bristle-hrow-t);
		color: var(--bristle-hrow-c);
		box-shadow: none;
	}
	body.bristle-hrow--soft .bristle-cats-search-row .bristle-guides-btn {
		background: var(--bristle-hrow-t) !important;
		color: var(--bristle-hrow-c) !important;
		box-shadow: none;
	}
	body.bristle-hrow--soft .bristle-cats-search-row .dgwt-wcas-sf-wrapp,
	body.bristle-hrow--soft .bristle-cats-search-row .bristle-hrow-key {
		border-color: transparent;
		background: #f2f2f2;
	}

	body.bristle-hrow--dark .bristle-cats-search-row .bristle-cats-mobile-btn {
		background: #1d1d1f;
		color: #fff;
		box-shadow: inset 0 -3px 0 var(--bristle-hrow-c);
	}
	body.bristle-hrow--dark .bristle-cats-search-row .bristle-guides-btn {
		background: #1d1d1f !important;
		box-shadow: inset 0 -3px 0 var(--bristle-hrow-c);
	}
	body.bristle-hrow--dark .bristle-cats-search-row .dgwt-wcas-sf-wrapp,
	body.bristle-hrow--dark .bristle-cats-search-row .bristle-hrow-key {
		border-color: #1d1d1f;
	}

	/* ---------------------------------------------------------------- Joined: only when the two wraps sit side by side */
	body.bristle-hrow--joined .bristle-cats-search-row > [data-bristle-mobile-btn] + .bristle-guides-btn-wrap--after {
		margin-left: -8px;
	}
	body.bristle-hrow--joined .bristle-cats-search-row > [data-bristle-mobile-btn] + .bristle-guides-btn-wrap--after .bristle-guides-btn {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	body.bristle-hrow--joined .bristle-cats-search-row > [data-bristle-mobile-btn]:has(+ .bristle-guides-btn-wrap--after) .bristle-cats-mobile-btn {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: 1px solid rgba(255, 255, 255, .35);
	}
	body.bristle-hrow--joined.bristle-hrow--soft .bristle-cats-search-row > [data-bristle-mobile-btn]:has(+ .bristle-guides-btn-wrap--after) .bristle-cats-mobile-btn {
		border-right-color: #fff;
	}
	body.bristle-hrow--joined.bristle-hrow--dark .bristle-cats-search-row > [data-bristle-mobile-btn]:has(+ .bristle-guides-btn-wrap--after) .bristle-cats-mobile-btn {
		border-right-color: #444;
	}
	/* Outline joined: one ink ring round the pair (each button draws its three outer sides) and an ink divider. */
	body.bristle-hrow--joined.bristle-hrow--outline .bristle-cats-search-row > [data-bristle-mobile-btn]:has(+ .bristle-guides-btn-wrap--after) .bristle-cats-mobile-btn {
		border-right: 1.5px solid #222;
		box-shadow: inset 1.5px 0 0 #222, inset 0 1.5px 0 #222, inset 0 -1.5px 0 #222;
	}
	body.bristle-hrow--joined.bristle-hrow--outline .bristle-cats-search-row > [data-bristle-mobile-btn] + .bristle-guides-btn-wrap--after .bristle-guides-btn {
		box-shadow: inset -1.5px 0 0 #222, inset 0 1.5px 0 #222, inset 0 -1.5px 0 #222;
	}

	/* ---------------------------------------------------------------- Search opens: only once the script has run */
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js {
		position: relative;
	}
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > [data-bristle-mobile-btn],
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > [data-bristle-guides-btn] {
		flex: 1 1 0;
		min-width: 0;
	}
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > [data-bristle-mobile-btn] .bristle-cats-mobile-btn,
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > [data-bristle-guides-btn] .bristle-guides-btn {
		width: 100%;
	}
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > .bristle-hrow-search {
		display: none;
	}
	/* Over the buttons, up to the key. Flatsome puts its utility class `relative` (`position: relative !important`) on the
	   search item, so the position needs !important; `width: auto` undoes `.search-form { width: 60% }`, which would
	   otherwise win over `right`. */
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js.bristle-hrow-open > .bristle-hrow-search {
		display: flex;
		align-items: center;
		position: absolute !important;
		top: 0;
		bottom: 0;
		left: 0;
		right: 48px;
		width: auto;
		z-index: 2;
		border-radius: 8px; /* the wrapper's corners: its white cover shows no square corners behind them */
		background: #fff;
	}
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js.bristle-hrow-open > .bristle-hrow-search > * {
		flex: 1 1 auto;
		min-width: 0;
	}
	body.bristle-hrow--opens .bristle-cats-search-row.bristle-hrow-js > .bristle-hrow-key {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		order: 99;
		position: relative;
		z-index: 3;
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 1.5px solid #cfcfcf;
		border-radius: 8px;
		background: #fff;
		color: #222;
		line-height: 1;
		box-shadow: none;
	}
}

@media (min-width: 850px) {
	body.bristle-hrow .bristle-cats-search-row .bristle-hrow-btn {
		display: none;
	}
}