/* --- Messenger FAB --- */
.muus-messenger-fab {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.muus-messenger-fab__toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--primary, #c8a97e);
	color: #111;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s, background-color 0.2s;
}

.muus-messenger-fab__toggle:hover {
	transform: scale(1.08);
}

.muus-messenger-fab__toggle:focus {
	outline: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.muus-messenger-fab__icon-close {
	display: none;
}

.muus-messenger-fab.is-open .muus-messenger-fab__icon-chat {
	display: none;
}

.muus-messenger-fab.is-open .muus-messenger-fab__icon-close {
	display: block;
}

.muus-messenger-fab__items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.muus-messenger-fab__item {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: scale(0.5) translateY(30px);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
}

.muus-messenger-fab.is-open .muus-messenger-fab__item {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.muus-messenger-fab.is-open .muus-messenger-fab__item:nth-last-child(1) { transition-delay: 0.05s; }
.muus-messenger-fab.is-open .muus-messenger-fab__item:nth-last-child(2) { transition-delay: 0.1s; }
.muus-messenger-fab.is-open .muus-messenger-fab__item:nth-last-child(3) { transition-delay: 0.15s; }

.muus-messenger-fab__item:hover {
	transform: scale(1.12) translateY(0);
}

.muus-messenger-fab__item--wa {
	background: #25D366;
}

.muus-messenger-fab__item--tg {
	background: #2AABEE;
}

.muus-messenger-fab__item--max {
	background: #fff;
	overflow: hidden;
}

.muus-messenger-fab__item--max img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Live chat (Chatwoot) — the only FAB entry that opens something on-site, so it wears the
   brand gold rather than a messenger's colour. Injected by inc/chat-widget.php. */
.muus-messenger-fab__item--chat {
	background: var(--wp--preset--color--primary, #c8a97e);
	color: #111;
	border: none;
	padding: 0;
	cursor: pointer;
}

.muus-messenger-fab.is-open .muus-messenger-fab__item:nth-last-child(4) { transition-delay: 0.2s; }

/* A visitor who is already in a conversation gets Chatwoot's own bubble (it is the only thing
   that can carry an unread badge) — it lands bottom-right, exactly where the FAB sits. */
.muus-chat-has-bubble .muus-messenger-fab { bottom: 7rem; }

/* Hide FAB on checkout */
.woocommerce-checkout .muus-messenger-fab { display: none; }

/* Mobile: slightly smaller, adjust position for sticky CTA */
@media (max-width: 781px) {
	.muus-messenger-fab {
		bottom: 2rem;
		right: 1rem;
		transition: bottom 0.25s ease;
	}

	.muus-messenger-fab.muus-fab-above-cta {
		bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}

	/* On single product pages, always keep FAB above sticky CTA area
	   (which itself rises above the cookie banner via --muus-cookie-h) */
	.single-product .muus-messenger-fab {
		bottom: calc(5rem + env(safe-area-inset-bottom, 0px) + var(--muus-cookie-h, 0px));
	}

	.muus-messenger-fab__toggle {
		width: 50px;
		height: 50px;
	}

	.muus-messenger-fab__item {
		width: 44px;
		height: 44px;
	}
}

/* ---------------------------------------------------------------
 * FAQ accordion (/faq page)
 * ------------------------------------------------------------- */

.muus-faq {
	max-width: 780px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.muus-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 1.25rem 0;
}

.muus-faq__item:first-child {
	border-top: 1px solid var(--wp--preset--color--border);
}

.muus-faq__question {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
	list-style: none;
	padding-right: 2rem;
	position: relative;
	transition: color 0.2s ease;
}

.muus-faq__question::-webkit-details-marker {
	display: none;
}

.muus-faq__question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
	line-height: 1;
}

.muus-faq__item[open] .muus-faq__question {
	color: var(--wp--preset--color--primary);
}

.muus-faq__item[open] .muus-faq__question::after {
	content: '−';
}

.muus-faq__answer {
	margin-top: 0.75rem;
	padding-right: 2rem;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.6;
}

@media (max-width: 781px) {
	.muus-faq {
		margin: 1rem 0;
	}
	.muus-faq__question {
		font-size: 1rem;
	}
}

/* =========================================================================
   GUIDE LONGREAD  (pillar + hub guide pages; v2.8.80 — mockup visual parity:
   widened 1200px content zone, left hero title + injected eyebrow + reading time)
   Every rule is scoped under body.muus-guide-page (added by the body_class
   filter on is_page() && muus_is_guide_page()), so this stylesheet stays inert
   on every other page. The chrome — reading progress bar, sticky numbered TOC
   with scroll-spy, and the FAQ accordion — is assembled at runtime by
   assets/js/guide-longread.js; with JS disabled the content degrades to a
   normal single column and the FAQ h3/p simply render as text.
   Ported from the static mockup chto-takoe-yakutskiy-nozh.html; mockup tokens
   are mapped onto the theme's --wp--preset--* variables here.
   ========================================================================= */
.muus-guide-page {
	--mg-accent: var(--wp--preset--color--primary, #c8a97e);
	--mg-fg: var(--wp--preset--color--text, #e8e5e0);
	--mg-muted: var(--wp--preset--color--text-muted, #999999);
	--mg-faint: #6d6a66;
	--mg-border: var(--wp--preset--color--border, #333333);
	--mg-surface: var(--wp--preset--color--surface, #1a1a1a);
	--mg-surface-2: var(--wp--preset--color--surface-alt, #222222);
	--mg-display: var(--wp--preset--font-family--heading, 'Jost', sans-serif);
	--mg-body: var(--wp--preset--font-family--body, 'Inter', sans-serif);
	--mg-measure: 68ch;
	--mg-r-lg: 8px;
	--mg-ease: cubic-bezier(.22, .61, .36, 1);
	--mg-offset: 100px; /* sticky-header clearance for anchors + TOC top */
	--mg-zone: 1200px;  /* widened hero+content zone (theme content width) */
	--mg-gutter: clamp(20px, 5vw, 64px); /* horizontal breathing room */
}

/* ---- content zone: widen the template's 800px hero+content cap to the theme's
   1200px so the 240px TOC + article grid can breathe (article reaches ~68ch).
   page.html renders the hero group + post-content with contentSize:"800px", so
   WP caps each child at max-width:800px via `<container> > :where(…){max-width:800px}`
   (specificity 0,1,0, NOT !important); these 0,2,0 selectors beat it. WP's own
   `margin:auto !important` still centres post-content + the <hr>. The hero text
   (eyebrow + h1) is instead left-aligned to the centred zone's inner-left edge via
   calc(), so it lines up with the TOC column at every viewport. ---- */
.muus-guide-page .wp-block-post-content,
.muus-guide-page .wp-block-separator {
	max-width: var(--mg-zone);
	padding-inline: var(--mg-gutter);
	box-sizing: border-box;
}

/* crumbs + eyebrow + h1 + hero byline share the zone's inner-left edge;
   override WP's centring !important */
.muus-guide-page .muus-guide-crumbs,
.muus-guide-page .muus-guide-eyebrow,
.muus-guide-page .muus-guide-byline--hero,
.muus-guide-page .wp-block-post-title {
	margin-left: max(var(--mg-gutter), calc((100% - var(--mg-zone)) / 2 + var(--mg-gutter))) !important;
	margin-right: auto !important;
	padding-inline: 0;
	box-sizing: border-box;
}

/* breadcrumbs (injected by guide-longread.js as <nav class="muus-guide-crumbs">;
   mockup .crumbs — faint 12px trail, «/» separators inherit the nav colour) */
.muus-guide-page .muus-guide-crumbs {
	max-width: var(--mg-zone);
	margin-top: 0;
	margin-bottom: 26px;
	font-family: var(--mg-body);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mg-faint);
}
.muus-guide-page .muus-guide-crumbs a,
.muus-guide-page .muus-guide-crumbs a:visited {
	color: var(--mg-faint);
	text-decoration: none;
	transition: color .15s var(--mg-ease);
}
.muus-guide-page .muus-guide-crumbs a:hover {
	color: var(--mg-accent);
}
.muus-guide-page .muus-guide-crumbs span[aria-current] {
	color: var(--mg-muted);
}

/* eyebrow (injected by guide-longread.js as <p class="muus-guide-eyebrow">) */
.muus-guide-page .muus-guide-eyebrow {
	max-width: var(--mg-zone);
	margin-top: 0;
	margin-bottom: 14px;
	font-family: var(--mg-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mg-accent);
}

/* h1 — mockup hero title: left, big Jost 300, tight tracking, ~16ch wrap.
   font-size/weight use !important to beat the block's inline style attribute. */
.muus-guide-page .wp-block-post-title {
	max-width: 16ch;
	font-family: var(--mg-display);
	font-size: clamp(38px, 6vw, 76px) !important;
	font-weight: 300 !important;
	line-height: 1.06;
	letter-spacing: -.02em;
	text-align: left;
	color: var(--mg-fg);
}

/* ---- reading progress bar ---- */
.muus-guide-page .muus-guide-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--mg-accent);
	z-index: 300; /* above the sticky header (z-index:200) */
	transition: width .1s linear;
	pointer-events: none;
}

/* ---- 2-column layout (grid activated by JS adding .muus-guide-has-toc) ---- */
.muus-guide-page .wp-block-post-content.muus-guide-has-toc {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
/* WordPress' post-content layout applies `margin-left/right:auto !important` to
   direct children, which would centre (not left-align) the two grid cells; kill
   it. The article's own 68ch max-width (below) still wins by specificity over
   the layout rule's 800px cap. */
.muus-guide-page .muus-guide-has-toc > .muus-guide-toc,
.muus-guide-page .muus-guide-has-toc > .muus-guide-article {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- TOC rail ---- */
.muus-guide-page .muus-guide-toc {
	position: sticky;
	top: var(--mg-offset);
}
.muus-guide-page .muus-guide-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	margin: 0 0 16px;
	background: none;
	border: 0;
	cursor: default;
	color: var(--mg-faint);
	font-family: var(--mg-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: left;
}
.muus-guide-page .muus-guide-toc__chevron {
	display: none;
}
.muus-guide-page .muus-guide-toc__list {
	list-style: none;
	counter-reset: mgtoc;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.muus-guide-page .muus-guide-toc__list li {
	margin: 0;
}
.muus-guide-page .muus-guide-toc__list a {
	display: block;
	counter-increment: mgtoc;
	padding: 8px 12px;
	border-left: 1px solid var(--mg-border);
	font-family: var(--mg-body);
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--mg-muted);
	text-decoration: none;
	transition: color .2s, border-color .2s, background .2s;
}
.muus-guide-page .muus-guide-toc__list a::before {
	content: counter(mgtoc, decimal-leading-zero);
	margin-right: 10px;
	color: var(--mg-faint);
	font-variant-numeric: tabular-nums;
}
.muus-guide-page .muus-guide-toc__list a:hover {
	color: var(--mg-fg);
	border-left-color: var(--mg-faint);
}
.muus-guide-page .muus-guide-toc__list a.active {
	color: var(--mg-accent);
	border-left-color: var(--mg-accent);
	background: linear-gradient(90deg, rgba(200, 169, 126, .06), transparent);
}

/* ---- article typography ---- */
.muus-guide-page .muus-guide-article {
	counter-reset: mgsec;
	max-width: var(--mg-measure);
	font-family: var(--mg-body);
	font-size: 17.5px;
	line-height: 1.72;
	color: #d3cfc9;
	overflow-wrap: break-word;
}
.muus-guide-page .muus-guide-article > h2 {
	margin: clamp(44px, 5vw, 68px) 0 18px;
	font-family: var(--mg-display);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--mg-fg);
	scroll-margin-top: var(--mg-offset);
}
.muus-guide-page .muus-guide-article > h2:first-child {
	margin-top: 0;
}
.muus-guide-page .muus-guide-article > h2::before {
	counter-increment: mgsec;
	content: counter(mgsec, decimal-leading-zero);
	margin-right: 10px;
	color: var(--mg-accent);
	font-size: .6em;
	vertical-align: super;
	font-variant-numeric: tabular-nums;
}
.muus-guide-page .muus-guide-article p {
	margin: 0 0 20px;
	text-wrap: pretty;
}
.muus-guide-page .muus-guide-article strong {
	color: var(--mg-fg);
	font-weight: 600;
}
/* in-text links only — the rail cards and CTA button carry their own colours
   (this rule outranks theirs on specificity, hence the :not() exclusions) */
.muus-guide-page .muus-guide-article a:not(.muus-guide-cta__btn):not(.muus-guide-rail__card) {
	color: var(--mg-accent);
	text-decoration: none;
}
.muus-guide-page .muus-guide-article a:hover:not(.muus-guide-cta__btn):not(.muus-guide-rail__card) {
	text-decoration: underline;
}
.muus-guide-page .muus-guide-byline {
	font-size: 13px;
	font-style: normal;
	color: var(--mg-muted);
	letter-spacing: .02em;
}
/* …relocated into the hero under the H1 by guide-longread.js and rebuilt as
   mockup .byline: flex segments with 3px dot separators. The !important margins
   beat WP's doubled-class layout-gap rules (same cascade position, later). */
.muus-guide-page .muus-guide-byline--hero {
	max-width: var(--mg-zone);
	margin-top: 26px !important;
	margin-bottom: 28px !important; /* breathing room before the hero separator line */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}
.muus-guide-page .muus-guide-byline__dot {
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--mg-faint);
}
.muus-guide-page .muus-guide-byline em {
	font-style: normal; /* source wraps the byline in <em>; mockup byline is upright */
}
.muus-guide-page .muus-guide-lead {
	max-width: 60ch;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.55;
	color: #d8d4ce;
}
/* keep wide blocks (the section-6 comparison table) inside the grid cell */
.muus-guide-page .muus-guide-article .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/* ---- pull-quote ---- */
.muus-guide-page .pullquote {
	margin: clamp(40px, 5vw, 60px) 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--mg-accent);
	font-family: var(--mg-display);
	font-weight: 300;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--mg-fg);
}
.muus-guide-page .pullquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--mg-body);
	font-style: normal;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

/* ---- materials list ---- */
.muus-guide-page .materials {
	display: grid;
	gap: 1px;
	margin: 28px 0;
	background: var(--mg-border);
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
	overflow: hidden;
}
.muus-guide-page .materials > div {
	background: var(--mg-surface);
	padding: 18px 22px;
}
.muus-guide-page .materials dt {
	margin-bottom: 6px;
	font-family: var(--mg-display);
	font-size: 18px;
	color: var(--mg-accent);
}
.muus-guide-page .materials dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--mg-muted);
}

