/**
 * Brand grid - the Shop by Brand page and the Brands mega menu.
 *
 * CSS Grid rather than a wrapping flex column. Layer 2DB put 49 brand links
 * into the Shop mega menu and the theme's own dropdown styling wrapped them
 * into sub-columns about 88px apart, so the names overlapped and the whole
 * thing was illegible. A grid gives every card an explicit track and an
 * explicit gap, which is what makes that failure impossible here.
 *
 * The logo box is the 104x38 object-fit:contain standard set in 2DC, so a
 * brand mark looks the same size here as it does on a product page.
 */

.kajo-brand-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kajo-brand-grid__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kajo-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* a fixed minimum so a logo card and a text card are the same height and
	 * the grid rows stay level whichever one a brand needs */
	min-height: 104px;
	padding: 14px 10px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	background: #fff;
	text-align: center;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kajo-brand-card:hover,
.kajo-brand-card:focus-visible {
	border-color: rgba(0, 0, 0, .22);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-1px);
}

.kajo-brand-card__logo {
	width: 104px;
	height: 38px;
	object-fit: contain;
	display: block;
	/* never let a stray intrinsic size from the attachment win */
	max-width: 100%;
}

.kajo-brand-card__name {
	display: block;
	width: 100%;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 600;
	/* long brand names wrap instead of pushing the card wider */
	overflow-wrap: anywhere;
}

.kajo-brand-card__count {
	font-size: 11px;
	line-height: 1;
	opacity: .55;
}

.kajo-brand-grid__all {
	margin: 22px 0 0;
	text-align: center;
}

.kajo-brand-grid__all a {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 600;
}

/* ---------------------------------------------- inside the Brands dropdown */
.kajo-brands-menu {
	padding: 26px 0 30px;
}

.kajo-brands-menu .kajo-brand-card {
	min-height: 92px;
	padding: 10px 8px;
}

.kajo-brands-menu .kajo-brand-card__count {
	display: none;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1200px) {
	.kajo-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.kajo-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 480px) {
	.kajo-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kajo-brand-card { min-height: 92px; padding: 12px 8px; }
}

/* ===================================================================
 * Shop by Brand hero
 *
 * Scoped two ways on purpose. The rules that style the hero key off
 * .kajo-brand-hero, which only exists on that page. The rule that hides the
 * theme's title block keys off body:has(.kajo-brand-hero) rather than a page
 * id, so it survives the page being recreated with a different id - the theme
 * already relies on :has() in three of its own stylesheets. The page-id
 * selector is kept alongside it purely as a fallback.
 * =================================================================== */

.kajo-brand-hero {
	/* wider than the 860px of 2DH so the headline can spread instead of
	 * feeling boxed in; the subheading keeps its own narrower measure below */
	max-width: 1180px;
	margin: 0 auto;
	padding: 76px 20px 40px;
	text-align: center;
	/* the one place the site orange is named for this page. #f58634 is the
	 * existing accent - it is what --kajo-orange, --kajo-footer-accent,
	 * --kajo-cart-accent and --kajo-add-accent all resolve to - so nothing
	 * new is invented here. */
	--kajo-hero-orange: #f58634;
}

/* The theme styles h2 inside .entry-content at a higher specificity than a
 * single class, and the hero title renders as an h2 because the child theme
 * keeps the first h1 on the page and demotes later ones. Matching that
 * specificity is what makes the declared size actually apply on a phone,
 * where the theme rule was capping it at 25px. */
.entry-content .kajo-brand-hero .kajo-brand-hero__title,
.kajo-brand-hero .kajo-brand-hero__title {
	margin: 0;
	font-size: clamp(34px, 7.4vw, 104px) !important;
	line-height: 1.04;
	letter-spacing: -.02em;
	font-weight: 800;
	/* long enough to wrap on a phone; balance keeps the two lines even */
	text-wrap: balance;
}

.kajo-brand-hero__accent {
	display: inline;
	color: #526948;
}

.kajo-brand-hero__sub {
	max-width: 620px;
	margin: 18px auto 0;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.6;
	opacity: .72;
	text-wrap: pretty;
}

/* the ampersand only - a single character of orange, so the headline reads as
 * one phrase rather than two colours fighting */
.kajo-brand-hero__amp {
	color: var(--kajo-hero-orange, #f58634);
}

.kajo-brand-hero__rule {
	display: block;
	width: 72px;
	height: 3px;
	margin: 34px auto 0;
	border-radius: 3px;
	background: var(--kajo-hero-orange, #f58634);
}

/* The theme's page-title block sits above the content and carries both the
 * breadcrumb and a second "Shop by Brand" heading. The brief asks for no
 * breadcrumb under the hero, and leaving the duplicate heading above an
 * oversized editorial headline would undercut it, so the block goes as a
 * whole - on this page only. */
body:has(.kajo-brand-hero) .wd-page-title,
body.page-id-33565 .wd-page-title {
	display: none !important;
}

/* give the grid room to breathe under the hero */
.kajo-brand-hero + .kajo-brand-grid {
	margin-top: 8px;
}

@media (max-width: 1024px) {
	.kajo-brand-hero { max-width: 880px; padding: 56px 20px 32px; }
}

@media (max-width: 768px) {
	.kajo-brand-hero { padding: 40px 18px 26px; }
	.kajo-brand-hero__rule { margin-top: 24px; }
}

@media (max-width: 480px) {
	.kajo-brand-hero { padding: 32px 16px 22px; }
	.kajo-brand-hero__sub { margin-top: 14px; }
}

/* ===================================================================
 * Colourful heading text (Layer 2DS)
 *
 * The per-character spans are created in the browser by
 * ohmykajo-colourful-text.js. Everything here is layout only - the colours
 * and the movement are driven by the Web Animations API, so that nothing is
 * declared twice and the two cannot drift apart.
 * =================================================================== */

.kajo-brand-hero__accent.kajo-ct {
	/* the stage is positioned against this so the hidden label cannot affect
	 * the heading's line boxes */
	position: relative;
}

.kajo-ct__stage {
	display: inline;
}

.kajo-ct__char {
	display: inline-block;
	/* keeps the spaces between words, exactly as the original component does */
	white-space: pre;
	/* blur and transform on a very large glyph are cheaper on their own layer */
	will-change: transform, filter, opacity;
}

/*
 * No split happens under reduced motion - the script returns before touching
 * the DOM - so this is only a safety net if the markup is ever pre-rendered.
 */
@media (prefers-reduced-motion: reduce) {
	.kajo-ct__char {
		animation: none !important;
		filter: none !important;
		transform: none !important;
		opacity: 1 !important;
		will-change: auto;
	}
}