.bella-page {
	--bella-page-bg: #ffffff;
	--bella-sunken: #f5f7fa;
	--bella-ink: #16161a;
	--bella-body: #3f4045;
	--bella-muted: #6b6d72;
	--bella-line: #e6eaee;
	--bella-accent: var(--theme-color-text_link, #6f51c7);
	--bella-accent-dark: var(--theme-color-text_hover, #5f42b4);
	--bella-radius: 16px;
	--bella-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .12);

	/* One column, one measure. ~68ch is the comfortable reading width; the
	   page still spans wider for images and tables that need the room. */
	--bella-measure: 42rem;
}

/* ------------------------------------------------------------- the canvas -- */

body.bella-page,
.bella-page .page_content_wrap {
	background-color: var(--bella-page-bg);
}

/* Header bar and page share a white ground now, so it needs a hairline or the
   two dissolve into each other. */
.bella-page .sc_layouts_row {
	border-bottom: 1px solid var(--bella-line);
}

/* No padding-top here: the header is positioned "over" the page, and the
   theme reserves the room for it. Overriding that slides the title under the
   menu bar. */
.bella-page .page_content_wrap {
	padding-bottom: 4.5rem;
}

/* Sidebar is filtered out in PHP; this keeps the content column from staying
   at its two-column width if a layout still reserves the space. */
.bella-page .content {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	float: none;
}

.bella-page .post_content,
.bella-page .page_content {
	max-width: var(--bella-measure);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------- heading -- */

/* These pages hide the theme's page title and open with an <h1> inside the
   content instead, so both have to be styled. Left as display type it ran to
   56px of uppercase and took two lines before a word of content. */
.bella-page .post_header_single .post_title,
.bella-page .page_title,
.bella-page h1.post_title,
.bella-page .post_content > h1,
.bella-page .post_content > h1:first-child {
	max-width: var(--bella-measure);
	/* The header is positioned over the page and runs to two rows at some
	   widths; without this top margin the title slides underneath it. */
	margin: 3.5rem auto 1rem;
	color: var(--bella-ink);
	font-size: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: none;
}

/* A short accent rule under the title marks where the page proper begins. */
.bella-page .post_content > h1:first-child::after,
.bella-page .post_header_single::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	/* margin-left:0 keeps the rule flush with the left edge of the title;
	   `auto` would centre it under a left-aligned heading. */
	margin: 1.5rem auto 0 0;
	background-color: var(--bella-accent);
	border-radius: 999px;
}

/* ------------------------------------------------------------------- type -- */

.bella-page .post_content {
	color: var(--bella-body);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.bella-page .post_content p {
	margin: 0 0 1.25rem;
}

/* Imported content mixes centred and left-aligned paragraphs in the same
   section, which reads as a mistake rather than a choice. The centring is an
   inline style attribute, which outranks every selector — !important is the
   only way to reach it short of rewriting the stored content. */
.bella-page .post_content p[style*="text-align: center"],
.bella-page .post_content p[style*="text-align:center"],
.bella-page .post_content p.has-text-align-center {
	text-align: left !important;
}

.bella-page .post_content :is(h2, h3, h4, h5) {
	color: var(--bella-ink);
	font-weight: 650;
	letter-spacing: -.015em;
	text-transform: none;
}

/* Space belongs above a heading, tying it to the text it introduces rather
   than to the paragraph it follows. */
.bella-page .post_content h2 {
	margin: 3rem 0 1rem;
	font-size: 1.625rem;
	line-height: 1.25;
}

.bella-page .post_content h3 {
	margin: 2.25rem 0 .75rem;
	font-size: 1.3125rem;
	line-height: 1.3;
}

.bella-page .post_content h4 {
	margin: 1.75rem 0 .625rem;
	font-size: 1.125rem;
	line-height: 1.4;
}

.bella-page .post_content > :first-child {
	margin-top: 0;
}

.bella-page .post_content a:not(.button):not(.sc_button) {
	color: var(--bella-accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--bella-accent) 35%, transparent);
	text-underline-offset: .2em;
	transition: color .2s ease, text-decoration-color .2s ease;
}

.bella-page .post_content a:not(.button):not(.sc_button):hover {
	color: var(--bella-accent-dark);
	text-decoration-color: currentColor;
}

/* ----------------------------------------------------------------- images -- */

/* Images run wider than the text measure — a photo pinned to a 42rem column on
   a wide screen looks accidental. */
.bella-page .post_content :is(figure, .wp-block-image) {
	max-width: min(56rem, 100%);
	margin: 2.5rem auto;
}

.bella-page .post_content img {
	height: auto;
	border-radius: var(--bella-radius);
}

.bella-page .post_content figcaption,
.bella-page .post_content .wp-element-caption {
	margin-top: .75rem;
	color: var(--bella-muted);
	font-size: .875rem;
	line-height: 1.5;
	text-align: center;
}

.bella-page .post_content .bella-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem 1.25rem;
	/* Rows come out slightly taller than the cards' natural height, so the
	   cards are stretched to fill them: the leftover space then sits inside the
	   card as padding under the name, instead of as a gap between rows. */
	align-items: stretch;
	max-width: min(56rem, 100%);
	margin: 2.5rem auto 3rem;
}

