/**
 * Site header layout.
 */
/*
 * width-based clamp, not the old max-height: 60px — that pinned the logo
 * to one fixed visual size on every screen, including very wide desktop
 * where the rest of the header now scales up too. 184px is the exact
 * width the old rule already produced (60px tall at this logo's ~3.075:1
 * aspect ratio, 984x320 source), used here as the clamp floor so nothing
 * changes at all below ~1533px viewport width (where 12vw first exceeds
 * 184px) — 1200-1440px render pixel-identical to before. Grows gently
 * above that, capped at 220px (~19% larger) so it never gets oversized.
 */
.site-logo img,
.custom-logo {
	width: clamp(184px, 12vw, 220px);
	height: auto;
}

/*
 * .inside-navigation (the mobile-only Home/Shop dropdown — see
 * #site-navigation, display:none at desktop below) stays on the general
 * --layout-max-width system, same as every other section. .inside-header
 * (the actual logo/search/actions row) is split out below onto its own,
 * wider --header-max-width — the one deliberate exception in the site's
 * container system, per an explicit "header should use more of the
 * available width than ordinary page content" request.
 */
.inside-navigation {
	width: min(100% - (2 * var(--layout-gutter)), var(--layout-max-width, 80rem));
	margin-inline: auto;
}

/*
 * Main header row width/centering (height and component sizing are set
 * further down — the logo image rule above, and the desktop grid block
 * below for search/actions/padding).
 *
 * Horizontal gutter was missing entirely before — .grid-container (see
 * containers.css) only ever set max-width, never a side inset, so the
 * logo/nav/actions had nothing keeping them off the viewport edge.
 *
 * width + max-width as two separate properties, not the single
 * width: min(...) formula .myshop-container/.inside-navigation use —
 * .inside-header also carries GeneratePress's own "grid-container" class,
 * which containers.css caps at max-width: var(--layout-max-width)
 * !important (needed there to outrun GeneratePress's own late-loading
 * stylesheet, see that file's comment). Since --header-max-width (1920px)
 * is now WIDER than --layout-max-width (1600px), that !important rule
 * would otherwise still win and silently cap the header back down to
 * 1600px regardless of what width computes to. Beating an !important
 * rule requires another !important — .site-header .inside-header's
 * higher specificity (0-0-2-0 vs .grid-container's 0-0-1-0) makes this
 * one win deterministically, independent of load order, same reasoning
 * as the display: grid fix earlier.
 */
.inside-header {
	width: calc(100% - (2 * var(--layout-gutter)));
	margin-inline: auto;
}

.site-header .inside-header {
	max-width: var(--header-max-width) !important;
}

/*
 * display is intentionally NOT set here anymore — both the desktop
 * (min-width: 48rem) and mobile (max-width: 47.99rem) media queries below
 * declare it explicitly and cover the full viewport range between them
 * with no gap, so this unconditional rule was pure duplication sitting
 * right next to the actual flex/grid decision, not a fallback anything
 * depended on. See the desktop block's comment for why the display
 * declaration itself also needed a more specific selector, not just to
 * exist here.
 */
.inside-header {
	padding-block: var(--myshop-space-xs);
	align-items: center;
}

.main-nav ul li a,
.menu-bar-items {
	font-size: var(--font-size-base);
}

/* The logo already carries the "everkit shop" wordmark — GeneratePress's
   separate site title text next to it is redundant, so it's hidden. The
   underlying site title still exists for <title>/SEO purposes; this only
   hides its visual output in the header. */
.main-title {
	display: none;
}

/* Announcement bar — template-parts/header/announcement-bar.php */
.myshop-announcement-bar {
	background-color: var(--color-primary);
	color: var(--color-background);
}

/*
 * Selector is `ul.myshop-announcement-bar__list`, not just the class:
 * assets/css/base/reset.css has `ul[class] { margin:0; padding:0 }` —
 * an element+attribute selector, higher specificity than the plain
 * `.myshop-container` class this list also carries — so it was winning
 * and cancelling that class's `margin-inline: auto` centering outright,
 * regardless of stylesheet load order. Same bug, same fix as
 * ul.myshop-category-nav__list in navigation.css; this instance was
 * missed at the time. Restating the centering directly here, at equal
 * (element+class) specificity and later in source, is what makes it win.
 */