/* ---- cross-section diagram (colours via classes → currentColor/tokens) ---- */
.muus-guide-page .diagram {
	margin: clamp(30px, 4vw, 46px) 0;
	padding: clamp(18px, 3vw, 30px);
	background: linear-gradient(180deg, #161616, #0f0f0f);
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
}
.muus-guide-page .diagram svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 520px;
	margin: 0 auto;
	color: var(--mg-fg); /* drives currentColor on the blade outline */
}
.muus-guide-page .diagram .mg-blade {
	fill: #1c1c1c;
	stroke: currentColor;
}
.muus-guide-page .diagram .mg-dol {
	fill: none;
	stroke: var(--mg-accent);
}
.muus-guide-page .diagram .mg-leaders {
	stroke: var(--mg-faint);
	fill: var(--mg-faint);
}
.muus-guide-page .diagram .dlabel {
	font-family: var(--mg-body);
	font-size: 13px;
	letter-spacing: .01em;
	fill: var(--mg-muted);
}
.muus-guide-page .diagram .dlabel.hi {
	fill: var(--mg-accent);
	font-weight: 500;
}
.muus-guide-page .diagram figcaption {
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: var(--mg-faint);
}
.muus-guide-page .diagram figcaption a {
	color: var(--mg-accent);
}
.muus-guide-page .diagram figcaption a:hover {
	text-decoration: underline;
}

