/**
 * Bristle Up Categories — the designed category page header (1.46.0, WO-051, A6 R-179; PLAN-051 §4).
 * Loaded ONLY on a product category page while "Use the designed header on every product category page" is on.
 * The board's colours, as the header's own variables (every text 4.5 : 1 or better, checked in the browser per look);
 * the fonts are the theme's. Computer from 850 px (the theme's breakpoint), phone below.
 */

.bch {
	--bch-band: #f4f1ec;
	--bch-border: 0;
	--bch-ink: #1b1b1b;
	--bch-muted: #5f5a52;
	--bch-body: #2b2925;
	--bch-link: #a3121a;
	--bch-link-line: rgba(200, 22, 31, .35);
	--bch-box: #141414;
	--bch-box-border: 0;
	--bch-box-ink: #ffffff;
	--bch-box-h: #ff8a8f;
	--bch-red: #c8161f;
	--bch-red-dark: #a3121a;
	--bch-lines: 3;
	background: var(--bch-band);
	border-bottom: var(--bch-border);
	color: var(--bch-ink);
	padding: 14px 16px 18px;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}
.bch-look-white { --bch-band: #ffffff; --bch-border: 1px solid #e3ded6; }
.bch-look-dark {
	--bch-band: #141414;
	--bch-ink: #ffffff;
	--bch-muted: #c9c4bc;
	--bch-body: #e8e4dd;
	--bch-link: #ff9ea2;
	--bch-link-line: rgba(255, 158, 162, .45);
	--bch-box: #262626;
	--bch-box-border: 1px solid #3a3a3a;
}

/* The breadcrumb: its links quiet, the page it is on in the ink, whatever the theme gives a breadcrumb. */
.bch .bch-crumb { font-size: 13px; line-height: 1.4; color: var(--bch-muted); }
.bch .bch-crumb .woocommerce-breadcrumb,
.bch .bch-crumb .breadcrumbs,
.bch .bch-crumb nav {
	margin: 0; padding: 0; font-size: inherit; line-height: inherit; text-transform: none; letter-spacing: 0;
	color: var(--bch-ink); font-weight: 600;
}
.bch .bch-crumb a { color: var(--bch-muted); font-weight: 400; text-decoration: none; }
.bch .bch-crumb a:hover,
.bch .bch-crumb a:focus { color: var(--bch-ink); text-decoration: underline; }
.bch .bch-crumb .divider { color: var(--bch-muted); font-weight: 400; margin: 0 .35em; opacity: 1; }

.bch .bch-row { display: flex; flex-direction: column; gap: 10px; }
.bch .bch-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.bch .bch-title {
	margin: 0; padding: 0; color: var(--bch-ink); text-transform: uppercase; line-height: .95; letter-spacing: .01em;
	overflow-wrap: break-word;
}
/* On a phone the board's sizes, but no wider than the screen allows, so a long one-word name fits its band. */
.bch-t-l .bch-title { font-size: min(34px, 8.5vw); }
.bch-t-xl .bch-title { font-size: min(42px, 10vw); }
.bch-t-theme .bch-title { line-height: 1.05; }

.bch .bch-rule { display: block; width: 44px; height: 4px; background: var(--bch-red); }

.bch .bch-intro { max-width: 760px; color: var(--bch-body); font-size: 16px; line-height: 1.55; }
.bch .bch-intro p { margin: 0 0 .6em; color: inherit; font-size: inherit; line-height: inherit; }
.bch .bch-intro > :last-child { margin-bottom: 0; }
/* Headings in the text (an <h1> is already an <h2> here) stay modest inside the intro, in the ink colour. */
.bch .bch-intro h2,
.bch .bch-intro h3,
.bch .bch-intro h4,
.bch .bch-intro h5,
.bch .bch-intro h6 { margin: 0 0 .4em; color: var(--bch-ink); font-size: 1.1em; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.bch .bch-intro a { color: inherit; text-decoration: underline; }
.bch-links .bch-intro a {
	color: var(--bch-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
	text-underline-offset: 3px; text-decoration-color: var(--bch-link-line);
}
.bch-links .bch-intro a:hover,
.bch-links .bch-intro a:focus { color: var(--bch-link); text-decoration-color: currentColor; }

/* Folded only once the script runs (no script: the whole text, and no button). */
.bch-l-23 { --bch-lines: 3; }
.bch-l-34 { --bch-lines: 4; }
.bch.bch-js .bch-intro:not(.is-open) {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--bch-lines); line-clamp: var(--bch-lines);
	overflow: hidden;
}
.bch .bch-more {
	align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--bch-ink); font: inherit; font-size: 15px;
	font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; text-decoration: underline;
	text-underline-offset: 3px; cursor: pointer;
}
.bch .bch-more:hover,
.bch .bch-more:focus { background: none; color: var(--bch-ink); box-shadow: none; }
.bch .bch-more:focus-visible { outline: 2px solid var(--bch-ink); outline-offset: 2px; }
.bch .bch-more[hidden] { display: none; }

/* The help box. */
.bch .bch-box {
	background: var(--bch-box); border: var(--bch-box-border); color: var(--bch-box-ink); padding: 16px;
	display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
}
.bch .bch-box-h {
	margin: 0; color: var(--bch-box-h); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .14em;
	text-transform: uppercase;
}
.bch .bch-box-l { margin: 0; color: var(--bch-box-ink); font-size: 18px; font-weight: 700; line-height: 1.25; }
.bch .bch-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 20px;
	background: var(--bch-red); color: #ffffff; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: .06em;
	text-transform: uppercase; text-decoration: none; box-sizing: border-box;
}
.bch .bch-btn:hover,
.bch .bch-btn:focus { background: var(--bch-red-dark); color: #ffffff; text-decoration: none; }
.bch .bch-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.bch .bch-btn svg { flex-shrink: 0; }

/* The ad space (WO-044 W, Full width with an ad space): after the header's content on a phone. */
.bch .bristle-cats-cat-ad { margin: 6px 0 0; }

@media (min-width: 850px) {
	.bch { padding: 22px 32px 26px; gap: 12px; }
	.bch .bch-crumb { font-size: 14px; }
	/* The title and intro start at the top; the box sits at the row's foot. With a long intro that is the board's
	   bottom alignment; with a short one the title stays under the breadcrumb (no gap above it). */
	.bch .bch-row { flex-direction: row; align-items: flex-start; gap: 40px; }
	.bch .bch-main { flex: 1 1 auto; gap: 14px; }
	.bch-t-l .bch-title { font-size: 48px; }
	.bch-t-xl .bch-title { font-size: 64px; }
	.bch .bch-rule { width: 56px; }
	.bch .bch-intro { font-size: 17px; line-height: 1.6; }
	.bch-l-23 { --bch-lines: 2; }
	.bch-l-34 { --bch-lines: 3; }
	.bch .bch-more { min-height: 32px; }
	.bch .bch-box { width: 400px; flex: 0 0 400px; align-self: flex-end; padding: 22px 24px; gap: 14px; }
	.bch .bch-box-h { font-size: 13px; }
	.bch .bch-box-l { font-size: 21px; }
	.bch .bch-btn { align-self: flex-start; }

	/* With an ad on the right, the box goes under the intro (they would compete for the right side). */
	.bch.bch-ad .bch-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 14px 28px; }
	.bch.bch-ad .bch-main { grid-column: 1; }
	.bch.bch-ad .bch-box { grid-column: 1; width: auto; flex: none; max-width: 760px; }
	.bch.bch-ad .bristle-cats-cat-ad { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}