/**
 * header.css
 *
 * Top bar, header inner (logo/search/account/cart), and the mega-menu.
 * Ported directly from the approved review mockups — verified identical
 * mega-menu CSS across all 7 mockup files via hash comparison during the
 * mockup phase, so this is the single, confirmed-consistent design.
 */

/* ---------------- Top bar ---------------- */
.topbar {
	background: #111;
	color: #fff;
	font-size: 12.5px;
}
.topbar .wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 24px;
	flex-wrap: wrap;
	gap: 6px;
}
.topbar .wrap span:last-child {
	text-align: right;
}
.topbar a {
	color: #fff;
}
.topbar a:hover {
	color: #ccc;
}

/* ---------------- Header ---------------- */
.site-header {
	border-bottom: 2px solid var(--ink);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 60;
}
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
}
.site-title {
	margin: 0;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
}
.header-search {
	flex: 1;
	max-width: 460px;
}
.header-search form {
	display: flex;
	border: 1px solid #111;
}
.header-search input {
	flex: 1;
	border: 0;
	padding: 10px 12px;
	outline: none;
	font-size: 14px;
}
.header-search button {
	background: #111;
	color: #fff;
	border: 0;
	padding: 0 16px;
}
.header-actions {
	display: flex;
	gap: 20px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/*
 * Root cause of the View Cart/Checkout invisible-text bug (2026-09-03
 * fix) — this was a plain DESCENDANT selector, so it matched every <a>
 * anywhere inside .header-actions, not just the two icon links it was
 * written for (My Account, and the cart icon itself). .cart-dropdown
 * lives inside .cart-nav-item purely so its `position: absolute` has
 * .cart-nav-item's `position: relative` to anchor to — but that nesting
 * also put the View Cart/Checkout <a class="btn ..."> buttons 3 levels
 * deep inside .header-actions, so this rule's `color: var(--ink)`
 * (#111) was silently reaching them too.
 *
 * Specificity is exactly why it only broke Checkout and not View Cart:
 * `.header-actions a` (1 class + 1 element = 0,1,1) outranks the plain
 * `.btn` class (0,1,0) at rest, but loses to `.btn:hover`/
 * `.btn-outline:hover` (1 class + 1 pseudo-class = 0,2,0) on hover.
 * View Cart carries .btn-outline too, whose own resting color (#111)
 * happens to match var(--ink) anyway, so it looked fine by coincidence.
 * Checkout is plain .btn, whose resting color is white — that's what
 * var(--ink) was quietly overriding to #111, producing #111 text on a
 * #111 background at rest (fixed the instant you hover, since the
 * higher-specificity hover rule takes over — matches exactly what was
 * reported: broken at rest, correct on hover, correct on View Cart).
 *
 * Fix: scope this rule to the two <a> elements it actually means —
 * .header-actions's own direct-child <a> (My Account) and
 * .cart-nav-item's direct-child <a> (the cart icon) — via child
 * combinators, so it can never again reach anything nested inside
 * .cart-dropdown, present or future. This is the root-cause fix, not a
 * band-aid override: no new rule outranks .btn/.btn-outline's own
 * :hover rules, so this can't reintroduce the "color pinned regardless
 * of hover" bug that testing-round item 20 already fixed once.
 */
.header-actions > a,
.header-actions > .cart-nav-item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	position: relative;
	color: var(--ink);
}
.header-actions svg {
	width: 20px;
	height: 20px;
}
.cart-count {
	position: absolute;
	top: -6px;
	right: -12px;
	background: #111;
	color: #fff;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------- Cart "Current Cart" / "Switch Cart" dropdown ---------------- */
/*
 * Values match mockup-cart.html's #cartDropdown exactly. Previous
 * implementation (a separate small toggle button + bare list of saved
 * carts) never had a mockup reference at all — this is the real one,
 * found on a second, broader search after the first search only
 * checked for "saved cart"/"switch cart" text and missed the actual
 * .cart-dropdown/.switch-cart-item class names used in the markup.
 */
.cart-nav-item {
	position: relative;
}
.cart-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	width: 300px;
	background: #fff;
	border: 1px solid #111;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	z-index: 70;
	padding: 18px;
}
.cart-dropdown.open {
	display: block;
}
.cart-dropdown h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
	margin: 0 0 10px;
}
.cart-dropdown .current-cart-name {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}
.cart-dropdown .current-cart-meta {
	font-size: 12px;
	color: #666;
	margin-bottom: 14px;
}
.cart-dropdown .dropdown-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.cart-dropdown .dropdown-actions .btn {
	flex: 1;
	padding: 9px;
	font-size: 11.5px;
	margin-top: 0;
	/*
	 * The `color:#fff`/`.btn-outline { color:#111 }` overrides that used
	 * to sit here were removed 2026-09-02 (testing-round item 20) — they
	 * were a defensive restatement for an earlier "Checkout text isn't
	 * white" report, but being 3-class selectors with no :hover variant,
	 * they permanently outranked base.css's .btn:hover/.btn-outline:hover
	 * rules (which DO flip color correctly) in every state, including
	 * hover. Net effect: background flipped on hover (base.css's
	 * unopposed rule) but text color stayed pinned to the forced resting
	 * value — invisible white-on-white "Checkout" text and black-on-black
	 * "View Cart" text on hover. base.css's existing .btn/.btn-outline
	 * resting + :hover rules already produce the correct, legible result
	 * once nothing here fights them — nothing needed to be added back.
	 */
}
.cart-dropdown .dropdown-actions .btn-outline {
	/* See .btn's comment above — its color override is gone for the
	 * same reason. */
}
.switch-cart-list {
	border-top: 1px solid var(--line);
	padding-top: 14px;
}
.switch-cart-list .switch-cart-item {
	/*
	 * Prefixed with .switch-cart-list (raising specificity to 2
	 * classes) rather than the bare .switch-cart-item alone — found via
	 * live debugging (DevTools Computed panel) that .header-actions a
	 * (1 class + 1 element = higher specificity than a single bare
	 * class) was unintentionally winning for display/align-items/color,
	 * since these dropdown links are structurally nested inside
	 * .header-actions and that selector has no depth limit. That rule
	 * is only meant for the top-level Track Order/Account/Cart icons
	 * (stacking an icon above a text label) — it was never meant to
	 * reach this deep, but a descendant selector like `.header-actions
	 * a` doesn't know the difference. Two explicit columns — name
	 * (left, allowed to wrap) and unit count (right, fixed) — both
	 * top-aligned rather than centered against each other, so a
	 * wrapped multi-line name doesn't pull the unit count down to its
	 * vertical middle. Per explicit user spec, a refinement on top of
	 * the mockup's own simpler space-between row.
	 */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 8px 0;
	font-size: 12.5px;
	cursor: pointer;
	border-bottom: 1px solid #f2f2f2;
	color: var(--ink);
	text-decoration: none;
}
.switch-cart-list .switch-cart-item .switch-cart-name {
	flex: 1;
	min-width: 0;
	text-align: left;
	padding-right: 12px;
}
.switch-cart-list .switch-cart-item:last-child {
	border-bottom: 0;
}
.switch-cart-list .switch-cart-item:hover {
	color: var(--ink-soft);
}
.switch-cart-list .switch-cart-item .cart-meta {
	font-size: 11px;
	color: #999;
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}
.switch-cart-list .switch-cart-item.active {
	font-weight: 700;
}
.switch-cart-list .switch-cart-item.active .switch-cart-name::before {
	/*
	 * Scoped to the name column specifically, not the outer flex row —
	 * a ::before on a flex container becomes its own separate flex
	 * item, which justify-content:space-between would then push away
	 * from the name span with a visible gap, rather than sitting
	 * directly adjacent to it as intended.
	 */
	content: "✓ ";
}
.switch-cart-list .switch-cart-view-all {
	/*
	 * Prefixed with .switch-cart-list for the same reason every other
	 * selector in this block is — a bare single-class .switch-cart-item
	 * lost a specificity fight against .header-actions a (see that
	 * rule's own history above); this link is exactly as vulnerable
	 * (also an <a> tag, also needs display/color .header-actions a also
	 * declares) if left unprefixed.
	 */
	display: block;
	text-align: center;
	font-size: 11.5px;
	color: #666;
	text-decoration: underline;
	padding-top: 12px;
	margin-top: 4px;
	border-top: 1px solid #e5e5e5;
}
.switch-cart-list .switch-cart-view-all:hover {
	color: var(--ink);
}