/* ---- embedded video (YouTube forge film; lazy iframe, fixed 16/9 → no CLS) ---- */
.muus-guide-page .muus-guide-video {
	margin: clamp(32px, 4vw, 48px) 0;
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
	overflow: hidden;
	background: #000;
}
.muus-guide-page .muus-guide-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* reserves height before the iframe loads → zero shift */
}
.muus-guide-page .muus-guide-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.muus-guide-page .muus-guide-video figcaption {
	padding: 12px 16px;
	background: var(--mg-surface);
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--mg-faint);
}

/* ---- photo figure (mockup .figure — bordered 16/10 crop + caption strip) ---- */
.muus-guide-page .muus-guide-article .figure {
	margin: clamp(32px, 4vw, 48px) 0;
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
	overflow: hidden;
}
.muus-guide-page .muus-guide-article .figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.muus-guide-page .muus-guide-article .figure figcaption {
	padding: 12px 16px;
	background: var(--mg-surface);
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--mg-faint);
}

/* ---- FAQ accordion (h3 + p enhanced by guide-longread.js) ---- */
.muus-guide-page .muus-guide-faq {
	margin-top: 12px;
	border-top: 1px solid var(--mg-border);
}
.muus-guide-page .muus-guide-faq__item {
	border-bottom: 1px solid var(--mg-border);
}
.muus-guide-page .muus-guide-faq__q {
	position: relative;
	margin: 0;
	padding: 20px 40px 20px 0;
	font-family: var(--mg-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--mg-fg);
	cursor: pointer;
	transition: color .2s;
}
.muus-guide-page .muus-guide-faq__q:hover {
	color: var(--mg-accent);
}
.muus-guide-page .muus-guide-faq__q::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 18px;
	font-size: 24px;
	line-height: 1;
	color: var(--mg-accent);
	transition: transform .3s var(--mg-ease);
}
.muus-guide-page .muus-guide-faq__q[aria-expanded="true"]::after {
	transform: rotate(45deg);
}
.muus-guide-page .muus-guide-faq__q:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 3px;
}
.muus-guide-page .muus-guide-faq__a {
	margin: 0;
	padding: 0 0 22px;
	max-width: var(--mg-measure);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mg-muted);
}

