/**
 * Brand archive - /brand/{slug}/ (pa_brand). Layer 2DK.
 *
 * Every rule here is scoped to body.kajo-brand-archive, a class the companion
 * MU plugin adds only when the queried object is a pa_brand term. Nothing in
 * this file can reach the shop, a product category, or any other archive.
 *
 * Colours are the site's own: #fbf7ef is --kajo-cream and #f58634 is the
 * accent that --kajo-orange, --kajo-footer-accent, --kajo-cart-accent and
 * --kajo-add-accent all resolve to. Corners are square throughout, per brief.
 */

body.kajo-brand-archive {
	--kajo-ba-cream: #fbf7ef;
	--kajo-ba-orange: #f58634;
	--kajo-ba-olive: #526948;
	--kajo-ba-line: rgba(0, 0, 0, .10);
	--kajo-ba-ink-soft: rgba(0, 0, 0, .68);
	--kajo-ba-gutter: 20px;
}

/* ------------------------------------------------------------------ hero */

/*
 * Full width with no 100vw negative-margin trick, because the MU plugin hooks
 * woodmart_after_header - which fires inside .wd-page-content but before
 * <main class="container"> opens. The element is simply already full width.
 */
body.kajo-brand-archive .kajo-ba-hero {
	/* 2DQ: the cream is gone. With the About band already white, a cream hero
	 * was the only tinted block left on the page and it read as a banner
	 * rather than as the top of the content. */
	background: #fff;
	border-bottom: 1px solid var(--kajo-ba-line);
	/* sharp, as asked - this is a band, not a card */
	border-radius: 0;
}

body.kajo-brand-archive .kajo-ba-hero__inner {
	display: grid;
	/* the column sizes itself to the frame, which differs between the round
	 * and wide variants */
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"logo title"
		"logo intro";
	align-content: center;
	align-items: center;
	/* 2DQ: 28px had the mark almost touching the heading */
	column-gap: 56px;
	row-gap: 10px;
	/* 2DQ: matches the About band, so the two sections line up and the page
	 * stops wasting its outer margins on a wide screen */
	max-width: min(1340px, 94vw);
	margin: 0 auto;
	padding: 38px var(--kajo-ba-gutter);
}

@media (min-width: 1500px) {
	body.kajo-brand-archive .kajo-ba-hero__inner {
		column-gap: 72px;
	}
}

/* no logo: let the text use the full measure rather than leaving a gap */
body.kajo-brand-archive .kajo-ba-hero--nologo .kajo-ba-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"title"
		"intro";
}

body.kajo-brand-archive .kajo-ba-hero__logobox {
	grid-area: logo;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* the frame is the thing with a size now */
	line-height: 0;
}

/*
 * The logo sits in a frame with a lit green ring.
 *
 * The ring is a conic gradient on the frame itself; the white surface is an
 * ::after inset by the ring thickness. @property lets the gradient's angle be
 * animated, which is what makes it travel rather than just sit there. Where
 * @property is unsupported the angle stays at its initial value and the ring
 * renders as a static gradient - still correct, just not moving.
 *
 * Which shape a brand gets is decided from its artwork, not its file: every
 * logo here is the same 1200x450 canvas, so the drawn mark is measured after
 * its blank margin is trimmed. 8 of 61 are round marks; the rest are
 * wordmarks, which would be illegible squeezed into a circle.
 */
@property --kajo-ring-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

body.kajo-brand-archive .kajo-ba-hero__frame {
	--kajo-ring: 4px;
	--kajo-frame-radius: 999px;
	position: relative;
	display: grid;
	place-items: center;
	grid-area: logo;
	border-radius: var(--kajo-frame-radius);
	/* two near-white stops are the glint; without them a green conic gradient
	 * at this thickness just reads as a flat olive border */
	background: conic-gradient(
		from var(--kajo-ring-angle),
		#526948 0deg,
		#9caf88 40deg,
		#eaf7dc 72deg,
		#7f9a6b 120deg,
		#3f5438 180deg,
		#9caf88 240deg,
		#f2fbe8 276deg,
		#6d8a5c 320deg,
		#526948 360deg
	);
	box-shadow:
		0 0 0 1px rgba(82, 105, 72, .12),
		0 0 0 7px rgba(156, 175, 136, .11),
		0 14px 30px rgba(82, 105, 72, .20);
	animation: kajo-ring-turn 7s linear infinite;
}

