/* =========================================================================
   Brand pages (/shop/brand/<slug>/)
   taxonomy-brand.php + inc/brand-page.php. Loaded only there, on top of
   archive.css: the product grid, sort select, In-stock toggle, pagination,
   empty-state base and the long "about" block are shared with the other
   archives. Values are read off Brand Page.dc.html.
   Class prefix: .ahnl-bp-*  (.ahnl-brand / .ahnl-brands are the homepage wall.)
   ========================================================================= */

/* --- Breadcrumb ------------------------------------------------------------ */
.ahnl-bp-crumbs {
	background: #fff;
	border-bottom: 1px solid var( --ahnl-line );
}

.ahnl-bp-crumbs nav {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: 11px 22px;
	font: 400 12.5px/1.4 "AH Inter", system-ui, sans-serif;
	color: var( --ahnl-ink );
}

.ahnl-bp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ahnl-bp-crumbs li + li::before {
	content: "›";
	content: "›" / "";
	margin-right: 8px;
	color: #a9aea1;
}

.ahnl-bp-crumbs a {
	color: var( --ahnl-muted );
	text-decoration: none;
}

.ahnl-bp-crumbs a:hover,
.ahnl-bp-crumbs a:focus-visible {
	color: var( --ahnl-green );
	text-decoration: underline;
}

/* --- Hero: logo + name + intro + facts ------------------------------------------- */
.ahnl-bp-hero-wrap {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: clamp( 20px, 2.6vw, 30px ) 22px 0;
}

.ahnl-bp-hero {
	background: #fff;
	border: 1px solid var( --ahnl-line );
	border-radius: 24px;
	overflow: hidden;
}

.ahnl-bp-hero__bar {
	height: 3px;
	background: linear-gradient( 90deg, #2e7d32, #4caf50 45%, #c89b3c );
}

.ahnl-bp-hero__grid {
	display: grid;
	grid-template-columns: 200px minmax( 0, 1fr );
	gap: clamp( 18px, 3vw, 40px );
	align-items: center;
	padding: clamp( 22px, 3vw, 38px );
}

.ahnl-bp-hero__logo {
	box-sizing: border-box;
	width: 200px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px;
	background: #fff;
	border: 1px solid var( --ahnl-line );
	border-radius: 22px;
	box-shadow: 0 10px 26px rgba( 31, 43, 30, 0.06 );
}

/* Logos are a mix of shapes: contain, never crop or stretch. */
.ahnl-bp-hero__logo .ahnl-bp-hero__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* No logo uploaded: the brand's initials, in the brand green. */
.ahnl-bp-hero__mono {
	font: 700 clamp( 40px, 6vw, 58px ) / 1 "AH Poppins", sans-serif;
	letter-spacing: 0.02em;
	color: var( --ahnl-green );
}

.ahnl-bp-hero__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.ahnl-bp-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 10.5px/1 "AH Inter", system-ui, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8a5a12; /* the design's gold #C89B3C is 2.6:1 on white; this is 5.9:1 */
}

.ahnl-bp-hero__kicker::after {
	content: "";
	width: 44px;
	height: 2px;
	border-radius: 99px;
	background: linear-gradient( 90deg, #c89b3c, rgba( 200, 155, 60, 0 ) );
}

.ahnl-bp-hero__title {
	margin: 0;
	color: var( --ahnl-ink );
	font: 700 clamp( 28px, 3.6vw, 44px ) / 1.14 "AH Poppins", sans-serif;
	letter-spacing: -0.015em;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.ahnl-bp-hero__intro {
	margin: 0;
	max-width: 70ch;
	color: var( --ahnl-muted );
	font: 400 clamp( 14.5px, 1.3vw, 16px ) / 1.75 "AH Inter", system-ui, sans-serif;
	text-wrap: pretty;
}

.ahnl-bp-hero__more {
	align-self: flex-start;
	color: var( --ahnl-green );
	font: 600 13px/1.4 "AH Inter", system-ui, sans-serif;
	text-decoration: underline;
}

.ahnl-bp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 2px 0 0;
	list-style: none;
}

.ahnl-bp-pills li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px 14px;
	background: var( --ahnl-page );
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
	color: #4a4f46;
	font: 600 12px/1 "AH Inter", system-ui, sans-serif;
}

.ahnl-bp-pills li span {
	color: var( --ahnl-green );
}

/* --- Category chips + toolbar ----------------------------------------------------- */
.ahnl-bp-list {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: clamp( 22px, 3vw, 32px ) 22px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ahnl-bp-chips {
	position: relative; /* brand.js measures the selected chip against this row */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ahnl-bp-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
	background: #fff;
	color: #4a4f46;
	font: 600 13px/1 "AH Inter", system-ui, sans-serif;
	white-space: nowrap;
	text-decoration: none;
}

.ahnl-bp-chip:hover,
.ahnl-bp-chip:focus-visible {
	border-color: var( --ahnl-green-accent );
}

.ahnl-bp-chip:focus-visible,
.ahnl-bp-more > summary:focus-visible {
	outline: 2px solid var( --ahnl-green );
	outline-offset: 2px;
}

.ahnl-bp-chip__n {
	min-width: 22px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border-radius: 99px;
	background: #f2f1e8;
	color: var( --ahnl-muted ); /* #6B7265 on #F2F1E8 is only 4.3:1 */
	font: 700 11px/1 "AH Inter", system-ui, sans-serif;
}

.ahnl-bp-chip.is-active {
	border-color: var( --ahnl-green );
	background: var( --ahnl-green );
	color: #fff;
}

.ahnl-bp-chip.is-active .ahnl-bp-chip__n {
	background: rgba( 0, 0, 0, 0.2 ); /* the design's white 22% badge leaves white text at 3.4:1 */
	color: #fff;
}

.ahnl-bp-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 15px;
	border: 1.5px dashed #b9c4b3;
	border-radius: 99px;
	color: var( --ahnl-green );
	font: 600 13px/1 "AH Inter", system-ui, sans-serif;
	cursor: pointer;
	list-style: none;
}

