/**
 * Yala page template — paper left, white stage right.
 *
 * LOCKED RULES:
 *   - Left column  = paper / page background (no white panel)
 *   - Right column = white stage panel (ALWAYS)
 *   - Desktop default = 50/50; section ratios via data-yala-ratio
 *   - Stage starts BELOW the header (no overlap fighting the menu).
 */

/* ── Layout grid ─────────────────────────────────────────── */

.yala-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	align-items: stretch;
	box-sizing: border-box;
	background: transparent;
	--yala-stage-gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 960px) {
	.yala-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--yala-stage-gap);
		transition: grid-template-columns 0.45s cubic-bezier(0.33, 0, 0.2, 1);
	}

	.yala-layout[data-yala-ratio="50-50"] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.yala-layout[data-yala-ratio="40-60"] {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.yala-layout[data-yala-ratio="35-65"] {
		grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
	}

	.yala-layout[data-yala-ratio="30-70"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
	}

	.yala-layout[data-yala-ratio="60-40"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.yala-layout[data-yala-ratio="70-30"] {
		grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	}

	/* MPB carta: stage is narrow — keep padding tight so the landscape card can breathe. */
	.yala-layout[data-yala-ratio="70-30"] .yala-layout__stage-body {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}

	.yala-layout[data-yala-ratio="60-40"] .yala-layout__stage-body {
		padding-left: clamp(0.85rem, 2vw, 1.25rem);
		padding-right: clamp(0.85rem, 2vw, 1.25rem);
	}
}

@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
	.yala-layout {
		transition: none;
	}
}

.yala-layout__editorial {
	min-width: 0;
	box-sizing: border-box;
	padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2rem) 0;
	background: transparent;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: stretch;
}

/* Editorial title = home brand title (canonical template) */
.yala-editorial-brand {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	gap: 0;
	width: 100%;
}

