/* One font for the whole product template, not per-section: most elements
   pick this up through ordinary inheritance, but headings and form controls
   don't reliably inherit — a `h1`-`h6` rule from another loaded stylesheet
   (WooCommerce/block-library) always beats an inherited value regardless of
   specificity, and browsers give `button`/`input`/`select`/`textarea` their
   own default font per their UA stylesheet instead of inheriting at all. So
   both are called out explicitly here rather than left to cascade down from
   individual sections (see the `.xb-hero-banner-cta` / `.xb-fs-card-title` /
   `.xb-fs-cta` overrides below, which predate this and are now redundant but
   harmless — this wrapper-level rule is what actually covers every section). */
.xb-product-template-wrapper,
.xb-product-template-wrapper h1,
.xb-product-template-wrapper h2,
.xb-product-template-wrapper h3,
.xb-product-template-wrapper h4,
.xb-product-template-wrapper h5,
.xb-product-template-wrapper h6,
.xb-product-template-wrapper button,
.xb-product-template-wrapper input,
.xb-product-template-wrapper select,
.xb-product-template-wrapper textarea {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.xb-product-template-wrapper {
	width: 100%;
	min-height: 100vh;
	background: var(--xb-premium-bg);
}

.xb-premium-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	background: #fff;
	border-bottom: 1px solid #eaeaea;
}

.xb-premium-header .xb-logo {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--xb-premium-accent);
}

.xb-premium-header .xb-nav {
	display: flex;
	gap: 30px;
}

.xb-premium-header .xb-nav a {
	text-decoration: none;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
}

.xb-premium-header .xb-header-icons {
	display: flex;
	gap: 15px;
	font-size: 18px;
}

.xb-promo-banner {
	background: var(--xb-premium-accent);
	color: #fff;
	text-align: center;
	padding: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Hero Section */
.xb-hero-container {
	max-width: 1200px;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	gap: 60px;
	padding: 0 20px;
	align-items: flex-start;
}

/* Both columns get the same flex-basis/max-width so the gallery and the
   text+form column stay visually balanced instead of the form column
   stretching to fill whatever space the capped gallery leaves behind. */
.xb-hero-gallery {
	flex: 1 1 460px;
	max-width: 480px;
	position: sticky;
	top: 20px;
}

/* Thumb rail on the left, main image filling the rest — matches the
   reference layout instead of a horizontal thumb row under the image. */
.xb-gallery-flex {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xb-main-image {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.xb-main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.xb-gallery-thumbs {
	display: flex;
	flex-direction: row;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.xb-gallery-thumbs::-webkit-scrollbar {
	display: none;
}

.xb-gallery-thumbs img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #e5e0d8;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
	opacity: 0.85;
}

.xb-gallery-thumbs img:hover {
	opacity: 1;
}

.xb-gallery-thumbs img.active {
	border-color: var(--xb-premium-accent);
	opacity: 1;
}

/* Small decorative benefit-icon column between the gallery and the form. */
.xb-hero-benefits {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 8px;
}

.xb-hero-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 84px;
	text-align: center;
}

.xb-hero-benefit-icon {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: color-mix(in srgb, var(--xb-premium-accent) 10%, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-hero-benefit-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.xb-hero-content {
	flex: 1 1 460px;
	max-width: 520px;
	min-width: 0;
	align-self: flex-start;
	position: sticky;
	top: 24px;
}

/* inline-flex, not flex: a block-level flex container stretches to the
   parent's full width even though its children (stars + count) only need a
   fraction of it, leaving a large invisible clickable/selectable strip after
   the text. inline-flex shrinks the box down to exactly what the content needs. */
.xb-hero-reviews-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 10px;
}

.xb-review-count {
	color: #666;
	font-size: 13px;
	margin-left: 6px;
}

.xb-hero-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Fixed, not vw-based: this column tops out at 520px (see
	   .xb-hero-content above) regardless of viewport width, so scaling off
	   the viewport overshot and made the title look oversized for its box. */
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 14px 0;
	line-height: 1.4;
	word-break: break-word;
}

.xb-hero-price {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.xb-hero-price del {
	color: #999;
	font-size: 18px;
	text-decoration: line-through;
	font-weight: 400;
}
.xb-hero-price ins {
	color: var(--xb-premium-text);
	font-weight: 800;
	text-decoration: none;
}

/* Offers */
.xb-hero-offers {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
}

.xb-offer-box {
	flex: 1;
	border: 2px solid #eaeaea;
	padding: 15px;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
}

.xb-offer-box.active {
	border-color: var(--xb-premium-accent);
	background: rgba(198, 156, 109, 0.05);
}

.xb-offer-title {
	font-weight: 700;
	font-size: 16px;
}

.xb-offer-price {
	color: #555;
	font-size: 14px;
}

/* Trust Badges */
.xb-hero-trust-badges {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	padding-top: 20px;
	border-top: 1px solid #eaeaea;
}

.xb-badge {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #444;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

/* Featured Review */
.xb-hero-featured-review,
.xb-hero-testimonial {
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	margin: 20px 0 0;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.xb-testimonial-slide {
	display: none;
}

.xb-testimonial-slide.active {
	display: block;
}

.xb-review-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
}

.xb-review-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.xb-review-name {
	font-weight: 700;
	font-size: 14px;
}

.xb-review-name span {
	display: block;
	color: var(--xb-premium-accent);
	font-size: 12px;
	font-weight: normal;
	margin-top: 2px;
}

.xb-review-stars {
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--xb-premium-accent);
	margin-bottom: 8px;
}

.xb-review-text {
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	margin: 0 0 10px;
}

/* Small inline pagination dots for the hero testimonial and ingredient
   spotlight carousels — deliberately not reusing `.xb-carousel-dots` /
   `.xb-dot` (the unrelated mobile-carousel overlay defined above, which is
   absolutely positioned and would break this inline layout). */
.xb-mini-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.xb-mini-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #e5e0d8;
	cursor: pointer;
}

.xb-mini-dot.active {
	background: var(--xb-premium-accent);
}

/* Cosmetic refill checkbox — purely visual, doesn't affect price/order. */
.xb-refill-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #444;
	margin-bottom: 12px;
	cursor: default;
}

/* Timeline */
.xb-hero-timeline {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	position: relative;
}

.xb-hero-timeline::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 30px;
	right: 30px;
	height: 2px;
	background: var(--xb-premium-accent);
	z-index: 0;
}

