/*
 * Noxgear product nav bar (.c-nav-prod): cart icon, in/past-section states, Buy Now landing.
 * Loaded after main.min.css on the two product templates only (inc/scripts.php).
 * Spec: Documents/noxgear.com/PRODUCT-BAR-BUILD-SPEC.md (2026-11-13). Driven by assets/scripts/product-bar.js.
 */

/* ---------- fixed chrome height: header, plus the announcement when it is open ---------- */
body {
	--nox-chrome: var(--head-height-m);
}
body.alert-is-open {
	--nox-chrome: calc(var(--head-height-m) + var(--alert-height));
}
@media (min-width: 64rem) {
	body {
		--nox-chrome: var(--head-height);
	}
	body.alert-is-open {
		--nox-chrome: calc(var(--head-height) + var(--alert-height));
	}
}

/* Buy Now / deep links land the section under the chrome instead of behind it (P8). */
#product {
	scroll-margin-top: var(--nox-chrome);
}

/* ---------- states (body classes set by product-bar.js) ---------- */

/* Gumshoe's product-is-visible no longer drives the bar: its threshold is the bar height, ours is the header height. */
body.product-is-visible .c-nav-prod {
	transform: translateY(0);
}

/* Inside the add-to-cart section: the bar slides away (and leaves the tab order), the header stays
   even while Headroom has it unpinned. */
body.nox-prod-in .c-nav-prod {
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 300ms ease-in-out, visibility 0s linear 300ms;
}
body.nox-prod-in .m-head.m-head--unpinned {
	transform: translateY(0);
}

/* The desktop hover sub-menus are keyed on .m-head:not(.m-head--unpinned) in _nav-main.scss; restore them
   while the header is forced visible. */
@media (min-width: 64rem) {
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:hover,
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:active {
		z-index: 2;
	}
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:hover::after,
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:active::after {
		bottom: -1em;
		width: 340px;
		height: 60px;
	}
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:hover .c-nav-main__subnav,
	body.nox-prod-in .m-head.m-head--unpinned .c-nav-main__item:active .c-nav-main__subnav {
		display: block;
	}
}

/* ---------- cart icon (right of Buy Now), mirrors the header's icon in dark-on-white ---------- */
.c-nav-prod__cart {
	display: inline-flex;
	position: relative;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-black);
	text-decoration: none;
}
.c-nav-prod .c-nav-prod__cart {
	margin-left: 8px; /* specificity beats block-style.css's .is-layout-flex > * { margin: 0 } */
}
.c-nav-prod__cart:visited {
	color: var(--color-black);
}
.c-nav-prod__cart:hover,
.c-nav-prod__cart:active,
.c-nav-prod__cart:focus-visible {
	color: var(--color-primary);
}
.c-nav-prod__cart .c-btn-cart__inner {
	width: 44px;
	height: 44px;
}
.c-nav-prod__cart svg {
	display: block;
	width: 32px;
	height: 32px;
}
/* The count is drawn inside the basket, like the header. Woo fragments replace this span with the
   header's markup (same classes, plus its id), so only classes are styled here. */
.c-nav-prod__cart .c-btn-cart__label {
	top: 0.25em;
	left: 0.94em;
}

/* ---------- layout: the bar's overall width stays; the trust items give up spacing ---------- */
.c-nav-prod .feature {
	white-space: nowrap;
}
.c-nav-prod__inner {
	column-gap: 1rem; /* floor for the classic justify-between row */
}
.c-nav-prod .c-nav-prod__inner.is-layout-flex {
	gap: 1.5rem; /* block row: theme.json's 40px gap, tightened to make room for the icon */
}
.c-nav-prod__inner > .flex:last-child,
.c-nav-prod__inner > .wp-block-group:last-child {
	align-items: center;
}
.c-nav-prod__inner > .wp-block-group:last-child {
	gap: 0;
}
/* No room for everything: hide the trust items, as the <1024 layout already does (set by product-bar.js). */
.c-nav-prod--compact .feature {
	display: none !important;
}

@media (min-width: 64rem) {
	.c-nav-prod__inner > * {
		flex-shrink: 0; /* so an overflow is measurable instead of squeezed */
	}
	.c-nav-prod__inner > .wp-block-group:last-child > .wp-block-woocommerce-single-product {
		margin-right: 2.5rem; /* keeps the price's old 40px gap to Buy Now */
	}
}

@media (max-width: 63.99rem) {
	/* Title block may shrink; the title itself drops to 20px and two lines so the icon fits beside Buy Now. */
	.c-nav-prod__inner > :first-child {
		flex: 1 1 auto;
		min-width: 0;
	}
	.c-nav-prod .c-h--sm {
		display: -webkit-box;
		overflow: hidden;
		font-size: 1.25rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	/* Buy Now shifts left a little: tighter horizontal padding, no 140px minimum on the block button. */
	.c-nav-prod .c-btn--pill.c-btn--tight {
		padding-right: 1em;
		padding-left: 1em;
	}
	.c-nav-prod .wp-block-button--medium .wp-block-button__link,
	.c-nav-prod .wp-block-button .wp-block-button__link {
		min-inline-size: 0;
		padding-right: 1rem;
		padding-left: 1rem;
	}
	.c-nav-prod .c-nav-prod__inner.is-layout-flex {
		gap: 0.75rem;
	}
	.c-nav-prod .c-nav-prod__cart {
		margin-left: 4px;
	}
}