.zozia-bar-inner,
.zozia-utility-right,
.zozia-search-bar,
.zozia-header-actions,
.zozia-login,
.zozia-wishlist-link,
.zozia-my-bag {
	display: flex;
	align-items: center;
}

/* Hidden by default everywhere — it only exists to dim/close the mobile
   category panel (see the max-width: 860px block below). Without an
   unconditional rule here, viewports above that breakpoint get no
   `display: none` at all and the browser renders this empty <button>
   with default UA chrome: a small bordered pill in the header. */
.zozia-category-backdrop {
	display: none;
}

/* These rows are flex containers with their own `gap`, but each block still
   carries core's `is-layout-flow` class from its "default" layout setting.
   Core adds `margin-block-start` to every child but the first (and default
   flow margins on paragraphs) — on a flex row that pushes every item but
   the first one down, misaligning them. Reset margins on all direct
   children so `gap` is the only thing controlling spacing. */
.zozia-bar-inner > *,
.zozia-utility-right > *,
.zozia-search-bar > *,
.zozia-header-actions > *,
.zozia-login > *,
.zozia-wishlist-link > *,
.zozia-my-bag > * {
	margin: 0;
}

/* The same `is-layout-flow` margin one level up: core spaces the header's
   stacked bars apart with `margin-block-start`, opening a 24px strip of page
   background between the plum utility bar and the white logo row. The bars
   are meant to sit flush, so drop it at every width. */
.zozia-header-bar {
	margin-top: 0;
}

/* Full-bleed colored bars stay edge-to-edge; their content is capped
   to a max-width and centered so justify-content: space-between doesn't
   balloon into huge gaps on ultra-wide screens. */