body.kajo-brand-archive .kajo-ba-hero__frame::after {
	content: "";
	position: absolute;
	inset: var(--kajo-ring);
	border-radius: calc(var(--kajo-frame-radius) - var(--kajo-ring));
	background: #fff;
}

@keyframes kajo-ring-turn {
	to {
		--kajo-ring-angle: 360deg;
	}
}

/* a round mark gets a circle */
body.kajo-brand-archive .kajo-ba-hero__frame--round {
	--kajo-fit: 104px;
	width: 148px;
	height: 148px;
}

/* a wordmark gets the same ring on a shape that actually fits it */
body.kajo-brand-archive .kajo-ba-hero__frame--wide {
	--kajo-frame-radius: 28px;
	--kajo-fit: 152px;
	width: 200px;
	height: 126px;
}

/*
 * Fallback, used when the artwork could not be measured: fit the whole canvas.
 */
body.kajo-brand-archive .kajo-ba-hero__logo {
	position: relative;
	z-index: 1;
	display: block;
	object-fit: contain;
	object-position: center;
	max-width: 100%;
	width: var(--kajo-fit);
	height: var(--kajo-fit);
}

/*
 * Measured: scale the image until the ARTWORK, not the canvas, fills --kajo-fit,
 * then centre the artwork's own box in the frame.
 *
 * Every logo here is the same 1200x450 canvas, so a square mark occupies at
 * most 37% of the canvas width. Fitting the canvas rendered such a mark about
 * a third of its intended size, adrift inside the ring. These sums put the
 * mark itself at the size the frame was designed around.
 */
body.kajo-brand-archive .kajo-ba-hero__frame.is-measured {
	overflow: hidden;
	--kajo-img-w: calc(
		var(--kajo-fit) / max(var(--art-w), calc(var(--art-h) / var(--art-ar)))
	);
}

body.kajo-brand-archive .kajo-ba-hero__frame.is-measured .kajo-ba-hero__logo {
	position: absolute;
	width: var(--kajo-img-w);
	height: calc(var(--kajo-img-w) / var(--art-ar));
	max-width: none;
	left: calc(50% - (var(--art-x) + var(--art-w) / 2) * var(--kajo-img-w));
	top: calc(
		50% - (var(--art-y) + var(--art-h) / 2) * var(--kajo-img-w) / var(--art-ar)
	);
}

@media (prefers-reduced-motion: reduce) {
	body.kajo-brand-archive .kajo-ba-hero__frame {
		animation: none;
	}
}

body.kajo-brand-archive .kajo-ba-hero__body {
	display: contents;
}

/* The theme styles archive headings at a higher specificity than a single
 * class, which is the same trap that capped the Shop by Brand headline at
 * 25px in 2DH. Matching it here rather than discovering it on a phone. */
body.kajo-brand-archive .kajo-ba-hero .kajo-ba-hero__title,
body.kajo-brand-archive .kajo-ba-hero__title {
	grid-area: title;
	margin: 0;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.12;
	letter-spacing: -.01em;
	font-weight: 700;
	text-wrap: balance;
}

/* the restrained orange accent: a short rule under the heading */
body.kajo-brand-archive .kajo-ba-hero__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 10px;
	background: var(--kajo-ba-orange);
}

body.kajo-brand-archive .kajo-ba-hero__intro {
	grid-area: intro;
	max-width: 76ch;
	margin: 4px 0 0;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
	color: var(--kajo-ba-ink-soft);
	text-wrap: pretty;
}

/* --------------------------------------------------- archive control strip */

/*
 * Hidden on brand archives only. Done in CSS rather than by unhooking
 * woodmart_catalog_ordering and friends: the ordering form participates in the
 * archive query and the AJAX shop, and display:none cannot break a query
 * whereas removing the hook might.
 */