/*
 * CSS Grid, not flex + justify-content: space-between across the full
 * container width — that was spreading the three items to the far edges
 * with huge gaps between them, instead of reading as one group.
 * repeat(3, minmax(0, 1fr)) gives the three items equal-width columns,
 * each centered inside its own column via justify-self on the item (see
 * .myshop-announcement-bar__item below) — that's what distributes the
 * group evenly across the row's full width instead of leaving it as a
 * single tight cluster with big empty margins on either side.
 *
 * Uses --header-max-width, the same wider cap as .inside-header below —
 * previously a separate, narrower --announcement-max-width (1100px) kept
 * this row deliberately more compact than the main header; that's exactly
 * what read as "too compressed" on large screens once the header itself
 * grew wider, so both now share one width.
 */
ul.myshop-announcement-bar__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: var(--myshop-space-lg);
	min-height: 44px;
	/* Same formula as .myshop-container in containers.css (duplicated, not
	   referenced, because of the ul[class] specificity fight explained
	   above), just with --header-max-width instead of the site's general
	   --layout-max-width. */
	width: min(100% - (2 * var(--layout-gutter)), var(--header-max-width));
	margin-inline: auto;
}

.myshop-announcement-bar__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	gap: 0.4rem;
	line-height: 1;
}

.myshop-announcement-bar__item .myshop-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.myshop-announcement-bar__text {
	/* --font-size-sm (14px) is the clamp floor — unchanged at 1200-1440px,
	   growing to 15px on large desktop (~1600px+). */
	font-size: clamp(var(--font-size-sm), 0.9vw, 15px);
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Tablet: keep all three items, just tighten spacing before anything
   would need to be hidden. */
@media (max-width: 64rem) {
	.myshop-announcement-bar__list {
		gap: var(--myshop-space-md);
	}

	.myshop-announcement-bar__text {
		font-size: var(--font-size-xs);
	}
}

/* Mobile: one concise announcement instead of squeezing, wrapping to
   multiple lines, or scrolling horizontally. Only one item stays visible
   here (see :not(:first-child) below), so the 3-column grid above would
   leave it pinned in the first of three equal tracks instead of centered —
   switching back to flex + justify-content: center for this single-item
   case centers it properly. */
@media (max-width: 47.99rem) {
	.myshop-announcement-bar__list {
		display: flex;
		justify-content: center;
		min-height: 40px;
	}

	.myshop-announcement-bar__item:not(:first-child) {
		display: none;
	}

	/* Safety net, not the expected case: if the remaining item's text is
	   ever too long for a very narrow phone, truncate with an ellipsis
	   instead of forcing horizontal scroll or wrapping to a second line —
	   min-width: 0 is what lets a flex item shrink enough for
	   text-overflow to actually engage. */
	.myshop-announcement-bar__item:first-child {
		min-width: 0;
	}

	.myshop-announcement-bar__item:first-child .myshop-announcement-bar__text {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.site-header {
	position: relative;
	background-color: var(--color-background);
}

/* Header action icons — template-parts/header/menu-bar-actions.php */
.myshop-header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/*
 * One rule, shared by the search <button>, the account/cart <a> and the
 * wishlist <span> — same box, same reset, so none of them can drift out
 * of alignment with the others. Explicit padding/margin/line-height stop
 * the browser's default <button> UA styles (which the plain <a>/<span>
 * items never had in the first place) from making the search icon sit
 * differently than account/wishlist/cart.
 *
 * display: grid + place-items: center instead of flex align/justify:
 * functionally the same result, but it's a single declaration centering
 * both axes at once rather than two separate ones that could disagree —
 * ruling that out as a source of drift, belt-and-suspenders.
 */
.myshop-header-action {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border-radius: var(--myshop-radius);
	color: var(--color-text);
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/*
 * Grid place-items and flex align/justify both quietly failed to center
 * this vertically for reasons that didn't show up in a static CSS read —
 * so this sidesteps that entire family of layout algorithms. The icon is
 * taken out of flow and its center point is pinned to the exact center
 * of the 42x42 box by coordinate math (50%/50% + a translate by half its
 * own size), which no flex/grid alignment quirk can throw off.
 */
.myshop-header-action .myshop-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 21px;
	height: 21px;
	margin: 0;
}

.myshop-header-action:hover {
	color: var(--color-primary);
	background-color: var(--color-surface);
}

.myshop-header-action--placeholder {
	color: var(--color-text-muted);
	cursor: default;
}

.myshop-header-action--placeholder:hover {
	background-color: transparent;
}

.myshop-cart-count {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background-color: var(--color-accent);
	color: var(--color-heading);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1.1rem;
	text-align: center;
}

/*
 * Labeled desktop actions (account/wishlist/cart) — icon above a visible
 * label, replacing the plain 42px icon-only box for these three only. The
 * mobile-only .myshop-search-toggle button never carries this class, so
 * its existing icon-only box (above) is untouched.
 */
.myshop-header-action--labeled {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 68px;
	height: auto;
	min-height: 60px;
	padding: 6px 8px;
}

/*
 * .myshop-header-action .myshop-icon (above) absolutely-positions the icon
 * for the single-icon 42px box; this variant stacks icon above label in
 * normal flow instead, so both go back to being in-flow, sized elements.
 * .myshop-header-action__icon gets position:relative so the cart badge
 * (a child of it now, see template-parts/header/menu-bar-actions.php)
 * anchors to the icon specifically, not the whole taller labeled box.
 */
.myshop-header-action--labeled .myshop-header-action__icon {
	position: relative;
	display: block;
	line-height: 0;
}

/* 24px (the old fixed value) is the clamp floor — unchanged through
   ~1846px viewport width (1.3vw stays under 24px below that), then grows
   gently to 26px on very wide screens. */
.myshop-header-action--labeled .myshop-icon {
	position: static;
	transform: none;
	width: clamp(24px, 1.3vw, 26px);
	height: clamp(24px, 1.3vw, 26px);
	margin: 0;
}

.myshop-header-action--labeled .myshop-cart-count {
	top: -6px;
	right: -8px;
}

/* color: inherit (not a fixed value) so the label follows the <a>'s own
   color — including on hover, via .myshop-header-action:hover below —
   without a separate hover rule needing to repeat it. The icon already
   does this automatically (stroke="currentColor" in the inline SVG). */
.myshop-header-action__label {
	color: inherit;
	/* Raised from clamp(var(--font-size-xs), 0.65vw, 13px) — that read as
	   too small next to the now-wider header. 13px floor throughout
	   1200-1600px, growing to the 15px cap by ~1875px. */
	font-size: clamp(13px, 0.8vw, 15px);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

/* No background box on hover for the labeled variant — just the icon +
   label color change (inherited from .myshop-header-action:hover above,
   which still applies since --labeled is a second class on the same
   element, not a replacement). Equal specificity to that rule; wins by
   appearing later in the file. */
.myshop-header-action--labeled:hover {
	background-color: transparent;
}

/*
 * Product search: icon toggle + compact dropdown, at every screen size.
 * The placeholder/input only appears once assets/js/modules/search-toggle.js
 * opens the panel on click — nothing shows until then.
 */
.myshop-search-panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: var(--myshop-space-xs);
	width: 22rem;
	max-width: calc(100vw - 2rem);
	padding: var(--myshop-space-sm);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--myshop-radius);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Without this, the [hidden] attribute loses to the class selector above
   (author CSS always beats the UA default [hidden]{display:none} rule),
   so the panel would render open on every page load instead of only
   when assets/js/modules/search-toggle.js opens it. */
.myshop-search-panel[hidden] {
	display: none;
}

.myshop-search-panel .woocommerce-product-search {
	flex: 1;
	display: flex;
	gap: var(--myshop-space-xs);
}

.myshop-search-panel .myshop-search-form__field {
	flex: 1;
	padding: 0.6rem var(--myshop-space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--myshop-radius);
	background-color: var(--color-background);
	color: var(--color-text);
}

.myshop-search-panel .myshop-search-form__field:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

/*
 * woocommerce/product-searchform.php (theme override) is shared by this
 * compact panel and .myshop-header-search below — same button markup
 * (icon, no text) everywhere get_product_search_form() is called. This
 * rule covers the compact panel's sizing; .myshop-header-search has its
 * own block further down since its button sits flush against the input
 * as one component instead of a gapped pair.
 */
.myshop-search-panel .myshop-search-form__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	background-color: var(--color-primary);
	color: var(--color-background);
	border: 0;
	border-radius: var(--myshop-radius);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.myshop-search-panel .myshop-search-form__button:hover {
	background-color: var(--color-primary-hover);
}

.myshop-search-panel .myshop-search-form__button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * Permanent desktop/tablet product-search bar — template-parts/header/
 * product-search.php, rendered inside .inside-header (see the grid rule
 * above .site-branding-container's row). Hidden below the mobile
 * breakpoint; the .myshop-search-toggle icon + .myshop-search-panel above
 * take over there, unchanged.
 *
 * Input and button are one visually-connected component: the button has
 * no left border-radius and no left border of its own, so the seam reads
 * as a single control rather than two adjacent boxes.
 */
.myshop-header-search {
	display: none;
	min-width: 0;
}

.myshop-header-search .myshop-search-form {
	display: flex;
	width: 100%;
	height: 48px;
}

.myshop-header-search .myshop-search-form__field {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding-inline: var(--myshop-space-sm);
	border: 1px solid var(--color-border);
	border-inline-end: 0;
	/* 8px, not the shared 4px --myshop-radius token: this bar has its own
	   explicit corner-radius target, distinct from the smaller radius used
	   on buttons/panels elsewhere. */
	border-radius: 8px 0 0 8px;
	background-color: var(--color-background);
	color: var(--color-text);
	/* --font-size-sm (14px) is the clamp floor — unchanged at 1200-1440px,
	   growing to the 16px cap by ~1778px viewport width. */
	font-size: clamp(var(--font-size-sm), 0.9vw, 16px);
	box-sizing: border-box;
	transition: border-color 0.18s ease;
}

.myshop-header-search .myshop-search-form__field::placeholder {
	color: var(--color-text-muted);
}

.myshop-header-search .myshop-search-form__field:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -1px;
	border-color: var(--color-primary);
}

.myshop-header-search .myshop-search-form__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	width: auto;
	height: 100%;
	padding-inline: 20px;
	background-color: var(--color-primary);
	color: var(--color-background);
	border: 0;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

/* Compact mobile panel keeps the older icon-only button — see the
   opposite (visible) rule under .myshop-header-search below. */
.myshop-search-panel .myshop-search-form__button-text {
	display: none;
}

.myshop-header-search .myshop-search-form__button-text {
	display: inline;
	/* --font-size-sm (14px) is the clamp floor — unchanged at 1200-1440px,
	   growing to the 15px cap by ~1765px viewport width. */
	font-size: clamp(var(--font-size-sm), 0.85vw, 15px);
	font-weight: 600;
}

.myshop-header-search .myshop-search-form__button:hover {
	background-color: var(--color-primary-hover);
}

.myshop-header-search .myshop-search-form__button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * .inside-header's real children (confirmed by parsing the rendered DOM,
 * not just reading the parent theme's source — GeneratePress's flexbox
 * header mode nests #site-navigation, the "Home / Shop" primary-menu nav,
 * inside .inside-header too, not as a sibling after it) are, in order:
 * .site-branding-container (logo), #mobile-menu-control-wrapper (mobile
 * hamburger row — already display:none at this width via GP's own CSS),
 * #site-navigation (Home/Shop — explicitly hidden below, see comment on
 * that rule), .myshop-header-search and .myshop-header-actions. With
 * #site-navigation removed from flow, exactly 3 real items remain.
 *
 * Width/max-width/margin-inline are NOT redeclared here — the base rule
 * above (`.inside-header, .inside-navigation { width: min(...) }`) already
 * uses the exact same formula as .myshop-container in containers.css, and
 * applies at every width including this one; a previous revision of this
 * block overrode it with `max-width: none !important` specifically to
 * exempt the header from the shared cap, which is exactly what this task
 * reverses — the header now uses the SAME global container as every other
 * section, not a one-off wider exception. Only grid-specific properties
 * (display, columns, gap, block padding) are added here.
 *
 * grid-template-columns is minmax(0, 1fr) auto minmax(0, 1fr) — two EQUAL
 * flexible outer tracks flanking an auto-sized center track — not
 * `auto minmax(0, 1fr) auto`. With the logo/actions tracks sized to their
 * own content (the old `auto ... auto` approach), the middle track's
 * midpoint only equals the container's true center when the logo and
 * actions happen to be the same width, which they aren't. Two equal 1fr
 * tracks are always equal width regardless of what's inside them (as long
 * as it fits), so whatever sits in the middle auto track — the search bar
 * — lands at the container's actual geometric center, independent of the
 * logo/actions' widths.
 *
 * Confirmed by real browser measurement (getComputedStyle + a scan of
 * every matching CSS rule across all loaded stylesheets): this
 * grid-template-columns declaration was being computed correctly but was
 * INERT, because .inside-header's actual `display` was still `flex`.
 * GeneratePress's own stylesheet (assets/css/main.css:811, loaded as
 * generate-style-css — confirmed to load AFTER every myshop-* stylesheet)
 * declares `.inside-header { display: flex; align-items: center; }` at
 * equal specificity (one class, 0-0-1-0) to the plain `.inside-header`
 * selector this block used before. With specificity tied, the rule that
 * loads later wins regardless of which one is "ours" — GP's flex won.
 * `.site-header .inside-header` (two classes, 0-0-2-0) outranks GP's
 * plain `.inside-header` on specificity alone, which is resolved before
 * source order, so this wins independent of load order — no !important
 * needed, and .site-header is a stable, always-present ancestor (the
 * <header class="site-header"> element itself), not a fragile selector.
 */
