/**
 * Guides section — the world-switch button and the two worlds' accents.
 *
 * A SEPARATE STYLESHEET, and it has to be. frontend.css is one of the thirteen
 * files that must stay byte-identical to v1.9.2, so every rule the Guides
 * feature needs lives here and loads only when the feature is switched on.
 *
 * Everything is scoped under .bristle-guides-* or a body class. Nothing here
 * restyles the product menu; the shop drawer and bar look exactly as they did.
 */

/* ------------------------------------------------ the world-switch button */
.bristle-guides-btn-wrap {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: 6px;
}

/* "before" puts it on the other side of the Categories button. */
.bristle-guides-btn-wrap--before {
	order: -1;
	margin-left: 0;
	margin-right: 6px;
}

.bristle-guides-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 38px;
	padding: 0 12px;
	border-radius: 5px;
	color: #fff !important;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1;
	white-space: nowrap;
	transition: filter .15s ease;
}

.bristle-guides-btn:hover,
.bristle-guides-btn:focus {
	filter: brightness(1.12);
	color: #fff !important;
}

.bristle-guides-btn__icon { font-size: 13px; }

/*
 * NO SEARCH-WIDTH RULE LIVES HERE ANY MORE (v1.28.0).
 *
 * The mobile module already shrinks the search inside its own row, and it is
 * the only thing that should: this feature has no business sizing an element it
 * does not own. The rule that used to be here fought the module for the same
 * space and is the reason the header kept breaking.
 */

