:root {
	--bg: #fff2f6;
	--panel: #ffffff;
	--ink: #241724;
	--muted: #725d68;
	--line: #ead1dc;
	--brand: #b32058;
	--brand-dark: #6f1638;
	--gold: #b98220;
	--rose: #d63f78;
	--shadow: 0 18px 60px rgba(91, 30, 54, .14);
}

* { box-sizing: border-box; }
html {
	min-height: 100%;
}

:where(section[id], div[id]) {
	scroll-margin-top: 128px;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--ink);
	font-family: Arial, "Helvetica Neue", sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.siteHeader {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 24px;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(16px);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 220px;
}

.brandMark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--brand-dark);
	color: #fff;
	font-weight: 800;
}

.brand strong,
.brand small { display: block; }
.brand small { color: var(--muted); font-size: 12px; }

.nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.nav a {
	padding: 8px 10px;
	border-radius: 6px;
	color: #4b2f3d;
	font-size: 14px;
}

.nav a:hover,
.nav a.active { background: #fff0f5; color: var(--brand-dark); }

.hero {
	position: relative;
	min-height: min(760px, 92vh);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: #241724;
}

.heroImage,
.heroShade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.heroImage { object-fit: cover; }
.heroShade { background: linear-gradient(90deg, rgba(36, 23, 36, .88), rgba(36, 23, 36, .55) 45%, rgba(36, 23, 36, .2)); }

.heroContent {
	position: relative;
	z-index: 2;
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 96px 0 178px;
	color: #fff;
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--gold);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
}

.hero h1 {
	max-width: 780px;
	margin: 0;
	font-size: clamp(42px, 7vw, 86px);
	line-height: .98;
	letter-spacing: 0;
}

.lead {
	max-width: 650px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .86);
	font-size: 18px;
}

.heroActions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-weight: 800;
	max-width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
}

.button.primary { background: var(--brand); color: #fff; }
.button.secondary { border-color: rgba(255, 255, 255, .55); color: #fff; }

.button.primary,
.quickSearch .button,
.contactButton.primary {
	background: linear-gradient(180deg, #d63f78 0%, #a9154d 100%);
	border-color: #a9154d;
	box-shadow: 0 8px 20px rgba(179, 32, 88, .22);
}

.button.primary:hover,
.quickSearch .button:hover,
.contactButton.primary:hover {
	background: linear-gradient(180deg, #e24a83 0%, #9b1247 100%);
	box-shadow: 0 10px 24px rgba(179, 32, 88, .3);
}

.heroStats {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	width: min(1180px, calc(100% - 40px));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.statCard {
	background: rgba(255, 255, 255, .94);
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 8px;
	padding: 14px;
	box-shadow: var(--shadow);
}

.statCard b {
	display: block;
	font-size: 28px;
	line-height: 1;
}

.statCard span,
.statCard small {
	display: block;
	color: var(--muted);
	font-size: 12px;
	margin-top: 5px;
}

#main-content {
	flex: 1 0 auto;
}

main { padding: 24px 0 56px; }
.section {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto 24px;
}

.introGrid,
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
	gap: 18px;
	align-items: stretch;
}

.section h2,
.pageHero h1,
.detailHero h1 {
	margin: 0;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: 0;
}

.section p,
.pageHero p,
.detailHero p {
	color: var(--muted);
	max-width: 760px;
}

.directionPanel,
.subtypePanel,
.pageHero,
.detailPanel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 18px;
	box-shadow: 0 10px 30px rgba(91, 30, 54, .08);
}

.directionPanel {
	display: grid;
	gap: 12px;
}

.directionPanel div {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 12px;
	align-items: center;
}

.directionPanel b {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 7px;
	background: #fff0f5;
	color: var(--brand-dark);
}

.directionPanel span { color: var(--muted); }

.sectionHead {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 14px;
}

.sectionHead > a {
	color: var(--brand-dark);
	font-weight: 800;
}

.cityGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.cityCard {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px;
	transition: transform .16s ease, box-shadow .16s ease;
}

.cityCard:hover,
.shopCard:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(91, 30, 54, .13);
}

.cityCard span,
.cityCard small { display: block; color: var(--muted); }
.cityCard span { color: var(--ink); font-weight: 800; }
.cityCard b { display: block; margin: 10px 0 4px; font-size: 30px; line-height: 1; }

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 11px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: #5f4a56;
}

.subtypePanel {
	display: grid;
	gap: 10px;
}

.searchBox {
	display: grid;
	gap: 4px;
	min-width: min(320px, 100%);
	color: var(--muted);
	font-size: 12px;
}

.searchBox input {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 9px 11px;
	color: var(--ink);
	background: #fff;
}

.shopGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.shopCard {
	overflow: hidden;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	transition: transform .16s ease, box-shadow .16s ease;
}

.shopImage {
	display: block;
	aspect-ratio: 16 / 9;
	background: #4b1b32;
}

.shopImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shopBody { padding: 14px; }
.shopMeta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 12px;
}

.shopBody h3 {
	margin: 7px 0 8px;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: 0;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.badges span {
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff0f5;
	color: var(--brand-dark);
	font-size: 12px;
	font-weight: 800;
}

.badges.large span {
	font-size: 13px;
}

.shopBody p {
	min-height: 44px;
	margin: 10px 0;
	color: var(--muted);
	font-size: 14px;
}

.shopFooter {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
}

.pageHero,
.detailHero {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto 24px;
}

.pageHero {
	padding: 28px;
}

.miniStats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 18px;
}

.crumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 13px;
}

.crumbs a { color: var(--brand-dark); font-weight: 800; }

.detailHero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: 18px;
	align-items: stretch;
	background: #331426;
	color: #fff;
	border-radius: 10px;
	padding: 22px;
}

.detailHero p { color: rgba(255, 255, 255, .76); }
.detailHero img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	border-radius: 8px;
}

.detailGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.contactList {
	display: grid;
	gap: 8px;
	min-width: 0;
	margin-top: 12px;
}

.contactLink {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff9fb;
}

.contactLink b {
	text-align: right;
	line-height: 1.35;
}

dl {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 8px 12px;
	margin: 12px 0 0;
}

dt { color: var(--muted); }
dd { margin: 0; font-weight: 700; }

.footer {
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	gap: 18px;
	padding: 24px;
	border-top: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
}

.footer strong,
.footer span { display: block; }
.footer strong { color: var(--ink); }
.footerLinks { display: flex; gap: 14px; flex-wrap: wrap; }
.footerLinks a { color: var(--brand-dark); font-weight: 800; }

.ageOverlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(47, 20, 38, .76);
	backdrop-filter: blur(12px);
}

.ageOverlay[hidden] { display: none; }

