/* ==========================================================================
   XBuilder Product Template — Visual Skins (BETA)
   Opt-in wrapper modifier classes (.xb-skin-soft / .xb-skin-bold /
   .xb-skin-editorial) set by XB_Post_Type::sanitize_template_style() via the
   _xb_template_style post meta. Every rule here is scoped under one of
   these classes, so a template with no style set (every hand-built template
   that predates this) renders exactly as before — nothing here touches the
   unscoped default selectors in frontend-blocks.css.
   ========================================================================== */

/* ---- Soft (Beauty & Skincare): rounded, airy, pastel ---------------------- */
.xb-skin-soft .xb-bg-card,
.xb-skin-soft .xb-fs-card,
.xb-skin-soft .xb-htu-card,
.xb-skin-soft .xb-trusted-expert-card,
.xb-skin-soft .xb-comparison-table,
.xb-skin-soft .xb-faq2-item {
	border-radius: 22px !important;
}

.xb-skin-soft .xb-bg-card,
.xb-skin-soft .xb-fs-card {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.xb-skin-soft .xb-bg-title,
.xb-skin-soft .xb-fs-heading,
.xb-skin-soft .xb-comparison-title,
.xb-skin-soft .xb-stats-title,
.xb-skin-soft .xb-htu-title,
.xb-skin-soft .xb-faq2-heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
}

.xb-skin-soft .xb-fs-cta,
.xb-skin-soft .xb-cta-scroll-btn,
.xb-skin-soft .xb-hero-banner-cta,
.xb-skin-soft .xb-sticky-bar-cta,
.xb-skin-soft .btn-title,
.xb-skin-soft .xb-btn-title {
	border-radius: 999px !important;
}

.xb-skin-soft .xb-image-split-section img,
.xb-skin-soft .xb-htu-image img,
.xb-skin-soft .xb-fs-media img {
	border-radius: 20px;
}

.xb-skin-soft .xb-wave-divider svg path {
	opacity: 0.9;
}

/* ---- Bold (Supplements): clinical, confident, high-contrast --------------- */
.xb-skin-bold .xb-bg-card,
.xb-skin-bold .xb-fs-card,
.xb-skin-bold .xb-htu-card,
.xb-skin-bold .xb-trusted-expert-card {
	border-radius: 6px !important;
	box-shadow: none !important;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
}

.xb-skin-bold .xb-comparison-table {
	border-radius: 6px !important;
}

.xb-skin-bold .xb-bg-title,
.xb-skin-bold .xb-fs-heading,
.xb-skin-bold .xb-comparison-title,
.xb-skin-bold .xb-stats-title,
.xb-skin-bold .xb-htu-title,
.xb-skin-bold .xb-faq2-heading,
.xb-skin-bold .xb-hero-banner-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.xb-skin-bold .xb-stat-value {
	font-weight: 900;
	letter-spacing: -0.02em;
}

.xb-skin-bold .xb-fs-cta,
.xb-skin-bold .xb-cta-scroll-btn,
.xb-skin-bold .xb-hero-banner-cta,
.xb-skin-bold .xb-sticky-bar-cta {
	border-radius: 6px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 800;
}

.xb-skin-bold .xb-image-split-section img,
.xb-skin-bold .xb-htu-image img,
.xb-skin-bold .xb-fs-media img {
	border-radius: 6px;
}

.xb-skin-bold .xb-fs-badge,
.xb-skin-bold .xb-hero-banner-badge {
	border-radius: 4px !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Editorial (Clothing & Apparel): high-contrast, minimal, fashion ------ */
.xb-skin-editorial .xb-bg-card,
.xb-skin-editorial .xb-fs-card,
.xb-skin-editorial .xb-htu-card,
.xb-skin-editorial .xb-trusted-expert-card,
.xb-skin-editorial .xb-comparison-table,
.xb-skin-editorial .xb-faq2-item {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.xb-skin-editorial .xb-bg-card,
.xb-skin-editorial .xb-fs-card {
	border: 1px solid rgba(0, 0, 0, 0.12);
	background-color: #ffffff !important;
}

.xb-skin-editorial .xb-bg-title,
.xb-skin-editorial .xb-fs-heading,
.xb-skin-editorial .xb-comparison-title,
.xb-skin-editorial .xb-stats-title,
.xb-skin-editorial .xb-htu-title,
.xb-skin-editorial .xb-faq2-heading,
.xb-skin-editorial .xb-hero-banner-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.xb-skin-editorial .xb-fs-cta,
.xb-skin-editorial .xb-cta-scroll-btn,
.xb-skin-editorial .xb-hero-banner-cta,
.xb-skin-editorial .xb-sticky-bar-cta {
	border-radius: 0 !important;
	background: transparent !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.xb-skin-editorial .xb-image-split-section img,
.xb-skin-editorial .xb-htu-image img,
.xb-skin-editorial .xb-fs-media img {
	border-radius: 0;
}

.xb-skin-editorial .xb-wave-divider {
	display: none;
}

.xb-skin-editorial .xb-fs-badge,
.xb-skin-editorial .xb-hero-banner-badge {
	border-radius: 0 !important;
	background: transparent !important;
	border: 1px solid currentColor;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}