.xb-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	z-index: 1;
}

.xb-step span {
	width: 32px;
	height: 32px;
	background: var(--xb-premium-accent);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* Wide variant used by the results_timeline section, which sits on a
   brand-colored full-bleed background — the default accent-colored circle
   and connector line would disappear against a same-color background, so
   both flip to white/translucent-white here for contrast. */
.xb-timeline-wide {
	max-width: 900px;
	margin: 0 auto 30px;
	padding: 0 20px;
}

.xb-timeline-wide::before {
	background: rgba(255, 255, 255, 0.4);
}

.xb-timeline-wide .xb-step span {
	background: #fff;
}

.xb-timeline-wide .xb-step-timeframe {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
}

.xb-timeline-wide .xb-step-title {
	color: #fff;
	max-width: 140px;
}

/* Accordion */
.xb-hero-accordion details {
	border-bottom: 1px solid var(--xb-faq-accent, var(--xb-brand-color, #eaeaea));
	padding: 15px 0;
}

.xb-hero-accordion summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #111;
}

.xb-hero-accordion summary::after {
	content: '+';
	font-size: 24px;
	color: var(--xb-faq-accent, var(--xb-brand-color, #333));
}

.xb-hero-accordion details[open] summary::after {
	content: '-';
}

.xb-hero-accordion .details-content {
	padding-top: 15px;
	color: #555;
	line-height: 1.6;
	font-size: 14px;
}

.xb-faq-grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 60px;
}

.xb-faq-grid details {
	break-inside: avoid;
}

/* Sections */
.xb-marquee {
	/* Always LTR, even on an RTL page: .xb-marquee-content is an inline-flex
	   row animated with a leftward-only translateX() (see @keyframes marquee
	   below). Under direction:rtl, an inline-flex row's items anchor to the
	   RIGHT edge instead of the left, so the same leftward transform carries
	   the (now right-anchored) content straight past the visible/clipped
	   area after a single pass instead of looping — it reads as the section
	   scrolling once and then vanishing. Pinning direction:ltr here keeps the
	   flex anchor on the left, matching what the animation was authored for. */
	direction: ltr;
	background: var(--xb-brand-color, var(--xb-premium-brown));
	color: #fff;
	padding: 15px 0;
	overflow: hidden;
	white-space: nowrap;
}

.xb-marquee-content {
	display: inline-flex;
	align-items: center;
	animation: marquee 40s linear infinite;
	font-weight: 600;
	letter-spacing: 2px;
	font-size: 14px;
}

.xb-marquee-content span {
	margin: 0;
	white-space: pre;
}

.xb-marquee-content span.xb-bullet {
	margin: 0 30px;
}

@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Shared "label + heading [+ subheading]" header used by every narrative
   section below (problem grid, solution split, ingredients, timeline,
   reviews, proof, FAQ) so they read as one consistent system. */
.xb-narrative-header {
	max-width: 700px;
	margin: 0 auto 40px;
	padding: 0 20px;
	text-align: center;
}

.xb-narrative-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--xb-premium-accent);
	margin-bottom: 10px;
}

.xb-narrative-label--light {
	color: rgba(255, 255, 255, 0.75);
}

.xb-narrative-heading {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 10px;
	line-height: 1.3;
}

.xb-narrative-heading--light {
	color: #fff;
}

.xb-narrative-sub {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* Problem / signs grid */
.xb-problem-section {
	padding: 60px 20px;
	background: #fff;
}

.xb-problem-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.xb-problem-card {
	text-align: center;
	padding: 24px 16px;
	border: 1px solid #eee;
	border-radius: 10px;
}

.xb-problem-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--xb-premium-accent) 10%, #fff);
	margin-bottom: 14px;
}

.xb-problem-card h4 {
	margin: 0 0 8px;
	font-size: 15px;
}