/* Soft-nav: collapsed on carta pages; JS fades opacity before/after this class. */
.yala-layout__editorial .yala-editorial-brand.is-soft-hidden {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.yala-editorial-title,
main .yala-editorial-title,
.yala-home-toy__title,
main .yala-home-toy__title,
.yala-layout__editorial .yala-editorial-title {
	margin: 0;
	align-self: flex-start;
	font-family: var(--yala-font-display, "Fraunces", Georgia, "Times New Roman", serif);
	font-size: clamp(2.65rem, 2rem + 2.4vw, 3.75rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--yala-text, #2a1b1a);
}

/* Parent-section link on subpages — identical to plain title (no hover chrome). */
.yala-editorial-title__link,
.yala-editorial-title__link:visited {
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.yala-editorial-title__link:focus,
.yala-editorial-title__link:focus-visible,
.yala-editorial-title__link:active{
	color: inherit;
	text-decoration: none;
	outline: none;
	filter: none;
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.yala-editorial-title__link:hover {
		color: inherit;
		text-decoration: none;
		outline: none;
		filter: none;
		opacity: 1;
}
}

/* Copy under the brand block — same voice metrics as home lead */
.yala-layout__editorial .yala-shell__lead {
	margin: 0 0 0.95rem;
}

.yala-layout__editorial .yala-editorial-brand + .yala-shell__lead,
.yala-layout__editorial .yala-editorial-brand + .yala-shell__prose {
	margin-top: 0;
}

.yala-editorial-rule,
.yala-home-toy__brand-rule {
	display: block;
	box-sizing: border-box;
	height: 0;
	margin: 0.85rem 0 0.75rem;
	/* From title’s left edge out to (and slightly under) the stage */
	width: calc(100% + var(--yala-stage-gap, 2.75rem) + 1rem);
	max-width: none;
	border: 0;
	border-top: 1px solid rgba(74, 20, 140, 0.45);
}

/* Sobre: tipographic page title is mobile-only (desktop keeps the stage ribbon H1). */
.yala-editorial-brand--mobile-page {
	display: none !important;
}

/* Gray paper chip — home deck blurb + stage breadcrumbs */
.yala-paper-chip,
.yala-home-toy__deck-blurb {
	--yala-blurb-tilt: -0.55deg;
	display: block;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.5rem 0.95rem;
	max-height: none;
	opacity: 1;
	overflow: hidden;
	white-space: normal;
	text-align: center;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.88rem;
	line-height: 1.4;
	color: rgba(42, 27, 26, 0.9);
	background: #e8e8e8;
	box-shadow: -1px 1px 0 rgba(120, 120, 120, 0.65);
	transform: rotate(var(--yala-blurb-tilt));
	transform-origin: center center;
}

.yala-home-toy__deck-blurb {
	margin: 0.85rem auto 0;
	transition: opacity 0.28s ease, transform 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}

.yala-layout__stage {
	position: relative;
	z-index: 3;
	min-width: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fffef9;
	/* Stronger wash → nearly white, paper reads as a light grain only */
	background-image:
		linear-gradient(
			rgba(255, 254, 249, 0.92),
			rgba(255, 254, 249, 0.92)
		),
		var(--yala-stage-paper, none);
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	color: var(--yala-text, #2a1b1a);
	overflow: visible;
}

.yala-layout__stage-body {
	--yala-stage-title-inset: 1.15rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	min-height: 0;
	padding:
		clamp(1.75rem, 3vw, 2.35rem)
		clamp(1.5rem, 4vw, 2.5rem)
		1.5rem
		clamp(1.75rem, 4.5vw, 2.75rem);
	box-sizing: border-box;
}

/* Prose / lead align with the ribbon title text (not the ribbon edge) */
.yala-layout__stage-body > .yala-shell__prose,
.yala-layout__stage-body > .yala-shell__lead,
.yala-layout__stage-body > .yala-deck-ficha,
.yala-layout__stage-body .yala-carta-stage__prose,
.yala-layout__stage-body .yala-shell__prose--baralhos {
	padding-left: var(--yala-stage-title-inset, 1.15rem);
	box-sizing: border-box;
}

/*
 * Desktop: stage stays BELOW the header (top breathing gap) and dives
 * OVER the footer. Volume shadow on BOTH sides of the stage.
 */
@media (min-width: 960px) {
	body.yala-has-stage main.yala-page-main,
	body.yala-has-stage main.wp-block-group {
		overflow: visible;
	}

	body.yala-has-stage main.yala-page-main,
	body.yala-has-stage main.wp-block-group {
		padding-bottom: 0 !important;
	}

	body.yala-has-stage .yala-layout {
		--yala-stage-top-gap: clamp(1.1rem, 2vw, 1.75rem);
		min-height: calc(
			var(--yala-viewport-height, 100vh) - var(--yala-header-strip-height, 5.125rem) - var(--yala-footer-height, 5.125rem) - var(--yala-admin-bar-offset, 0px)
		);
		height: auto;
		margin-top: 0;
		align-items: stretch;
	}

	body.yala-has-stage .yala-layout__editorial {
		padding-top: clamp(1.25rem, 3vw, 2rem);
	}

	body.yala-has-stage .yala-layout__stage-body {
		padding-top: clamp(1.75rem, 3vw, 2.35rem);
	}

	/*
	 * Stage dive: viewport floor (not % of parent min-height). With border-box,
	 * padding-bottom IS the footer band — do not also add footer into min-height.
	 * Breadcrumbs sit absolutely at bottom:0 inside that band.
	 */
	body.yala-has-stage .yala-layout__stage {
		z-index: 5;
		margin-top: var(--yala-stage-top-gap);
		margin-bottom: calc(-1 * var(--yala-footer-height, 5.125rem));
		min-height: calc(
			var(--yala-viewport-height, 100vh)
			- var(--yala-header-strip-height, 5.125rem)
			- var(--yala-stage-top-gap)
			- var(--yala-admin-bar-offset, 0px)
		);
		height: auto;
		padding-bottom: calc(var(--yala-footer-height, 5.125rem) + 0.75rem);
		box-shadow:
			-1px 0 0 rgba(42, 27, 26, 0.16),
			-5px 0 8px -5px rgba(42, 27, 26, 0.28),
			1px 0 0 rgba(42, 27, 26, 0.16),
			5px 0 8px -5px rgba(42, 27, 26, 0.28);
	}

	/* Breadcrumbs: absolute in the stage×footer overlap band (flush to page bottom).
	 * This purple paper strip is the site footer pattern under the stage — always
	 * paint it, even when there is no trail (home). Only the chip is optional. */
	body.yala-has-stage .yala-stage-breadcrumbs {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--yala-footer-height, 5.125rem);
		padding: 0.55rem clamp(1rem, 3vw, 1.75rem);
		box-sizing: border-box;
		margin-top: 0;
		background-color: var(--yala-primary, #4a148c);
		background-image: var(--yala-footer-paper, var(--yala-header-paper, none));
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-paper-chip,
	body.yala-has-stage .yala-stage-breadcrumbs a,
	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs {
		pointer-events: auto;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-paper-chip {
		margin: 0;
		padding: 0.45rem 0.95rem;
		max-width: 100%;
		/* Dark paper ribbon — only behind the breadcrumb text */
		background-color: #1a0a2e;
		background-image:
			linear-gradient(
				rgba(26, 10, 46, 0.72),
				rgba(26, 10, 46, 0.72)
			),
			var(--yala-footer-paper, none);
		background-size: auto, cover;
		background-position: center, center;
		background-repeat: no-repeat, no-repeat;
		box-shadow:
			-1px 1px 0 rgba(10, 4, 20, 0.55),
			0 2px 6px -2px rgba(10, 4, 20, 0.45);
		transform: rotate(-0.4deg);
		transform-origin: center center;
		color: rgba(255, 255, 255, 0.94);
		font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: 1.35;
		text-align: center;
		white-space: normal;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs {
		margin: 0;
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		line-height: inherit;
		color: inherit;
		opacity: 1;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs p {
		margin: 0;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs a {
		color: rgba(255, 255, 255, 0.92);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: rgba(255, 255, 255, 0.4);
		opacity: 1;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs a:focus-visible{
		color: #fff;
		text-decoration-color: currentColor;
	}

@media (hover: hover) and (pointer: fine) {
	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs a:hover {
			color: #fff;
			text-decoration-color: currentColor;
	}
}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs .last {
		color: var(--yala-secondary-bright, #fbc02d);
		opacity: 1;
		font-weight: 600;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs .separator {
		opacity: 0.55;
		padding: 0 0.15em;
		color: rgba(255, 255, 255, 0.75);
	}
}

/* Stage pages: let content grow; page scrolls. Do NOT lock height:100%. */
body.yala-has-stage main.yala-page-main,
body.yala-has-stage main.wp-block-group {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
	overflow: visible;
}

body.yala-has-stage main.yala-page-main > .wp-block-post-content,
body.yala-has-stage main.wp-block-group > .wp-block-post-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
	width: 100%;
	max-width: none;
}

/*
 * Shell replaces post-content with a bare .yala-layout as a direct main child.
 * Theme rule `main > :not(.alignfull)` would clamp it to --yala-content-max (960)
 * and crush the 50/50 grid into a narrow pillar — override that.
 */
body.yala-has-stage main > .yala-layout,
body.yala-has-stage main > [data-yala-shell-root],
body.yala-has-stage .wp-block-post-content > .yala-layout,
body.yala-has-stage .wp-block-post-content > [data-yala-shell-root] {
	max-width: none;
	width: 100%;
}

body.yala-has-stage .yala-home {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
	width: 100%;
}

body.yala-has-stage .yala-home > .yala-layout {
	flex: 1 1 auto;
	/* Keep the viewport floor from the desktop dive rule (do not collapse to content). */
	min-height: calc(
		var(--yala-viewport-height, 100vh) - var(--yala-header-strip-height, 5.125rem) - var(--yala-footer-height, 5.125rem) - var(--yala-admin-bar-offset, 0px)
	);
	height: auto;
}

/* Mobile: never clip the stage — page must scroll.
 * Default: stage before editorial (carta/deck/Sobre — H1 is the stage ribbon).
 * Hubs get .yala-layout--hub-title (H1 above stage via display:contents).
 * Home keeps editorial first. */
@media (max-width: 959px) {
	body.yala-has-stage main.yala-page-main,
	body.yala-has-stage main.wp-block-group,
	body.yala-has-stage .yala-home,
	body.yala-has-stage .yala-home > .yala-layout,
	body.yala-has-stage .yala-layout__stage {
		min-height: 0;
		height: auto;
		overflow: visible;
		max-height: none;
	}

	/* Stage full-bleed — ignore shell padding / max-width */
	body.yala-has-stage main.yala-page-main,
	body.yala-has-stage main.wp-block-group {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	body.yala-has-stage main.yala-page-main > .wp-block-post-content,
	body.yala-has-stage main.wp-block-group > .wp-block-post-content,
	body.yala-has-stage main.wp-block-group > :where(:not(.alignfull):not(.alignwide)) {
		max-width: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.yala-layout {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	body.yala-has-stage .yala-layout__stage {
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid rgba(42, 27, 26, 0.12);
		box-shadow: 0 1px 0 rgba(42, 27, 26, 0.08);
		order: -1;
		width: 100%;
		max-width: none;
	}

	.yala-layout__editorial {
		order: 0;
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
		box-sizing: border-box;
	}

	/*
	 * Hubs (Baralhos, Loja, Oráculo…): unwrap the paper column so the H1
	 * sits above the stage, with menu/lead below. Desktop unchanged.
	 */
	body.yala-has-stage .yala-layout--hub-title {
		display: flex !important;
		flex-direction: column !important;
	}

	body.yala-has-stage .yala-layout--hub-title > .yala-layout__editorial {
		display: contents;
	}

	body.yala-has-stage .yala-layout--hub-title > .yala-layout__stage {
		order: 2 !important;
	}

	body.yala-has-stage .yala-layout--hub-title .yala-editorial-brand {
		order: 1;
		width: 100%;
		box-sizing: border-box;
		padding-top: clamp(1.25rem, 3vw, 2rem);
		/* Same horizontal track as stage content (shell pad only). */
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
		margin-bottom: 0.35rem;
	}

	/* Desktop rule bleeds into the stage gap; on mobile keep it inside the text column. */
	body.yala-has-stage .yala-layout--hub-title .yala-editorial-rule {
		width: 100%;
		max-width: 100%;
	}

	/*
	 * Mobile: drop desktop ribbon-align inset on stage prose so Baralhos
	 * (and other hubs) share the same horizontal pad as Loja / Aprenda.
	 */
	.yala-layout__stage-body > .yala-shell__prose,
	.yala-layout__stage-body > .yala-shell__lead,
	.yala-layout__stage-body > .yala-deck-ficha,
	.yala-layout__stage-body .yala-carta-stage__prose,
	.yala-layout__stage-body .yala-shell__prose--baralhos {
		padding-left: 0;
	}

	/*
	 * Trailing paper content (lead, menu, waitlist) sits under the stage.
	 * Give it air above (after stage edge) and below (before footer).
	 */
	body.yala-has-stage .yala-layout--hub-title > .yala-layout__editorial > *:not(.yala-editorial-brand) {
		order: 3;
		width: 100%;
		box-sizing: border-box;
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
		padding-top: clamp(1.75rem, 5vw, 2.5rem);
		padding-bottom: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	body.yala-has-stage .yala-layout--hub-title > .yala-layout__editorial > *:not(.yala-editorial-brand) + *:not(.yala-editorial-brand) {
		padding-top: clamp(1rem, 3vw, 1.35rem);
	}

	body.yala-has-stage .yala-layout--hub-title > .yala-layout__editorial > *:not(.yala-editorial-brand):last-child {
		padding-bottom: clamp(2rem, 6vw, 2.75rem);
	}

	/*
	 * Sobre: page title tipográfico no topo; “Sobre” (h2) + menu abaixo do stage.
	 * Contato shares section “sobre” but has no --mobile-page brand — leave it alone.
	 */
	body.yala-has-stage .yala-layout:has(.yala-editorial-brand--mobile-page) .yala-editorial-brand--mobile-page {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
	}

	/* Section “Sobre” brand anchors the menu under the stage (was hidden; menu felt loose). */
	body.yala-has-stage .yala-layout:has(.yala-editorial-brand--mobile-page) > .yala-layout__editorial > .yala-editorial-brand:not(.yala-editorial-brand--mobile-page) {
		order: 3;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		box-sizing: border-box;
		padding-top: clamp(1.75rem, 5vw, 2.5rem);
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
		padding-bottom: 0;
		margin: 0;
	}

	body.yala-has-stage .yala-layout:has(.yala-editorial-brand--mobile-page) > .yala-layout__editorial > .yala-ed-menu {
		padding-top: 0.55rem;
	}

	body.yala-has-stage .yala-layout .yala-sobre-stage-title {
		display: none !important;
	}

	/* Contato: lead repeats the body; hide the orphan under the stage. */
	body.yala-has-stage .yala-layout[data-yala-page="contato"] .yala-shell__lead {
		display: none !important;
	}

	/* Home: editorial first; no stage edge */
	body.yala-section-home.yala-has-stage .yala-layout__stage,
	body[data-yala-section="home"].yala-has-stage .yala-layout__stage {
		order: 0;
		border-bottom: none;
		box-shadow: none;
	}

	/* Contato uses hub-title like Loja (editorial H1 + lead below stage). */

	/* Home: drop the closing editorial paragraph on small screens */
	body.yala-section-home .yala-home-toy__copy .yala-home-toy__voice:last-child,
	body[data-yala-section="home"] .yala-home-toy__copy .yala-home-toy__voice:last-child {
		display: none;
	}

	.yala-layout__stage-body {
		padding-top: clamp(1.5rem, 4vw, 2rem);
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
	}


	/* Breadcrumb chip: equal padding; kill content-chrome margin that inflates height */
	body.yala-has-stage .yala-stage-breadcrumbs .yala-paper-chip {
		padding: 0.95rem;
	}

	body.yala-has-stage .yala-stage-breadcrumbs .yala-breadcrumbs {
		margin: 0;
	}

	/* Mobile: breadcrumbs live in the purple site footer, not the stage */
	body.yala-has-stage .yala-stage-breadcrumbs {
		display: none !important;
	}

	/* No soft-nav choreography on phones */
	.yala-layout,
	.yala-layout__editorial,
	.yala-layout__stage-body,
	.yala-home-toy__deck-blurb,
	.yala-layout__stage-body .yala-stage-title {
		transition: none !important;
		animation: none !important;
	}
}

/* Mobile: keep shell horizontal padding (match stage); only reset vertical rhythm */
@media (max-width: 959px) {
	.yala-layout__editorial {
		padding-top: clamp(1.25rem, 3vw, 2rem);
		padding-bottom: clamp(1.25rem, 3vw, 2rem);
		padding-left: var(--yala-shell-padding, 1rem);
		padding-right: var(--yala-shell-padding, 1rem);
	}
}

/* ── Header stage nav (chips live in purple strip) ───────── */

.yala-stage-nav {
	width: 100%;
}

.yala-stage-nav__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.28rem;
}

.yala-stage-nav__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.22rem 0.5rem;
	border: 0;
	border-radius: 0;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.88;
	transition: opacity 0.18s ease;
}

.yala-stage-nav__chip:focus-visible{
	opacity: 1;
	text-decoration: none;
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.yala-stage-nav__chip:hover {
		opacity: 1;
		text-decoration: none;
		color: #fff;
}
}

.yala-stage-nav__chip.is-current {
	opacity: 1;
	outline: 1px solid rgba(42, 27, 26, 0.4);
	outline-offset: 1px;
}

.yala-stage-nav__chip--sobre {
	background: var(--yala-section-sobre-color, #006064);
}

.yala-stage-nav__chip--baralhos,
.yala-stage-nav__chip--oraculo {
	background: var(--yala-section-baralhos-color, #4a148c);
}

.yala-stage-nav__chip--livros {
	background: var(--yala-section-livros-color, #e53935);
}

.yala-stage-nav__chip--loja {
	background: var(--yala-section-loja-color, #fbc02d);
	color: var(--yala-text, #2a1b1a);
}

.yala-stage-nav__chip--loja:focus-visible{
	color: var(--yala-text, #2a1b1a);
}

@media (hover: hover) and (pointer: fine) {
	.yala-stage-nav__chip--loja:hover {
		color: var(--yala-text, #2a1b1a);
}
}

.yala-stage-nav__chip--aprenda {
	background: var(--yala-section-aprenda-color, #38096b);
}

/* ── Lang switcher ───────────────────────────────────────── */

.yala-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.yala-lang-switcher__item {
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
}

.yala-lang-switcher__item.is-current {
	opacity: 1;
}

.yala-lang-switcher__item:focus-visible{
	opacity: 1;
	text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
	.yala-lang-switcher__item:hover {
		opacity: 1;
		text-decoration: underline;
}
}

.yala-lang-switcher__sep {
	opacity: 0.35;
	user-select: none;
}

.yala-lang-switcher--stage {
	color: var(--yala-text, #2a1b1a);
}

.yala-lang-switcher--footer {
	color: #fff;
}

/* ── Fallback header nav (non-stage pages) ───────────────── */

.yala-fallback-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem 0.65rem;
}

.yala-fallback-nav__link {
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--yala-primary, #4a148c);
}

.yala-fallback-nav__link:focus-visible{
	color: var(--yala-primary-dark, #38096b);
	text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
	.yala-fallback-nav__link:hover {
		color: var(--yala-primary-dark, #38096b);
		text-decoration: underline;
}
}

.yala-fallback-nav__link.is-current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.yala-fallback-nav__link--sobre {
	color: var(--yala-section-sobre-color, #006064);
}

.yala-fallback-nav__link--baralhos {
	color: var(--yala-section-baralhos-color, #4a148c);
}

.yala-fallback-nav__link--livros {
	color: var(--yala-section-livros-color, #e53935);
}

.yala-fallback-nav__link--loja {
	color: var(--yala-secondary, #9a7700);
}

.yala-fallback-nav__link--aprenda {
	color: var(--yala-section-aprenda-color, #38096b);
}

/* —— Yellow ribbon (stage titles) — shared with home CTA look —— */
.yala-ribbon {
	--yala-ribbon-base: var(--yala-secondary-bright, #fbc02d);
	--yala-ribbon-ink: #3a1a12;
	--yala-ribbon-paper-opacity: 0.3;
	--yala-ribbon-fold: 10px;
	--yala-ribbon-shadow: -1px 2px 2px rgba(30, 18, 16, 0.55);
	background-color: var(--yala-ribbon-base);
	background-image:
		linear-gradient(
			rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity))),
			rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity)))
		),
		var(--yala-ribbon-paper, none);
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	color: var(--yala-ribbon-ink);
}

.yala-ribbon .yala-letterpress {
	color: var(--yala-ribbon-ink, #3a1a12);
	text-shadow:
		0 0 2px rgba(58, 26, 18, 0.28),
		0 1px 0 rgba(255, 214, 90, 0.75),
		1px 1px 1px rgba(230, 170, 40, 0.55),
		0 -1px 1px rgba(90, 40, 10, 0.4);
}

/* Stage titles bleed to the right edge + fold tip */
.yala-layout__stage-body .yala-stage-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	box-sizing: border-box;
	width: calc(100% + clamp(1.5rem, 4vw, 2.5rem) + var(--yala-ribbon-fold));
	max-width: none;
	margin: 0 calc(-1 * (clamp(1.5rem, 4vw, 2.5rem) + var(--yala-ribbon-fold))) 0.85rem 0;
	padding: 0.75rem calc(1.35rem + var(--yala-ribbon-fold)) 0.75rem 1.15rem;
	border: 0;
	border-radius: 0;
	font-family: var(--yala-font-display, "Fraunces", Georgia, serif);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	text-align: left;
	color: var(--yala-ribbon-ink, #3a1a12);
	box-shadow: var(--yala-ribbon-shadow);
	z-index: 2;
	transform-origin: right center;
	transition: filter 0.15s ease, transform 0.22s cubic-bezier(0.33, 0, 0.2, 1);
}

.yala-layout__stage-body .yala-stage-title.is-ribbon-enter {
	transform: scaleX(0);
	animation: yala-ribbon-unfurl 0.28s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes yala-ribbon-unfurl {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.yala-layout__stage-body .yala-stage-title.is-ribbon-enter {
		animation: none;
		transform: none;
	}
}

.yala-layout__stage-body .yala-stage-title::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: var(--yala-ribbon-fold) var(--yala-ribbon-fold) 0 0;
	border-color: #8a6a00 transparent transparent transparent;
	pointer-events: none;
}

a.yala-stage-title:focus-visible,
.yala-stage-title:has(.yala-stage-title__link):focus-within{
	filter: brightness(1.04);
	color: var(--yala-ribbon-ink, #3a1a12);
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	a.yala-stage-title:hover,
	.yala-stage-title:has(.yala-stage-title__link):hover {
		filter: brightness(1.04);
		color: var(--yala-ribbon-ink, #3a1a12);
		outline: none;
}
}

.yala-stage-title__link {
	color: inherit;
	text-decoration: none;
}

.yala-stage-title__link:focus-visible{
	color: inherit;
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.yala-stage-title__link:hover {
		color: inherit;
		outline: none;
}
}

/* Mobile: stage titles match Tarô suit-ribbon look (full bar + hard shadow), centered; margins unchanged */
@media (max-width: 959px) {
	.yala-layout__stage-body .yala-stage-title {
		display: flex !important;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 100% !important;
		max-width: 100%;
		margin: 0 0 0.85rem !important;
		padding: 0.75rem 1.15rem !important;
		box-sizing: border-box;
		text-align: center;
		box-shadow: -1px 1px 0 #9e9e9e !important;
		transform: none !important;
	}

	.yala-layout__stage-body .yala-stage-title .yala-letterpress,
	.yala-layout__stage-body .yala-stage-title .yala-stage-title__link {
		text-align: center;
	}

	.yala-layout__stage-body .yala-stage-title::after {
		display: none !important;
		content: none !important;
	}

	.yala-layout__stage-body .yala-stage-title.is-ribbon-enter {
		animation: none !important;
		transform: none !important;
	}

	/*
	 * Page H1 ribbons stay visible in the body on mobile (header only
	 * carries the site name now). Previously hidden when the header was H1.
	 */

	/*
	 * Tarô de Yala card-index suit ribbons: same hard shadow + centered label;
	 * keep their own vertical breathing room (do not inherit stage-title margins).
	 */
	.yala-layout__stage-body .yala-baralho-index__suit-ribbon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 100% !important;
		max-width: 100%;
		margin: 1.35rem 0 1.1rem !important;
		padding: 0.75rem 1.15rem !important;
		box-sizing: border-box;
		text-align: center;
		box-shadow: -1px 1px 0 #9e9e9e !important;
		transform: none !important;
	}
}

/* —— Stage deck list (Baralhos / Loja shared pattern) —— */
.yala-stage-deck {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.yala-stage-deck:last-child {
	margin-bottom: 0;
}

.yala-stage-deck__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
	min-width: 0;
}

.yala-stage-deck__media {
	width: 100%;
	min-width: 0;
}

.yala-stage-deck__media img {
	display: block;
	width: 100%;
	height: auto;
}

.yala-stage-deck__meta {
	margin: 0;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(42, 27, 26, 0.62);
}

.yala-stage-deck__excerpt {
	margin: 0;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(42, 27, 26, 0.9);
}

.yala-stage-deck__extra {
	margin: 0;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--yala-text, #2a1b1a);
}

.yala-stage-deck__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1.1rem;
	margin: 0.15rem 0 0;
}

.yala-stage-deck__action {
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	color: var(--yala-text, #2a1b1a);
}

.yala-stage-deck__action--primary {
	color: var(--yala-primary, #4a148c);
}

.yala-stage-deck__action:focus-visible{
	text-decoration-thickness: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.yala-stage-deck__action:hover {
		text-decoration-thickness: 2px;
}
}

.yala-stage-deck__badge,
.yala-stage-deck__soon {
	margin: 0;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(42, 27, 26, 0.75);
}

.yala-stage-deck__badge {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78rem;
	color: var(--yala-primary, #4a148c);
}

/* —— Editorial menu buttons (Sobre / Baralhos) —— */
.yala-ed-menu {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
	margin: 0.35rem 0 0;
}

/* Carta / editorial menus: stick when scrolling past the section title.
 * Header is not sticky — park near the editorial-title slot (top of paper),
 * not under a phantom 4rem header strip. Resting layout unchanged. */
@media (min-width: 960px) {
	.yala-layout[data-yala-ratio="30-70"] .yala-ed-menu,
	.yala-layout[data-yala-ratio="35-65"] .yala-ed-menu,
	.yala-layout[data-yala-ratio="60-40"] .yala-ed-menu,
	.yala-layout[data-yala-ratio="70-30"] .yala-ed-menu,
	.yala-layout:has(.yala-carta-stage) .yala-ed-menu {
		position: sticky;
		top: calc(var(--yala-admin-bar-offset, 0px) + 0.85rem);
		align-self: flex-start;
		z-index: 4;
	}
}

/* Baralhos menu: text-only (no thumb) — same as former sticky-compact look */
.yala-ed-menu--text .yala-ed-menu__item,
.yala-ed-menu__item--text {
	grid-template-columns: minmax(0, 1fr);
}

.yala-ed-menu--text .yala-ed-menu__thumb,
.yala-ed-menu__item--text .yala-ed-menu__thumb {
	display: none;
}

.yala-ed-menu--text .yala-ed-menu__body,
.yala-ed-menu__item--text .yala-ed-menu__body {
	padding-left: 0.75rem;
}

/* Text-only ribbons (Guias): wrap long titles; fold must not eat the last letter. */
.yala-ed-menu__item--text .yala-ed-menu__ribbon {
	align-items: flex-start;
	padding-right: calc(1.15rem + var(--yala-ribbon-fold, 10px));
}

.yala-ed-menu__item--text .yala-ed-menu__title {
	display: block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	line-height: 1.3;
	hyphens: auto;
}

.yala-ed-menu__item {
	position: relative;
	display: grid;
	/* Fixed 1/4 : 3/4 — same as the last Sobre items (standard) */
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	align-items: stretch;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	padding-right: 0;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(42, 27, 26, 0.08),
		0 2px 8px -4px rgba(42, 27, 26, 0.18);
	overflow: visible;
	transition: filter 0.15s ease;
}

.yala-ed-menu__item:focus-visible{
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.yala-ed-menu__item:hover {
		outline: none;
}
}

.yala-ed-menu__thumb {
	display: block;
	min-width: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(42, 27, 26, 0.06);
}

.yala-ed-menu__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--yala-ed-thumb-pos, center center);
	transform: scale(1);
	transform-origin: var(--yala-ed-thumb-pos, center center);
	transition: transform 0.28s cubic-bezier(0.33, 0, 0.2, 1);
}

a.yala-ed-menu__item:focus-visible .yala-ed-menu__thumb img{
	transform: scale(1.08);
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item:hover .yala-ed-menu__thumb img {
		transform: scale(1.08);
}
}

.yala-ed-menu__thumb--empty {
	background: linear-gradient(135deg, rgba(74, 20, 140, 0.08), rgba(251, 192, 45, 0.18));
}

.yala-ed-menu__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Same distance: top ↔ ribbon ↔ desc ↔ bottom */
	--yala-ed-menu-pad: 0.75rem;
	gap: var(--yala-ed-menu-pad);
	min-width: 0;
	padding: var(--yala-ed-menu-pad) 0 var(--yala-ed-menu-pad) 0.9rem;
	overflow: visible;
}

.yala-ed-menu__ribbon {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
	box-sizing: border-box;
	max-width: none;
	/* Flush to white right edge + fold tip past (same as stage titles) */
	width: calc(100% + var(--yala-ribbon-fold, 10px));
	margin: 0 calc(-1 * var(--yala-ribbon-fold, 10px)) 0 0;
	padding: 0.55rem calc(0.85rem + var(--yala-ribbon-fold, 10px)) 0.55rem 0.85rem;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	z-index: 2;
	transition: background-color 0.15s ease, color 0.15s ease;
	/*
	 * Solid header purple — NO yellow ribbon-paper underneath.
	 * Mixing --yala-ribbon-paper (amarelo) with purple wash was the muddy tone.
	 */
	--yala-ribbon-base: var(--yala-primary, #4a148c);
	--yala-ribbon-ink: #fff;
	background-color: var(--yala-primary, #4a148c);
	background-image: none;
	color: #fff;
}

/* Editorial menu ribbon titles: plain caps — no letterpress / text-shadow. */
.yala-ed-menu__ribbon .yala-ed-menu__title {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-shadow: none;
}

/* "Baralho:" prefix — mobile only (Baralhos hub + deck/carta subpages). */
.yala-ed-menu__title-prefix {
	display: none;
}

@media (max-width: 959px) {
	.yala-ed-menu--baralhos .yala-ed-menu__title-prefix {
		display: inline;
	}
}

/* Non-link titles (Tiragens, waitlist): never look interactive */
.yala-ed-menu__item--static,
div.yala-ed-menu__item:not(a) {
	cursor: default;
}

.yala-ed-menu__ribbon::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: var(--yala-ribbon-fold, 10px) var(--yala-ribbon-fold, 10px) 0 0;
	border-color: var(--yala-primary-dark, #38096b) transparent transparent transparent;
	pointer-events: none;
	transition: border-color 0.15s ease;
}

/* Hover only on linked items — static titles (Tiragens, waitlist) stay put. */
a.yala-ed-menu__item:focus-visible:not(.is-current) .yala-ed-menu__ribbon{
	--yala-ribbon-base: var(--yala-primary-dark, #38096b);
	--yala-ribbon-ink: var(--yala-secondary-bright, #fbc02d);
	background-color: var(--yala-primary-dark, #38096b);
	background-image: none;
	color: var(--yala-secondary-bright, #fbc02d);
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item:hover:not(.is-current) .yala-ed-menu__ribbon {
		--yala-ribbon-base: var(--yala-primary-dark, #38096b);
		--yala-ribbon-ink: var(--yala-secondary-bright, #fbc02d);
		background-color: var(--yala-primary-dark, #38096b);
		background-image: none;
		color: var(--yala-secondary-bright, #fbc02d);
}
}

a.yala-ed-menu__item:focus-visible:not(.is-current) .yala-ed-menu__ribbon .yala-ed-menu__title{
	color: inherit;
	text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item:hover:not(.is-current) .yala-ed-menu__ribbon .yala-ed-menu__title {
		color: inherit;
		text-shadow: none;
}
}

a.yala-ed-menu__item:focus-visible:not(.is-current) .yala-ed-menu__ribbon::after{
	border-color: #2a0650 transparent transparent transparent;
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item:hover:not(.is-current) .yala-ed-menu__ribbon::after {
		border-color: #2a0650 transparent transparent transparent;
}
}

/* Selected: yellow ribbon + black text (header current chip — paper OK here) */
.yala-ed-menu__item.is-current .yala-ed-menu__ribbon,
a.yala-ed-menu__item.is-current:focus-visible .yala-ed-menu__ribbon{
	--yala-ribbon-base: var(--yala-secondary-bright, #fbc02d);
	--yala-ribbon-ink: var(--yala-text, #2a1b1a);
	background-color: var(--yala-secondary-bright, #fbc02d);
	background-image:
		linear-gradient(
			rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity, 0.3))),
			rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity, 0.3)))
		),
		var(--yala-ribbon-paper, none);
	color: var(--yala-text, #2a1b1a);
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item.is-current:hover .yala-ed-menu__ribbon {
		--yala-ribbon-base: var(--yala-secondary-bright, #fbc02d);
		--yala-ribbon-ink: var(--yala-text, #2a1b1a);
		background-color: var(--yala-secondary-bright, #fbc02d);
		background-image:
			linear-gradient(
				rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity, 0.3))),
				rgba(251, 192, 45, calc(1 - var(--yala-ribbon-paper-opacity, 0.3)))
			),
			var(--yala-ribbon-paper, none);
		color: var(--yala-text, #2a1b1a);
}
}

.yala-ed-menu__item.is-current .yala-ed-menu__ribbon .yala-ed-menu__title,
a.yala-ed-menu__item.is-current:focus-visible .yala-ed-menu__ribbon .yala-ed-menu__title{
	color: inherit;
	text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item.is-current:hover .yala-ed-menu__ribbon .yala-ed-menu__title {
		color: inherit;
		text-shadow: none;
}
}

.yala-ed-menu__item.is-current .yala-ed-menu__ribbon::after,
a.yala-ed-menu__item.is-current:focus-visible .yala-ed-menu__ribbon::after{
	border-color: #8a6a00 transparent transparent transparent;
}

@media (hover: hover) and (pointer: fine) {
	a.yala-ed-menu__item.is-current:hover .yala-ed-menu__ribbon::after {
		border-color: #8a6a00 transparent transparent transparent;
}
}

.yala-ed-menu__desc {
	display: block;
	/* Align with ribbon title text (ribbon padding-left: 0.85rem) */
	padding-left: 0.85rem;
	padding-right: 0.95rem;
	padding-bottom: 0.55rem;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(42, 27, 26, 0.78);
}

/* Mobile-only product banner under each Baralhos menu blurb */
.yala-ed-menu__below-img {
	display: none;
}

@media (max-width: 959px) {
	.yala-ed-menu--baralhos .yala-ed-menu__below-img {
		display: block;
		margin: 0.15rem 0 0;
		padding: 0;
		line-height: 0;
		overflow: hidden;
	}

	.yala-ed-menu--baralhos .yala-ed-menu__below-img img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 720 / 324;
		object-fit: cover;
	}

	.yala-ed-menu--baralhos .yala-ed-menu__desc {
		padding-bottom: 0.35rem;
	}
}

/*
 * Baralhos only: on a deck subpage, only the current deck stays open
 * (blurb + ficha). Hub has no .is-ficha-open → all blurbs stay visible.
 * Waitlist / Tiragens reuse the ficha shell but are not accordions.
 */
.yala-ed-menu--baralhos:has(.is-ficha-open) .yala-ed-menu__block:not(.is-ficha-open) .yala-ed-menu__desc,
.yala-ed-menu--baralhos:has(.is-ficha-open) .yala-ed-menu__block:not(.is-ficha-open) .yala-ed-menu__below-img {
	display: none;
}

.yala-ed-menu--baralhos .yala-ed-menu__block.is-ficha-open .yala-ed-menu__desc {
	padding-bottom: 0.35rem;
}

.yala-ed-menu__block {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	box-shadow:
		0 1px 0 rgba(42, 27, 26, 0.08),
		0 2px 8px -4px rgba(42, 27, 26, 0.18);
}

.yala-ed-menu--deck-ficha .yala-ed-menu__block .yala-ed-menu__item {
	background: transparent;
	box-shadow: none;
}

/* Ficha under the deck blurb (inside the white card).
 * Left inset = body pad (0.75) + desc pad (0.85) so labels align with blurb text.
 * Closed by default; .is-ficha-open expands with a height/opacity transition. */
.yala-ed-menu__after {
	display: block;
	padding: 0 0.95rem 0.65rem calc(0.75rem + 0.85rem);
}

.yala-ed-menu--deck-ficha .yala-ed-menu__after {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
	visibility: hidden;
	transition:
		grid-template-rows 0.38s cubic-bezier(0.33, 0, 0.2, 1),
		opacity 0.28s ease,
		padding 0.38s cubic-bezier(0.33, 0, 0.2, 1),
		visibility 0s linear 0.38s;
}

.yala-ed-menu--deck-ficha .yala-ed-menu__block.is-ficha-open .yala-ed-menu__after {
	grid-template-rows: 1fr;
	opacity: 1;
	padding-bottom: 0.65rem;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.yala-ed-menu__after-inner {
	overflow: visible;
	min-height: 0;
}

.yala-ed-menu--deck-ficha .yala-ed-menu__after-inner {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.yala-ed-menu--deck-ficha .yala-ed-menu__after {
		transition: none;
	}
}

.yala-ed-menu__after .yala-shop-specs {
	font-size: 0.72rem;
}

.yala-ed-menu__after .yala-shop-specs th,
.yala-ed-menu__after .yala-shop-specs td {
	padding: 0.28rem 0;
}

.yala-ed-menu__after .yala-shop-specs th {
	width: 58%;
}

.yala-baralhos-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin: 1.25rem 0 0;
}

/* Hub CTA: "ao lado" on desktop, "abaixo" on mobile (menu stacks under stage). */
.yala-shell__baralhos-cta--below {
	display: none;
}

@media (max-width: 959px) {
	.yala-baralhos-photos {
		display: none !important;
	}

	.yala-shell__baralhos-cta--side {
		display: none;
	}

	.yala-shell__baralhos-cta--below {
		display: inline;
	}

	/* Deck page: kill huge gap between description and card index */
	.yala-layout__stage-body > .yala-shell__prose {
		margin-bottom: 0;
	}

	.yala-layout__stage-body > .yala-shell__prose > *:last-child {
		margin-bottom: 0;
	}

	.yala-layout__stage-body > .yala-baralho-index {
		margin-top: 0.75rem;
	}
}

.yala-baralhos-photos__item {
	margin: 0;
	background: transparent;
}

.yala-baralhos-photos__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.yala-baralhos-photos__item figcaption {
	margin-top: 0.35rem;
	font-family: var(--yala-font-sans, "Google Sans", system-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(42, 27, 26, 0.7);
}

.yala-layout__stage-body .yala-baralho-index__suit-ribbon {
	margin-top: 1.1rem;
	margin-bottom: 0.75rem;
}

.yala-card-grid--no-titles .yala-card-grid__title {
	display: none;
}