body.kajo-brand-archive .shop-loop-head .wd-breadcrumbs,
body.kajo-brand-archive .shop-loop-head .woocommerce-breadcrumb,
body.kajo-brand-archive .wd-products-shop-view,
body.kajo-brand-archive .wd-products-per-page,
body.kajo-brand-archive .woocommerce-ordering,
body.kajo-brand-archive .wd-shop-tools .per-row {
	display: none !important;
}

/* the breadcrumb was the only thing in the first tools column; without it the
 * column would otherwise hold open an empty gap above the grid */
body.kajo-brand-archive .shop-loop-head {
	margin-bottom: 14px;
	padding-top: 0;
	border-bottom: 0;
}

/* the Filters trigger stays - it opens the theme's existing sidebar panel and
 * no new filter logic is introduced anywhere in this layer */
body.kajo-brand-archive .wd-show-sidebar-btn {
	border-radius: 0;
}

/* ------------------------------------------------------- shop intro row */

body.kajo-brand-archive .kajo-ba-shoprow {
	margin: 26px 0 2px;
}

body.kajo-brand-archive .kajo-ba-shoprow .kajo-ba-shoprow__title,
body.kajo-brand-archive .kajo-ba-shoprow__title {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
}

body.kajo-brand-archive .kajo-ba-shoprow__sub {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--kajo-ba-ink-soft);
}

/* ----------------------------------------------- product card proportions */

/*
 * Stop the card's text block stretching.
 *
 * The chain: the products grid uses grid-auto-rows: 1fr, so every card matches
 * the tallest in its row. Inside the card, ohmykajo-loop-cards.css gives
 * .product-element-bottom flex: 1 1 auto with align-items: end, so that one
 * block absorbs the whole surplus and its two rows stretch with it. Measured
 * on a brand archive at 390px, the title row was 112px tall holding 32px of
 * text, bottom-aligned - which is the 50px above the title and 44px below it.
 *
 * The surplus is moved to the image area instead. The text block then sits at
 * its natural height and the prices and buttons stay aligned across a row,
 * which is what align-items: end was there for. Nothing about the card's
 * design, sizes or colours changes - only which part absorbs slack.
 *
 * !important throughout because the rules being corrected are themselves
 * !important. Scoped to brand archives, where this was reported; the same
 * mechanism is site-wide but far milder - a product category at the same
 * width measured 26px and 4px rather than 50px and 44px.
 */
/*
 * The rules being corrected live in ohmykajo-loop-cards.css under
 * body.kajo-catalogue, use !important, and pin an explicit
 * grid-template-rows: 112px 28px 34px together with a fixed height. Two
 * consequences:
 *
 *   - grid-auto-rows is inert here, because the rows are explicit. The row
 *     has to be re-templated, not re-flowed.
 *   - body.kajo-brand-archive alone ties with body.kajo-catalogue on
 *     specificity, so which one wins depends on load order. Brand archives
 *     carry both classes, so chaining them wins outright.
 */
body.kajo-brand-archive.kajo-catalogue .wd-product .product-element-top {
	flex: 1 1 auto !important;
}

body.kajo-brand-archive.kajo-catalogue .wd-product .product-element-bottom {
	grid-template-rows: min-content min-content !important;
	grid-auto-rows: min-content !important;
	height: auto !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	align-content: end !important;
}

/*
 * The row template alone is not enough: the header itself carries
 * min-height: 112px, and a min-content row around a 112px item is still
 * 112px. The title keeps its own two-line min/max-height from
 * ohmykajo-loop-cards.css, so clearing the wrapper's floor does not let the
 * titles fall out of alignment.
 */
body.kajo-brand-archive.kajo-catalogue .wd-product .wd-product-header {
	min-height: 0 !important;
	height: auto !important;
}

/* ------------------------------------------- below-grid SEO content + FAQ */

/*
 * This one does have to break out of main.container, so it uses the negative
 * inline margin. The paired overflow-x:clip below is what stops the classic
 * desktop scrollbar - which 100vw does not account for - turning that into a
 * horizontal scroll. clip rather than hidden, so no new scroll container is
 * created and nothing sticky elsewhere is affected.
 */
body.kajo-brand-archive .wd-page-content {
	overflow-x: clip;
}