/* ---- mobile: TOC becomes a collapsible card, single column ---- */
@media (max-width: 900px) {
	.muus-guide-page .wp-block-post-content.muus-guide-has-toc {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.muus-guide-page .muus-guide-article {
		max-width: none;
	}
	.muus-guide-page .muus-guide-toc {
		position: static;
		margin-bottom: 36px;
		padding: 20px;
		background: var(--mg-surface);
		border: 1px solid var(--mg-border);
		border-radius: var(--mg-r-lg);
	}
	.muus-guide-page .muus-guide-toc__toggle {
		margin-bottom: 0;
		cursor: pointer;
	}
	.muus-guide-page .muus-guide-toc__chevron {
		display: block;
		width: 9px;
		height: 9px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform .25s var(--mg-ease);
	}
	.muus-guide-page .muus-guide-toc__toggle[aria-expanded="false"] .muus-guide-toc__chevron {
		transform: rotate(-45deg);
	}
	.muus-guide-page .muus-guide-toc__toggle[aria-expanded="false"] + .muus-guide-toc__list {
		display: none;
	}
	.muus-guide-page .muus-guide-toc__list {
		gap: 0;
		margin-top: 16px;
	}
	.muus-guide-page .muus-guide-toc__list a {
		padding: 12px 4px;
		border-left: 0;
		border-bottom: 1px solid var(--mg-border);
	}
	.muus-guide-page .muus-guide-toc__list li:last-child a {
		border-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.muus-guide-page .muus-guide-progress,
	.muus-guide-page .muus-guide-toc__list a,
	.muus-guide-page .muus-guide-toc__chevron,
	.muus-guide-page .muus-guide-faq__q,
	.muus-guide-page .muus-guide-faq__q::after {
		transition: none;
	}
}

/* ---- hero glow (mockup .hero-glow): decorative radial gradient top-right,
   behind the hero zone. Attached as a ::before on page.html's alignfull
   background group (which wraps the H1 group + post-content). `isolation:isolate`
   gives that group its own stacking context so the z-index:-1 glow paints above
   the group's #111 background but behind the title/eyebrow — no child z-index
   needed. No wrapper `overflow` is set (which would break the sticky TOC below);
   the negative offsets can't add a scrollbar because html/body already carry
   `overflow-x: clip` globally. `:not(.muus-header)` — the sticky site header is
   the one other group with this background class; without it the glow would ride
   the header over the article. ---- */
.muus-guide-page .wp-block-group.has-background-background-color:not(.muus-header) {
	position: relative;
	isolation: isolate;
}
.muus-guide-page .wp-block-group.has-background-background-color:not(.muus-header)::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -110px;
	right: -6%;
	width: min(58%, 720px);
	height: 520px;
	background: radial-gradient(ellipse at center, rgba(200, 169, 126, .10), transparent 62%);
	pointer-events: none;
}

/* ---- product rail (mockup .rail/.rcard): 3 in-stock Yakut knives, rendered by
   muus/guide-rail and placed inside .muus-guide-article (68ch column). ---- */
.muus-guide-page .muus-guide-rail {
	display: block;
	margin-top: clamp(44px, 6vw, 66px);
}
.muus-guide-page .muus-guide-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.muus-guide-page .muus-guide-rail__heading {
	margin: 0;
	font-family: var(--mg-display);
	font-weight: 300;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--mg-fg);
}
/* this <h2> lives inside the rail, not as a direct .muus-guide-article child, so
   the section-number ::before never applies — belt-and-braces reset anyway. */