/* Four people on a three-up grid leaves a lone card on row two. Two rows of
   two is the balanced reading of the same set. */
.bella-page .post_content .bella-cards[data-count="2"],
.bella-page .post_content .bella-cards[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bella-page .post_content .bella-card {
	display: flex;
	flex-direction: column;
	max-width: none;
	
	min-width: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
	text-align: center;
	background-color: var(--bella-page-bg);
	border: 1px solid var(--bella-line);
	border-radius: var(--bella-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, border-color .25s ease;
}

@media (hover: hover) {
	.bella-page .post_content .bella-card:hover {
		transform: translateY(-3px);
		border-color: transparent;
		box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 16px 32px -14px rgba(16, 24, 40, .2);
	}
}

.bella-page .post_content .bella-card img {
	width: 100%;
	/* The theme leaves images on content-box, so width:100% plus the padding
	   below made the photo wider than the card it sits in — which inflated the
	   grid row and left a gap under every card. */
	box-sizing: border-box;
	/* Flex items also default to min-height:auto; on a replaced element that is
	   its intrinsic height, which kept the row taller than the card at narrow
	   widths. */
	min-height: 0;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	/* contain, not cover: these are cut-out portraits — cropping them to fill a
	   square lops off heads. */
	object-fit: contain;
	object-position: center bottom;
	margin: 0;
	
	padding: 1.25rem 1.25rem 0;
	background-color: var(--bella-page-bg);
	border: 0;
	border-radius: 0;
}

.bella-page .post_content .bella-card figcaption {
	margin: 0;
	padding: 0 1rem 1.375rem;
	text-align: center;
	/* Sits right under the portrait; any slack the stretch adds falls below. */
	margin-bottom: auto;
	/* The theme caps figcaption at 84px with overflow:hidden for its image
	   caption overlays. Here that silently cut off the longer names. */
	height: auto;
	max-height: none;
	overflow: visible;
	position: static;
}

.bella-page .post_content .bella-card__name {
	display: block;
	color: var(--bella-ink);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.bella-page .post_content .bella-card__role {
	display: block;
	margin-top: .3125rem;
	color: var(--bella-muted);
	font-size: .875rem;
	line-height: 1.45;
}

/* Photo strips: runs of bare <img> that functions.php wraps in .bella-imagegrid.
   Left as-is they stack one per column-width — five photos, five screens. */
/* Flex rather than grid: a run of five photos leaves an odd one on the last
   row, and `justify-content: center` centres that remainder instead of
   stranding it against the left edge with a hole beside it. */
.bella-page .post_content .bella-imagegrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	
	width: min(1120px, calc(100vw - 3rem));
	max-width: none;
	margin: 2.5rem 0;
	margin-left: 50%;
	transform: translateX(-50%);
}

.bella-page .post_content .bella-imagegrid > * {
	/* Basis fits three across the content measure; max-width stops a two-photo
	   run from stretching each one over half the page. */
	flex: 1 1 320px;
	/* The 420px ceiling matters: a two-photo run would otherwise stretch each
	   thumbnail to 549px, and several of these source files are only 365px
	   wide — upscaling them just makes them soft. */
	max-width: min(420px, calc(50% - .625rem));
	/* Flex items default to min-width:auto, which for an image means its
	   intrinsic width. These photos range from 374px to 900px wide, so without
	   this the wide ones refuse to shrink and the rows come out ragged. */
	min-width: 0;
}

.bella-page .post_content .bella-imagegrid img {
	/* Source images differ slightly in ratio; a shared box keeps the rows
	   aligned instead of stair-stepping. */
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border-radius: 12px;
}

/* Each thumbnail is a link to the full-size file; trx_addons binds Magnific
   Popup to those automatically, giving a lightbox with prev/next for free. */
.bella-page .post_content .bella-imagegrid a {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	border-radius: 12px;
	cursor: zoom-in;
}

.bella-page .post_content .bella-imagegrid a img {
	border-radius: 0;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* A tint on hover is the only cue that these open; without it the cursor is
   the sole hint and touch users get none at all. */
.bella-page .post_content .bella-imagegrid a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(22, 22, 26, 0);
	transition: background-color .3s ease;
}

@media (hover: hover) {
	.bella-page .post_content .bella-imagegrid a:hover img {
		transform: scale(1.05);
	}

	.bella-page .post_content .bella-imagegrid a:hover::after {
		background-color: rgba(22, 22, 26, .12);
	}
}

.bella-page .post_content .bella-imagegrid a:focus-visible {
	outline: 2px solid var(--bella-accent);
	outline-offset: 3px;
}

/* Galleries: even columns with real gaps instead of the float grid. */
.bella-page .post_content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	max-width: min(56rem, 100%);
	margin: 2.5rem auto;
}

.bella-page .post_content .wp-block-gallery figure {
	margin: 0;
	max-width: none;
}

/* ------------------------------------------------------------------ lists -- */

.bella-page .post_content :is(ul, ol) {
	max-width: var(--bella-measure);
	margin: 0 auto 1.5rem;
	padding-left: 1.25rem;
}

.bella-page .post_content li {
	margin-bottom: .5rem;
	padding-left: .25rem;
}

.bella-page .post_content li::marker {
	color: var(--bella-accent);
}

/* ----------------------------------------------------------------- tables -- */

/* The pricing page is one long table; unstyled it is unreadable. */
.bella-page .post_content .wp-block-table,
.bella-page .post_content figure.wp-block-table {
	max-width: min(56rem, 100%);
	margin: 2.5rem auto;
	overflow-x: auto;
	border-radius: var(--bella-radius);
	border: 1px solid var(--bella-line);
	
	align-items: flex-start;
}

.bella-page .post_content table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .9375rem;
	/* Without `fixed`, the browser sizes columns by content and hands the price
	   column more room than the service names, which then wrap over five lines.
	   Fixed makes the widths set below actually apply. */
	table-layout: fixed;
}