.ahnl-bp-more > summary::-webkit-details-marker {
	display: none;
}

.ahnl-bp-more > summary::after {
	content: "▾";
	content: "▾" / "";
	font-size: 10px;
}

.ahnl-bp-more[open] > summary {
	margin-bottom: 12px;
}

.ahnl-bp-more[open] > summary::after {
	content: "▴";
	content: "▴" / "";
}

.ahnl-bp-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var( --ahnl-line );
	border-radius: 16px;
}

.ahnl-bp-bar__count {
	margin: 0;
	color: var( --ahnl-muted );
	font: 400 13px/1.4 "AH Inter", system-ui, sans-serif;
}

.ahnl-bp-bar__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ahnl-bp-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ahnl-bp-sort label {
	color: var( --ahnl-muted );
	font: 500 12.5px/1 "AH Inter", system-ui, sans-serif;
}

/* The design's toolbar select is a rounded rectangle, not the archive's pill. */
.ahnl-bp .ahnl-bp-sort select {
	min-height: 40px;
	border-radius: 10px;
	background-color: var( --ahnl-page );
	font-size: 13px;
}

/* --- Results ------------------------------------------------------------------ */
.ahnl-bp-results {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: 16px 22px clamp( 48px, 6vw, 72px );
}

/* No sidebar here, and phones get two columns like the design (archive.css sizes for a sidebar). */
.ahnl-bp .ahnl-arc-grid {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
}

@media ( min-width: 600px ) {
	.ahnl-bp .ahnl-arc-grid {
		grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
		gap: 18px;
	}
}

/* archive.css lines the long "about" text up with a container that has no side padding; here the
   sections above carry 22px inside the 1320px box, so match that. */
.ahnl-bp .ahnl-arc-about {
	padding-inline: max( 22px, calc( ( 100% - var( --ahnl-container ) ) / 2 + 22px ) );
}

.ahnl-bp-empty {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	padding: clamp( 38px, 5vw, 64px ) 24px;
	text-align: center;
	background: #fff;
	border: 1px dashed #dcdcd0;
	border-radius: 22px;
}

.ahnl-bp-empty__icon {
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f1f5ef;
}

.ahnl-bp-empty h2 {
	margin: 0;
	color: var( --ahnl-ink );
	font: 600 clamp( 19px, 2vw, 22px ) / 1.3 "AH Poppins", sans-serif;
	text-wrap: pretty;
}

.ahnl-bp-empty p {
	margin: 0;
	max-width: 54ch;
	color: var( --ahnl-muted );
	font: 400 14px/1.7 "AH Inter", system-ui, sans-serif;
	text-wrap: pretty;
}

.ahnl-bp-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding-top: 4px;
}

.ahnl-bp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var( --ahnl-green );
	border-radius: 99px;
	background: #fff;
	color: var( --ahnl-green );
	font: 600 13.5px/1 "AH Inter", system-ui, sans-serif;
	text-decoration: none;
}

.ahnl-bp-btn--solid {
	background: var( --ahnl-green );
	color: #fff;
}

.ahnl-bp-btn--quiet {
	border-color: var( --ahnl-line );
	color: #4a4f46;
}

.ahnl-bp-btn:hover,
.ahnl-bp-btn:focus-visible {
	border-color: var( --ahnl-green-dark );
	color: var( --ahnl-green-dark );
}

.ahnl-bp-btn--solid:hover,
.ahnl-bp-btn--solid:focus-visible {
	background: var( --ahnl-green-dark );
	color: #fff;
}

/* --- Phones -------------------------------------------------------------------- */
@media ( max-width: 899px ) {
	.ahnl-bp-hero__grid {
		grid-template-columns: 1fr;
	}

	.ahnl-bp-hero__logo {
		width: 112px;
		padding: 14px;
	}

	/* One scrolling row, as in the design: a dozen chips wrapped would push the products a screen down. */
	.ahnl-bp-chips:not( .ahnl-bp-chips--wrap ) {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -22px;
		padding: 2px 22px 4px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ahnl-bp-chips:not( .ahnl-bp-chips--wrap )::-webkit-scrollbar {
		display: none;
	}

	.ahnl-bp-chip,
	.ahnl-bp-more > summary {
		min-height: 44px;
	}

	.ahnl-bp-bar__tools {
		width: 100%;
	}

	.ahnl-bp-sort {
		margin-left: auto;
	}
}