/**
 * Long-scroll product layout + sticky jump nav.
 * Markup: inc/product-long-scroll.php, behaviour: js/product-long-scroll.js.
 * --ec-sticky-top / --ec-jump-offset are set by the JS (fixed admin bar,
 * store notice etc.).
 */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Electro gives #page overflow:hidden, which makes it the scroll container
   for position:sticky - so the jump nav never sticks. overflow:clip still
   clips sideways spill but is not a scroll container. Older browsers that
   ignore clip keep hidden; the nav then simply scrolls away (no breakage). */
.ec-long-scroll #page.site {
	overflow: clip;
}

[data-ec-section] {
	scroll-margin-top: var(--ec-jump-offset, 80px);
}

/* ── Sticky jump nav ── */
.ec-jumpnav {
	position: sticky;
	top: var(--ec-sticky-top, 0px);
	z-index: 50;
	margin: 32px 0 24px;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	transition: box-shadow 0.2s ease;
}

.ec-jumpnav.is-stuck {
	box-shadow: 0 6px 16px -10px rgba(19, 19, 19, 0.35);
}

.ec-jumpnav__inner {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ec-jumpnav__inner::-webkit-scrollbar {
	display: none;
}

.ec-jumpnav__link {
	flex: 0 0 auto;
	position: relative;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
}

.ec-jumpnav__link:hover,
.ec-jumpnav__link:focus-visible {
	color: #ce1d76;
	text-decoration: none;
}

.ec-jumpnav__link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	transition: background-color 0.15s ease;
}

.ec-jumpnav__link.is-active {
	color: #ce1d76;
}

.ec-jumpnav__link.is-active::after {
	background: #ce1d76;
}

.ec-jumpnav__sentinel {
	height: 0;
}

@media (max-width: 767px) {
	.ec-jumpnav {
		margin: 24px -15px 16px;
		padding: 0 7px;
	}

	.ec-jumpnav__link {
		padding: 12px 10px;
		font-size: 13px;
	}

	.ec-jumpnav__link::after {
		left: 10px;
		right: 10px;
	}
}

/* ── Stacked sections (were tabs) ── */
.ec-sections {
	margin-bottom: 40px;
}

.ec-section + .ec-section {
	margin-top: 48px;
}

.ec-section__label {
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ce1d76;
}

.ec-section__title {
	margin: 0 0 20px;
	padding-bottom: 10px;
	font-size: 24px;
	line-height: 1.2;
	border-bottom: 2px solid #ce1d76;
}

/* ══ DARK MODE ══
   Used when the description is an .hp- template page. The sections below it
   continue the same black page, with the same tokens as
   css/hero-product-pages.css: #111 page, #1a1a1a cards, #2a2a2a rules,
   Bebas Neue heads, DM Mono body, #ce1d76 accent. */

/* Jump nav goes dark too, so the page reads as one piece. */
.ec-jumpnav--dark {
	background: #111;
	border-bottom-color: #2a2a2a;
	border-radius: 4px 4px 0 0;
	margin-bottom: 0;
}

.ec-jumpnav--dark .ec-jumpnav__inner {
	padding: 0 24px;
}

.ec-jumpnav--dark .ec-jumpnav__link {
	font-family: 'DM Mono', monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #aaa;
}

.ec-jumpnav--dark .ec-jumpnav__link:hover,
.ec-jumpnav--dark .ec-jumpnav__link.is-active {
	color: #fff;
}

.ec-jumpnav--dark.is-stuck {
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7);
}

/* Wrapper, section padding, eyebrow labels and headings all come from the
   real .hp / .hp-section / .hp-label / .hp h2 rules in
   css/hero-product-pages.css (the PHP adds those classes), including the
   mobile edge-to-edge panel and tighter padding. Only joins are handled here. */
.ec-sections--dark.hp {
	border-radius: 0 0 4px 4px;
}

/* No gap between the description's own .hp block and what follows. */
.ec-sections--dark .ec-section + .ec-section {
	margin-top: 0;
}

.ec-sections--dark .ec-section--description .hp {
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
}

/* ── Specs (ACF tables from inc/product-tabs.php ec_spec_html()) ──
   Each group becomes a card in a two-column grid. The builder prints inline
   widths and a navy heading colour, hence the !important overrides. */
.ec-sections--dark .ec-section--technical_specifications .ec-section__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #2a2a2a;
	border: 1px solid #2a2a2a;
}

.ec-sections--dark .technical_specification {
	background: #1a1a1a;
	padding: 24px 28px; /* = .hp-box-item */
}

.ec-sections--dark .technical_specification h2 {
	margin: 0 0 8px !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 18px !important; /* = .hp-box-name */
	font-weight: 400 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.04em !important;
	color: #ce1d76 !important;
	text-transform: none !important;
}

.ec-sections--dark .technical_specification h2 span {
	color: inherit !important;
}

.ec-sections--dark .technical_specification table {
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse;
	background: transparent !important;
}

.ec-sections--dark .technical_specification table tr,
.ec-sections--dark .technical_specification table td {
	background: transparent !important;
}