.muus-guide-page .muus-guide-rail__heading::before {
	content: none;
}
.muus-guide-page .muus-guide-rail__all {
	font-family: var(--mg-body);
	font-size: 13px;
	letter-spacing: .06em;
	white-space: nowrap;
	color: var(--mg-accent);
	text-decoration: none;
}
.muus-guide-page .muus-guide-rail__all:hover {
	text-decoration: underline;
}
.muus-guide-page .muus-guide-rail__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.5vw, 20px);
}
.muus-guide-page .muus-guide-rail__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mg-surface);
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
	text-decoration: none;
	transition: border-color .3s, transform .3s var(--mg-ease);
}
.muus-guide-page .muus-guide-rail__card:hover {
	border-color: #4a4a48;
	transform: translateY(-4px);
}
.muus-guide-page .muus-guide-rail__thumb {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0d0d0d;
}
.muus-guide-page .muus-guide-rail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--mg-ease);
}
.muus-guide-page .muus-guide-rail__card:hover .muus-guide-rail__thumb img {
	transform: scale(1.06);
}
.muus-guide-page .muus-guide-rail__body {
	display: block;
	padding: 13px 15px 17px;
}
.muus-guide-page .muus-guide-rail__name {
	display: block;
	margin-bottom: 4px;
	font-family: var(--mg-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: var(--mg-fg);
}
.muus-guide-page .muus-guide-rail__price {
	display: block;
	font-family: var(--mg-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--mg-accent);
	font-variant-numeric: tabular-nums;
}
.muus-guide-page .muus-guide-rail__price del {
	color: var(--mg-muted);
	font-weight: 400;
	margin-right: 6px;
}
.muus-guide-page .muus-guide-rail__price ins {
	text-decoration: none;
}

/* ---- closing CTA (mockup .art-cta): gradient surface, centered ---- */
.muus-guide-page .muus-guide-cta {
	margin-top: clamp(48px, 6vw, 72px);
	padding: clamp(32px, 4vw, 52px);
	text-align: center;
	background: linear-gradient(180deg, var(--mg-surface), #0e0e0e);
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-r-lg);
}
.muus-guide-page .muus-guide-cta__title {
	max-width: 22ch;
	margin: 0 auto 14px;
	font-family: var(--mg-display);
	font-weight: 300;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--mg-fg);
}
.muus-guide-page .muus-guide-cta__text {
	max-width: 52ch;
	margin: 0 auto 28px;
	font-family: var(--mg-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-muted);
}
.muus-guide-page .muus-guide-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	font-family: var(--mg-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #141210;
	background: var(--mg-accent);
	border-radius: 4px;
	text-decoration: none;
	transition: background .25s var(--mg-ease), transform .25s var(--mg-ease);
}
.muus-guide-page .muus-guide-cta__btn:hover {
	background: #d8bd92; /* mockup --accent-strong; no theme token for it */
	transform: translateY(-2px);
}

