/**
 * CHXN layout — shared grid/container helpers used across multiple pages.
 * Page-specific grid tweaks belong in assets/css/pages/*.css instead.
 */
.chxn-section {
	max-width: var(--chxn-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* generic vertical section spacing — used by every static page built as
   a stack of "<section class="chxn-section-wrap"><div class="chxn-
   container">" blocks (front page, about, contact...). Belongs here
   (loaded on every page) rather than in any one page's own CSS file —
   it previously only lived in home.css, so any OTHER page using this
   same class (about.css/contact.css never redefined it) rendered with
   no vertical padding at all around its sections. home.css's own
   per-section modifier classes (".chxn-section-trust" etc.) still
   override this default for the front page's specific sections. */
.chxn-section-wrap {
	padding: 44px 0 8px;
}
/* every section's own bottom padding is deliberately thin (8px) since the
   NEXT section's own 44px top padding is what actually creates the
   visible gap between them — the very last section on a page has no
   such sibling to rely on, so it otherwise butts straight up against the
   footer. (Lower specificity than any page's own explicit last-section
   override, e.g. home.css's ".chxn-section-newsletter", so those still win.) */
main > section.chxn-section-wrap:last-of-type {
	padding-bottom: 44px;
}
/* a page built as many of these stacked sections (front page: hero,
   trust, categories, flash sale, bestsellers, news, newsletter) adds
   this same 44px top gap 6-7 times over on a long mobile scroll — on a
   desktop-width page that reads as generous breathing room, but on a
   phone it stacks into a lot of dead space between sections that are
   already full-bleed edge to edge. */
@media (max-width: 850px) {
	.chxn-section-wrap {
		padding: 26px 0 6px;
	}
	main > section.chxn-section-wrap:last-of-type {
		padding-bottom: 26px;
	}
}

.chxn-grid {
	display: grid;
	gap: 16px;
}

.chxn-badge-pill {
	display: inline-block;
	border-radius: var(--chxn-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 14px;
}