.xb-problem-card p {
	margin: 0;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
}

/* Solution split (icon list + image, brand-color full-bleed) */
.xb-solution-section {
	padding: 60px 20px;
	color: #fff;
}

.xb-solution-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 60px;
}

.xb-solution-text {
	flex: 1 1 460px;
}

.xb-solution-inner .xb-narrative-heading {
	text-align: left;
}

.xb-solution-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 24px 0;
}

.xb-solution-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.xb-solution-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-solution-item h4 {
	margin: 0 0 4px;
	font-size: 15px;
}

.xb-solution-item p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
}

.xb-solution-guarantee {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	margin: 10px 0 0;
	text-align: center;
}

.xb-solution-image {
	flex: 1 1 380px;
}

.xb-solution-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* Ingredients diagram */
.xb-ingredients-section {
	padding: 60px 20px;
	background: #fff;
}

.xb-ingredients-grid {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 60px;
}

.xb-ingredient-card {
	flex: 1 1 360px;
	background: var(--xb-premium-bg);
	border-radius: 12px;
	padding: 24px;
}

.xb-ingredient-slide {
	display: none;
}

.xb-ingredient-slide.active {
	display: block;
}

.xb-ingredient-card h4 {
	margin: 0 0 8px;
	font-size: 17px;
}

.xb-ingredient-card p {
	margin: 0;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.xb-ingredient-card .xb-submit-btn {
	margin-top: 18px;
}

.xb-ingredients-visual {
	flex: 1 1 360px;
	text-align: center;
}

.xb-ingredients-visual img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.xb-ingredient-labels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.xb-ingredient-pill {
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--xb-premium-accent) 10%, #fff);
	color: var(--xb-premium-accent);
}

/* Reviews grid */
.xb-reviews-section {
	padding: 60px 20px;
	background: var(--xb-premium-bg);
}

.xb-reviews-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.xb-review-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.xb-review-card h4 {
	font-size: 14px;
	margin: 0 0 8px;
}

.xb-review-card .xb-review-name span {
	display: inline;
	margin-top: 0;
	margin-left: 6px;
}

.xb-review-stat {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eee;
	font-size: 12px;
	color: #666;
}

.xb-review-stat strong {
	color: var(--xb-premium-accent);
	font-size: 14px;
}

/* Proof / stats */
.xb-proof-section {
	padding: 60px 20px;
	color: #fff;
}

.xb-proof-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 60px;
}

.xb-proof-stats {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.xb-proof-stat {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.xb-proof-percent {
	font-size: 36px;
	font-weight: 800;
	flex: 0 0 auto;
}

.xb-proof-desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.5;
}

.xb-proof-section .xb-submit-btn {
	max-width: 260px;
	margin-top: 10px;
}

.xb-proof-image {
	flex: 1 1 340px;
}

.xb-proof-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* FAQ */
.xb-faq-section {
	padding: 48px 20px;
	background: #fff;
}

.xb-faq2-header {
	max-width: 700px;
	margin: 0 auto 28px;
	padding: 0 20px;
	text-align: center;
}

.xb-faq2-heading {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 12px;
	color: #1f2937;
}

.xb-faq2-highlight {
	color: var(--xb-brand-color, #1f2937);
}

.xb-faq2-sub {
	font-size: 17px;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}

.xb-faq2-list {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.xb-faq2-item {
	background: rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	padding: 2px 18px;
}

.xb-faq2-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
}

.xb-faq2-item summary::-webkit-details-marker {
	display: none;
}

.xb-faq2-number {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	color: #1f2937;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.xb-faq2-question {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	color: #000000;
}

.xb-faq2-toggle {
	flex: 0 0 auto;
	position: relative;
	width: 18px;
	height: 18px;
}

.xb-faq2-toggle::before,
.xb-faq2-toggle::after {
	content: '';
	position: absolute;
	background: #1f2937;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.xb-faq2-toggle::before {
	width: 14px;
	height: 2px;
}

.xb-faq2-toggle::after {
	width: 2px;
	height: 14px;
}

.xb-faq2-item[open] .xb-faq2-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.xb-faq2-answer {
	color: #555;
	line-height: 1.6;
	font-size: 14px;
	padding: 0 0 14px 42px;
	margin-top: -6px;
}

/* Footer */
.xb-premium-footer {
	background: #111111;
	color: rgba(255, 255, 255, 0.9);
	padding: 80px 40px 30px;
	position: relative;
	overflow: hidden;
}

/* Subtle gradient glow using brand color */
.xb-premium-footer::before {
	content: '';
	position: absolute;
	top: -150px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 300px;
	background: radial-gradient(ellipse at center, var(--xb-brand-color) 0%, transparent 70%);
	opacity: 0.15;
	pointer-events: none;
}

.xb-footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 60px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 50px;
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.xb-footer-brand h2 {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #fff;
	margin: 0 0 20px;
}

.xb-footer-desc {
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.65);
	max-width: 380px;
}

.xb-footer-links h4,
.xb-footer-contact h4 {
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #fff;
	margin: 0 0 24px;
	font-weight: 700;
}

.xb-footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.xb-footer-links li {
	margin-bottom: 16px;
}

.xb-footer-links a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	font-size: 15px;
	transition: all 0.2s ease;
	display: inline-block;
}

