/**
 * CHXN base — global typography + element resets. No page-builder to
 * fight anymore: hai-tra's version of this file spent most of its rules
 * out-!important-ing Flatsome's own dynamically-generated customizer CSS
 * (a "Site Width" formula that shrank the "row"/"container" classes by a
 * different amount depending on which row-type class combo matched).
 * This theme defines its own container/row classes directly instead —
 * there's no competing stylesheet generating conflicting values anymore,
 * so the value just IS var(--chxn-container), no !important needed.
 * Keep this file scoped to body-level rules only; component-specific
 * rules belong in components/*.css, page-specific rules in pages/*.css.
 */
body {
	font-family: var(--chxn-font);
	/* base copy color — headings (h1-h6 below) keep their own darker
	   --chxn-ink explicitly, this is just body/paragraph text. */
	color: var(--chxn-ink-2);
	background: var(--chxn-bg);
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--chxn-font);
	color: var(--chxn-ink);
	font-weight: 800;
	margin: 0;
}

a {
	color: var(--chxn-green-d);
	text-decoration: none;
}

/* the site's one standard content container (was fighting Flatsome's
   ".container-width,.container,.row" trio before — now just itself). */
.chxn-container {
	max-width: var(--chxn-container);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* on narrow phones this 20px is one of several stacked side margins
   (container → a section's own card padding → the product grid's own
   gap → the card's own internal padding) that together were eating a
   large share of a ~370-400px screen before any actual product content
   — narrowing every card enough to force titles/buttons into extra
   wrapped lines. Trimming this outermost layer gives every section
   real width back without touching the desktop/tablet look. */
@media (max-width: 850px) {
	.chxn-container {
		padding: 0 14px;
	}
}

/* pill buttons + inputs (design spec: buttons fully round, inputs 9px).
   "button"/"input[type=submit]"/".button" are kept as bare tag/WooCommerce-
   class selectors (not renamed to chxn-*) because WooCommerce core itself
   — independent of any theme — renders "class=\"button\"" on its own
   add-to-cart/checkout/pay markup; theme-authored buttons should use
   ".chxn-btn" instead, covered by the same rule below. */
.chxn-btn,
.button,
button,
input[type="submit"],
input[type="button"],
.wc-forward,
.added_to_cart {
	border-radius: var(--chxn-radius-pill) !important;
	font-family: var(--chxn-font);
	font-weight: 700;
	cursor: pointer;
}

/* solid-white / ghost-outline pill link-buttons — reused on any dark
   background across pages (home hero, about CTA band, ...), so they live
   here rather than in a single page's own CSS file. */
.chxn-btn-white,
.chxn-btn-ghost {
	text-decoration: none;
	border-radius: var(--chxn-radius-pill);
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
}
.chxn-btn-white {
	background: #fff;
	color: var(--chxn-green-d);
}
.chxn-btn-ghost {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .4);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	border-radius: var(--chxn-radius-input) !important;
	font-family: var(--chxn-font);
}

/* cards + product images: 14px card radius, 16px image radius, 1:1 crop.
   ".chxn-card" is the one generic card look reused by product cards,
   policy sections, etc — component/page CSS layers specifics on top. */
.chxn-card {
	border-radius: var(--chxn-radius-card);
	border: 1px solid var(--chxn-line);
	background: var(--chxn-card);
}

.chxn-img-square {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--chxn-radius-img);
}

/* WordPress's own classic-editor "[caption]" shortcode / image alignment
   classes ("wp-caption", "aligncenter", "alignleft", "alignright") — used
   throughout admin-authored content (blog posts, product descriptions,
   category descriptions) but a classic PHP theme gets ZERO built-in CSS
   for them from WordPress core itself (that's only auto-included for
   block themes) — this theme never defined any either, so two things
   broke wherever editors used them: the "[caption]" shortcode's own
   wrapping div carries an inline "style="width: Npx"" sized to the
   image's ORIGINAL pixel width, which happily overflowed past any
   container narrower than that (e.g. the product summary column) with no
   "max-width" to stop it; and even where it fit, a plain block-level div
   with a fixed width doesn't center itself without an explicit "margin:
   auto" — nothing here ever set one, so "aligncenter" was never actually
   centering anything. */
.wp-caption {
	max-width: 100%;
	box-sizing: border-box;
}
.wp-caption img {
	max-width: 100%;
	height: auto;
	display: block;
}
.wp-caption-text {
	text-align: center;
	font-size: 13px;
	color: var(--chxn-ink-2);
	margin: 8px 0 0;
}
.aligncenter,
.wp-caption.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
img.aligncenter,
img.alignleft,
img.alignright {
	max-width: 100%;
	height: auto;
}
.alignleft,
.wp-caption.alignleft {
	float: left;
	margin: 4px 20px 10px 0;
}
.alignright,
.wp-caption.alignright {
	float: right;
	margin: 4px 0 10px 20px;
}

/* shared floating confirmation toast (contact.dc.html's "toast" pattern) —
   reused by any "copy to clipboard" action across the site */
.chxn-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%) translateY(20px);
	z-index: 9999;
	background: var(--chxn-green-d);
	color: #fff;
	padding: 13px 24px;
	border-radius: var(--chxn-radius-pill);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(10, 40, 25, .4);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.chxn-toast.chxn-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}