/* No `position: sticky` here — the site header is already sticky, and a
   sticky table head slides underneath it. */
.bella-page .post_content thead th,
.bella-page .post_content tr:first-child th {
	padding: .9375rem 1.25rem;
	color: #ffffff;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	/* A dark head anchors the table. The previous near-white head on a white
	   page gave the whole thing nothing to sit on — it read as unfinished
	   rather than as a price list. */
	background-color: var(--bella-ink);
	border-bottom: 0;
}

/* The theme draws a box around every cell; only the horizontal rules earn
   their keep, and vertical borders on the head row alone made it read as a
   separate table from the body. */
.bella-page .post_content :is(th, td) {
	padding: .9375rem 1.25rem;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--bella-line);
	vertical-align: middle;
}

/* Column widths: the service name carries the most text and is what people
   read, so it gets the room. Left to itself the browser handed most of the
   width to the price column and wrapped service names over five lines. */
.bella-page .post_content table :is(th, td):first-child {
	width: 54%;
}

.bella-page .post_content table :is(th, td):nth-child(2) {
	width: 14%;
}

.bella-page .post_content table :is(th, td):nth-child(3) {
	width: 32%;
}

/* First column: the service being priced, and the thing people scan for. */
.bella-page .post_content tbody td:first-child {
	color: var(--bella-ink);
	font-weight: 500;
}

/* Second column ("2 hàm", "1 răng") is a qualifier, not information people
   look for — it recedes. */
.bella-page .post_content tbody td:nth-child(2) {
	color: var(--bella-muted);
	font-size: .875rem;
	white-space: nowrap;
}

/* Third column: the price. Tabular figures keep the digits in vertical
   columns so the numbers can be compared down the page. */
