/*
Domi Product Navigation Styles
Product-scoped styles for the single-product context navigation: global
header slide behavior and the sticky product section navigation bar.
Uses the shared Domi tokens from the theme :root block.
*/

/* --- Global header slide behavior (applied by product-nav.js) --- */

/* The template-part wrapper must stay attached to the viewport. The inner
   header is animated, while the wrapper owns the sticky layout slot. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 101;
	background: var(--domi-color-canvas, #fff);
	transition: transform var(--domi-motion-duration, 150ms) var(--domi-motion-easing, ease-in-out);
}

.domi-site-header.domi-header-hidden {
	transform: none;
}

.wp-site-blocks > header.wp-block-template-part.domi-header-shell-hidden {
	transform: translateY(-100%);
	z-index: 99;
	background: transparent;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.domi-site-header {
		transition: none;
	}

	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* --- Product context navigation bar --- */

.domi-product-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: var(--domi-shell-width, 1600px);
	margin-left: auto;
	margin-right: auto;
	background: var(--domi-color-canvas, #fff);
}

.domi-product-nav .wp-block-post-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--domi-font-body, Inter, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	text-transform: uppercase;
}

.domi-product-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--domi-space-3, 1rem);
	justify-content: flex-end;
	min-width: 0;
	width: 100%;
	grid-column: 2;
}

.domi-product-nav__links {
	display: flex;
	align-items: center;
	gap: var(--domi-space-5, 1rem);
	justify-content: flex-end;
	margin: 0;
	padding: 0 30px 0 0;
	min-width: 0;
	flex: 0 1 auto;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--domi-color-line, #e5e5e5) transparent;
}

.domi-product-nav__links::-webkit-scrollbar {
	height: 3px;
}

.domi-product-nav__links::-webkit-scrollbar-thumb {
	background: var(--domi-color-line, #e5e5e5);
}

.domi-product-nav__links::-webkit-scrollbar-track {
	background: transparent;
}

.domi-product-nav__links a {
	display: inline-block;
	padding: var(--domi-space-2, 0.5rem) 0;
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--domi-font-body, Inter, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	color: var(--domi-color-ink, #000);
	text-decoration: none;
	transition: color var(--domi-motion-duration, 150ms) var(--domi-motion-easing, ease-in-out);
}

.domi-product-nav__links a:hover {
	color: var(--domi-color-dark-surface, #222);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.domi-product-nav__links a.is-active,
.domi-product-nav__links a[aria-current="location"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.domi-product-nav__links a[hidden] {
	display: none;
}

/* The purchase action intentionally shares the type-tester CTA class and
   visual treatment. Only its grid placement is product-nav-specific. */
.domi-product-nav__buy {
	flex-shrink: 0;
	position: sticky;
	right: 0;
	z-index: 1;
}

/* --- Mobile: title row + single horizontally scrolling action row --- */

@media (max-width: 768px) {
	.domi-product-nav {
		flex-direction: column;
		align-items: stretch;
		gap: var(--domi-space-2, 0.5rem);
		grid-template-columns: minmax(0, 1fr);
	}

	.domi-product-nav .wp-block-post-title {
		white-space: nowrap;
	}

	.domi-product-nav__actions {
		width: 100%;
		justify-content: space-between;
		grid-column: 1;
	}

	.domi-product-nav__links {
		flex: 1 1 auto;
		justify-content: flex-start;
		padding-bottom: 2px;
	}
}

/* --- Horizontal inset alignment with the product content columns --- */

/* The product content uses a 25px side padding (--site-side-padding). */
.domi-product-nav {
	padding-left: 25px !important;
	padding-right: 25px !important;
}

@media (max-width: 375px) {
	.domi-product-nav {
		padding-left: 41px !important;
		padding-right: 41px !important;
	}
}