body.kajo-brand-archive .kajo-ba-seo {
	margin-top: 44px;
	margin-inline: calc(50% - 50vw);
	padding: 52px 0 56px;
	/* 2DN: the cream band is gone. It made this section read as a footer
	 * rather than as content, and it fought the cream hero at the top of the
	 * same page. A hairline plus a short olive tick is enough separation. */
	background: #fff;
	border-top: 1px solid var(--kajo-ba-line);
	border-radius: 0;
	position: relative;
}

/* a 3px olive tick sitting on the hairline, centred on the content column */
body.kajo-brand-archive .kajo-ba-seo::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 3px;
	background: var(--kajo-ba-olive, #526948);
}

body.kajo-brand-archive .kajo-ba-seo__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* 2DP: this is the gap between About and FAQ when they stack, not an
	 * internal gap, so it is generous - they were running together. */
	gap: 44px;
	/* 2DP: wider than the theme container. The band is full width and the
	 * content was leaving a lot of air at both edges on a large screen. */
	max-width: min(1340px, 94vw);
	margin: 0 auto;
	padding: 0 var(--kajo-ba-gutter);
}

/* side by side once there is genuinely room for two readable columns */
@media (min-width: 1100px) {
	body.kajo-brand-archive .kajo-ba-seo__inner:has(.kajo-ba-seo__about):has(.kajo-ba-seo__faq) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* 2DP: 56px let the two columns read as one block. 96px separates them. */
		gap: 96px;
		align-items: start;
	}

	/* a hairline in the gutter, so the split is something more than empty space */
	body.kajo-brand-archive .kajo-ba-seo__inner:has(.kajo-ba-seo__about):has(.kajo-ba-seo__faq) .kajo-ba-seo__faq {
		position: relative;
	}

	body.kajo-brand-archive .kajo-ba-seo__inner:has(.kajo-ba-seo__about):has(.kajo-ba-seo__faq) .kajo-ba-seo__faq::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: -48px;
		width: 1px;
		background: var(--kajo-ba-line);
	}
}

@media (min-width: 1500px) {
	body.kajo-brand-archive .kajo-ba-seo__inner:has(.kajo-ba-seo__about):has(.kajo-ba-seo__faq) {
		gap: 112px;
	}

	body.kajo-brand-archive .kajo-ba-seo__inner:has(.kajo-ba-seo__about):has(.kajo-ba-seo__faq) .kajo-ba-seo__faq::before {
		left: -56px;
	}
}

/* the small label above each heading */
body.kajo-brand-archive .kajo-ba-seo__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kajo-ba-orange);
}

body.kajo-brand-archive .kajo-ba-seo .kajo-ba-seo__heading,
body.kajo-brand-archive .kajo-ba-seo__heading {
	/* 2DP: the heading sat too close to the copy, and to the first FAQ row */
	margin: 0 0 24px;
	font-size: clamp(22px, 2.1vw, 30px);
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

body.kajo-brand-archive .kajo-ba-seo__about p {
	/* the track is now sized to land near a comfortable measure on its own;
	 * this cap is only a backstop for very wide screens */
	max-width: 74ch;
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--kajo-ba-ink-soft);
	text-wrap: pretty;
}

/* the opening paragraph carries a little more weight, so the eye starts there */
body.kajo-brand-archive .kajo-ba-seo__about .kajo-ba-seo__lead {
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(0, 0, 0, .82);
}

body.kajo-brand-archive .kajo-ba-seo__about p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------- internal links in copy */

body.kajo-brand-archive .kajo-ba-link {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(var(--kajo-ba-orange), var(--kajo-ba-orange));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 1px;
	transition: background-size .18s ease, color .18s ease;
}

body.kajo-brand-archive .kajo-ba-link:hover,
body.kajo-brand-archive .kajo-ba-link:focus-visible {
	color: #000;
	background-size: 100% 2px;
}

/* ---------------------------------------------------------------- chips */

/* the run-in line that introduces a chip list */
body.kajo-brand-archive .kajo-ba-chips__lead {
	margin-bottom: 10px;
	font-weight: 600;
	color: rgba(0, 0, 0, .78);
}