/* ---------------- Nav / mega-menu ---------------- */
nav.main-nav {
	border-top: 1px solid var(--line);
	position: relative;
}
.nav-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
}
.nav-item {
	position: static;
	display: flex;
	align-items: stretch;
}
.nav-item-link {
	background: none;
	border: 0;
	padding: 12px 4px 12px 16px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.nav-item-toggle {
	background: none;
	border: 0;
	padding: 12px 16px 12px 4px;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.nav-item-toggle .chev {
	font-size: 10px;
	transition: transform 0.15s ease;
}
.nav-item-link:hover,
.nav-item-toggle:hover,
.nav-item.open .nav-item-link,
.nav-item.open .nav-item-toggle {
	background: var(--ink);
	color: #fff;
}
.nav-item.open .nav-item-toggle .chev {
	transform: rotate(180deg);
}
.nav-plain-link {
	display: inline-block;
	padding: 12px 16px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.nav-plain-link:hover {
	background: var(--ink);
	color: #fff;
}
.mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: min(90vw, 1116px);
	background: #fff;
	border: 1px solid var(--ink);
	border-top: none;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	z-index: 50;
	padding: 24px 30px;
}
.nav-item.open .mega-panel {
	display: block;
}
.facet-columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
.facet-col h4 {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
	padding-bottom: 7px;
	margin-bottom: 10px;
}
.facet-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.facet-col li {
	margin-bottom: 5px;
}
.facet-col a {
	font-size: 12.5px;
}
.facet-col a:hover {
	text-decoration: underline;
}
.mega-footer-row {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: flex-end;
}
.view-all-btn {
	border: 1px solid var(--ink);
	padding: 7px 14px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.view-all-btn:hover {
	background: var(--ink);
	color: #fff;
}
.promo-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 28px;
}
.promo-group h4 {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 8px;
}
.promo-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.promo-group li {
	margin-bottom: 4px;
}
.promo-group a {
	font-size: 12.5px;
	color: var(--ink-soft);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
	.facet-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.mega-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		transform: none;
		overflow: auto;
		padding: 60px 20px 20px;
	}
	.facet-columns {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.nav-inner {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.header-search {
		order: 3;
		max-width: 100%;
		width: 100%;
	}
	.cart-dropdown {
		width: 90vw;
		right: -60px;
	}
}