.agePanel {
	width: min(460px, 100%);
	padding: 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.agePanel h2 { margin: 0 0 10px; font-size: 28px; }
.agePanel p { margin: 0 0 18px; color: var(--muted); }

.plainPage {
	width: min(860px, calc(100% - 40px));
	margin: 0 auto;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
}

.plainPage h1 {
	margin: 0 0 14px;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.05;
	letter-spacing: 0;
}

.plainPage p { color: var(--muted); font-size: 16px; }

@media (max-width: 980px) {
	.siteHeader { align-items: flex-start; flex-direction: column; }
	.heroStats,
	.cityGrid,
	.shopGrid,
	.miniStats,
	.introGrid,
	.split,
	.detailGrid,
	.detailHero {
		grid-template-columns: 1fr;
	}
	.heroContent { padding: 88px 0 260px; }
	.heroStats { bottom: 16px; }
	.sectionHead { display: block; }
	.searchBox { margin-top: 14px; }
}

@media (max-width: 640px) {
	.siteHeader { padding: 10px 14px; }
	.nav { justify-content: flex-start; }
	.hero { min-height: 760px; }
	.heroContent,
	.heroStats,
	.section,
	.pageHero,
	.detailHero { width: calc(100% - 28px); }
	.heroContent { padding: 58px 0 260px; }
	.heroStats { grid-template-columns: repeat(3, 1fr); gap: 7px; }
	.heroStats .statCard { padding: 10px; }
	.heroStats .statCard b { font-size: 23px; }
	.heroStats .statCard span,
	.heroStats .statCard small { font-size: 11px; }
	.hero h1 { font-size: 40px; }
	.lead { font-size: 16px; }
	.shopFooter { display: grid; }
	.footer { display: block; }
	.footerLinks { margin-top: 12px; }
	.plainPage { width: calc(100% - 28px); padding: 20px; }
}

/* Proposal B: City Hub & SEO Pyramid TOP page */
:root {
	--bg: #fff2f6;
	--panel: #fffafb;
	--ink: #241724;
	--muted: #725d68;
	--line: #ead1dc;
	--brand: #b32058;
	--brand-dark: #6f1638;
	--accent: #d63f78;
	--success: #12805c;
	--soft-blue: #fff0f5;
	--soft-gold: #fff7e4;
	--shadow: 0 18px 48px rgba(91, 30, 54, .11);
}

body {
	background:
		linear-gradient(180deg, #fffafb 0, var(--bg) 270px),
		var(--bg);
	color: var(--ink);
	text-rendering: optimizeLegibility;
}

.skipLink {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 200;
	transform: translateY(-140%);
	padding: 10px 12px;
	border-radius: 7px;
	background: var(--ink);
	color: #fff;
	font-weight: 900;
	transition: transform .14s ease;
}

.skipLink:focus {
	transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 3px solid rgba(214, 63, 120, .3);
	outline-offset: 2px;
}

.siteHeader {
	position: sticky;
	top: 0;
	z-index: 30;
	display: block;
	padding: 0;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 8px 30px rgba(91, 30, 54, .06);
}

.headerBar {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 58px;
}

.brand {
	min-width: 0;
}

.brandWord {
	display: block;
	color: var(--ink);
	font-size: 25px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
}

.headerTools {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #4b2f3d;
	font-size: 13px;
	font-weight: 700;
}

.languageSwitcher,
.favoriteLink {
	min-height: 34px;
	border: 1px solid transparent;
	border-radius: 7px;
}

.languageSwitcher {
	position: relative;
}

.languageSwitcher summary {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 10px;
	cursor: pointer;
	list-style: none;
}

.languageSwitcher summary::-webkit-details-marker {
	display: none;
}

.languageSwitcher summary::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 8px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.languageSwitcher div {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 50;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--shadow);
}

.languageSwitcher a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--ink);
}

.languageSwitcher a:hover,
.languageSwitcher a.active {
	background: var(--soft-blue);
	color: var(--brand);
}

.languageSwitcher small {
	color: var(--muted);
}

.languageSwitcher:hover,
.languageSwitcher[open],
.favoriteLink:hover {
	border-color: var(--line);
	background: #fff6fa;
}

.favoriteLink {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
}

.nav {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 0 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 14px;
	scrollbar-width: thin;
	scrollbar-color: rgba(194, 32, 97, .32) transparent;
}

.nav::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.nav::-webkit-scrollbar-thumb {
	background: rgba(194, 32, 97, .32);
	border-radius: 999px;
}

.nav::-webkit-scrollbar-track {
	background: transparent;
}

.nav a {
	flex: 0 0 auto;
	padding: 8px 11px;
	border-radius: 6px;
	color: #4b2f3d;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.nav a:hover,
.nav a.active {
	background: var(--soft-blue);
	color: var(--brand);
}

.nav a[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--accent);
}

.homePage {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: 16px 0 46px;
}

.topContainer,
.homeSection {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 26px rgba(91, 30, 54, .06);
}

.topContainer {
	padding: 14px;
}

.homeBreadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 12px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	color: var(--muted);
	font-size: 13px;
	scrollbar-width: thin;
	scrollbar-color: rgba(194, 32, 97, .26) transparent;
	white-space: nowrap;
}

.homeBreadcrumbs::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.homeBreadcrumbs::-webkit-scrollbar-thumb {
	background: rgba(194, 32, 97, .26);
	border-radius: 999px;
}

.homeBreadcrumbs::-webkit-scrollbar-track {
	background: transparent;
}

.homeBreadcrumbs a {
	flex: 0 0 auto;
	color: #5b2942;
	font-weight: 700;
}

.homeBreadcrumbs span {
	flex: 0 0 auto;
}

.btbHeroGrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
	gap: 14px;
}

.btbHeroCard,
.quickSearch,
.advancedSearch,
.pathModule,
.popularCities {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.btbHeroCard {
	padding: 30px;
	background:
		linear-gradient(135deg, rgba(255, 238, 246, .92), rgba(255, 255, 255, .94)),
		url("https://cdn.body-to-body.com/assets/images/og/body-to-body-default.png?v=20260522") center / cover;
}

.heroLabel {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 5px 10px;
	border: 1px solid #e4b8ca;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	color: var(--brand);
	font-size: 12px;
	font-weight: 900;
}

.btbHeroCard h1 {
	max-width: 520px;
	margin: 0;
	font-size: clamp(38px, 5.4vw, 64px);
	line-height: .98;
	letter-spacing: 0;
}

.btbHeroCard p {
	max-width: 520px;
	color: #5f4a56;
	font-size: 16px;
}

.confidenceGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 28px;
}