body.kajo-brand-archive .kajo-ba-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	max-width: 74ch;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

/*
 * Pills, and a declared exception.
 *
 * Everything else on this page is square, which 2DK set deliberately. Round
 * pills were asked for here specifically, and they do read better as discrete
 * tokens than square ones. The exception stops at the chips - the hero, the
 * cards, the buttons and the accordion all stay sharp.
 */
body.kajo-brand-archive .kajo-ba-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 14px 6px 7px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	line-height: 1.3;
	color: rgba(0, 0, 0, .8);
	list-style: none;
	transition: border-color .18s ease, background-color .18s ease,
		color .18s ease, transform .18s ease;
}

body.kajo-brand-archive .kajo-ba-chips__item:hover {
	border-color: rgba(245, 134, 52, .55);
	background: rgba(245, 134, 52, .07);
	transform: translateY(-1px);
}

body.kajo-brand-archive .kajo-ba-chips__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(82, 105, 72, .10);
	color: var(--kajo-ba-olive, #526948);
	transition: background-color .18s ease, color .18s ease;
}

body.kajo-brand-archive .kajo-ba-chips__label {
	min-width: 0;
}

/* a chip that happens to link somewhere loses the underline and gains a hover */
/* a pill that links somewhere carries the orange, icon included */
body.kajo-brand-archive .kajo-ba-chips__item:has(.kajo-ba-link) {
	border-color: rgba(245, 134, 52, .45);
	background: rgba(245, 134, 52, .07);
}

body.kajo-brand-archive .kajo-ba-chips__item:has(.kajo-ba-link) .kajo-ba-chips__icon {
	background: rgba(245, 134, 52, .16);
	color: var(--kajo-ba-orange);
}

body.kajo-brand-archive .kajo-ba-chips__item .kajo-ba-link {
	background-image: none;
	color: inherit;
}

body.kajo-brand-archive .kajo-ba-chips__item:has(.kajo-ba-link):hover {
	border-color: var(--kajo-ba-orange);
	background: var(--kajo-ba-orange);
	color: #fff;
}