/* ---- rail: 2 columns on small screens (mockup breakpoint) ---- */
@media (max-width: 560px) {
	.muus-guide-page .muus-guide-rail__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.muus-guide-page .muus-guide-rail__name {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.muus-guide-page .muus-guide-rail__card,
	.muus-guide-page .muus-guide-rail__thumb img,
	.muus-guide-page .muus-guide-cta__btn {
		transition: none;
	}
	.muus-guide-page .muus-guide-rail__card:hover {
		transform: none;
	}
	.muus-guide-page .muus-guide-rail__card:hover .muus-guide-rail__thumb img {
		transform: none;
	}
}

/* ==========================================================================
   Mega-menu (primary nav)
   Additive upgrade of the 3 flat nav links into disclosure triggers with a
   full-bleed dropdown panel (left link column + right image cards). The panel
   is anchored to .muus-header (position:absolute; left:0; right:0) so opening
   it never reflows the page (zero CLS). The legacy .muus-nav-list flat rules
   above still apply; selectors here carry enough specificity to win.
   All classes are prefixed .muus-mega-* / .muus-nav-* to avoid collisions.
   ========================================================================== */

/* Anchor the absolutely-positioned panel to the full-bleed header bar. */
.muus-header {
	position: relative;
}

/* li stays static so the panel resolves against .muus-header, not the li. */
.muus-primary-nav .muus-nav-item {
	position: static;
}

/* Trigger keeps the legacy .muus-nav-list a typography (Jost/uppercase/.85rem);
   we only add positioning, a comfortable hit area, and the underline hook.
   padding-block is kept modest so the header bar height does not grow (the
   220ms hover close-grace in mega-menu.js covers the small header-padding gap
   between trigger and panel). */
.muus-primary-nav .muus-nav-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 0.75rem;
	cursor: pointer;
	background: none;
	border: 0;
}

/* Animated gold underline (scaleX .35 -> 1) on the active trigger. */
.muus-primary-nav .muus-nav-trigger::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.35rem;
	height: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0;
	transform: scaleX(0.35);
	transform-origin: center;
	transition: opacity 160ms ease, transform 160ms ease;
}

.muus-primary-nav .muus-nav-item.is-open .muus-nav-trigger,
.muus-primary-nav .muus-nav-trigger[aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

.muus-primary-nav .muus-nav-item.is-open .muus-nav-trigger::after,
.muus-primary-nav .muus-nav-trigger[aria-current="page"]::after {
	opacity: 1;
	transform: scaleX(1);
}