/* ============================================================================
   brands.css - Brands page ([product_brand_list] shortcode restyle)
   Targets #brands_a_z output from WooCommerce Brands.
   Actual markup:
     #brands_a_z
       ul.brands_index > li > a|span   (letter nav)
       h3#brands-a                     (letter heading)
       a.top                           (back-to-top, hidden)
       ul.brands > li > a              (brand links)
   All values from tokens.css - no new colours or sizes.
   ========================================================================= */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.pp-brands-page .entry-content,
.pp-brands-page #primary {
	/* max-width: 1280px; */
	margin-inline: auto;
	/* padding-inline: var(--pp-gutter); */
}

@media (max-width: 900px) {
	.pp-brands-page .entry-content,
	.pp-brands-page #primary {
		padding-inline: var(--pp-sp-6);
	}
}

/* ── Filter input (injected by JS above the letter nav) ───────────────────── */
.pp-brands-filter-wrap {
	margin-bottom: var(--pp-sp-5);
}

.pp-brands-filter {
	display: block;
	width: 100%;
	max-width: 420px;
	height: 44px;
	padding: 0 16px;
	font: var(--pp-fw-regular) var(--pp-fs-body)/1 var(--pp-font);
	color: var(--pp-ink);
	background: #fff;
	border: var(--pp-bw-mid) solid var(--pp-border-strong);
	border-radius: var(--pp-r-lg);
	outline: none;
	transition: border-color var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.pp-brands-filter::placeholder { color: var(--pp-text-4) }
.pp-brands-filter:hover  { border-color: #a09d9a }
.pp-brands-filter:focus  { border-color: var(--pp-magenta); box-shadow: var(--pp-focus-ring-input) }

/* ── Letter nav (ul.brands_index → sticky pill row) ──────────────────────── */
#brands_a_z ul.brands_index {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--pp-sp-1);
	list-style: none;
	margin: 0 0 var(--pp-sp-8) 0;
	padding: var(--pp-sp-3) 0 !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	position: sticky;
	top: 0;
	background: var(--pp-bg-page, #fafaf8);
	z-index: var(--pp-z-filterbar, 5);
	border-bottom: var(--pp-bw-hair) solid var(--pp-border);
	float: none !important; /* override Storefront's floated sidebar layout */
	width: auto !important;
}
#brands_a_z ul.brands_index::-webkit-scrollbar { display: none }

#brands_a_z ul.brands_index li {
	flex: 0 0 auto;
	padding: 0;
	margin: 0 !important;
	float: none !important;
	display: flex !important;
}

/* Both <a> (active letters) and <span> (empty letters) get pill styling */
#brands_a_z ul.brands_index li a,
#brands_a_z ul.brands_index li span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 34px !important;
	height: 30px;
	padding: 0 var(--pp-sp-2) !important;
	font: var(--pp-fw-semibold) var(--pp-fs-sm)/1 var(--pp-font);
	color: var(--pp-text-2) !important;
	background: #fff;
	border: var(--pp-bw-hair) solid var(--pp-border) !important;
	border-radius: var(--pp-r-pill);
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease),
	            border-color var(--pp-dur) var(--pp-ease);
}
#brands_a_z ul.brands_index li a:hover {
	background: var(--pp-bg-soft);
	border-color: var(--pp-magenta);
	color: var(--pp-magenta);
}

/* Active letter - set by JS as .is-active on the <li> */
#brands_a_z ul.brands_index li.is-active a {
	background: var(--pp-magenta);
	border-color: var(--pp-magenta) !important;
	color: #fff !important;
}

/* Empty letter - <span> instead of <a>, already non-interactive */
#brands_a_z ul.brands_index li span {
	color: var(--pp-text-4);
	border-color: var(--pp-border);
	background: transparent;
	cursor: default;
	opacity: 0.5;
}

/* ── Hide back-to-top links (a.top) - sticky nav makes them redundant ─────── */
#brands_a_z a.top {
	display: none !important;
}

/* ── Letter headings (h3#brands-a etc.) ───────────────────────────────────── */
#brands_a_z h3 {
	font: var(--pp-fw-black) var(--pp-fs-h5)/1 var(--pp-font);
	letter-spacing: var(--pp-ls-h5);
	color: var(--pp-ink);
	margin: var(--pp-sp-8) 0 var(--pp-sp-5) 0;
	padding-bottom: var(--pp-sp-3);
	border-bottom: var(--pp-bw-bold) solid var(--pp-magenta);
	display: inline-block;
	clear: both; /* clear Storefront float residue */
	scroll-margin-top: 60px; /* offset for sticky nav */
	width: auto !important;
	float: none !important;
	text-transform: uppercase;
}

#brands_a_z h3:target {
	text-decoration: none;
}

/* Hide heading when JS marks its section hidden during filtering */
#brands_a_z h3.pp-brand-heading--hidden {
	display: none;
}

/* ── Brand grid (ul.brands) ───────────────────────────────────────────────── */
#brands_a_z ul.brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--pp-sp-3);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--pp-sp-6) 0;
	float: none !important;
	width: auto !important;
	clear: both;
}

#brands_a_z ul.brands li {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

/* Brand card */
#brands_a_z ul.brands li a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--pp-sp-4) var(--pp-sp-3);
	min-height: 56px;
	font: var(--pp-fw-medium) var(--pp-fs-sm)/var(--pp-lh-snug) var(--pp-font);
	color: var(--pp-text-2);
	background: #fff;
	border: var(--pp-bw-hair) solid var(--pp-border);
	border-radius: var(--pp-r-xl);
	text-decoration: none;
	transition: border-color var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease),
	            box-shadow var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
}
#brands_a_z ul.brands li a:hover {
	border-color: rgba(214, 22, 110, .35);
	color: var(--pp-magenta);
	box-shadow: var(--pp-shadow-card-hover);
	transform: translateY(-2px);
}
#brands_a_z ul.brands li a:active {
	transform: translateY(0);
}

/* Product count span appended by JS */
.pp-brand-count {
	display: inline-block;
	margin-left: var(--pp-sp-1);
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-regular);
	color: var(--pp-text-4);
}

/* Filtered-out brand */
#brands_a_z ul.brands li.pp-brand--hidden {
	display: none;
}

/* ── No-results message (injected by JS) ──────────────────────────────────── */
.pp-brands-no-results {
	display: none;
	padding: var(--pp-sp-12) 0;
	text-align: center;
	font-size: var(--pp-fs-body-lg);
	color: var(--pp-text-3);
}
.pp-brands-no-results.is-visible {
	display: block;
}

/* ── Undo Storefront's clearfix pseudo-elements on #brands_a_z ────────────── */
#brands_a_z::before,
#brands_a_z::after {
	display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	#brands_a_z ul.brands {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: var(--pp-sp-2);
	}

	#brands_a_z ul.brands li a {
		padding: var(--pp-sp-3) var(--pp-sp-2);
		min-height: 48px;
		font-size: var(--pp-fs-xs);
	}
}