/**
 * Individual product brand archives - GENERIC, one architecture for every real
 * product_brand term (TASK-013; visual reconciliation TASK-034).
 *
 * Mobile-first and logical-direction only. Shared breadcrumb, toolbar, product grid,
 * pagination and product-card rules remain owned by their existing component stylesheets.
 *
 * PROVENANCE (TASK-034): `39 — Brand Fresh — Desktop — 39-brand-fresh-desktop.dc.html` /
 * `40 — Brand Fresh — Mobile — 40-brand-fresh-mobile.dc.html` and `41 — Brand Sidi Hisham —
 * Desktop — 41-brand-sidi-desktop.dc.html` / `42 — Brand Sidi Hisham — Mobile —
 * 42-brand-sidi-mobile.dc.html` (`AR_Brands`, `screen=detail`) - two sample states of one
 * reusable component; only the shared geometry (hero box size, eyebrow, h1 scale,
 * description sizing) was extracted, applied generically to every brand term.
 *
 *   desktop : hero image 150px, eyebrow 12px, h1 38px, desc 15.5px/2.05 max 720px
 *   mobile  : hero image 112px, no eyebrow (design's own mobile detail state omits it),
 *             h1 26px, desc 14.5px/2
 */

.zahra-brand-archive__head {
	padding-block-start: 12px;
}

.zahra-brand-breadcrumb {
	margin-block-end: 8px;
}

.zahra-brand-breadcrumb__home {
	display: none;
}

.zahra-brand-hero {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 12px;
}

.zahra-brand-hero__image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 0 0 112px;
	inline-size: 112px;
	block-size: 112px;
	padding: 4px;
	border: 1px solid var(--zahra-color-line);
	background: var(--zahra-color-sand);
	text-align: center;
}

.zahra-brand-hero__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.zahra-brand-hero__nologo {
	font-size: 9.5px;
	color: var(--zahra-color-muted);
}

/*
 * TASK-063: real owner-supplied brand logo, replacing the name/"no logo yet" placeholder for
 * matched terms. contain (never cover) so the artwork is never cropped or stretched - the
 * supplied logos have different natural aspect ratios (wide/oval/rectangular).
 */
.zahra-brand-hero__logo {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	display: block;
}

.zahra-brand-hero__info {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-inline-size: 0;
}

.zahra-brand-hero__eyebrow {
	display: none;
}

.zahra-brand-hero__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.38;
	font-weight: 700;
}

.zahra-brand-hero__desc {
	max-inline-size: 640px;
	margin: 0;
	color: var(--zahra-color-ink-2);
	font-size: 14.5px;
	line-height: 2;
}

.zahra-brand .zahra-woocommerce {
	padding-block: 14px 24px;
}

@media (min-width: 1024px) {

	.zahra-brand-archive__head {
		padding-block-start: 20px;
	}

	.zahra-brand-breadcrumb__home {
		display: contents;
	}

	.zahra-brand-hero {
		gap: 20px;
		padding-block: 20px 16px;
		border-block-end: 1px solid var(--zahra-color-line);
	}

	.zahra-brand-hero__image {
		flex-basis: 150px;
		inline-size: 150px;
		block-size: 150px;
		gap: 8px;
	}

	.zahra-brand-hero__name {
		font-size: 22px;
	}

	.zahra-brand-hero__nologo {
		font-size: 11px;
	}

	.zahra-brand-hero__eyebrow {
		display: block;
		margin-block-end: 4px;
		color: var(--zahra-color-brand);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .08em;
	}

	.zahra-brand-hero__title {
		font-size: 38px;
		line-height: 1.34;
	}

	.zahra-brand-hero__desc {
		max-inline-size: 720px;
		font-size: 15.5px;
		line-height: 2.05;
	}

	.zahra-brand .zahra-woocommerce {
		padding-block: 20px 48px;
	}
}