/*
 * Phänomen Brands — brand directory + brand archive header
 *
 * Breakdance palette variables only, no hex literals anywhere.
 * No font-family is ever set: the site keeps a single Google Fonts request
 * (Inter) and every rule below inherits from it.
 *
 * Everything is scoped to .phb-* markup, so nothing here can reach another
 * surface.
 */

:root {
	--phb-ink: var(--bde-palette-color-1-1941ae39-5fd1-488e-917f-5d78aaaed343);
	--phb-ink-soft: var(--bde-palette-color-1-a0e2ca77-2d49-4263-a9d3-44ff3540307f);
	--phb-ink-faint: var(--bde-palette-color-1-958f4842-ed4f-48d9-908f-bfea722eb4e3);
	--phb-line: var(--bde-palette-color-1-6ff98eb0-e04c-47a7-8d7e-46a642ad5286);

	--phb-column-gap: 64px;
	--phb-group-gap: 40px;
	--phb-logo-width: 220px;
	--phb-desc-width: 640px;
}

/* -------------------------------------------------------------------------
 * 1. [ph_brand_list] — the directory
 *
 * CSS multicol, not a grid: the browser balances the columns by content
 * height, and break-inside: avoid keeps a letter group whole. Adding or
 * removing brands re-splits the list on its own — no hard-coded halves.
 * ---------------------------------------------------------------------- */

.phb-list {
	columns: var(--phb-columns, 2);
	column-gap: var(--phb-column-gap);
}

.phb-group {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	margin: 0 0 var(--phb-group-gap);
}

.phb-group:last-child {
	margin-bottom: 0;
}

.phb-letter {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--phb-line);
	color: var(--phb-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.phb-brands {
	margin: 0;
	padding: 0;
	list-style: none;
}

.phb-brand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
}

.phb-name {
	color: var(--phb-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

a.phb-name:hover,
a.phb-name:focus-visible {
	color: var(--phb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Both availability states share size, weight and tracking — only the colour
 * separates them: full-strength ink for online, muted for store-only.
 */
.phb-avail {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.phb-avail--online {
	color: var(--phb-ink);
}

.phb-avail--store {
	color: var(--phb-ink-faint);
}

@media (max-width: 767px) {
	.phb-list {
		columns: 1;
	}

	.phb-brand {
		gap: 12px;
	}
}

/* -------------------------------------------------------------------------
 * 2. [ph_brand_header] — the archive header
 *
 * Logo and copy are optional and are simply not printed when missing, so the
 * column gap never has an empty child to space away from. The :not(:has())
 * rule is belt and braces for the same failure mode one level up.
 * ---------------------------------------------------------------------- */

.phb-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.phb-header:not(:has(> *)) {
	display: none;
}

.phb-header__logo {
	display: block;
	width: 100%;
	max-width: var(--phb-logo-width);
}

.phb-header__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(var(--phb-logo-width) / 2);
	object-fit: contain;
}

.phb-header__title {
	margin: 0;
	color: var(--phb-ink);
}

.phb-header__desc {
	max-width: var(--phb-desc-width);
	margin: 0;
	color: var(--phb-ink-soft);
}

.phb-header__desc > *:first-child {
	margin-top: 0;
}

.phb-header__desc > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 3. [ph_brand_logo] / [ph_brand_description] inside template 531
 *
 * The archive header (.ph-archive-head) is a flex column with a 16px row gap,
 * and it is shared with /shop/, the category archives and /new-arrivals/. Both
 * part shortcodes return an empty string there — and on a brand archive without
 * a logo or copy, which today is all 29 of them — but Breakdance still prints
 * the element's wrapper div. An empty-but-present flex item still takes a gap
 * slot, which is the phantom band the archive intro hit.
 *
 * So: any shortcode wrapper in this header with no element inside it is removed
 * from the layout. Scoped to the header, because a shortcode that legitimately
 * prints a bare text node must not be caught by this.
 * ---------------------------------------------------------------------- */

.ph-archive-head .section-container > .bde-shortcode:not(:has(> *)) {
	display: none;
}

/*
 * Centred, but only on a brand archive — the same section is left-aligned for
 * /shop/ and the category archives, so this keys on the body class rather than
 * touching the section itself. The breadcrumb stays where it is.
 */
body.tax-product_brand .ph-archive-head .section-container > .bde-heading,
body.tax-product_brand .ph-archive-head .section-container > .bde-shortcode {
	align-self: center;
	text-align: center;
}

.phb-logo {
	margin-right: auto;
	margin-left: auto;
}

.phb-description {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}