/**
 * GuitarJacket Navigator — site-wide collapsible header + hero selector.
 *
 * States (on .cfpe-nav):
 *   --landing-open  : landing page, panel visible, bar hidden
 *   --collapsed     : compact top bar, panel hidden
 *   --expanded      : user opened the panel on a non-landing page
 */

/* ═══════════════════════════════════════════════════════
 * 1. Navigator wrapper
 * ═══════════════════════════════════════════════════════ */
.cfpe-nav {
	position: relative;
	z-index: 9990;
	width: 100%;
	background: #111;
	box-sizing: border-box;
}

/* Top offset of the viewport's usable area, i.e. the WP admin-bar height
   for logged-in users (0 otherwise). The floating Navigator tab, the
   expanded panel overlay, and the About-page subnav all anchor to this so
   they tuck just below the admin bar. */
body.cfpe-nav-active {
	--cfpe-nav-top: 0px;
}
body.admin-bar.cfpe-nav-active {
	--cfpe-nav-top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar.cfpe-nav-active {
		--cfpe-nav-top: 46px;
	}
}
.cfpe-nav *, .cfpe-nav *::before, .cfpe-nav *::after {
	box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════
 * 2. Collapsed top bar
 * ═══════════════════════════════════════════════════════ */
.cfpe-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 1rem;
	min-height: 48px;
	background: #111;
	color: #fff;
}

.cfpe-nav__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.cfpe-nav__brand-logo {
	display: block;
	/* !important: WooCommerce ships `.woocommerce-page img { height: auto }`
	   which otherwise blows the logo up to natural size on shop/account pages. */
	height: 28px !important;
	width: auto !important;
	max-width: none;
	/* Vector SVG with the brand gold (#f7e088) baked into its fill —
	   crisp at any size and DPI, no recolor filter needed. */
	aspect-ratio: 1193.58 / 306.79;
}

/* Right-side bar actions (cart link + navigator toggle) */
.cfpe-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.cfpe-nav__cart,
.cfpe-nav__account {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.4rem 0.7rem;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 6px;
	white-space: nowrap;
	line-height: 1;
}
.cfpe-nav__cart:hover,
.cfpe-nav__cart:focus,
.cfpe-nav__account:hover,
.cfpe-nav__account:focus {
	background: rgba(255,255,255,0.12);
	color: #f7e088;
}
.cfpe-nav__cart:focus-visible,
.cfpe-nav__account:focus-visible {
	outline: 2px solid rgba(255,220,100,0.8);
	outline-offset: 2px;
}
.cfpe-nav__cart-icon,
.cfpe-nav__account-icon {
	font-size: 1rem;
}
.cfpe-nav__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.35em;
	background: #f7e088;
	color: #111;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
}

.cfpe-nav__toggle {
	appearance: none;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	transition: background 0.15s;
}
.cfpe-nav__toggle:hover {
	background: rgba(255,255,255,0.1);
}
.cfpe-nav__toggle:focus-visible {
	outline: 2px solid rgba(255,220,100,0.8);
	outline-offset: 2px;
}

/* Chevron */
.cfpe-nav__chevron {
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	margin-top: -0.15em;
}

/* When expanded, flip chevron */
.cfpe-nav__toggle[aria-expanded="true"] .cfpe-nav__chevron {
	transform: rotate(-135deg);
	margin-top: 0.15em;
}

/* ═══════════════════════════════════════════════════════
 * 3. Panel (the hero navigator content)
 * ═══════════════════════════════════════════════════════ */
.cfpe-nav__panel {
	transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
	            opacity 0.3s ease;
}

/* Collapsed: panel hidden. Padding must go to zero too — otherwise the
   panel's bottom padding renders as a black strip under the top bar even
   at max-height: 0. */