body.kajo-brand-archive .kajo-ba-chips__item:has(.kajo-ba-link):hover .kajo-ba-chips__icon {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ------------------------------------------------------------- accordion */

/*
 * Button + panel rather than <details>/<summary>, because a height animation
 * from 0 to auto is not reliable on <details> outside recent Chrome, and the
 * requested behaviour needs one.
 *
 * Progressive enhancement: the markup ships OPEN. The script adds
 * data-enhanced and closes everything on init, so with no JavaScript every
 * answer is still visible and still in the document. The closed state below is
 * therefore scoped to [data-enhanced].
 */

/* The accordion's own rules now live in assets/css/ohmykajo-faq.css, shared
 * with the product page's FAQ tab so the two cannot drift apart. Only the
 * brand archive's layout for the FAQ column remains in this file. */

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	/*
	 * Clear the fixed mobile header.
	 *
	 * At this breakpoint the child theme's navbar CSS deliberately zeroes
	 * .main-page-wrapper's padding-top, and brand archives have no
	 * .wd-page-title block - which is what gives /shop/ its clearance. The
	 * result is that whatever sits first in .wd-page-content ends up under
	 * the 62px fixed header. That was already true before this layer: the
	 * pre-2DK screenshots show the view icons sliced in half and the
	 * breadcrumb hidden behind the header. The hero inherited the defect
	 * rather than causing it, and fixing it here fixes it for good.
	 *
	 * padding rather than margin, so the cream band runs up behind the
	 * header instead of leaving a white strip above it. The variable is the
	 * child theme's own, declared alongside the rule that zeroes the wrapper.
	 */
	body.kajo-brand-archive .kajo-ba-hero {
		padding-top: var(--kajo-mobile-header-h, 62px);
	}

	body.kajo-brand-archive .kajo-ba-hero__inner {
		column-gap: 36px;
		padding: 28px var(--kajo-ba-gutter);
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--round {
		--kajo-fit: 82px;
		width: 118px;
		height: 118px;
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--wide {
		--kajo-fit: 122px;
		width: 162px;
		height: 102px;
	}
}

/*
 * Mobile: a compact horizontal lockup - small logo beside the title, intro on
 * its own row underneath. Explicitly NOT a large logo stacked above the
 * heading, and kept short so the products start quickly.
 */
@media (max-width: 767px) {
	body.kajo-brand-archive {
		--kajo-ba-gutter: 16px;
	}

	body.kajo-brand-archive .kajo-ba-hero__inner {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"logo title"
			"intro intro";
		column-gap: 14px;
		row-gap: 12px;
		/* 2DR: 18px on top of the 62px header clearance left a visible band of
		 * empty white between the header and the lockup. The clearance has to
		 * stay; the decorative padding does not. */
		padding: 10px var(--kajo-ba-gutter) 20px;
		/* and the mark tops out with the heading instead of floating down the
		 * middle of a two-line title */
		align-items: start;
	}

	/* nudge the mark onto the heading's optical baseline, since a line box is
	 * taller than the glyphs inside it */
	body.kajo-brand-archive .kajo-ba-hero__frame {
		margin-top: 2px;
	}

	/* the ring stays, scaled down - the lockup has to remain compact so the
	 * products still start quickly */
	body.kajo-brand-archive .kajo-ba-hero__frame {
		--kajo-ring: 3px;
		box-shadow:
			0 0 0 1px rgba(82, 105, 72, .12),
			0 0 0 4px rgba(156, 175, 136, .10),
			0 5px 14px rgba(82, 105, 72, .18);
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--round {
		--kajo-fit: 40px;
		width: 60px;
		height: 60px;
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--wide {
		--kajo-frame-radius: 16px;
		--kajo-fit: 64px;
		width: 86px;
		height: 56px;
	}

	body.kajo-brand-archive .kajo-ba-hero--nologo .kajo-ba-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"intro";
	}

	body.kajo-brand-archive .kajo-ba-hero__logo {
		width: 52px;
		height: 44px;
	}

	body.kajo-brand-archive .kajo-ba-hero__title {
		font-size: 21px;
	}

	body.kajo-brand-archive .kajo-ba-hero__title::after {
		width: 36px;
		height: 2px;
		margin-top: 7px;
	}

	body.kajo-brand-archive .kajo-ba-hero__intro {
		margin-top: 0;
		font-size: 13.5px;
		line-height: 1.55;
	}

	body.kajo-brand-archive .kajo-ba-shoprow {
		margin: 18px 0 2px;
	}

	body.kajo-brand-archive .kajo-ba-seo {
		margin-top: 32px;
		padding: 34px 0 36px;
	}

	body.kajo-brand-archive .kajo-ba-seo__about .kajo-ba-seo__lead {
		font-size: 15.5px;
	}

	body.kajo-brand-archive .kajo-ba-chips {
		gap: 7px;
	}

	body.kajo-brand-archive .kajo-ba-chips__item,
	body.kajo-brand-archive .kajo-ba-chips__item .kajo-ba-link {
		font-size: 12.5px;
	}

	body.kajo-brand-archive .kajo-ba-seo__inner {
		/* 2DP: About and FAQ were running together. A wider gap plus a rule
		 * above the FAQ makes the boundary unmistakable on a phone. */
		gap: 34px;
		max-width: none;
	}

	body.kajo-brand-archive .kajo-ba-seo__inner .kajo-ba-seo__faq {
		padding-top: 30px;
		border-top: 1px solid var(--kajo-ba-line);
	}

	body.kajo-brand-archive .kajo-ba-seo .kajo-ba-seo__heading {
		margin-bottom: 18px;
	}
}

/* 390px is the common phone width and the brief asks for ~52x44 there, so
 * the extra-small step starts below it rather than at 400px. */
@media (max-width: 370px) {
	body.kajo-brand-archive .kajo-ba-hero__title {
		font-size: 19px;
	}

	body.kajo-brand-archive .kajo-ba-hero__inner {
		column-gap: 11px;
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--round {
		--kajo-fit: 36px;
		width: 54px;
		height: 54px;
	}

	body.kajo-brand-archive .kajo-ba-hero__frame--wide {
		--kajo-fit: 58px;
		width: 78px;
		height: 50px;
	}
}