/* --------------------------------------------- the drawer's cross-world row */
.bristle-guides-cross {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 16px;
	font-weight: 800;
	font-size: 13.5px;
	color: #fff;
	text-decoration: none;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bristle-guides-cross--guides { background: rgba(44, 110, 73, .18); }
.bristle-guides-cross--shop   { background: rgba(224, 30, 43, .18); }

.bristle-guides-cross:hover,
.bristle-guides-cross:focus { color: #fff; filter: brightness(1.3); }

/* ------------------------------------------------------- the guides world */
/* The accent that distinguishes the two worlds, applied only in guides mode. */
/*
 * Scoped to the mobile toggle. With mobile off the drawer on the page is the
 * module's OWN product drawer, and recolouring its header would be exactly the
 * kind of residue this release removes — invisible in a diff of the markup,
 * plainly visible on the screen.
 */
.has-bristle-guides-mobile.bristle-guides-mode .bristle-cats-mobile-header { border-bottom-color: var(--bristle-guides-color, #2c6e49); }
.has-bristle-guides-mobile.bristle-guides-mode .bristle-cats-mobile-close  { background: var(--bristle-guides-color, #2c6e49); }

/*
 * In the category bar the spec wants it inline at the END of the row,
 * right-aligned. margin-left:auto does that in the bar's flex row without
 * needing to know how many categories precede it.
 */
.bristle-cats-bar .bristle-guides-bar-btn {
	margin-left: auto;
	margin-right: 4px;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	align-self: center;
}

.bristle-cats-bar .bristle-guides-bar-btn .bristle-guides-btn {
	height: 30px;
	font-size: 11px;
}

/*
 * On a phone the label alone is enough; the icon keeps the target tappable
 * without pushing the shortened search field any narrower.
 */
/*
 * On the narrowest phones the button tightens, but the LABEL is never
 * truncated: an earlier revision clipped it to 62px and the button read
 * "S…" instead of "SHOP", which is worse than a slightly narrower search box.
 * The search field gives up the width instead — see the rule above.
 */
@media (max-width: 549px) {
	.bristle-guides-btn { padding: 0 8px; font-size: 9px; }
	.bristle-guides-btn__label { white-space: nowrap; }
}

/*
 * THE NEXT ITEM AFTER THE LAST CATEGORY — not pinned to the far edge.
 *
 * margin-left:auto used to claim all the leftover width, which pushed the
 * button to the extreme right of the bar with an empty gap behind it. It read
 * as detached from the menu rather than part of it. Now it simply flows as the
 * next flex item, with a small gap of its own.
 *
 * THE BOTTOM MARGIN IS DELIBERATELY NOT SET. The theme gives every <li> in this
 * list a bottom margin, and that margin is what positions the whole row on its
 * shared vertical axis. Zeroing it — which the generic header rule above does —
 * left this button centred about 5px lower than the category text beside it.
 * Inheriting the same rule as its siblings keeps it on their line without a
 * hard-coded offset that would drift the moment the theme's spacing changes.
 */
.bristle-cats-bar > li.bristle-guides-bar-btn {
	margin-left: 6px !important;
	margin-right: 0 !important;
	align-self: center;
	order: 999;
}

/* ================================================== v1.28.0 — integration ==
 * The mobile module owns the search row. These rules only describe the switch
 * button's own box inside it.
 *
 * WHAT IS DELIBERATELY ABSENT: anything that shrinks the search field, and
 * anything at all that selects the Categories button. Both were here until
 * v1.27.4 and both were mistakes — the module already shrinks the search with
 *
 *     .bristle-cats-search-row > *:not([data-bristle-mobile-btn]) {
 *         flex: 1 1 auto; min-width: 0;
 *     }
 *
 * and that rule already exempts its own button. The v1.27.2 stylesheet added a
 * competing `min-width: 0` ON that button, cancelling the module's protection
 * and letting it collapse to nothing on a narrow screen.
 * ========================================================================== */

/*
 * The module's shrink rule targets everything in the row that is not the
 * Categories button — which would include the switch. This exempts it, so the
 * search remains the only element that gives up width.
 */
.bristle-cats-search-row > [data-bristle-guides-btn].bristle-guides-btn-wrap {
	flex: 0 0 auto;
	min-width: auto;
}



/* The hidden source element the script clones from. */
.bristle-guides-source { display: none !important; }

/*
 * THE SWITCH IS VISIBLE IN THAT ROW ONLY WHERE THE MODULE'S BUTTON IS.
 *
 * `.bristle-cats-search-row` is not mobile-only. The module resolves whichever
 * search element the header exposes, and on this theme that row is present and
 * visible on desktop as well — it is the module's OWN button that is hidden
 * above the breakpoint, by this rule in frontend.css:
 *
 *     @media (min-width: 850px) {
 *         .bristle-cats-mobile-btn-wrap { display: none !important; }
 *     }
 *
 * Without the matching rule here the switch stayed behind on its own at desktop
 * widths, floating beside the search with no Categories button next to it and a
 * second copy already sitting in the category bar below — which is the original
 * WO-017-FIX2 complaint, arriving again. v1.27.x hid that copy from JavaScript
 * (`hideUnpaired`); doing it in CSS at the module's own breakpoint is the same
 * answer without a second system to maintain.
 *
 * The 850px is the module's number, not one of ours. If it ever moves in
 * frontend.css, it has to move here too — the coupling is deliberate and is
 * asserted by wo017fix2 (desktop) and wo017-mobile-integration (mobile).
 */
@media (min-width: 850px) {
	.bristle-cats-search-row > [data-bristle-guides-btn].bristle-guides-btn-wrap {
		display: none !important;
	}
}

/*
 * ONE CONSTRAINT ON THE ROW — AND THE MODULE'S OWN RULE DOES THE SHRINKING.
 *
 * This is a deviation from the letter of the work order ("remove the
 * search-shrink code"), and it is here because the measurement contradicted the
 * assumption behind that instruction. Reverting it is one deletion.
 *
 * WHAT I ASSUMED: that frontend.css already shrinks the search, because it says
 *
 *     .bristle-cats-search-row > *:not([data-bristle-mobile-btn]) {
 *         flex: 1 1 auto; min-width: 0;
 *     }
 *
 * WHAT IS ACTUALLY TRUE: that rule PERMITS shrinking, it does not cause it.
 * Flex only shrinks when the line is over-subscribed, and on this header it
 * never is. Measured at three viewports, with the feature off:
 *
 *     viewport 390 / 360 / 320  ->  row 15..452 in ALL THREE
 *     search 217px, CATEGORIES 131px, gaps 16px  =  432  <=  row 437
 *
 * The row's parent is sized by its content (the search input carries a large
 * min-content width), so the ROW is 437px wide whatever the screen is, and the
 * overflow is the row against the VIEWPORT — not the children against the row.
 * There is no deficit inside the line, so nothing shrinks, and everything past
 * 390px simply hangs off the edge. That is also why the v1.27.4 notes recorded
 * the Categories button clipped by 64px at 320px WITH THE FEATURE OFF: it is the
 * header's behaviour, not the feature's.
 *
 * So capping the row is what creates the deficit that the module's own rule then
 * resolves — the search yields, both buttons keep `flex: 0 0 auto`, and nothing
 * here touches the Categories button or names the search element. The 32px is a
 * deliberate inset for the header's horizontal padding (measured at 15px each
 * side). Erring wide would clip a button; erring narrow only makes the search a
 * little smaller, so the safe direction is the one taken.
 *
 * Verified across 12 states (390/360/320 x shop/guides x position after/before)
 * by tests\diag-switch-visible.js: every element fully on screen in all twelve,
 * against six failures before it.
 */
@media (max-width: 849px) {
	.bristle-cats-search-row.bristle-guides-paired {
		max-width: calc(100vw - 32px);
	}
}