.xb-footer-links a:hover {
	color: var(--xb-brand-color, #f47290);
	transform: translateX(4px);
}

.xb-footer-contact p {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 16px;
}

.xb-footer-contact-icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--xb-brand-color, #f47290);
	background: rgba(255,255,255,0.05);
	padding: 8px;
	border-radius: 50%;
}

.xb-footer-bottom {
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	.xb-premium-header {
		flex-direction: column;
		gap: 15px;
	}

	.xb-promo-banner {
		font-size: 11px;
		padding: 8px;
	}

	/* Hero: stack gallery above content, full width, no sticky (sticky only
	   makes sense while the gallery scrolls past a shorter sidebar next to
	   it — once they're stacked in one column it just traps the form). */
	.xb-hero-container {
		flex-direction: column;
		gap: 20px;
		margin: 20px auto;
		padding: 0 12px;
	}
	.xb-hero-gallery {
		width: 100%;
		max-width: 100%;
		position: static; /* disable sticky on mobile */
	}

	.xb-hero-content {
		position: static;
		top: auto;
		width: 100%;
	}
	.xb-hero-title {
		font-size: 19px;
		margin-bottom: 10px;
	}
	.xb-hero-price {
		font-size: 18px;
		margin-bottom: 16px;
	}
	.xb-gallery-thumbs img {
		width: 48px;
		height: 48px;
	}

	/* Benefit icons: horizontal compact row under the gallery instead of a
	   vertical column, so it doesn't eat into the stacked mobile layout. */
	.xb-hero-benefits {
		flex-direction: row;
		justify-content: center;
		gap: 18px;
		padding-top: 0;
	}
	.xb-hero-benefit {
		width: auto;
	}
	.xb-hero-benefit-icon {
		width: 38px;
		height: 38px;
	}
	.xb-hero-benefit-label {
		font-size: 10px;
	}

	.xb-narrative-header {
		margin-bottom: 24px;
	}
	.xb-narrative-heading {
		font-size: 22px;
	}
	.xb-narrative-sub {
		font-size: 13px;
	}

	.xb-problem-section,
	.xb-solution-section,
	.xb-ingredients-section,
	.xb-timeline-section,
	.xb-reviews-section,
	.xb-proof-section {
		padding: 36px 16px;
	}

	.xb-faq-section {
		padding: 24px 10px;
	}

	.xb-problem-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.xb-problem-card {
		padding: 16px 10px;
	}
	.xb-problem-icon {
		width: 44px;
		height: 44px;
		margin-bottom: 10px;
	}

	.xb-solution-inner,
	.xb-ingredients-grid,
	.xb-proof-grid {
		flex-direction: column;
		gap: 24px;
	}
	.xb-solution-inner .xb-narrative-heading,
	.xb-solution-guarantee {
		text-align: center;
	}

	.xb-timeline-wide {
		padding: 0;
	}
	.xb-timeline-wide .xb-step-title {
		max-width: 90px;
		font-size: 11px;
	}

	.xb-reviews-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.xb-faq-grid {
		grid-template-columns: 1fr;
	}

	.xb-faq2-header {
		margin-bottom: 16px;
		padding: 0 6px;
	}
	.xb-faq2-heading {
		font-size: 20px;
		margin-bottom: 6px;
	}
	.xb-faq2-sub {
		font-size: 12px;
	}
	.xb-faq2-list {
		gap: 6px;
	}
	.xb-faq2-item {
		padding: 0 10px;
		border-radius: 8px;
	}
	.xb-faq2-item summary {
		gap: 8px;
		padding: 8px 0;
	}
	.xb-faq2-number {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
	.xb-faq2-question {
		font-size: 12px;
	}
	.xb-faq2-toggle {
		width: 12px;
		height: 12px;
	}
	.xb-faq2-toggle::before {
		width: 9px;
	}
	.xb-faq2-toggle::after {
		height: 9px;
	}
	.xb-faq2-answer {
		padding: 0 0 10px 28px;
		font-size: 11px;
	}

	/* Footer: single column, tighter spacing */
	.xb-premium-footer {
		padding: 36px 16px 16px;
	}
	.xb-footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-bottom: 24px;
	}
}

/* =========================================
   How To Use Section
   ========================================= */
.xb-how-to-use-section {
	padding: 60px 20px;
	background-color: #ffffff; /* White background matching image */
	text-align: center;
	width: 100%;
}

.xb-htu-header {
	margin-bottom: 50px;
}

.xb-htu-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: #333;
	margin: 0;
	font-family: Georgia, serif;
}

.xb-htu-title span {
	color: var(--xb-brand-color);
}