@media (min-width: 48rem) {
	.site-header .inside-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(24px, 3vw, 56px);
		/* 1rem (16px) through ~1600px viewport (1vw stays under 1rem below
		   that), growing gently to 1.5rem (24px) at very wide screens — the
		   row only gets taller where there's genuinely more room to spend
		   it, not at 1200-1440px. */
		padding-block: clamp(1rem, 1vw, 1.5rem);
	}

	.site-branding-container {
		justify-self: start;
	}

	.myshop-header-search {
		display: block;
		/* Widened from clamp(420px, 35vw, 620px): that formula was already
		   fluid but topped out well short of the middle grid track's actual
		   available width on large screens, leaving visibly unused space
		   either side of the search bar once the global container itself
		   stopped being the constraint. 37vw keeps the 1200-1440px result
		   close to before (444px vs the old 420-450px range) and grows
		   further at 1600-1920px+. */
		width: clamp(420px, 37vw, 720px);
		/* Safety net, not the expected case: on a narrow "desktop" width
		   just above this breakpoint, the clamp's 420px floor could
		   exceed the (now equally-shared) side tracks' leftover space —
		   max-width: 100% lets the auto track's actual content width win
		   rather than overflowing. */
		max-width: 100%;
		justify-self: center;
	}

	.myshop-header-actions {
		justify-self: end;
		/* 22px (the old fixed value) is the clamp floor, so 1200-1440px is
		   unchanged; grows to 30px by very wide screens. */
		gap: clamp(22px, 1.5vw, 30px);
	}

	/*
	 * The "Home / Shop" primary-menu nav duplicates what the category
	 * nav bar directly below already provides, and the task explicitly
	 * asks for it gone from this row (not deleted — the underlying
	 * WordPress menu and its "primary" location assignment are
	 * untouched; #mobile-menu-control-wrapper's hamburger still opens it
	 * on mobile, where this rule doesn't apply). display: none removes
	 * it from layout AND the accessibility tree, so it doesn't leave an
	 * empty "Primary" landmark for screen-reader users either.
	 */
	#site-navigation {
		display: none;
	}

	/* The compact mobile search icon + its dropdown panel are redundant
	   once the permanent bar is visible — without this, a user could open
	   both, which is exactly the "no duplicate visible search forms" case
	   the task rules out. */
	.myshop-search-toggle {
		display: none;
	}

	.myshop-search-panel {
		display: none !important;
	}
}

/*
 * Mobile: .myshop-header-actions (relocated here from #site-navigation's
 * menu-bar-items, see inc/header/menu-bar-actions.php) now lives inside
 * .inside-header alongside the logo, so it needs a row placement next to
 * it instead of GeneratePress's default column stack (which was fine when
 * .inside-header only held the logo). #mobile-menu-control-wrapper
 * (hamburger) and #site-navigation (collapsible Home/Shop menu) are left
 * exactly as GeneratePress already had them — same order, same
 * flex-basis: 100% self-wrap onto their own full-width rows below — only
 * their order value changed, so they still land after logo+actions.
 * .myshop-header-search stays display:none from the base rule above.
 */
@media (max-width: 47.99rem) {
	.inside-header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.site-branding-container {
		order: 1;
	}

	.myshop-header-actions {
		order: 2;
	}

	#mobile-menu-control-wrapper,
	#site-navigation {
		order: 3;
		flex-basis: 100%;
	}
}

.myshop-search-panel__close {
	background: none;
	border: 0;
	font-size: var(--font-size-lg);
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
}

.myshop-header-action:focus-visible,
.myshop-search-panel__close:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}