.zozia-bar-inner {
	flex-wrap: wrap;
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.zozia-utility-inner {
	justify-content: flex-end;
	gap: 12px;
}

.zozia-header-inner {
	justify-content: space-between;
	gap: 32px;
}

.zozia-category-inner {
	justify-content: center;
	gap: 36px;
}

/* Category-bar nav links. theme.json styles every link primary/no-underline,
   so the ink colour and 15px/500 type that used to sit inline on the
   paragraphs these replaced are restated here. */
.zozia-category-link {
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
}

.zozia-category-link:hover,
.zozia-category-link:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Promo accent carried over from the old "Nationwide Sale" item. */
.zozia-category-link--promo {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.zozia-category-link--promo:hover,
.zozia-category-link--promo:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

/* ₱99 Sale — pill badge that loops a subtle zoom in/out to draw the eye,
   on top of the same promo-primary treatment used elsewhere in this bar. */
.zozia-category-link--99-sale {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-weight: 800;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 4px 14px;
	transform-origin: center;
	animation: zozia-99-sale-pulse 1.8s ease-in-out infinite;
}

.zozia-category-link--99-sale:hover,
.zozia-category-link--99-sale:focus-visible {
	color: #fff;
	background: var(--wp--preset--color--primary-dark);
	animation-play-state: paused;
}

@keyframes zozia-99-sale-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zozia-category-link--99-sale {
		animation: none;
	}
}

.zozia-utility-right {
	gap: 20px;
	flex-wrap: wrap;
}

.zozia-utility-contact {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--utility-bar-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	text-decoration: none;
	white-space: nowrap;
}

.zozia-utility-contact:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.zozia-utility-contact:hover .zozia-icon path,
.zozia-utility-contact:hover .zozia-icon circle {
	stroke: var(--wp--preset--color--white);
}

.zozia-search-bar {
	justify-content: space-between;
	gap: 12px;
	flex: 1 1 240px;
	min-width: 200px;
	max-width: 480px;
}

.zozia-header-actions {
	gap: 28px;
}

.zozia-login {
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
}

.zozia-wishlist-link {
	position: relative;
	text-decoration: none;
}

.zozia-wishlist-link__count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

.zozia-wishlist-link__count[hidden] {
	display: none;
}

.zozia-my-bag {
	gap: 10px;
}

.zozia-site-logo {
	margin-right: auto;
	line-height: 0;
}

.zozia-site-logo .custom-logo {
	height: 52px;
	width: auto;
}

.zozia-icon {
	flex-shrink: 0;
}

/* The .zozia-nav-toggle hamburger used to live here, styled as a pill
   button. It's now the bottom nav's "Shop" tab instead (mobile only) — see
   assets/css/bottom-nav.css for its current styling and assets/js/header.js
   for the open/close logic it still drives against #zozia-category-bar. */

/* Between the mobile breakpoint and roughly 1100px the eight nav items at
   15px no longer clear the 36px desktop gap and "All Brands" drops to a
   second row. Tighten the gap through that band so the bar stays one line. */
@media (min-width: 861px) and (max-width: 1100px) {
	.zozia-category-inner {
		gap: 22px;
	}
}

/**
 * Mobile header — utility bar becomes a single scrollable line, the logo
 * and actions row is dropped in favor of a full-width search bar, and the
 * long category list collapses behind the hamburger toggle.
 */
@media (max-width: 860px) {
	/* With the hamburger and "MY BAG" both gone from this row (moved to the
	   bottom nav — see above), the header reads much shorter on mobile, and
	   the old symmetric 18px top/bottom padding left a noticeably loose gap
	   before the page content starts. Tightened here; desktop keeps the
	   original 18px since its richer nav row still fills that space. */
	.zozia-header-bar {
		padding-bottom: 12px;
	}

	/* The utility bar keeps only the two contacts worth a tap on a phone —
	   calling and Facebook. The email address and the map link are long
	   enough that together they pushed the row into a horizontal scroll
	   nobody discovers; both are still reachable from the footer. */
	.zozia-utility-contact--email,
	.zozia-utility-contact--map {
		display: none;
	}

	.zozia-utility-inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 20px;
		/* Must override the desktop flex-end. With flex-end and nowrap, an
		   oversized child overflows past the container's *start* edge, and
		   overflow past the start edge is not reachable by scrolling — the
		   phone number was permanently clipped off the left. Starting at
		   flex-start pushes the overflow to the end edge, where it scrolls. */
		justify-content: flex-start;
	}

	.zozia-utility-inner::-webkit-scrollbar {
		display: none;
	}

	.zozia-utility-right {
		flex-shrink: 0;
		flex-wrap: nowrap;
		/* Keeps the desktop right-alignment through the 640–860px band where
		   the row still fits. Unlike justify-content, an auto margin collapses
		   to zero once the content overflows, so the scroll fix above survives. */
		margin-left: auto;
	}

	/* The logo and the whole actions cluster (login, wishlist, "MY BAG") are
	   dropped from this row on mobile — the bottom nav's Home, Account and
	   Cart tabs already cover those (see parts/bottom-nav.html), and the
	   wishlist link has no mobile equivalent but isn't essential enough to
	   keep here. That leaves just the search bar, so the row collapses to a
	   single block instead of the old logo/actions + search grid. */
	.zozia-header-inner {
		display: block;
	}

	.zozia-site-logo,
	.zozia-header-actions {
		display: none;
	}

	.zozia-search-bar {
		/* Base rule caps this at 480px for the desktop row; let it fill the
		   full-width row it's alone in here instead. */
		max-width: none;
	}

	.zozia-category-bar {
		display: none;
		/* Core's block-gap again — when the menu opens it would drop 24px of
		   page background between the logo row and the panel. */
		margin-top: 0;
	}

	/* Dims everything below the header — including the search bar above the
	   panel, which is still in normal flow and would otherwise sit at full
	   brightness right next to a dimmed page — while the menu is open.
	   Tapping it closes the menu too (see assets/js/header.js). Fixed +
	   a z-index above the page's normal content but below the bottom
	   nav's (40, see assets/css/bottom-nav.css), so the bar that opened
	   the menu stays reachable to close it.
	   (Default `display: none` now lives unconditionally at the top of this
	   file — see there — since this block alone left it unhidden above
	   860px. Only the .is-open override needs to live here.) */
	.zozia-category-backdrop.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 38;
		margin: 0;
		padding: 0;
		border: none;
		background: rgba(36, 16, 25, 0.45);
		cursor: default;
		animation: zozia-category-backdrop-in 0.18s ease;
	}

	@keyframes zozia-category-backdrop-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.zozia-category-backdrop.is-open {
			animation: none;
		}
	}

	.zozia-category-bar.is-open {
		display: block;
		/* Stacked above .zozia-category-backdrop (z-index: 38) so the panel
		   itself stays undimmed and clickable, but below the bottom nav's
		   fixed bar (z-index: 40) so that stays reachable too. Still normal
		   in-flow content (not fixed), so it keeps pushing the page below
		   it down rather than floating over it. */
		position: relative;
		z-index: 39;
		/* Rounded only at the bottom — the top stays flush against the
		   search bar above it (still attached there), but a hard square
		   bottom edge cutting straight into the dimmed backdrop read as
		   clipped rather than as a card that was meant to end there.
		   Matches the 12px radius the mega-menu panels already use. */
		border-radius: 0 0 12px 12px;
		/* Lifts the panel off the page content scrolling underneath it.
		   Given a size/opacity bump over the original — with the backdrop
		   now dimming everything behind it, the previous subtler shadow
		   read as barely-there next to that much stronger separation. */
		box-shadow: 0 16px 32px -8px rgba(36, 16, 25, 0.28);
		animation: zozia-category-bar-in 0.18s ease;
	}

	@keyframes zozia-category-bar-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.zozia-category-bar.is-open {
			animation: none;
		}
	}

	.zozia-category-inner {
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 8px;
	}

	/* Bigger touch targets and breathing room than the desktop row needs —
	   4px of horizontal padding there relied on .zozia-category-bar's own
	   32px/16px side padding to keep text off the edge, but as a full-width
	   tap target that left almost the whole row's height untappable above
	   and below the text. */
	.zozia-category-inner > * {
		padding: 16px 4px;
		border-bottom: 1px solid var(--wp--preset--color--border-light);
		font-size: 16px;
		transition: background-color 0.1s ease;
	}

	.zozia-category-inner > *:last-child {
		border-bottom: none;
	}

	/* Immediate visual feedback on tap — the desktop :hover colour change
	   doesn't fire on touch, so without this a tap gave no feedback at all
	   until the next page started loading. Extends 4px past the row's own
	   padding (via negative margin) so the tint reaches the panel's edges
	   instead of leaving the 4px gutter uncoloured. */
	.zozia-category-inner > a:active {
		background-color: var(--wp--preset--color--surface);
		margin-left: -4px;
		margin-right: -4px;
		padding-left: 8px;
		padding-right: 8px;
	}

	/* Same feedback for the Makeup/All Brands rows, applied to the trigger
	   button itself rather than the .zozia-mega-menu wrapper the row
	   padding lives on — that wrapper also contains the (possibly open)
	   panel underneath, and tinting it would wash out the whole expanded
	   submenu on every tap inside it, not just this row. */
	.zozia-mega-menu__trigger:active {
		background-color: var(--wp--preset--color--surface);
	}

	/* The ₱99 Sale pill already carries its own background, radius and
	   padding (see .zozia-category-link--99-sale above) — stacking the
	   generic row treatment on top of it doubled its padding and drew a
	   divider under a shape that isn't rectangular. It reads better as a
	   banner sitting above the list than as one more row in it.
	   The 16px top/side margin (beyond .zozia-category-bar's own 0px-top,
	   16-32px-side padding) is what actually insets the pill — it's a
	   shape, not a full-bleed row, so it needs its own breathing room on
	   every edge rather than just relying on the container's. */
	.zozia-category-inner > .zozia-category-link--99-sale {
		display: flex;
		justify-content: center;
		margin: 16px 16px 12px;
		padding: 12px 4px;
		border-bottom: none;
		font-size: 15px;
	}

	/* Makeup / All Brands chevron alignment on mobile is handled in
	   assets/css/all-brands-menu.css's own mobile block (loaded after this
	   file, and it already owns .zozia-mega-menu__trigger's mobile width). */
}

/* Below this, tighten side padding so the search bar and utility bar have
   room to breathe — WP's block padding is set inline, so this needs
   !important to win over it. */
@media (max-width: 480px) {
	.zozia-utility-bar,
	.zozia-header-bar,
	.zozia-category-bar {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}