/* Progress Line Container */
.xb-htu-progress-container {
	position: relative;
	max-width: 800px;
	margin: 0 auto 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-htu-progress-line {
	position: absolute;
	top: 50%;
	left: 10%;
	right: 10%;
	height: 2px;
	background-color: var(--xb-brand-color);
	z-index: 1;
	transform: translateY(-50%);
}

.xb-htu-progress-dots {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 0 10%;
}

.xb-htu-dot {
	width: 40px;
	height: 40px;
	background-color: var(--xb-brand-color);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: bold;
	box-shadow: 0 2px 10px rgba(244, 114, 144, 0.4);
}

/* Grid Layout */
.xb-htu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.xb-htu-card {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.xb-htu-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background-color: #f0f0f0;
}

.xb-htu-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.xb-htu-info {
	padding: 0;
}

.xb-htu-step-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #333;
	margin: 0 0 8px 0;
}

.xb-htu-step-desc {
	font-size: 0.95rem;
	color: #666;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 992px) {
	.xb-htu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.xb-how-to-use-section {
		padding: 32px 16px;
	}
	.xb-htu-header {
		margin-bottom: 24px;
	}
	.xb-htu-grid {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 20px;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}
	.xb-htu-grid::-webkit-scrollbar {
		display: none;
	}
	.xb-htu-card {
		flex: 0 0 85%;
		scroll-snap-align: center;
	}
	.xb-htu-title {
		font-size: 1.75rem;
	}
	.xb-htu-dot {
		width: 30px;
		height: 30px;
		font-size: 1rem;
	}
	.xb-htu-progress-container {
		margin-bottom: 25px;
	}
}

/* =========================================
   Image Split Section
   ========================================= */
.xb-image-split-section {
	padding: 40px 20px;
	background-color: transparent; /* Unified background */
	width: 100%;
}

.xb-image-split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: stretch;
}

.xb-split-col {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background-color: #fcfcfc;
	display: flex;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle shadow like in the design */
}

.xb-split-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.xb-image-split-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Before / After Section
   ========================================= */

.xb-before-after-section {
	padding: 60px 20px;
	background-color: #ffffff;
	text-align: center;
}

.xb-before-after-title {
	font-size: 2rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 32px;
	font-family: Georgia, serif;
	line-height: 1.3;
}

.xb-ba-frame {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 4 / 3;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
}

.xb-ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.xb-ba-tag {
	position: absolute;
	top: 16px;
	z-index: 3;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--xb-ba-color, var(--xb-brand-color));
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.xb-ba-tag-before {
	left: 16px;
}

.xb-ba-tag-after {
	right: 16px;
}

.xb-ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-ba-handle::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: #ffffff;
	transform: translateX(-50%);
	box-shadow: 0 0 6px rgba(0,0,0,0.35);
}

.xb-ba-handle-grip {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	color: var(--xb-ba-color, var(--xb-brand-color));
	font-size: 16px;
}

@media (max-width: 768px) {
	.xb-before-after-section {
		padding: 32px 16px;
	}
	.xb-before-after-title {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	.xb-ba-frame {
		aspect-ratio: 1 / 1;
	}
}

/* =========================================
   Video Reel Section
   ========================================= */

.xb-video-reel-section {
	padding: 60px 20px;
	background-color: #ffffff;
	text-align: center;
}

.xb-video-reel-title {
	font-size: 2rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 32px;
	font-family: Georgia, serif;
	line-height: 1.3;
}

.xb-video-reel-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.xb-video-reel-item {
	flex: 1 1 220px;
	max-width: 240px;
	width: 100%;
}

.xb-video-reel-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	overflow: hidden;
	background-color: #111111;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.xb-video-reel-embed,
.xb-video-reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.xb-video-reel-fallback,
.xb-video-reel-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}

.xb-video-reel-play {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--xb-vr-color, var(--xb-brand-color));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.xb-video-reel-caption {
	margin: 10px 0 0;
	color: #555;
	font-size: 13px;
}

@media (max-width: 768px) {
	.xb-video-reel-section {
		padding: 32px 0;
	}
	.xb-video-reel-title {
		font-size: 1.5rem;
		margin-bottom: 20px;
		padding: 0 16px;
	}
	/* On mobile the row becomes a swipeable, one-glance-at-a-time carousel
	   instead of wrapping — native scroll-snap needs no JS. */
	.xb-video-reel-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 14px;
		padding: 4px 16px 8px;
		scrollbar-width: none;
	}
	.xb-video-reel-row::-webkit-scrollbar {
		display: none;
	}
	.xb-video-reel-item {
		flex: 0 0 auto;
		width: 72vw;
		max-width: 260px;
		scroll-snap-align: center;
	}
}

/* =========================================
   Benefits Grid Section
   ========================================= */
.xb-benefits-grid-section {
	padding: 60px 20px;
	background-color: #ffffff;
	text-align: center;
	width: 100%;
}

.xb-bg-header {
	margin-bottom: 50px;
}

.xb-bg-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: #333;
	margin: 0;
	font-family: Georgia, serif;
	line-height: 1.3;
}

.xb-bg-title span {
	color: var(--xb-brand-color);
}

.xb-bg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.xb-bg-card {
	background-color: color-mix(in srgb, var(--xb-brand-color) 10%, white); /* Soft pink matching the design */
	border-radius: 12px;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.3s ease;
}