.bella-page .post_content tbody td:nth-child(3) {
	color: var(--bella-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Section headers ("TRÁM RĂNG", "NHỔ RĂNG") are ordinary rows whose last two
   cells are empty. Left unstyled they looked like a service with a missing
   price; as a tinted band they divide the list into readable sections. */
.bella-page .post_content tbody tr:has(td:nth-child(2):empty) td {
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
	color: var(--bella-accent);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background-color: color-mix(in srgb, var(--bella-accent) 7%, transparent);
	border-bottom-color: color-mix(in srgb, var(--bella-accent) 18%, transparent);
}

@supports not (background: color-mix(in srgb, red 7%, transparent)) {
	.bella-page .post_content tbody tr:has(td:nth-child(2):empty) td {
		background-color: #f4f1fc;
	}
}

.bella-page .post_content tbody tr:last-child td {
	border-bottom: 0;
}

/* Row hover only on the data rows — highlighting a section band does nothing
   useful and makes it look clickable. */
.bella-page .post_content tbody tr:not(:has(td:nth-child(2):empty)):hover td {
	background-color: color-mix(in srgb, var(--bella-accent) 4%, transparent);
}

/* ------------------------------------------------------------- quotes etc -- */

.bella-page .post_content blockquote {
	max-width: var(--bella-measure);
	margin: 2rem auto;
	padding: 1.25rem 1.5rem;
	color: var(--bella-ink);
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.6;
	background-color: var(--bella-sunken);
	border: 0;
	border-left: 3px solid var(--bella-accent);
	border-radius: 0 var(--bella-radius) var(--bella-radius) 0;
}

.bella-page .post_content blockquote p:last-child {
	margin-bottom: 0;
}

.bella-page .post_content hr {
	max-width: var(--bella-measure);
	margin: 3rem auto;
	background-color: var(--bella-line);
	border: 0;
	height: 1px;
}

/* Buttons keep the theme's shape but stop sitting flush against the text. */
.bella-page .post_content :is(.wp-block-button, .sc_button_wrap) {
	margin: 2rem 0;
}

/* ---------------------------------------------------------------- tablet --- */

@media (max-width: 1023px) {
	.bella-page .page_content_wrap {
		padding-top: 2.5rem;
		padding-bottom: 3rem;
	}

	.bella-page .post_content {
		font-size: 1rem;
	}

	.bella-page .post_content h2 {
		margin-top: 2.5rem;
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------- mobile --- */

@media (max-width: 639px) {
	.bella-page .page_content_wrap {
		padding-top: 2rem;
		padding-bottom: 2.5rem;
	}

	.bella-page .post_header_single::after {
		margin: 1.25rem auto 2rem;
	}

	.bella-page .post_content :is(figure, .wp-block-image) {
		margin: 1.75rem auto;
	}

	.bella-page .post_content h2 {
		margin-top: 2rem;
		font-size: 1.375rem;
	}

	.bella-page .post_content h3 {
		font-size: 1.1875rem;
	}

	/* An aspect-ratio here made the grid reserve rows taller than the cards at
	   this width, leaving a gap under each row. A fixed height sizes the row
	   predictably and keeps the portraits aligned. */
	.bella-page .post_content .bella-card img {
		aspect-ratio: auto;
		height: 170px;
		padding: 1rem 1rem 0;
	}

	/* The negative side margins were there to buy width for a table that had to
	   scroll. It fits now, so they only knock it out of alignment with the
	   text above it. */
	.bella-page .post_content :is(.wp-block-table, figure.wp-block-table) {
		margin-left: auto;
		margin-right: auto;
	}

	/* The wrapper is a flex column aligned to the start, so the table would sit
	   at its content width and leave a gap on the right. */
	.bella-page .post_content :is(.wp-block-table, figure.wp-block-table) > table {
		align-self: stretch;
	}

	/* Fit all three columns on a phone rather than forcing a sideways scroll to
	   reach the price — that is the column people came for. Tighter padding and
	   type buy the room; the price wraps to two lines where it must. */
	.bella-page .post_content table {
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		font-size: .8125rem;
	}

	.bella-page .post_content table :is(th, td) {
		padding: .75rem .625rem;
	}

	.bella-page .post_content table :is(th, td):first-child {
		width: 50%;
	}

	.bella-page .post_content table :is(th, td):nth-child(2) {
		width: 18%;
	}

	.bella-page .post_content table :is(th, td):nth-child(3) {
		width: 32%;
	}
}