.ec-sections--dark .technical_specification td {
	padding: 11px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #2a2a2a !important;
	vertical-align: top;
	font-size: 13px;
	line-height: 1.5;
	color: #fff !important;
}

.ec-sections--dark .technical_specification td:first-child {
	width: 42% !important;
	padding-right: 12px !important;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #888 !important;
}

.ec-sections--dark .technical_specification td:first-child b {
	font-weight: 400;
}

.ec-sections--dark .technical_specification table:last-of-type td {
	border-bottom: 0 !important;
}

/* ── Video (YIKES custom tab: own title, h2 per video, iframes in <p>) ── */
.ec-sections--dark .ec-section--video .yikes-custom-woo-tab-title {
	display: none;
}

.ec-sections--dark .ec-section--video .ec-section__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
	align-items: start;
}

.ec-sections--dark .ec-section--video .ec-section__body h2 {
	grid-column: span 1;
	margin: 12px 0 0 !important;
	font-family: 'Bebas Neue', sans-serif !important;
	font-size: 18px !important; /* = .hp-box-name */
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	color: #ce1d76 !important;
}

/* Empty spacer paragraphs (&nbsp;) between videos. */
.ec-sections--dark .ec-section--video .ec-section__body p:empty,
.ec-sections--dark .ec-section--video .ec-section__body p:not(:has(iframe)) {
	display: none;
}

.ec-sections--dark .ec-section--video .ec-section__body p {
	margin: 0;
}

.ec-sections--dark .ec-section--video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid #2a2a2a;
}

/* Headings and iframes alternate (h2, p, h2, p): pair each heading with its
   video by flowing the grid in columns of two rows. */
@supports (grid-auto-flow: column) {
	.ec-sections--dark .ec-section--video .ec-section__body {
		grid-auto-flow: column;
		grid-template-rows: auto auto;
		grid-template-columns: none;
		grid-auto-columns: 1fr;
	}
}

/* ── Reviews: Yuko renders its own white card (shadow DOM, not styleable);
   frame it so it sits on the dark page deliberately. ── */
.ec-sections--dark .ec-section--reviews .ec-section__body {
	padding: 8px;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
}

@media (max-width: 780px) {
	/* .hp already runs edge to edge with 12px side padding on phones; the
	   nav matches it (2px + 10px link padding = 12px to the first word). */
	.ec-jumpnav--dark {
		padding: 0;
		border-radius: 0;
	}

	.ec-jumpnav--dark .ec-jumpnav__inner {
		padding: 0 2px;
	}

	.ec-sections--dark .ec-section--technical_specifications .ec-section__body {
		grid-template-columns: 1fr;
	}

	.ec-sections--dark .technical_specification {
		padding: 16px 14px; /* = .hp-box-item on phones */
	}

	.ec-sections--dark .ec-section--video .ec-section__body {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
	}
}

/* ── Closing call to action (ec_child_long_scroll_cta) ──
   Ends the story on "buy" before the full specs. Label/heading come from the
   .hp-label / .hp h2 rules; only the centring and the button are styled here. */
.ec-sections--dark .ec-cta {
	text-align: center;
	padding-top: 48px !important;
	padding-bottom: 56px !important;
	background: #1a1a1a;
	border-top: 1px solid #2a2a2a;
	border-bottom: 1px solid #2a2a2a;
}

.ec-sections--dark .ec-cta h2 {
	text-align: center !important;
}

.ec-sections--dark .ec-cta__btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	background: #ce1d76;
	color: #fff !important;
	font-family: 'DM Mono', monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.ec-sections--dark .ec-cta__btn:hover,
.ec-sections--dark .ec-cta__btn:focus-visible {
	background: #a8155f;
}

@media (max-width: 780px) {
	.ec-sections--dark .ec-cta {
		padding-top: 36px !important;
		padding-bottom: 40px !important;
	}
}

/* Centred label in the closing CTA: no trailing rule line. */
.ec-sections--dark .ec-cta .hp-label {
	justify-content: center;
}

.ec-sections--dark .ec-cta .hp-label::after {
	content: none;
}

/* SKU / Category / Tags line, moved to the very end of the sections. */
.ec-meta {
	font-size: 12px;
	line-height: 1.6;
}

.ec-sections--dark .ec-meta {
	border-top: 1px solid #2a2a2a;
	color: #888;
}

.ec-sections--dark .ec-meta a {
	color: #aaa;
}

.ec-sections--dark .ec-meta a:hover {
	color: #ce1d76;
}

/* Dead space between the buy box and the dark content (owner, 2026-10-09):
   Electro gives .single-product-wrapper a 160px bottom margin, and the jump
   nav added 32px on top - 206px of nothing under the trust row. */
/* Electro's rule is .single-product.full-width .single-product-wrapper
   (11.429em inside @media min-width 768px), so match and out-rank it. */
.ec-long-scroll.single-product.full-width .single-product-wrapper,
.ec-long-scroll .single-product-wrapper {
	margin-bottom: 24px;
}

.ec-long-scroll .ec-jumpnav {
	margin-top: 16px;
}