.xb-bg-card:nth-child(even) {
	background-color: color-mix(in srgb, var(--xb-brand-color) 10%, white); /* Slightly peachier pink for alternating look if desired, though image is solid. I'll stick close to color-mix(in srgb, var(--xb-brand-color) 10%, white) */
}

.xb-bg-card:hover {
	transform: translateY(-5px);
}

.xb-bg-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-bg-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.xb-bg-icon-placeholder {
	width: 40px;
	height: 40px;
	background-color: var(--xb-brand-color);
	border-radius: 50%;
	opacity: 0.5;
}

.xb-bg-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 10px 0;
}

.xb-bg-card-desc {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 992px) {
	.xb-bg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.xb-benefits-grid-section {
		padding: 32px 16px;
	}
	.xb-bg-header {
		margin-bottom: 24px;
	}
	.xb-bg-card {
		padding: 20px 14px;
	}
}

@media (max-width: 576px) {
	.xb-bg-grid {
		grid-template-columns: 1fr;
	}
	.xb-bg-title {
		font-size: 1.75rem;
	}
}

/* =========================================
   Feature Showcase (badge + heading, a center photo flanked by two stacks
   of icon cards, outlined CTA below).
   ========================================= */
.xb-feature-showcase {
	/* Set once here rather than per-element: .xb-product-template-wrapper
	   carries no default font-family (only the older .xb-landing-page-wrapper
	   does), so anything under this section without its own font-family
	   would otherwise fall through to the browser's serif default instead
	   of matching the Cairo used by the Hero Banner section. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	padding: 60px 20px;
	background-color: #ffffff;
	border-top: 4px solid var(--xb-fs-accent, var(--xb-brand-color));
	text-align: center;
}

.xb-fs-header {
	margin-bottom: 40px;
}

.xb-fs-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.xb-fs-heading {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 2.4rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.25;
}

.xb-fs-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr minmax(280px, 480px) 1fr;
	align-items: center;
	gap: 30px;
}

.xb-fs-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	justify-content: center;
}

.xb-fs-media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.xb-fs-card {
	background-color: color-mix(in srgb, var(--xb-fs-accent, var(--xb-brand-color)) 8%, #fff);
	border-radius: 16px;
	padding: 24px 20px;
	text-align: center;
}

.xb-fs-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xb-fs-card-title {
	/* Explicit, not inherited: a `h4` rule from another loaded stylesheet
	   (WooCommerce/block-library) sets its own font with higher precedence
	   than inheritance from .xb-feature-showcase, regardless of specificity —
	   an inherited value always loses to any rule that directly targets the
	   element. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.xb-fs-card-desc {
	font-size: 0.9rem;
	color: #555;
	line-height: 1.5;
	margin: 0;
}

.xb-fs-footer {
	margin-top: 40px;
}

.xb-fs-cta {
	/* Explicit, not inherited: browsers' UA stylesheet gives <button> its own
	   default font rather than inheriting from the document, so this would
	   otherwise render in the system font (e.g. Arial) regardless of
	   .xb-feature-showcase's font-family. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 14px 36px;
	border-radius: 999px;
	border: 2px solid;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.xb-fs-cta:hover {
	transform: scale(0.96);
}

@media (max-width: 900px) {
	.xb-feature-showcase {
		padding: 36px 16px;
	}
	.xb-fs-header {
		margin-bottom: 24px;
	}
	.xb-fs-heading {
		font-size: 2rem;
	}
	.xb-fs-grid {
		grid-template-columns: 1fr;
	}
	.xb-fs-media {
		order: -1;
		max-width: 360px;
		margin: 0 auto 30px;
	}
	.xb-fs-col {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.xb-fs-card {
		flex: 1 1 240px;
		padding: 18px 16px;
	}
}

@media (max-width: 576px) {
	.xb-fs-heading {
		font-size: 1.6rem;
	}
	.xb-fs-badge {
		padding: 5px 12px;
		font-size: 10px;
	}
	.xb-fs-col {
		flex-direction: column;
	}
}

/* =========================================
   Rich Text (freeform WYSIWYG content — paragraphs, headings, lists, links —
   edited via the classic editor in the admin instead of a fixed card layout).
   ========================================= */
.xb-rich-text-section {
	padding: 60px 20px;
	background-color: #ffffff;
}

.xb-rich-text-content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.7;
	text-align: center;
}

.xb-rich-text-content > *:first-child {
	margin-top: 0;
}

.xb-rich-text-content > *:last-child {
	margin-bottom: 0;
}

.xb-rich-text-content h1,
.xb-rich-text-content h2,
.xb-rich-text-content h3,
.xb-rich-text-content h4,
.xb-rich-text-content h5,
.xb-rich-text-content h6 {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: inherit;
	font-weight: 800;
	line-height: 1.25;
	margin: 1.4em 0 0.6em;
}

.xb-rich-text-content h1 { font-size: 2.75rem; }
.xb-rich-text-content h2 { font-size: 2.25rem; }
.xb-rich-text-content h3 { font-size: 1.75rem; }
.xb-rich-text-content h4 { font-size: 1.4rem; }
.xb-rich-text-content h5 { font-size: 1.15rem; }
.xb-rich-text-content h6 { font-size: 1rem; }