.cfpe-nav--collapsed .cfpe-nav__panel {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Expanded (user toggled open) — render as a fixed overlay dropping from the
   top of the viewport so the navigator is visible from any scroll position,
   without pinning the bar or reserving real-estate at the top of the page. */
.cfpe-nav--expanded .cfpe-nav__panel {
	position: fixed;
	top: var(--cfpe-nav-top, 0px);
	left: 0;
	right: 0;
	z-index: 9991;
	max-height: calc(100vh - var(--cfpe-nav-top, 0px));
	overflow: auto;
	opacity: 1;
	pointer-events: auto;
	background: #111;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* Landing-open: panel visible, bar minimized.
   Plain block flow (no nested flex) so the hero has computable
   dimensions on first paint — flex + width:auto + aspect-ratio
   chains can race on initial render and leave children zero-sized. */
.cfpe-nav--landing-open {
	background: #111;
	min-height: 100vh;
}
.cfpe-nav--landing-open .cfpe-nav__panel {
	max-height: none;
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
}
.cfpe-nav--landing-open .cfpe-landing__frame {
	background: #111;
}
.cfpe-nav--landing-open .cfpe-nav__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
	pointer-events: none;
}
.cfpe-nav--landing-open .cfpe-nav__bar > * {
	pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════
 * 3b. Floating Navigator tab + overlay chrome
 * ═══════════════════════════════════════════════════════ */

/* Floating tab: fixed in the top-right corner, hidden until the top bar
   scrolls out of view (JS toggles .is-visible), so it never duplicates the
   in-bar control while the bar is on screen. */
.cfpe-nav__fab {
	position: fixed;
	top: calc(var(--cfpe-nav-top, 0px) + 12px);
	right: 16px;
	z-index: 9992;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.95rem;
	background: rgba(17, 17, 17, 0.92);
	color: #f7e088;
	border: 1px solid rgba(247, 224, 136, 0.55);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	/* Avoid the 300ms tap delay / double-tap-zoom so a single tap opens. */
	touch-action: manipulation;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.cfpe-nav__fab.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* Only apply the hover background on devices that truly hover (mouse).
   On touch, a :hover that changes appearance makes iOS treat the first tap
   as a hover (no click) and require a second tap to actually open. */
@media (hover: hover) {
	.cfpe-nav__fab:hover {
		background: rgba(34, 34, 34, 0.96);
	}
}
.cfpe-nav__fab:focus-visible {
	outline: 2px solid rgba(255, 220, 100, 0.9);
	outline-offset: 2px;
}
.cfpe-nav__fab .cfpe-nav__chevron {
	color: #f7e088;
}
.cfpe-nav__fab[aria-expanded="true"] .cfpe-nav__chevron {
	transform: rotate(-135deg);
	margin-top: 0.15em;
}
/* While the overlay is open the close button takes over, so hide the tab.
   Placed after .is-visible so it wins at equal specificity. */
.cfpe-nav--expanded .cfpe-nav__fab {
	opacity: 0;
	pointer-events: none;
}

/* Dark backdrop behind the overlay panel. */
.cfpe-nav__scrim {
	position: fixed;
	inset: 0;
	z-index: 9989;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.cfpe-nav--expanded .cfpe-nav__scrim {
	opacity: 1;
	pointer-events: auto;
}

/* Close (×) button — only present while the panel is an open overlay.
   Fixed (not absolute) so it stays in the corner even if the tall navigator
   panel scrolls internally. */
.cfpe-nav__close {
	position: fixed;
	top: calc(var(--cfpe-nav-top, 0px) + 10px);
	right: 12px;
	z-index: 9993;
	width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	touch-action: manipulation;
}
.cfpe-nav--expanded .cfpe-nav__close {
	display: inline-flex;
}
@media (hover: hover) {
	.cfpe-nav__close:hover {
		color: #f7e088;
		background: rgba(0, 0, 0, 0.65);
	}
}
.cfpe-nav__close:focus-visible {
	outline: 2px solid rgba(255, 220, 100, 0.9);
	outline-offset: 2px;
}

/* The floating chrome is meaningless on the landing splash (the navigator
   is the whole page there). */
.cfpe-nav--landing-open .cfpe-nav__fab,
.cfpe-nav--landing-open .cfpe-nav__scrim,
.cfpe-nav--landing-open .cfpe-nav__close {
	display: none !important;
}

/* Lock background scroll while the overlay is open. */
body.cfpe-nav-open {
	overflow: hidden;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cfpe-nav__panel {
		transition: none;
	}
	.cfpe-nav__fab,
	.cfpe-nav__scrim {
		transition: none;
	}
	.cfpe-nav__chevron {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════
 * 4. Landing panel — the hero visual system
 *    (previously .cfpe-landing root styles)
 * ═══════════════════════════════════════════════════════ */
.cfpe-landing {
	--cfpe-landing-bg: #111;
	box-sizing: border-box !important;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 1rem 1rem;
}

.cfpe-landing__frame {
	position: relative;
	background: #111;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	container-type: inline-size;
	container-name: cfpe-frame;
}

/* Landing page: full-bleed parent, but the frame itself shrinks to
   match the hero width and is centered. This is critical because the
   .cfpe-landing__go-float is position:absolute against the frame —
   if the frame stayed full body width, right:4% would track the
   page's right edge instead of the character. */
.cfpe-nav--landing-open .cfpe-landing {
	max-width: none;
	padding: 0;
}
.cfpe-nav--landing-open .cfpe-landing__frame {
	border-radius: 0;
	box-shadow: none;
	width: min(100%, calc(100vh * 2 / 3));
	margin: 0 auto;
}

.cfpe-landing__hero {
	position: relative;
	width: 100%;
	aspect-ratio: 2048 / 3072;
	max-height: 85vh;
	background: var(--cfpe-landing-bg);
	overflow: hidden;
	margin: 0 auto;
}

/* Landing page: hero just fills the (already-sized) frame. The frame
   above does the min() sizing, so the hero inherits width: 100% from
   the base rule. Bump max-height up so portrait viewports use 100vh. */
.cfpe-nav--landing-open .cfpe-landing__hero {
	max-height: 100vh;
}
/* The hero art frames the figure high in the canvas, so the 2:3 stage hugs his
   head at the top. Drop the artwork to the BOTTOM of the stage and leave ~10%
   headroom up top — this balances the up/down arrows and gives the top neighbour
   cover room so it isn't clipped. The hero image and the cover faces share the
   exact same box, so the active cover stays aligned. Applies to BOTH the
   full-screen landing splash and the expanded Navigator panel on other pages. */
.cfpe-nav--landing-open .cfpe-landing__hero-img,
.cfpe-nav--landing-open .cfpe-landing__face img,
.cfpe-nav--landing-open .cfpe-landing__face .cfpe-landing__trace,
.cfpe-nav--expanded .cfpe-landing__hero-img,
.cfpe-nav--expanded .cfpe-landing__face img,
.cfpe-nav--expanded .cfpe-landing__face .cfpe-landing__trace {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: 100% !important;
	height: 90% !important;
	object-fit: contain !important;
	object-position: center bottom !important;
}

.cfpe-landing__hero-img {
	display: block !important;
	position: relative;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* ═══════════════════════════════════════════════════════
 * 5. Wheel overlay + faces (arc selector)
 * ═══════════════════════════════════════════════════════ */
.cfpe-landing__wheel-overlay {
	position: absolute;
	z-index: 2;
	inset: 0;
	touch-action: none;
	user-select: none;
	cursor: grab;
	overflow: hidden;
}
.cfpe-landing__wheel-overlay:active {
	cursor: grabbing;
}

.cfpe-landing__face {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.35s ease;
	pointer-events: none;
}
.cfpe-landing__face.is-dragging {
	transition: none;
}
.cfpe-landing__face img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* ───────────────────────────────────────────────────────
 * 5a. Chasing-highlight trace (gold comet around the cover)
 *
 * The SVG shares the cover image's exact box + a matching viewBox, so
 * the hand-traced body outline registers on the guitar. It stays hidden
 * (opacity 0) and un-animated until JS marks the centred cover both
 * `.is-active` AND `.is-settled` — i.e. the wheel has come fully to rest.
 * That guarantees zero paint cost during drag / spin / arrow steps.
 * ─────────────────────────────────────────────────────── */
.cfpe-landing__face .cfpe-landing__trace {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	transition: opacity 0.6s ease;
	/* Overall subtlety of the highlight — tweak in one place. */
	--cfpe-trace-strength: 0.25;
}

/* Reveal + run only when the cover is centred and the wheel is at rest. */
.cfpe-landing__face.is-active.is-settled .cfpe-landing__trace {
	opacity: var(--cfpe-trace-strength);
}

/* Shared dash geometry. pathLength=100 normalises the perimeter to 100
   units so the dash maths is identical on every cover regardless of the
   path's real length. non-scaling-stroke keeps the line thin (in screen
   px) no matter how large the SVG is scaled. */
.cfpe-landing__trace-ring,
.cfpe-landing__trace-glow,
.cfpe-landing__trace-seg {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	/* Warm-white "alpha glow" — soft and luminous rather than a hard gold
	   line. Tweak hue/strength here in one place. */
	stroke: var(--cfpe-trace-color, #fff4d8);
}

/* Continuous, always-lit outline. No dashes, no animation — it traces the
   whole body at once so the line never goes dark at the neck. Kept faint so
   the brighter running comet reads as the "moving" highlight on top. */
.cfpe-landing__trace-ring {
	stroke-width: 1.2;
	stroke-opacity: 0.42;
}

/* Dash geometry: period 25 → the pattern repeats 4× around the normalised
   (pathLength=100) perimeter, giving 4 crests flowing at once. A longer lit
   dash (6) plus long merged tails make the crests read as one flowing line
   rather than sparkly dots. Keep the dash sum (= 25) in sync with the
   keyframe end value and PHP $comets. */

/* Wide, very faint dash that rides with each crest for a soft glow halo
   (cheap stand-in for a blur filter, so paint stays light). */
.cfpe-landing__trace-glow {
	stroke-width: 6;
	stroke-dasharray: 6 19;
	stroke-opacity: 0.16;
}

/* Crest tail. --i 0 is the bright crest; width + opacity taper along the
   trail. Each layer's negative --d delay offsets it slightly, so the crest
   gets a soft fading tail that exists from the first frame (no bunching). */
.cfpe-landing__trace-seg {
	stroke-width: calc(2px - var(--i) * 0.1px);
	stroke-dasharray: 6 19;
	stroke-opacity: calc(0.78 - var(--i) * 0.082);
}
.cfpe-landing__trace-seg[style*="--i:0;"] {
	stroke: var(--cfpe-trace-head, #fffdf4);
	stroke-width: 2.2;
	stroke-opacity: 1;
}

/* Animate the chase only on the settled cover. The crests flow by shifting
   the dash pattern exactly ONE period (25 units) per cycle — that is a
   perfectly seamless, never-restarting loop. ~2.8s/period means a crest
   sweeps any given point (incl. the neck) every ~2.8s. Each layer's NEGATIVE
   --d animation-delay offsets it for the soft tail without start-up bunching. */
.cfpe-landing__face.is-active.is-settled .cfpe-landing__trace-glow,
.cfpe-landing__face.is-active.is-settled .cfpe-landing__trace-seg {
	animation: cfpe-trace-run 2.8s linear infinite;
	animation-delay: var(--d, 0s);
}

@keyframes cfpe-trace-run {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -25; }
}

/* Reduced motion: no chase. The always-on ring already gives a gentle
   static highlight on the settled cover, so just hide the moving comet. */
@media (prefers-reduced-motion: reduce) {
	.cfpe-landing__face.is-active.is-settled .cfpe-landing__trace-glow,
	.cfpe-landing__face.is-active.is-settled .cfpe-landing__trace-seg {
		animation: none;
	}
	.cfpe-landing__trace-glow,
	.cfpe-landing__trace-seg {
		stroke-opacity: 0;
	}
	.cfpe-landing__trace-ring {
		stroke-opacity: 0.4;
	}
}

/* ═══════════════════════════════════════════════════════
 * 5b. Up / down step controls + swipe hint
 * ═══════════════════════════════════════════════════════ */
.cfpe-landing__arrow {
	position: absolute;
	z-index: 25;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 9vw, 52px);
	height: clamp(38px, 9vw, 52px);
	padding: 0;
	border: 1px solid rgba(247, 224, 136, 0.275);
	border-radius: 999px;
	background: linear-gradient(170deg, rgba(247, 224, 136, 0.21) 0%, rgba(212, 169, 50, 0.18) 100%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.cfpe-landing__arrow--up   { top: clamp(8px, 2.5vh, 20px); }
.cfpe-landing__arrow--down { bottom: clamp(8px, 2.5vh, 20px); }
.cfpe-landing__arrow:hover,
.cfpe-landing__arrow:focus-visible {
	background: linear-gradient(170deg, rgba(247, 224, 136, 0.42) 0%, rgba(212, 169, 50, 0.36) 100%);
	border-color: rgba(247, 224, 136, 0.55);
}
.cfpe-landing__arrow:focus-visible {
	outline: 2px solid rgba(255, 220, 100, 0.85);
	outline-offset: 2px;
}
.cfpe-landing__arrow:active { transform: translateX(-50%) scale(0.93); }

.cfpe-landing__arrow-chevron {
	display: block;
	width: 0.62em;
	height: 0.62em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	font-size: clamp(16px, 4vw, 22px);
}
.cfpe-landing__arrow--up .cfpe-landing__arrow-chevron {
	transform: rotate(-135deg);
	margin-top: 0.18em;
}
.cfpe-landing__arrow--down .cfpe-landing__arrow-chevron {
	transform: rotate(45deg);
	margin-bottom: 0.18em;
}

/* Swipe hint — pulses up/down, fades out after the first interaction. */
.cfpe-landing__hint {
	position: absolute;
	z-index: 24;
	left: 50%;
	bottom: clamp(64px, 12vh, 96px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.4s ease;
}
.cfpe-landing__hint.is-hidden { opacity: 0; }
.cfpe-landing__hint-chevrons {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	animation: cfpe-hint-bob 1.8s ease-in-out infinite;
}
.cfpe-landing__hint-chevron {
	width: 11px;
	height: 11px;
	border-right: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: 2px solid rgba(255, 255, 255, 0.85);
	transform: rotate(45deg);
}
.cfpe-landing__hint-chevron:nth-child(1) { opacity: 0.55; }
.cfpe-landing__hint-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
@keyframes cfpe-hint-bob {
	0%, 100% { transform: translateY(-3px); }
	50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.cfpe-landing__hint-chevrons { animation: none; }
}

/* ═══════════════════════════════════════════════════════
 * 6. Guitar-pick Go area
 * ═══════════════════════════════════════════════════════ */
.cfpe-landing__go-float {
	position: absolute;
	z-index: 30;
	right: 4%;
	top: 44%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	pointer-events: none;
	width: 30%;
	max-width: 180px;
	aspect-ratio: 5 / 6;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.cfpe-landing__go-float > * {
	pointer-events: auto;
}

.cfpe-landing__readout {
	font-size: clamp(0.65rem, 4cqi, 1.3rem);
	font-weight: 800;
	color: #fff;
	margin: 0;
	text-align: center;
	line-height: 1.2;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	word-break: break-word;
	max-width: 95%;
}

/* ═══════════════════════════════════════════════════════
 * 7. Golden 3D Go button
 * ═══════════════════════════════════════════════════════ */
.cfpe-landing__go {
	appearance: none;
	border: none;
	position: relative;
	display: inline-block;
	padding: clamp(0.3rem, 2cqi, 0.65rem) clamp(0.6rem, 5cqi, 1.6rem);
	font-size: clamp(0.7rem, 4.5cqi, 1.5rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2a1a00;
	cursor: pointer;
	white-space: nowrap;
	border-radius: clamp(6px, 2.5cqi, 14px);
	overflow: hidden;
	z-index: 1;

	background:
		linear-gradient(
			170deg,
			#f7e088 0%,
			#d4a932 25%,
			#c5942a 50%,
			#d4a932 75%,
			#f7e088 100%
		);

	box-shadow:
		0 3px 0 0 #8a6a10,
		0 4px 10px rgba(0, 0, 0, 0.4),
		0 1px 16px rgba(212, 169, 50, 0.3),
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 -1px 2px rgba(0, 0, 0, 0.15);

	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	transform: translateY(0);
}

.cfpe-landing__go::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255, 255, 255, 0.5) 45%,
		rgba(255, 255, 255, 0.7) 50%,
		rgba(255, 255, 255, 0.5) 55%,
		transparent 70%
	);
	background-size: 250% 100%;
	animation: cfpe-shimmer 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes cfpe-shimmer {
	0%, 100% { background-position: 200% center; }
	50% { background-position: -100% center; }
}

.cfpe-landing__go:hover {
	transform: translateY(2px);
	box-shadow:
		0 1px 0 0 #8a6a10,
		0 2px 6px rgba(0, 0, 0, 0.4),
		inset 0 1px 1px rgba(255, 255, 255, 0.4),
		inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}

.cfpe-landing__go:active {
	transform: translateY(3px);
	box-shadow:
		0 0 0 0 #8a6a10,
		0 1px 3px rgba(0, 0, 0, 0.35),
		inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.cfpe-landing__go:focus-visible {
	outline: 2px solid rgba(255, 220, 100, 0.8);
	outline-offset: 2px;
}

.cfpe-landing__go:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	transform: none;
}
.cfpe-landing__go:disabled::after {
	animation: none;
}

/* ═══════════════════════════════════════════════════════
 * 8. Mobile refinements
 * ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.cfpe-nav__bar {
		padding: 0.5rem 0.75rem;
		min-height: 44px;
	}
	.cfpe-nav__brand-logo {
		height: 24px !important;
	}
	.cfpe-nav__cart-label,
	.cfpe-nav__account-label {
		display: none;
	}
	.cfpe-nav__cart,
	.cfpe-nav__account {
		padding: 0.4rem 0.55rem;
	}
	/* Compact icon-only tab on small screens to limit its footprint. */
	.cfpe-nav__fab-label {
		display: none;
	}
	.cfpe-nav__fab {
		padding: 0.5rem 0.6rem;
		right: 10px;
	}
	.cfpe-landing {
		padding: 0 0.5rem 0.5rem;
	}
}

/* ═══════════════════════════════════════════════════════
   Theme overrides
   (moved here from an inline wp_head block so browsers cache it).
   Every selector is scoped to body.cfpe-nav-active / .cfpe-nav-landing,
   which PHP only adds when the navigator actually renders.
   ═══════════════════════════════════════════════════════ */

/* Hide the theme header (block theme template part + classic masthead). */
.cfpe-nav-active .wp-site-blocks > header,
.cfpe-nav-active .wp-site-blocks > .wp-block-template-part:first-child,
.cfpe-nav-active header#masthead,
.cfpe-nav-active .site-header {
	display: none !important;
}

/* Remove the margin-top Twenty Twenty-Five puts on <main>. */
.cfpe-nav-active .wp-site-blocks > main,
.cfpe-nav-active .wp-site-blocks > .wp-block-group:has(> main),
.cfpe-nav-active .wp-site-blocks > .wp-block-group:first-of-type {
	margin-top: 0 !important;
}

/* Landing page: dark immersive splash — only the navigator is visible. */
body.cfpe-nav-landing {
	background: #111 !important;
}
.cfpe-nav-landing .wp-block-post-title,
.cfpe-nav-landing .entry-title,
.cfpe-nav-landing .wp-block-post-featured-image,
.cfpe-nav-landing .wp-block-post-content,
.cfpe-nav-landing .entry-content,
.cfpe-nav-landing .wp-site-blocks > main > *,
.cfpe-nav-landing .wp-site-blocks > .wp-block-group {
	display: none !important;
}
.cfpe-nav-landing .wp-site-blocks > main {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* Site-wide legal business identity, replacing the hidden theme footer. */
.cfpe-site-legal {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem clamp(1rem, 4vw, 2.5rem);
	text-align: center;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(20, 20, 20, 0.66);
	background: #fff;
	border-top: 1px solid rgba(20, 20, 20, 0.08);
}
body.cfpe-nav-landing .cfpe-site-legal,
body.cfpe-about-active .cfpe-site-legal,
body.cfpe-story-active .cfpe-site-legal,
body.cfpe-gallery-page .cfpe-site-legal,
body.cfpe-editor-active .cfpe-site-legal {
	color: rgba(236, 231, 223, 0.58);
	background: rgba(12, 12, 13, 0.85);
	border-top-color: rgba(236, 231, 223, 0.12);
}

/* Hide WooCommerce breadcrumbs and the theme footer on all pages. */
.cfpe-nav-active .woocommerce-breadcrumb {
	display: none !important;
}
.cfpe-nav-active .wp-site-blocks > footer,
.cfpe-nav-active .wp-site-blocks > .wp-block-template-part:last-child,
.cfpe-nav-active footer#colophon,
.cfpe-nav-active .site-footer {
	display: none !important;
}

/* Shop / archive: hide result count + sorting, center product grid. */
.cfpe-nav-active .woocommerce-result-count,
.cfpe-nav-active .woocommerce-ordering,
.cfpe-nav-active .wp-block-woocommerce-catalog-sorting,
.cfpe-nav-active .wc-block-product-sort-select,
.cfpe-nav-active .wc-block-catalog-sorting,
.cfpe-nav-active .wc-block-product-results-count,
.cfpe-nav-active .wp-block-woocommerce-product-results-count,
.cfpe-nav-active .wp-block-woocommerce-store-notices,
.cfpe-nav-active .woocommerce-notices-wrapper:empty {
	display: none !important;
}

/* Empty-cart call-to-action buttons (Shop / Open Navigator). */
.cfpe-empty-cart-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
	margin: 1.6rem auto 0;
}
.cfpe-empty-cart-btn {
	display: inline-block;
	padding: 0.8rem 1.8rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid #222;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cfpe-empty-cart-btn--primary {
	background: #222;
	color: #fff;
}
.cfpe-empty-cart-btn--primary:hover {
	background: #000;
	color: #fff;
}
.cfpe-empty-cart-btn--ghost {
	background: transparent;
	color: #222;
}
.cfpe-empty-cart-btn--ghost:hover {
	background: #222;
	color: #fff;
}

/* Center product tiles (classic loop + block grid). */
.cfpe-nav-active .woocommerce ul.products,
.cfpe-nav-active ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 1.5rem !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	list-style: none !important;
}
.cfpe-nav-active .woocommerce ul.products li.product,
.cfpe-nav-active ul.products li.product {
	float: none !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Block-theme product grid: center a lone product. */
.cfpe-nav-active .wp-block-woocommerce-product-template:has(> li:only-child),
.cfpe-nav-active .wp-block-post-template:has(> li:only-child),
.cfpe-nav-active .wc-block-grid__products:has(> li:only-child) {
	display: flex !important;
	justify-content: center !important;
	grid-template-columns: none !important;
}
.cfpe-nav-active .wp-block-woocommerce-product-template:has(> li:only-child) > li,
.cfpe-nav-active .wp-block-post-template:has(> li:only-child) > li,
.cfpe-nav-active .wc-block-grid__products:has(> li:only-child) > li {
	width: 100% !important;
	max-width: 320px !important;
	margin: 0 auto !important;
	text-align: center !important;
}
/* When multiple products, still center the row of tiles. */
.cfpe-nav-active .wp-block-woocommerce-product-template,
.cfpe-nav-active .wp-block-post-template.is-layout-grid,
.cfpe-nav-active .wp-block-post-template.is-layout-flex,
.cfpe-nav-active .wc-block-grid__products {
	justify-content: center !important;
	justify-items: center !important;
}
.cfpe-nav-active .wp-block-woocommerce-product-template > li,
.cfpe-nav-active .wp-block-post-template > li,
.cfpe-nav-active .wc-block-grid__product {
	text-align: center !important;
}

/* Keep "Design Print" shop button on a single line. */
.cfpe-nav-active .wp-block-button.wc-block-components-product-button,
.cfpe-nav-active .wc-block-components-product-button {
	width: auto !important;
	max-width: none !important;
	display: inline-block !important;
}
.cfpe-nav-active .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.cfpe-nav-active .wc-block-components-product-button .wp-block-button__link,
.cfpe-nav-active .wp-block-woocommerce-product-template .wp-block-button__link {
	display: inline-block !important;
	width: auto !important;
	white-space: nowrap !important;
	overflow-wrap: normal !important;
	word-break: keep-all !important;
}

/* Center archive titles on shop pages. */
.cfpe-nav-active.archive .wp-block-query-title,
.cfpe-nav-active.post-type-archive-product .wp-block-query-title,
.cfpe-nav-active.archive .wp-block-post-title,
.cfpe-nav-active.post-type-archive-product .wp-block-post-title {
	text-align: center !important;
}

/* ============================================================
 * WooCommerce commerce pages — cart, checkout, account, review.
 * Constrain the white content column so block cart/checkout does
 * not sprawl edge-to-edge. Knit side panels are excluded via
 * .cfpe-commerce-layout (see decorative edges below).
 * ============================================================ */
.cfpe-nav-active.cfpe-commerce-layout:not(.woocommerce-checkout):not(.woocommerce-cart):not(.cfpe-review-page) .wp-site-blocks > main,
.cfpe-nav-active.cfpe-commerce-layout:not(.woocommerce-checkout):not(.woocommerce-cart):not(.cfpe-review-page) main.wp-block-group,
.cfpe-nav-active.cfpe-commerce-layout:not(.woocommerce-checkout):not(.woocommerce-cart):not(.cfpe-review-page) .content-area,
.cfpe-nav-active.cfpe-commerce-layout:not(.woocommerce-checkout):not(.woocommerce-cart):not(.cfpe-review-page) .site-main {
	max-width: 1100px;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 3vw, 2rem) !important;
	padding-right: clamp(1rem, 3vw, 2rem) !important;
	padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
	box-sizing: border-box;
	background: #fff;
}
.cfpe-nav-active.cfpe-commerce-layout.woocommerce-checkout:not(.woocommerce-order-received) .wp-site-blocks > main,
.cfpe-nav-active.cfpe-commerce-layout.woocommerce-checkout:not(.woocommerce-order-received) main.wp-block-group,
.cfpe-nav-active.cfpe-commerce-layout.woocommerce-cart .wp-site-blocks > main,
.cfpe-nav-active.cfpe-commerce-layout.woocommerce-cart main.wp-block-group,
.cfpe-nav-active.cfpe-commerce-layout.cfpe-review-page .wp-site-blocks > main,
.cfpe-nav-active.cfpe-commerce-layout.cfpe-review-page main.wp-block-group,
.cfpe-nav-active.cfpe-shop-layout .wp-site-blocks > main,
.cfpe-nav-active.cfpe-shop-layout main.wp-block-group {
	max-width: 1100px;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 3vw, 2rem) !important;
	padding-right: clamp(1rem, 3vw, 2rem) !important;
	padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
	box-sizing: border-box;
	background: transparent !important;
}
.cfpe-nav-active.cfpe-commerce-layout .wc-block-cart,
.cfpe-nav-active.cfpe-commerce-layout .wc-block-checkout,
.cfpe-nav-active.cfpe-commerce-layout .woocommerce {
	max-width: 100%;
	box-sizing: border-box;
}

/* ============================================================
 * Decorative tactile edges — desktop only, light pages only.
 *
 * On wide viewports the site's white pages have visible blank
 * margins beside the content area. These ::before / ::after
 * pseudo-elements cover those margins with a warm linen-like
 * crosshatch pattern that fades to transparent at the inner
 * edge, giving the pages a crafted, tactile quality without
 * touching any content or interaction.
 *
 * Excluded: landing (dark hero), about, story, gallery, editor,
 *           shop, cart, checkout, account, design review.
 * Hidden:   below 1200 px (no margin space to fill on phones
 *           and narrow tablets).
 * ============================================================ */

/* Dark knit-fabric texture (assets/landing/knit-edge.jpg). Illumination
   is flattened (no luminance gradient) and the tile is pre-mirrored
   vertically, so the repeat-y tiling shows no visible seams or banding.
   A mask fades each panel from fully opaque at the outer wall to
   transparent where it meets the page, so the white content area
   dissolves into the dark tactile edge. */
.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::before,
.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::after {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	width: 140px;
	pointer-events: none;
	/* Keep below all site UI (FAB z-index: 9992, nav: 9990) but
	   above the bare white page background. */
	z-index: 20;
	background-image: url('knit-edge.jpg');
	background-size: 160px auto;
	background-repeat: repeat-y;
}

/* Left edge — opaque black leather at the wall, dissolving into the page. */
.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::before {
	left: 0;
	background-position: left top;
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, rgba(0,0,0,0.55) 65%, transparent 100%);
	        mask-image: linear-gradient(to right, #000 0%, #000 35%, rgba(0,0,0,0.55) 65%, transparent 100%);
}

/* Right edge — mirror of the left. */
.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::after {
	right: 0;
	background-position: right top;
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 35%, rgba(0,0,0,0.55) 65%, transparent 100%);
	        mask-image: linear-gradient(to left, #000 0%, #000 35%, rgba(0,0,0,0.55) 65%, transparent 100%);
}

/* Only show when the viewport is wide enough that there's actual
   blank space beside the content — hides entirely on phones and
   narrow tablets. */
@media (max-width: 1199px) {
	.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::before,
	.cfpe-nav-active:not(.cfpe-nav-landing):not(.cfpe-about-active):not(.cfpe-story-active):not(.cfpe-gallery-page):not(.cfpe-editor-active):not(.cfpe-commerce-layout):not(.cfpe-shop-layout)::after {
		display: none;
	}
}