.confidenceGrid span {
	display: block;
	padding: 12px;
	border: 1px solid #ead1dc;
	border-radius: 8px;
	background: rgba(255, 255, 255, .84);
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

.confidenceGrid b {
	display: block;
	color: var(--ink);
	font-size: 15px;
}

.quickSearch {
	padding: 18px;
}

.quickSearch h2,
.advancedSearch h2,
.pathModule h2,
.sectionMiniHead h2,
.linkModule h2,
.dirGroup h2 {
	margin: 0;
	color: var(--ink);
	font-size: 18px;
	line-height: 1.2;
}

.quickSearch label {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin-top: 12px;
	color: #4b2f3d;
	font-size: 13px;
	font-weight: 800;
}

.quickSearch input,
.quickSearch select {
	width: 100%;
	min-height: 40px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--ink);
	padding: 8px 10px;
	font: inherit;
}

.quickSearch .button {
	width: 100%;
	margin-top: 14px;
	background: var(--brand);
}

.moreSearch {
	display: block;
	margin-top: 10px;
	color: var(--brand);
	font-size: 13px;
	font-weight: 900;
	text-align: center;
}

.advancedSearch {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding: 18px;
	align-items: end;
}

.advancedSearchHead {
	grid-column: 1 / -1;
	max-width: 820px;
}

.advancedSearchHead p {
	margin: 6px 0 0;
	color: var(--muted);
}

.advancedSearch label {
	display: grid;
	gap: 6px;
	color: #4b2f3d;
	font-size: 13px;
	font-weight: 800;
}

.advancedSearch input,
.advancedSearch select {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--ink);
	padding: 8px 10px;
	font: inherit;
}

.advancedSearchActions {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.advancedSearchActions .button {
	min-height: 42px;
	white-space: nowrap;
}

.quickLinkStrip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 14px;
}

.quickLinkStrip a {
	display: grid;
	gap: 3px;
	min-height: 56px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
}

.quickLinkStrip a:hover {
	border-color: #d88dad;
	background: #fff6fa;
}

.quickLinkStrip strong {
	font-size: 13px;
	line-height: 1.2;
}

.quickLinkStrip span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
}

.pathModule {
	margin-top: 14px;
	padding: 16px;
	text-align: center;
}

.pathSteps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px;
	margin-top: 14px;
}

.pathStep {
	position: relative;
	display: grid;
	place-items: center;
	gap: 5px;
	min-height: 74px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.pathStep:not(:last-child)::after {
	content: ">";
	position: absolute;
	right: -23px;
	top: 50%;
	transform: translateY(-50%);
	color: #8a6f7c;
	font-weight: 900;
}

.pathStep span {
	color: var(--ink);
	font-weight: 900;
}

.pathStep small {
	color: var(--muted);
	font-size: 12px;
}

.popularCities {
	margin-top: 14px;
	padding: 14px;
}

.sectionMiniHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
}

.sectionMiniHead a {
	color: var(--brand);
	font-size: 13px;
	font-weight: 900;
}

.cityTabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.cityTab {
	min-height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	color: #4b2f3d;
	font-weight: 900;
}

.cityTab.active,
.cityTab:hover {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}

.homeSection {
	margin-top: 14px;
	padding: 16px;
}

.areaMatrix {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border: 1px solid var(--line);
	border-radius: 7px;
	overflow: hidden;
}

.areaMatrix a {
	min-height: 42px;
	display: grid;
	place-items: center;
	gap: 2px;
	padding: 8px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: #fff;
	color: #4b2f3d;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
}

.areaMatrix a:hover {
	background: var(--soft-blue);
	color: var(--brand);
}

.areaMatrix b {
	color: var(--muted);
	font-size: 11px;
}

.genreRail {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.genreCard {
	min-height: 86px;
	display: grid;
	align-content: center;
	gap: 4px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
}

.genreCard:hover,
.genreCard.active,
.shopRow:hover,
.linkModule a:hover,
.dirGroup a:hover {
	border-color: #d88dad;
	background: #fff6fa;
}

.genreCard.active {
	box-shadow: inset 0 0 0 2px rgba(214, 63, 120, .18);
}

.genreCard strong {
	font-size: 14px;
	line-height: 1.18;
}

.genreCard span,
.genreCard small {
	color: var(--muted);
	font-size: 12px;
}

.genreCard.more {
	border-style: dashed;
	text-align: center;
}

.listingRows {
	display: grid;
	gap: 10px;
}

.shopRow {
	display: grid;
	grid-template-columns: 38px 116px minmax(0, 1fr) 132px;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	transition: background .16s ease, border-color .16s ease;
}

.rankBadge {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--soft-gold);
	color: #8a5a00;
	border: 1px solid #ebd99f;
	font-weight: 900;
}

.rowThumb {
	display: block;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--line);
	border-radius: 7px;
	overflow: hidden;
	background: #f8eaf0;
}

.rowThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rowHeader {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
}

.rowHeader h3 {
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 1.2;
}

.rowHeader p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.statusPill {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 999px;
	background: #e9f8f1;
	color: var(--success);
	font-size: 11px;
	font-weight: 900;
}

.rowTags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 8px;
}

.rowTags span {
	padding: 3px 7px;
	border: 1px solid #e6bfd0;
	border-radius: 999px;
	background: var(--soft-blue);
	color: var(--brand);
	font-size: 11px;
	font-weight: 900;
}

.rowStats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.rowStat {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border: 1px solid #edd0dc;
	border-radius: 6px;
	background: #fff7fb;
	color: #5a3145;
	font-size: 11px;
	font-weight: 900;
	white-space: nowrap;
}

.rowStat.schedule {
	background: #f7f0ff;
	border-color: #dfc7ef;
}

.rowStat.cast {
	background: #fff2f7;
}

.rowStat.pricing {
	background: #fff8e8;
	border-color: #ead7a8;
}

.rowMeta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 12px;
}

.rowActions {
	display: grid;
	justify-items: stretch;
}

.button.secondaryDark {
	min-height: 38px;
	border-color: #e4b8ca;
	background: #fff;
	color: var(--brand);
	font-size: 13px;
}

.centerButton {
	width: min(240px, 100%);
	min-height: 40px;
	display: grid;
	place-items: center;
	margin: 12px auto 0;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	color: var(--brand);
	font-weight: 900;
}

.bodyExplainer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 18px;
	align-items: center;
}

.bodyExplainer h2 {
	margin: 0;
	font-size: 21px;
}

.bodyExplainer p {
	max-width: 760px;
	margin: 8px 0;
	color: var(--muted);
}

.bodyExplainer a {
	color: var(--brand);
	font-weight: 900;
}