.xb-rich-text-content p {
	margin: 0 0 1em;
}

.xb-rich-text-content ul,
.xb-rich-text-content ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.xb-rich-text-content li {
	margin-bottom: 0.4em;
}

.xb-rich-text-content a {
	/* currentColor, not a fixed brand color: this section's text color is
	   admin-configurable (e.g. white on a colored background band), and a
	   hardcoded link color could go invisible or clash against it. */
	color: inherit;
	text-decoration: underline;
}

.xb-rich-text-content blockquote {
	margin: 1.2em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid currentColor;
	color: inherit;
	opacity: 0.85;
	font-style: italic;
}

.xb-rich-text-content strong {
	font-weight: 800;
}

@media (max-width: 768px) {
	.xb-rich-text-section {
		padding: 32px 16px;
	}
	.xb-rich-text-content {
		font-size: 0.95rem;
	}
	.xb-rich-text-content h1 { font-size: 1.9rem; }
	.xb-rich-text-content h2 { font-size: 1.6rem; }
	.xb-rich-text-content h3 { font-size: 1.35rem; }
	.xb-rich-text-content h4 { font-size: 1.15rem; }
	.xb-rich-text-content h5 { font-size: 1.05rem; }
	.xb-rich-text-content h6 { font-size: 0.95rem; }
}

/* Hero Banner (marketing splash: rating badge, heading, CTA, a full-bleed
   photo pinned to the wave divider, wave divider into a "Featured On"
   press-logo strip). The photo is positioned absolutely so it can bleed to
   the section's own edges regardless of the padded content column next to
   it — on mobile it drops back into normal flow, after the content, via
   the DOM order (content markup comes first, media second) rather than a
   flex `order` override. */
.xb-hero-banner {
	position: relative;
	overflow: hidden;
}

.xb-hero-banner-inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 40px 60px;
}

.xb-hero-banner-content {
	max-width: 480px;
}

/* flex-wrap + min-width:0 on the text: flex items default to min-width:auto,
   which floors their size at the content's unwrapped intrinsic width — on a
   narrow viewport the long badge copy would rather overflow the section
   (and force page-wide horizontal scroll) than wrap onto a second line. */
.xb-hero-banner-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	max-width: 100%;
	margin-bottom: 22px;
}

.xb-hero-banner-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.xb-hero-banner-star-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.xb-hero-banner-star-tile svg {
	flex: 0 0 auto;
}

.xb-hero-banner-badge-text {
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1c3b45;
}

.xb-hero-banner-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 20px;
	overflow-wrap: break-word;
}

.xb-hero-banner-desc {
	font-size: 17px;
	line-height: 1.6;
	color: #1c3b45;
	max-width: 440px;
	margin: 0 0 30px;
}