.explainerArt {
	height: 108px;
	border: 1px solid var(--line);
	border-radius: 999px 999px 12px 12px;
	background:
		radial-gradient(circle at 72% 34%, #ead1dc 0 14px, transparent 15px),
		linear-gradient(135deg, transparent 0 38%, #ead1dc 39% 42%, transparent 43%),
		#fff6fa;
}

.linkModules {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.linkModule {
	display: grid;
	align-content: start;
	gap: 7px;
	padding: 14px;
	border-right: 1px solid var(--line);
}

.linkModule:last-child {
	border-right: 0;
}

.linkModule a,
.dirGroup a {
	display: block;
	color: #4b2f3d;
	font-size: 13px;
}

.linkModule .moduleMore {
	margin-top: 6px;
	color: var(--brand);
	font-weight: 900;
}

.directoryCloud {
	display: grid;
	grid-template-columns: 1.35fr 1.35fr 1fr;
	gap: 18px;
}

.dirGroup {
	display: grid;
	align-content: start;
	gap: 7px;
}

.footer {
	background: #fff;
	border-top: 1px solid var(--line);
}

.ageBadge {
	display: inline-grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	color: var(--ink);
	font-weight: 900;
}

@media (max-width: 980px) {
	.btbHeroGrid,
	.bodyExplainer,
	.directoryCloud {
		grid-template-columns: 1fr;
	}

	.pathSteps,
	.cityTabs,
	.linkModules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pathStep:not(:last-child)::after {
		display: none;
	}

	.areaMatrix {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.genreRail {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shopRow {
		grid-template-columns: 34px 96px minmax(0, 1fr);
	}

	.rowActions {
		grid-column: 2 / -1;
	}
}

@media (max-width: 640px) {
	.headerBar,
	.nav,
	.homePage {
		width: calc(100% - 24px);
	}

	.headerBar {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		padding: 12px 0 8px;
	}

	.brandWord {
		font-size: 22px;
	}

	.headerTools {
		width: 100%;
		justify-content: space-between;
	}

	.btbHeroCard,
	.quickSearch,
	.homeSection {
		padding: 14px;
	}

	.btbHeroCard h1 {
		font-size: 38px;
		overflow-wrap: anywhere;
	}

	.confidenceGrid,
	.pathSteps,
	.cityTabs,
	.areaMatrix,
	.genreRail,
	.linkModules {
		grid-template-columns: 1fr;
	}

	.quickSearch label {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.sectionMiniHead {
		display: grid;
		gap: 6px;
	}

	.shopRow {
		grid-template-columns: 32px minmax(0, 1fr);
		align-items: start;
	}

	.rowThumb {
		grid-column: 1 / -1;
	}

	.rowHeader {
		display: grid;
	}

	.rowContent,
	.rowActions {
		grid-column: 1 / -1;
	}

	.linkModule {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
}

.rootPage,
.directoryPage,
.shopDetailPage,
.shopSubPage {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: 16px 0 46px;
}

.directoryShell,
.detailDirectoryShell,
.listingHeroCard,
.shopDetailCopy,
.subPageHero,
.quickSearch,
.advancedSearch,
.homeSection,
.shopMasthead,
.shopFeatureRow,
.shopFeatureHead,
.shopFeatureBody,
.shopInfoBlock,
.detailPanel,
.directoryListCard,
.genreCard,
.pathStep,
.linkModule,
.summaryTile,
.priceTable,
.placeholderRow,
.timelineList > div {
	min-width: 0;
}

.rootHero,
.infoHero,
.directoryShell,
.detailDirectoryShell {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 26px rgba(91, 30, 54, .06);
}

.rootHero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 18px;
	align-items: stretch;
	padding: 24px;
	background:
		linear-gradient(135deg, rgba(255, 238, 246, .95), rgba(255, 255, 255, .98)),
		url("https://cdn.body-to-body.com/assets/images/og/body-to-body-default.png?v=20260522") center / cover;
}

.infoHero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
	gap: 18px;
	align-items: stretch;
	padding: 24px;
	background:
		linear-gradient(135deg, rgba(255, 238, 246, .95), rgba(255, 255, 255, .98)),
		url("https://cdn.body-to-body.com/assets/images/og/body-to-body-default.png?v=20260522") center / cover;
}

.infoHero h1 {
	max-width: 740px;
	margin: 0;
	font-size: clamp(38px, 6vw, 64px);
	line-height: .98;
	letter-spacing: 0;
}

.infoHero p {
	max-width: 680px;
	color: #5f4a56;
	font-size: 17px;
}

.rootHero h1 {
	margin: 0;
	font-size: clamp(44px, 7vw, 78px);
	line-height: .95;
	letter-spacing: 0;
}

.rootHero p {
	max-width: 680px;
	color: #5f4a56;
	font-size: 17px;
}

.rootActions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.rootStats {
	display: grid;
	gap: 10px;
	align-content: center;
}

.rootGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 14px;
}

.rootPanel {
	margin-top: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 26px rgba(91, 30, 54, .06);
}

.rootGrid .rootPanel {
	margin-top: 0;
}

.rootPanel h2 {
	margin: 0 0 12px;
	font-size: 20px;
}

.rootChoices,
.rootCityGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.countryLaunchGrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rootChoice,
.rootCityGrid a {
	display: grid;
	gap: 4px;
	min-height: 58px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
}

.rootChoice:hover,
.rootCityGrid a:hover {
	background: var(--soft-blue);
	border-color: #d88dad;
}

.rootChoice strong,
.rootCityGrid span {
	font-weight: 900;
}

.rootChoice span,
.rootCityGrid b {
	color: var(--muted);
	font-size: 12px;
}

.directoryListGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.directoryListGrid.areas {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.directoryListGrid.genres {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.directoryListCard {
	display: grid;
	gap: 6px;
	min-height: 112px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	align-content: start;
}

.directoryListCard:hover {
	background: var(--soft-blue);
	border-color: #d88dad;
}

.directoryListCard span {
	font-weight: 900;
	line-height: 1.22;
	overflow-wrap: anywhere;
}

.directoryListCard b {
	color: var(--brand);
	font-size: 21px;
	line-height: 1;
}

.directoryListCard small,
.directoryListCard em {
	color: var(--muted);
	font-size: 12px;
	font-style: normal;
}

.directoryListCard em {
	margin-top: auto;
	color: var(--brand);
	font-weight: 900;
}

.directoryShell,
.detailDirectoryShell {
	padding: 14px;
}

.listingHeroGrid,
.shopDetailHero,
.shopMasthead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
	gap: 14px;
}

.listingHeroCard,
.shopDetailCopy,
.subPageHero {
	border: 1px solid var(--line);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(255, 238, 246, .94), rgba(255, 255, 255, .97)),
		url("https://cdn.body-to-body.com/assets/images/og/body-to-body-default.png?v=20260522") center / cover;
	padding: 28px;
}

.listingHeroCard h1,
.shopDetailCopy h1,
.subPageHero h1 {
	max-width: 720px;
	margin: 0;
	font-size: clamp(36px, 5vw, 58px);
	line-height: .98;
	letter-spacing: 0;
}

.listingHeroCard p,
.shopDetailCopy p,
.subPageHero p {
	max-width: 680px;
	color: #5f4a56;
}

.subPageHero {
	margin-top: 12px;
}

.subPageGrid {
	display: grid;
	grid-template-columns: minmax(0, 1.48fr) minmax(280px, .52fr);
	gap: 12px;
}

.quickSearch.compact {
	box-shadow: none;
}

.compactPath {
	margin-top: 14px;
}

.cityTabsWide {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cityTabsWide .cityTab {
	gap: 4px;
}

.cityTab span {
	margin-left: 4px;
	color: inherit;
	font-size: 12px;
	opacity: .72;
}

.listingHead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-bottom: 12px;
}

.listingHead h2 {
	margin: 0;
	font-size: 22px;
}

.listingHead p {
	margin: 4px 0 0;
	color: var(--muted);
}

.inlineFilter {
	display: grid;
	gap: 5px;
	min-width: min(340px, 100%);
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
}

.inlineFilter label {
	display: grid;
	gap: 5px;
}

.inlineFilter input,
.inlineFilter select {
	width: 100%;
	min-height: 40px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 8px 10px;
	font: inherit;
	background: #fff;
}

.inlineFilterActions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.inlineFilterActions .button {
	min-height: 36px;
	padding: 8px 14px;
}

.listingSearchFilter {
	grid-template-columns: minmax(240px, 1fr) auto;
	align-items: end;
	width: 100%;
	min-width: 0;
}

.listingSearchFilter label {
	min-width: 0;
}

.listingSearchFilter .inlineFilterActions {
	align-self: end;
}

.activeFilters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.activeFilters span,
.activeFilters a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--muted);
	font-size: 12px;
}

.activeFilters b {
	color: var(--brand);
}

.activeFilters a {
	color: var(--brand);
	font-weight: 900;
}

.emptyDirectoryState {
	max-width: 100%;
	min-width: 0;
	padding: 18px;
	border: 1px dashed #e4b8ca;
	border-radius: 8px;
	background: #fff9fb;
	color: var(--muted);
	text-align: center;
	overflow-wrap: anywhere;
}

.emptyDirectoryState strong {
	display: block;
	color: var(--ink);
	font-size: 17px;
}

.emptyDirectoryState p {
	margin: 7px auto 14px;
	max-width: 560px;
}

[data-shop-card][hidden] {
	display: none !important;
}

[data-more-item][hidden] {
	display: none !important;
}

.moreToggle {
	display: grid;
	place-items: center;
	width: min(260px, 100%);
	min-height: 40px;
	margin: 12px auto 0;
	border: 1px solid #e4b8ca;
	border-radius: 7px;
	background: #fff;
	color: var(--brand);
	font: inherit;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.moreToggle:hover {
	background: var(--soft-blue);
}

.moreToggle.isLoading,
.moreToggle[aria-busy="true"] {
	pointer-events: none;
	opacity: .72;
}

.moreToggle[hidden] {
	display: none;
}

.guideGrid,
.infoGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.guideCard {
	display: grid;
	align-content: start;
	gap: 10px;
	min-height: 190px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.guideCard h2 {
	margin: 0;
	font-size: 20px;
	line-height: 1.18;
}

.guideCard p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
}

.guideCard a {
	align-self: end;
	color: var(--brand);
	font-weight: 900;
}

.shopDetailImage {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	min-height: 300px;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: #f8eaf0;
}

.shopDetailImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.shopMasthead {
	align-items: stretch;
}

.shopActionCard {
	display: grid;
	grid-template-rows: minmax(210px, 1fr) auto;
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.shopActionCard .shopDetailImage {
	aspect-ratio: 16 / 9;
	min-height: 220px;
	border: 0;
	border-radius: 0;
}

.shopActionBody {
	min-width: 0;
	padding: 16px;
	border-top: 1px solid var(--line);
}

.shopActionBody h2,
.detailPanel h2,
.shopFeatureHead h2,
.shopInfoBlock h2,
.shopDirectoryBridge h2 {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
}

.shopActionBody p {
	margin: 8px 0 12px;
	color: var(--muted);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.contactButtonGrid {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.contactButton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	color: var(--brand);
	font-size: 13px;
	font-weight: 900;
}

.contactButton span,
.contactLink span {
	flex: 0 0 auto;
	min-width: max-content;
	white-space: nowrap;
}

.contactButton b,
.contactLink b {
	min-width: 0;
	overflow-wrap: anywhere;
}

.contactButton.primary {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.contactButton b {
	min-width: 0;
	overflow: visible;
	text-align: right;
	text-overflow: clip;
	white-space: normal;
	line-height: 1.35;
}

.shopSummaryTiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.summaryTile {
	display: grid;
	gap: 4px;
	min-height: 74px;
	padding: 11px;
	border: 1px solid #ead1dc;
	border-radius: 8px;
	background: rgba(255, 255, 255, .86);
}

.summaryTile span,
.summaryTile small {
	color: var(--muted);
	font-size: 12px;
}

.summaryTile b {
	font-size: 15px;
	line-height: 1.18;
}

.shopSubNav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(194, 32, 97, .32) transparent;
}

.shopSubNav::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.shopSubNav::-webkit-scrollbar-thumb {
	background: rgba(194, 32, 97, .32);
	border-radius: 999px;
}

.shopSubNav::-webkit-scrollbar-track {
	background: transparent;
}

.shopSubNav a {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	min-width: max-content;
	padding: 8px 10px;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	color: #4b2f3d;
	font-weight: 900;
	white-space: nowrap;
}

.shopSubNav a.active,
.shopSubNav a:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.profileActions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.rowTags.large span {
	font-size: 12px;
	padding: 5px 9px;
}

.shopDetailWorkArea {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: 16px;
	margin-top: 14px;
}

.shopMainSections,
.shopInfoRail {
	display: grid;
	gap: 12px;
	align-content: start;
}

.shopFeatureRow,
.shopInfoBlock,
.shopDirectoryBridge {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(91, 30, 54, .045);
}

.shopFeatureRow {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(320px, 1.12fr);
	gap: 16px;
	padding: 18px;
}

.shopFeatureHead {
	display: grid;
	align-content: start;
	gap: 9px;
}

.shopFeatureHead span {
	width: fit-content;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--soft-blue);
	color: var(--brand);
	font-size: 11px;
	font-weight: 900;
}

.shopFeatureHead p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
}

.shopFeatureBody {
	display: grid;
	gap: 12px;
	align-content: start;
}

.shopFeatureBody .placeholderList {
	margin-top: 0;
}

.shopFeatureBody .placeholderRow {
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	padding: 9px 0;
}

.shopFeatureBody .placeholderRow:first-child {
	border-top: 0;
	padding-top: 0;
}

.shopInfoBlock {
	padding: 16px;
}

.shopInfoBlock .contactList,
.shopInfoBlock dl,
.shopInfoBlock .checkList {
	margin-top: 12px;
}

.shopDirectoryBridge {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
	gap: 16px;
	margin-top: 14px;
	padding: 18px;
}

.shopDirectoryBridgeText p {
	max-width: 740px;
	margin: 10px 0 0;
	color: var(--muted);
	line-height: 1.7;
}

.shopDirectoryBridgeLinks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	align-content: center;
}

.shopDirectoryBridgeLinks a {
	display: grid;
	align-content: center;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--brand);
	font-weight: 900;
}

.shopDirectoryBridgeLinks a:hover {
	background: var(--soft-blue);
	border-color: #d88dad;
}

.detailInfoGrid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	gap: 12px;
}

.detailContentGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.portalGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.portalPanel {
	display: grid;
	align-content: start;
	gap: 10px;
	min-height: 176px;
	padding: 15px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.portalPanel > div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: start;
}

.portalPanel > div span {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--soft-blue);
	color: var(--brand);
	font-size: 11px;
	font-weight: 900;
}

.portalPanel p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.portalPanel a,
.panelLink {
	color: var(--brand);
	font-weight: 900;
}

.placeholderList {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.placeholderRow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff9fb;
	font-size: 13px;
}

.placeholderRow span {
	color: var(--muted);
	text-align: right;
}

.castPreviewGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0;
}

.castSlot {
	display: grid;
	place-items: center;
	min-height: 92px;
	padding: 10px;
	border: 1px dashed #e4b8ca;
	border-radius: 8px;
	background: #fff9fb;
	text-align: center;
}

.castSlot span {
	color: var(--muted);
	font-size: 12px;
}

.castSlot b {
	color: var(--brand);
	font-size: 14px;
}

.miniCastGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.castMiniCard {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	align-content: start;
	overflow: hidden;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

a.castMiniCard {
	color: inherit;
	text-decoration: none;
}

.castMiniCard:hover {
	border-color: #d1a7b9;
	background: #fff9fb;
}

.castMiniImage {
	display: block;
	background: #fff9fb;
}

.castMiniCard img,
.castInitial {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	background: linear-gradient(135deg, #ffe4ef, #f8d5e6);
	border: 0;
}

.castInitial {
	display: grid;
	place-items: center;
	color: var(--brand);
	font-size: 22px;
	font-weight: 900;
}

.castInitial.large {
	min-height: 160px;
	font-size: 42px;
}

.castMiniBody {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 8px;
	min-width: 0;
}

.castMiniCard strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #3f2b35;
	font-size: 13px;
}

.castMiniCard small {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}

.castMiniFacts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

.castMiniFacts em {
	max-width: 100%;
	padding: 2px 6px;
	border: 1px solid #ecd0dc;
	border-radius: 999px;
	background: #fff9fb;
	color: #4b2f3d;
	font-size: 10px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.castMiniCard b {
	display: block;
	max-width: 100%;
	color: var(--brand);
	font-size: 11px;
	font-weight: 900;
	line-height: 1.25;
	overflow-wrap: anywhere;
	white-space: normal;
}

.castProfileGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.shopCastPreviewGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.scheduleCastProfileGrid {
	margin-bottom: 10px;
}

.castProfileCard {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.castProfileImage img,
.castProfileImage .castInitial {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

.castProfileBody {
	display: grid;
	gap: 6px;
	min-width: 0;
	padding: 11px;
}

.castProfileBody h3 {
	margin: 0;
	color: #3f2b35;
	font-size: 16px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.castProfileBody p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
}

.castProfileFacts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.castProfileFacts span {
	max-width: 100%;
	padding: 3px 7px;
	border: 1px solid #ecd0dc;
	border-radius: 999px;
	background: #fff9fb;
	color: #4b2f3d;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.castProfileBody a {
	color: var(--brand);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.3;
	overflow-wrap: anywhere;
	white-space: normal;
}

.castProfileImage {
	display: block;
	color: inherit;
	text-decoration: none;
}

.castProfileBody h3 a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

.shopCastPreviewGrid .castProfileBody {
	gap: 5px;
	padding: 9px;
}

.shopCastPreviewGrid .castProfileBody h3 {
	font-size: 14px;
	line-height: 1.25;
}

.shopCastPreviewGrid .castProfileBody p {
	font-size: 12px;
}

.shopCastPreviewGrid .castProfileFacts span {
	font-size: 10px;
}

.castProfileLink {
	display: inline-block;
	max-width: 100%;
	width: fit-content;
}

.castDirectoryFilter,
.scheduleDirectoryFilter {
	grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
	align-items: end;
	margin: 12px 0;
}

.castDirectoryList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.castDirectoryCard {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	min-width: 0;
}

.castDirectoryCard:hover {
	border-color: #d88dad;
	background: #fff6fa;
}

.castDirectoryPhoto {
	display: block;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.castDirectoryPhoto img,
.castDirectoryPhoto .castInitial {
	width: 100%;
	height: 100%;
	min-height: 164px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

.castDirectoryBody {
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
}

.castDirectoryHead {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.castDirectoryHead h3 {
	margin: 0 0 4px;
	color: #3f2b35;
	font-size: 18px;
	line-height: 1.2;
}

.castDirectoryHead h3 a {
	color: inherit;
	text-decoration: none;
}

.castDirectoryHead p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

.castDirectoryFacts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.castDirectoryFacts span {
	max-width: 100%;
	padding: 4px 8px;
	border: 1px solid #ecd0dc;
	border-radius: 999px;
	background: #fff9fb;
	color: #4b2f3d;
	font-size: 12px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.castDirectoryActions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
}

.castDirectoryActions .button {
	min-height: 38px;
	padding: 9px 12px;
	white-space: normal;
}

.castDirectoryActions > a:not(.button) {
	color: var(--brand);
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.castDetailHero {
	display: grid;
	grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
	grid-template-areas: "cast-image cast-body";
	gap: 18px;
	align-items: start;
}

.castDetailIntro {
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
}

.castDetailImage {
	grid-area: cast-image;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.castDetailImage img,
.castDetailImage .castInitial {
	width: 100%;
	height: 100%;
	min-height: 440px;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

.castDetailBody {
	grid-area: cast-body;
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
	padding: 0;
}

.castDetailIntro .heroLabel {
	justify-self: start;
	align-self: start;
	margin: 0;
}

.castDetailIntro h1 {
	margin: 0;
	color: #2b1521;
	font-size: 42px;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.castDetailIntro p {
	margin: 0;
	max-width: 720px;
	color: var(--muted);
	line-height: 1.65;
}

.castDetailFactChips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	padding-top: 2px;
}

.castDetailFactChips span {
	max-width: 100%;
	padding: 5px 9px;
	border: 1px solid #ecd0dc;
	border-radius: 999px;
	background: #fff9fb;
	color: #4b2f3d;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.castFactGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.castDetailActions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.castDetailActions .button {
	flex: 1 1 168px;
	min-width: 0;
	white-space: normal;
}

.castContactCta {
	flex-basis: 210px;
}

.castProfileSummary {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.profileRow {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.profileRow span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
}

.profileRow strong {
	min-width: 0;
	color: #2b1521;
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.compactSection {
	padding-top: 12px;
	padding-bottom: 12px;
}

.resultSummary {
	margin: 4px 0 0;
	color: #6b4c5c;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.45;
}

.castPager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.castPager > a,
.castPager > span {
	display: grid;
	gap: 4px;
	min-height: 58px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.castPager > a {
	color: inherit;
	text-decoration: none;
}

.castPager span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
}

.castPager b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--brand);
	font-size: 15px;
}

.scheduleList {
	display: grid;
	gap: 10px;
}

.scheduleRow {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.scheduleDateGroup {
	display: grid;
	gap: 8px;
}

.scheduleDateGroup + .scheduleDateGroup {
	margin-top: 12px;
}

.scheduleDateGroup h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 2px 2px 0;
	color: #6b3149;
	font-size: 14px;
	line-height: 1.25;
}

.scheduleDateGroup h3 span {
	flex: 0 0 auto;
	padding: 3px 8px;
	border: 1px solid #efc7d8;
	border-radius: 999px;
	background: #fff8fb;
	color: var(--brand);
	font-size: 11px;
	font-weight: 900;
}

.scheduleDateRows {
	display: grid;
	gap: 8px;
}

.scheduleCastImage {
	display: block;
	overflow: hidden;
	border-radius: 7px;
	color: inherit;
	text-decoration: none;
}

.scheduleCastImage img,
.scheduleCastImage .castInitial {
	width: 72px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 0;
	border-radius: 7px;
}

.scheduleRowBody {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.scheduleCastName {
	width: max-content;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--brand);
	font-weight: 900;
	text-decoration: none;
}

.scheduleCastFacts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

.scheduleCastFacts em {
	max-width: 100%;
	padding: 2px 6px;
	border: 1px solid #ecd0dc;
	border-radius: 999px;
	background: #fff9fb;
	color: #4b2f3d;
	font-size: 10px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.scheduleRowBody span,
.scheduleRowBody small {
	color: var(--muted);
	font-size: 13px;
}

.scheduleRowBody strong {
	color: #3f2b35;
	font-size: 15px;
}

.scheduleDirectoryLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.scheduleDirectoryLinks a {
	color: var(--brand);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.scheduleNotice {
	display: grid;
	gap: 5px;
	margin: 12px 0;
	padding: 13px;
	border: 1px solid #e8bdd0;
	border-radius: 8px;
	background: #fff7fb;
}

.scheduleNotice strong {
	color: #3f2b35;
}

.scheduleNotice span {
	color: var(--muted);
	font-size: 13px;
}

.scheduleFallbackCastBlock {
	display: grid;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.scheduleFallbackCastBlock h3 {
	margin: 0;
	color: #3f2b35;
	font-size: 16px;
	line-height: 1.3;
}

.scheduleFallbackCastBlock p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

.dualLinks {
	display: flex;
	gap: 14px;
	margin-top: 12px;
}

.areaContextGrid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
	gap: 12px;
}

.areaContextMain p {
	max-width: 760px;
	color: var(--muted);
}

.stackedLinks {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.stackedLinks a {
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--brand);
	font-weight: 900;
}

.subFeatureGrid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
	gap: 12px;
	align-items: stretch;
}

.subFeatureGrid.singleFocus {
	grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
}

.panelCopy {
	margin: 0 0 14px;
	color: var(--muted);
	line-height: 1.65;
}

.castDirectoryGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.castDirectorySlot {
	display: grid;
	align-content: center;
	gap: 6px;
	min-height: 84px;
	padding: 13px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.castDirectorySlot b {
	color: #4b2f3d;
	font-size: 14px;
}

.castDirectorySlot span {
	color: var(--muted);
	font-size: 13px;
}

.urlExample {
	margin: 12px 0;
	padding: 12px;
	border: 1px solid #e6bfd0;
	border-radius: 8px;
	background: var(--soft-blue);
	color: var(--brand);
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.timelineList {
	display: grid;
	gap: 10px;
}

.timelineList > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff9fb;
}

.timelineList b {
	color: #4b2f3d;
}

.timelineList span {
	color: var(--muted);
	font-size: 13px;
	text-align: right;
}

.couponBoard {
	display: grid;
	gap: 10px;
}

.couponBoard > div {
	display: grid;
	gap: 8px;
	padding: 16px;
	border: 1px dashed #e4b8ca;
	border-radius: 8px;
	background: #fff9fb;
}

.couponBoard strong {
	color: #4b2f3d;
	font-size: 16px;
}

.couponBoard span {
	color: var(--muted);
	line-height: 1.6;
}

.softEmptyBlock {
	display: grid;
	gap: 7px;
	padding: 16px;
	border: 1px dashed #e4b8ca;
	border-radius: 8px;
	background: #fff9fb;
}

.softEmptyBlock strong {
	color: #4b2f3d;
	font-size: 16px;
}

.softEmptyBlock span {
	color: var(--muted);
	line-height: 1.6;
}

.softEmptyActions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.softEmptyActions .button {
	min-height: 38px;
	padding: 8px 12px;
	font-size: 13px;
}

.priceTable {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.priceTable > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(96px, .45fr) minmax(112px, .55fr);
	gap: 10px;
	padding: 11px 12px;
	border-top: 1px solid var(--line);
	color: #5f4a56;
	font-size: 14px;
}

.priceTable > div:first-child {
	border-top: 0;
	background: var(--soft-blue);
	color: var(--brand);
	font-weight: 900;
}

.publicPriceTable > div:not(:first-child) {
	align-items: center;
	background: #fff;
}

.publicPriceTable strong,
.publicPriceTable small {
	display: block;
}

.publicPriceTable strong {
	color: var(--ink);
	font-size: 14px;
	line-height: 1.25;
}

.publicPriceTable small {
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.publicPriceTable .pricingMeta {
	display: inline-block;
	width: fit-content;
	margin-top: 6px;
	padding: 3px 7px;
	border: 1px solid #f2bdd2;
	border-radius: 999px;
	background: #fff4f8;
	color: #8a284f;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.2;
}

.publicPriceTable > div:not(:first-child) span:last-child {
	color: var(--brand);
	font-weight: 900;
}

.publicPriceTable > div:not(:first-child) span[data-label]::before {
	display: none;
	content: attr(data-label);
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.emptyState {
	display: block;
	padding: 12px;
	border: 1px dashed var(--line);
	border-radius: 7px;
	color: var(--muted);
}

.checkList {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.checkList span {
	position: relative;
	padding-left: 22px;
	color: #5f4a56;
	font-size: 14px;
}

.checkList span::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--success);
}

@media (max-width: 980px) {
	.rootHero,
	.infoHero,
	.rootGrid,
	.listingHeroGrid,
	.shopDetailHero,
	.shopMasthead,
	.castDetailHero,
	.shopDetailWorkArea,
	.shopFeatureRow,
	.shopDirectoryBridge,
	.detailInfoGrid,
	.detailContentGrid,
	.portalGrid,
	.areaContextGrid,
	.subFeatureGrid,
	.subFeatureGrid.singleFocus,
	.subPageGrid {
		grid-template-columns: 1fr;
	}

	.rootChoices,
	.rootCityGrid,
	.countryLaunchGrid,
	.directoryListGrid,
	.directoryListGrid.areas,
	.directoryListGrid.genres,
	.cityTabsWide,
	.shopSummaryTiles,
	.castFactGrid,
	.miniCastGrid,
	.castProfileGrid,
	.guideGrid,
	.infoGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.advancedSearch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.castDetailHero {
		grid-template-areas:
			"cast-intro"
			"cast-image"
			"cast-facts"
			"cast-actions";
		gap: 12px;
	}

	.castDetailBody {
		display: contents;
	}

	.castDetailIntro {
		grid-area: cast-intro;
	}

	.castFactGrid {
		grid-area: cast-facts;
	}

	.castDetailActions {
		grid-area: cast-actions;
	}
}

@media (max-width: 640px) {
	:where(section[id], div[id]) {
		scroll-margin-top: 150px;
	}

	.rootPage,
	.directoryPage,
	.shopDetailPage,
	.shopSubPage {
		width: calc(100% - 24px);
	}

	.rootHero,
	.infoHero,
	.listingHeroCard,
	.shopDetailCopy,
	.subPageHero {
		padding: 16px;
	}

	.rootHero h1,
	.infoHero h1,
	.listingHeroCard h1,
	.shopDetailCopy h1 {
		font-size: 37px;
		overflow-wrap: anywhere;
	}

	.subPageHero h1 {
		font-size: clamp(30px, 9vw, 35px);
		line-height: 1.06;
		overflow-wrap: break-word;
		word-break: keep-all;
	}

	.rootChoices,
	.rootCityGrid,
	.countryLaunchGrid,
	.directoryListGrid,
	.directoryListGrid.areas,
	.directoryListGrid.genres,
	.advancedSearch,
	.castDirectoryFilter,
	.scheduleDirectoryFilter,
	.cityTabsWide,
		.shopDirectoryBridgeLinks,
		.castPreviewGrid,
		.castDirectoryGrid,
		.castDirectoryList,
		.castFactGrid,
		.castPager,
		.miniCastGrid,
		.timelineList > div,
		.priceTable > div {
		grid-template-columns: 1fr;
	}

	.castProfileGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.castDirectoryCard {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 10px;
	}

	.castDirectoryPhoto img,
	.castDirectoryPhoto .castInitial {
		min-height: 136px;
	}

	.castDirectoryHead {
		display: grid;
		gap: 6px;
	}

	.castDirectoryHead h3 {
		font-size: 16px;
	}

	.castDirectoryFacts span {
		font-size: 11px;
	}

	.castProfileBody {
		gap: 5px;
		padding: 9px;
	}

	.castProfileBody h3 {
		font-size: 15px;
	}

	.castProfileBody p,
	.castProfileBody a {
		font-size: 12px;
	}

	.shopSummaryTiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.summaryTile {
		min-height: 66px;
	}

	.shopActionCard {
		grid-template-rows: auto auto;
	}

	.castDetailImage img,
	.castDetailImage .castInitial {
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.castDetailIntro h1 {
		font-size: 34px;
		overflow-wrap: break-word;
		word-break: keep-all;
	}

	.castPager {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.castPager > a,
	.castPager > span {
		min-height: 64px;
		padding: 10px;
		align-content: center;
	}

	.castPager b {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
	}

	.scheduleRow {
		grid-template-columns: 58px minmax(0, 1fr);
	}

	.scheduleCastImage img,
	.scheduleCastImage .castInitial {
		width: 58px;
	}

	.profileRow {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 8px;
		padding: 10px;
	}

	.shopActionCard .shopDetailImage {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.shopActionBody {
		padding: 14px 16px 16px;
	}

	.contactButton,
	.contactLink {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 4px;
	}

	.contactButton b,
	.contactLink b {
		width: 100%;
		text-align: left;
	}

	.shopSubNav {
		gap: 6px;
		margin-top: 12px;
		scroll-padding-inline: 10px;
	}

	.shopSubNav a {
		min-height: 38px;
		padding: 7px 12px;
		font-size: 13px;
	}

	.shopDetailPage .compactPath {
		display: none;
	}

	.shopFeatureRow {
		gap: 10px;
		padding: 15px 16px;
	}

	.shopFeatureHead {
		gap: 7px;
	}

	.shopFeatureHead p {
		line-height: 1.55;
	}

	.shopFeatureBody {
		gap: 8px;
	}

	.shopFeatureBody .placeholderList {
		gap: 0;
		padding: 10px 0 0;
		border-top: 1px solid var(--line);
	}

	.shopFeatureBody .placeholderRow {
		display: flex;
		align-items: baseline;
	}

	.shopFeatureBody .placeholderRow span {
		text-align: right;
	}

	.subFeatureGrid.singleFocus {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.publicPriceTable > div:first-child {
		display: none;
	}

	.publicPriceTable > div:not(:first-child) {
		gap: 8px;
		padding: 14px;
	}

	.publicPriceTable > div:not(:first-child) span[data-label] {
		display: grid;
		gap: 3px;
	}

	.publicPriceTable > div:not(:first-child) span[data-label]::before {
		display: block;
	}

	.placeholderRow {
		display: grid;
	}

	.advancedSearchActions {
		display: grid;
	}

	.placeholderRow span,
	.timelineList span {
		text-align: left;
	}

	.listingHead {
		display: grid;
	}

	.shopDetailImage {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	dl {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.quickLinkStrip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.quickLinkStrip,
	.areaMatrix,
	.genreRail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.quickLinkStrip a,
	.areaMatrix a,
	.genreCard {
		min-height: 64px;
	}

	.nav {
		scrollbar-width: thin;
	}

	.listingSearchFilter {
		grid-template-columns: 1fr;
		width: 100%;
	}
}