.xb-hero-banner-cta {
	/* Explicit, not inherited: browsers' UA stylesheet gives <button> its own
	   default font rather than inheriting from the page. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #111;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 12px 30px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.1s ease;
}

.xb-hero-banner-cta:hover {
	transform: scale(0.96);
}

.xb-hero-banner-media {
	position: absolute;
	top: 0;
	right: max(20px, calc(50vw - 580px));
	bottom: 0;
	width: 45%;
	max-width: 500px;
	z-index: 1;
}

.xb-hero-banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

/* .xb-hero-banner-content is a plain block box (no float/width:100%), so under
   dir="rtl" it shifts to hug the RIGHT edge of .xb-hero-banner-inner (CSS
   auto-margin resolution is direction-aware) — colliding head-on with the
   photo, which is independently pinned to that same right edge via the
   physical `right:` offset above. Mirror the photo to the left instead so
   the two never occupy the same corner. */
[dir="rtl"] .xb-hero-banner-media {
	right: auto;
	left: max(20px, calc(50vw - 580px));
}

[dir="rtl"] .xb-hero-banner-img {
	object-position: left bottom;
}

.xb-wave-divider {
	display: block;
	line-height: 0;
	margin-top: -2px;
	position: relative;
	z-index: 2;
}

.xb-wave-divider .xb-wave-divider-svg {
	display: block;
	width: 100%;
	height: 80px;
}

.xb-featured-on-band {
	/* Always LTR — same reasoning as .xb-marquee above: the press-logo strip
	   animates with a leftward-only translateX() (see .xb-featured-on-scroll),
	   which only loops correctly when the flex row is left-anchored. */
	direction: ltr;
	padding: 22px 0 28px;
	overflow: hidden;
}

.xb-featured-on-label {
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.xb-featured-on-track {
	overflow: hidden;
	white-space: nowrap;
}

.xb-featured-on-scroll {
	display: inline-flex;
	align-items: center;
	animation: marquee 80s linear infinite;
}

/* Scoped under .xb-featured-on-band, not just .xb-featured-on-logo: WooCommerce's
   own `.woocommerce-page img{height:auto;max-width:100%}` is a compound selector
   (class+element) that outranks a single-class selector and loads after ours, so
   a bare `.xb-featured-on-logo{height:28px}` gets silently overridden — the logos
   blow up to fill the flex row instead of staying pinned to 28px. */
.xb-featured-on-band .xb-featured-on-logo {
	flex: 0 0 auto;
	width: auto;
	height: 40px;
	max-width: 160px;
	margin-right: 100px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

@media (max-width: 768px) {
	.xb-hero-banner-inner {
		text-align: center;
		padding: 20px 20px 0;
	}
	.xb-hero-banner-content {
		max-width: 100%;
	}
	.xb-hero-banner-badge {
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
	.xb-hero-banner-title {
		font-size: 32px;
	}
	.xb-hero-banner-desc {
		margin-left: auto;
		margin-right: auto;
	}
	/* Back in normal flow (not absolutely positioned over the content), and
	   after .xb-hero-banner-inner in the DOM, so it lands below the text
	   block/CTA and above the wave, matching the reference mobile order:
	   stars → heading → description → button → photo → wave. */
	.xb-hero-banner-media {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-top: 30px;
		overflow: hidden;
	}
	/* The container's height comes from `aspect-ratio`, not an explicit value —
	   browsers don't reliably treat that as "definite" for a normal-flow
	   child's `height:100%` to resolve against, so the photo (a replaced
	   element with its own intrinsic ratio) fell back to its intrinsic size
	   instead of filling the box, leaving a real gap above the wave.
	   Absolute positioning resolves against the containing block's padding
	   box unambiguously, so pin the photo with inset:0 instead. */
	.xb-hero-banner-media .xb-hero-banner-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	/* On desktop the photo is absolutely positioned and shares the section's
	   bottom edge with the wave, so the wave's SVG naturally overlaps the
	   photo and its transparent top portion (everything above the crest in
	   the viewBox) reveals the photo behind it. On mobile the photo is back
	   in normal flow above the wave instead, so that transparent portion
	   would otherwise reveal a plain strip of the section's own background
	   color — a visible gap between the photo and the wave crest. Pulling
	   the wave up to overlap the photo's bottom ~32px (80px rendered height
	   × the SVG's ~40% transparent share) recreates the same flush seam. */
	.xb-wave-divider {
		margin-top: -80px;
		position: relative;
		z-index: 2;
	}
	.xb-featured-on-band .xb-featured-on-logo {
		height: 32px;
		margin-right: 60px;
	}
}

/* Stats / Numbers block */
.xb-stats-section {
	padding: 60px 20px;
	background-color: #ffffff;
	text-align: center;
}

.xb-stats-title {
	font-size: 2rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 40px;
	font-family: Georgia, serif;
	line-height: 1.3;
}

.xb-stats-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	max-width: 900px;
	margin: 0 auto;
}

.xb-stat-item {
	flex: 1 1 160px;
	max-width: 220px;
}

.xb-stat-value {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 10px;
}

.xb-stat-label {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.xb-stats-section {
		padding: 32px 16px;
	}
	.xb-stats-title {
		font-size: 1.5rem;
		margin-bottom: 24px;
	}
	.xb-stats-grid {
		gap: 24px 16px;
	}
	.xb-stat-item {
		flex-basis: 40%;
	}
	.xb-stat-value {
		font-size: 2.2rem;
	}
}

/* Comparison Table block */
.xb-comparison-section {
	padding: 60px 20px;
	background-color: #fafafa;
}

.xb-comparison-header {
	text-align: center;
	margin-bottom: 36px;
}

.xb-comparison-title {
	font-size: 2rem;
	font-weight: 700;
	color: #222;
	margin: 0 0 10px;
	font-family: Georgia, serif;
	line-height: 1.3;
}

.xb-comparison-subtitle {
	font-size: 1rem;
	color: #666;
	max-width: 560px;
	margin: 0 auto;
}

.xb-comparison-table {
	max-width: 720px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.xb-comparison-row {
	display: grid;
	grid-template-columns: 1fr 140px 140px;
	align-items: center;
}

.xb-comparison-row:not(:last-child) {
	border-bottom: 1px solid #eee;
}

.xb-comparison-row-head {
	font-weight: 700;
	font-size: 0.9rem;
	color: #333;
}

.xb-comparison-cell {
	padding: 16px 12px;
	text-align: center;
}

.xb-comparison-cell-label {
	/* Logical property (not "left") so this reads correctly in dir="rtl"
	   templates too — see _xb_template_rtl. */
	text-align: start;
	font-size: 0.95rem;
	color: #333;
}

.xb-comparison-row-head .xb-comparison-cell-brand {
	color: var(--xb-ct-color);
}

.xb-comparison-cell-brand {
	background-color: color-mix(in srgb, var(--xb-ct-color) 8%, white);
}

.xb-comparison-cell svg {
	display: inline-block;
	vertical-align: middle;
}

.xb-comparison-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.xb-comparison-dot-no {
	background-color: #d5d5d5;
}

.xb-comparison-dot-yes-muted {
	background-color: #b8b8b8;
}

@media (max-width: 600px) {
	.xb-comparison-section {
		padding: 32px 16px;
	}
	.xb-comparison-row {
		grid-template-columns: 1fr 80px 80px;
	}
	.xb-comparison-cell {
		padding: 12px 6px;
	}
	.xb-comparison-title {
		font-size: 1.5rem;
	}
}