/*
Theme Name: SFD
Theme URI: https://superfastdiet.com
Author: SuperFastDiet
Author URI: https://superfastdiet.com
Description: A modern theme for SuperFastDiet with WooCommerce support
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sfd
Tags: e-commerce, woocommerce, custom-colors, custom-menu
*/

/* Import page-specific styles */
@import url('css/pages.css');

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */

/* Hero elements fade in once on page load using CSS animations.
   No JS needed — the animation runs automatically when the stylesheet loads.
   The sfd-hero-fade-in-left and sfd-hero-fade-in-right classes are hardcoded
   in blocks/sfd-hero/render.php on the content and media wrappers.
   Left content fades in together, right content fades in with a 0.3s delay. */
.sfd-hero-fade-in-left {
	opacity: 0;
	animation: sfd-hero-fade-in 0.6s ease-out 0.15s forwards;
}

.sfd-hero-fade-in-right {
	opacity: 0;
	animation: sfd-hero-fade-in 0.6s ease-out 0.45s forwards;
}

@keyframes sfd-hero-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Below-the-fold elements waiting to animate on scroll */
.sfd-animate-on-scroll {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Elements that are below the fold and waiting to be animated by JS */
.sfd-animate-on-scroll.sfd-waiting {
	opacity: 0;
	transform: translateY(30px);
}

/* Animated state when in viewport */
.sfd-animate-on-scroll.sfd-animated {
	opacity: 1;
	transform: translateY(0);
}

/* Ensure elements are visible in the block editor */
body.wp-admin .sfd-animate-on-scroll,
.editor-styles-wrapper .sfd-animate-on-scroll {
	opacity: 1 !important;
	transform: none !important;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sfd-animate-on-scroll,
	.sfd-hero-fade-in-left,
	.sfd-hero-fade-in-right {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* =============================================
   WORDPRESS BLOCK EDITOR OVERRIDES
   Remove default Gutenberg padding/margin/max-width
   so our custom sfd- sections render full-width
   ============================================= */
.wp-site-blocks,
.wp-block-group,
.wp-block-group__inner-container,
.entry-content,
.site-content,
body.wp-singular .wp-block-post,
.wp-block-template-part {
	/* Removed !important to allow custom block padding (e.g. .pillar, .container) to work */
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Ensure top-level containers still span full width */
.wp-site-blocks,
.entry-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Remove default WordPress block spacing */
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* =============================================
   GLOBAL CONTAINER
   Site-wide container (1280px max-width)
   ============================================= */
.sfd-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Fix Gutenberg button padding - make buttons less "fat" */
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link,
a.wp-element-button {
	padding: 10px 20px !important;
	line-height: 24px !important;
	height: auto !important;
	min-height: auto !important;
}

/* Ensure all button variants have consistent slim padding */
.sfd-btn,
.sfd-btn-primary,
.sfd-btn-secondary,
.sfd-btn-tertiary,
a.sfd-btn,
button.sfd-btn {
	padding: 10px 20px !important;
	line-height: 24px !important;
}

/* When wrapper div has button classes, target the inner link */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button,
.sfd-btn .wp-block-button__link,
.sfd-btn .wp-element-button,
.sfd-btn-primary .wp-block-button__link,
.sfd-btn-primary .wp-element-button,
.sfd-btn-secondary .wp-block-button__link,
.sfd-btn-secondary .wp-element-button,
.sfd-btn-tertiary .wp-block-button__link,
.sfd-btn-tertiary .wp-element-button,
.sfd-footer-join-btn .wp-block-button__link,
.sfd-footer-join-btn .wp-element-button {
	padding: 0 !important;
	line-height: 24px !important;
	height: auto !important;
	background: transparent !important;
}

/* Large button variant */
.sfd-btn-large {
	padding: 12px 24px !important;
}

.sfd-btn-large .wp-block-button__link,
.sfd-btn-large .wp-element-button {
	padding: 0 !important;
}

/* Hero buttons */
.sfd-btn-hero-primary {
	padding: 10px 20px !important;
}

.sfd-btn-hero-primary .wp-block-button__link,
.sfd-btn-hero-primary .wp-element-button {
	padding: 0 !important;
}

/* Respect our custom button styles when combined with Gutenberg classes */
.sfd-btn.wp-block-button__link,
.sfd-btn.wp-element-button,
.sfd-btn-primary.wp-block-button__link,
.sfd-btn-primary.wp-element-button,
.sfd-btn-tertiary.wp-block-button__link,
.sfd-btn-tertiary.wp-element-button {
	padding: 10px 20px !important;
	line-height: 24px !important;
}

/* Header buttons when scrolled */
.sfd-header.is-scrolled .wp-block-button__link,
.sfd-header.is-scrolled .wp-element-button,
.sfd-header.is-scrolled .sfd-btn,
.sfd-header.is-scrolled .sfd-btn .wp-block-button__link,
.sfd-header.is-scrolled .sfd-btn-primary .wp-block-button__link {
	padding: 8px 16px !important;
	line-height: 20px !important;
}

/* Prevent Gutenberg's contentSize from clipping our full-bleed sections */
.wp-block-group:not(.alignfull):not([class*="sfd-"]) > .wp-block-group__inner-container {
	max-width: none !important;
}

/* Ensure our html blocks (wp:html) render at full width */
.wp-block-html {
	max-width: none !important;
	width: 100% !important;
}

/* Remove default WordPress body/page top padding */
.wp-block-post-content,
.wp-block-page-content {
	padding: 0 !important;
}

/* Fix Gutenberg headings - remove extra padding/margin and normalize font-weight */
.wp-block-heading,
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
	padding: 0 !important;
	font-weight: 700 !important;
}

/* Gutenberg paragraph blocks inherit body font */
.wp-block-paragraph {
	font-family: 'Nunito', sans-serif !important;
}

/* Ensure all heading levels render at the same bold weight */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700 !important;
}

/* =============================================
   GLOBAL RESET & BASE
   ============================================= */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Smooth scrolling for anchor links */
html {
	scroll-behavior: smooth;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	margin: 0;
	padding: 0;
	color: #262626;
	line-height: 1.6;
	background: #fff;
}

img {
	max-width: 100%;
	height: auto;
}

/* =============================================
   SITE HEADER, matches Figma: white, 76px tall, bottom border
   ============================================= */
.sfd-header {
	background: #ffffff;
	border-bottom: 1px solid #f0f0f0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99990;
	padding: 0 40px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Become fixed when user scrolls past the header */
.sfd-header.is-scrolled {
	position: fixed;
	border-color: transparent;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(0);
}

.sfd-header.is-hidden {
	position: fixed;
	transform: translateY(-100%);
}

/* Push page content below the fixed header.
   Header is 76px on desktop, 64px on mobile (<768px).
   Admin bar is 32px on desktop, 46px on mobile (<782px).
   When the promo ticker is present, additional padding is added
   by inline CSS injected via blocks/sfd-promo-ticker/render.php. */
.wp-site-blocks {
	padding-top: 76px;
}

@media screen and (max-width: 768px) {
	.wp-site-blocks {
		padding-top: 64px;
	}
}

body.admin-bar .wp-site-blocks {
	padding-top: 77px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks {
		padding-top: 110px; /* 64 + 46 */
	}
}

/* Offset fixed header below the WP admin bar */
body.admin-bar .sfd-header {
	top: 32px;
}

body.admin-bar .sfd-header.is-hidden {
	top: 0;
}

@media screen and (max-width: 782px) {
	body.admin-bar .sfd-header {
		top: 46px;
	}

	body.admin-bar .sfd-header.is-hidden {
		top: 0;
	}
}

.sfd-header-inner {
	max-width: none;
	width: 100%;
	margin: 0;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 0;
	transition: height 0.3s ease, gap 0.3s ease;
}

/* Optional site setting: narrow header mode (centered container) */
body.sfd-layout-narrow .sfd-header-inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Compressed header when scrolled */
.sfd-header.is-scrolled .sfd-header-inner {
	height: 56px;
	gap: 24px;
}

/* Logo, tri-colour "superfastdiet" */
.sfd-logo {
	text-decoration: none;
	font-family: 'Nunito', sans-serif;
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -0.48px;
	line-height: 1;
	flex-shrink: 0;
	transition: font-size 0.3s ease, letter-spacing 0.3s ease;
}

.sfd-header.is-scrolled .sfd-logo {
	font-size: 19px;
	letter-spacing: -0.38px;
}
.sfd-logo .logo-super { color: #6EC40B; }
.sfd-logo .logo-fast  { color: #FBAB04; }
.sfd-logo .logo-diet  { color: #F34188; }

/* Nav links, wp_nav_menu outputs <ul class="sfd-nav"><li><a> */
.sfd-nav,
.sfd-nav-submenu {
	display: flex;
	flex-direction: row;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.sfd-nav li {
	margin: 0;
	padding: 0;
}

.sfd-nav a {
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #646464;
	text-decoration: none;
	padding: 6px 16px;
	transition: color 0.15s, font-size 0.3s ease, padding 0.3s ease;
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
}

.sfd-nav-submenu a {
	align-items: flex-start;
	padding: 16px;
}


.sfd-header.is-scrolled .sfd-nav a {
	font-size: 14px;
	padding: 4px 12px;
}

.sfd-nav a:hover {
	background: #f3ffe64a;
	color: #325D00;
	border-radius: 10px;
	border: 1px solid rgba(86, 158, 3, 0.15);
}

/* Active / current page nav item, soft green pill */
.sfd-nav li.current-menu-item > a,
.sfd-nav li.current-page-ancestor > a,
.sfd-nav li.current-menu-ancestor > a {
	background: #E8F5D0;
	color: #325D00 !important;
	border-radius: 10px;
}

.sfd-nav li.current-menu-item > a:hover,
.sfd-nav li.current-page-ancestor > a:hover,
.sfd-nav li.current-menu-ancestor > a:hover {
	background: #ddf0c0;
}

/* Header action buttons group */
.sfd-header-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Cart icon button */
.sfd-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: #646464;
	text-decoration: none;
	transition: color 0.15s, background 0.15s, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
	flex-shrink: 0;
}

.sfd-header.is-scrolled .sfd-cart-btn {
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.sfd-cart-btn:hover {
	color: #262626;
	background: #f3f3f3;
}

.sfd-cart-icon {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* Item count badge */
.sfd-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9999px;
	background: #F34188;
	color: #ffffff;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}

/* Button base */
.sfd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s, box-shadow 0.15s;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

/* Header buttons compress on scroll */
.sfd-header .sfd-btn {
	transition: opacity 0.15s, box-shadow 0.15s, font-size 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
}

.sfd-header.is-scrolled .sfd-btn {
	font-size: 14px;
	line-height: 20px;
	padding: 8px 16px;
	border-radius: 10px;
}

.sfd-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,0.45) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
}

.sfd-btn:hover::after {
	animation: sfd-btn-flash 0.5s ease forwards;
}

@keyframes sfd-btn-flash {
	0%   { left: -75%; }
	100% { left: 125%; }
}

.sfd-btn:hover { opacity: 0.9; }

/* Primary green button */
.sfd-btn-primary {
	background: #8CD933;
	color: #262626;
	border: 2px solid transparent;
	box-shadow: 0 1px 2px rgba(10,13,18,0.05);
}

/* Secondary outlined button, green border, transparent fill */
.sfd-btn-secondary {
	background: transparent;
	color: #325D00;
	border: 2px solid #56990F;
	box-shadow: none;
}

/* Orange outlined button, white bg, orange border + text */
.sfd-btn-orange {
	background: #ffffff;
	color: #D7811A;
	border: 2px solid #F9B233;
	box-shadow: none;
}

.sfd-btn-orange:hover {
	background: #FFF5E2;
	border-color: #D7811A;
	color: #B56A0E;
}

/* Tertiary white + green border button */
.sfd-btn-tertiary {
	background: transparent;
	color: #325D00;
	border: 1px solid #56990F;
	box-shadow: none;
}

/* Force transparent background on inner Gutenberg button elements for tertiary */
.sfd-btn-tertiary .wp-block-button__link,
.sfd-btn-tertiary .wp-element-button,
.sfd-btn-tertiary.wp-block-button__link,
.sfd-btn-tertiary.wp-element-button {
	background: transparent !important;
	color: #325D00 !important;
}

/* Welcome user section (when logged in) */
.sfd-welcome-user {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Nunito', sans-serif;
	flex-shrink: 0;
}

.sfd-welcome-text {
	font-weight: 600;
	font-size: 16px;
	color: #646464;
	white-space: nowrap;
	transition: font-size 0.3s ease;
}

.sfd-header.is-scrolled .sfd-welcome-text {
	font-size: 14px;
}

.sfd-dashboard-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	background: #8CD933;
	color: #262626;
	border: 2px solid transparent;
	box-shadow: 0 1px 2px rgba(10,13,18,0.05);
	white-space: nowrap;
	transition: opacity 0.15s, box-shadow 0.15s, font-size 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.sfd-dashboard-link::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255,255,255,0.45) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
}

.sfd-dashboard-link:hover::after {
	animation: sfd-btn-flash 0.5s ease forwards;
}

.sfd-dashboard-link:hover {
	opacity: 0.9;
}

.sfd-header.is-scrolled .sfd-dashboard-link {
	font-size: 14px;
	line-height: 20px;
	padding: 8px 16px;
	border-radius: 10px;
}

/* =============================================
   MOBILE MENU (HAMBURGER)
   ============================================= */

/* Hamburger button - hidden on desktop, shown on mobile */
.sfd-burger {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 1001;
	transition: transform 0.3s ease;
}

.sfd-burger-line {
	width: 24px;
	height: 2px;
	background: #262626;
	border-radius: 2px;
	transition: all 0.3s ease;
	transform-origin: center;
}

/* Hide the hamburger button when mobile menu is open (close button inside menu handles it) */
body.mobile-menu-open .sfd-burger:not(.sfd-burger--close) {
	display: none;
}

/* Mobile menu overlay - Full screen with centered content */
.sfd-mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

body.mobile-menu-open .sfd-mobile-menu {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile menu top bar: logo left, close button right */
.sfd-mobile-topbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	flex-shrink: 0;
}

/* Mobile menu inner container - full screen overlay */
.sfd-mobile-menu-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 24px 24px 40px;
	overflow-y: auto;
	gap: 20px;
}

/* Add top padding when WordPress admin bar is present (32px) */
body.admin-bar .sfd-mobile-menu-inner {
	padding-top: 56px; /* 32px admin bar + 24px spacing */
}

/* At 768px and below */
@media screen and (max-width: 768px) {
	.sfd-mobile-menu-inner {
		padding-top: 24px;
	}
	
	body.admin-bar .sfd-mobile-menu-inner {
		padding-top: 70px; /* 46px admin bar (mobile) + 24px spacing */
	}
}

/* Mobile menu logo - same size as desktop logo */
.sfd-mobile-logo {
	text-decoration: none;
	font-family: 'Nunito', sans-serif;
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -0.48px;
	line-height: 1;
	flex-shrink: 0;
}

.sfd-mobile-logo .logo-super { color: #6EC40B; }
.sfd-mobile-logo .logo-fast  { color: #FBAB04; }
.sfd-mobile-logo .logo-diet  { color: #F34188; }

/* Close button inside mobile menu top bar */
.sfd-burger--close {
	display: flex !important;
	position: relative;
	z-index: 1002;
}

/* Transform hamburger lines into X when menu is open */
body.mobile-menu-open .sfd-burger--close .sfd-burger-line:nth-child(1) {
	transform: rotate(45deg) translate(3px, 3px);
}

body.mobile-menu-open .sfd-burger--close .sfd-burger-line:nth-child(2) {
	opacity: 0;
}

body.mobile-menu-open .sfd-burger--close .sfd-burger-line:nth-child(3) {
	transform: rotate(-45deg) translate(3px, -3px);
}

@keyframes sfd-mobile-menu-fadein {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile nav — the UL that wp_nav_menu wraps menu items in.
   Without this base block, the UL fell back to browser defaults
   (bullets + 40px left padding + line-height-only spacing), which is
   what made the mobile menu look "stuffed". */
.sfd-mobile-nav,
.sfd-mobile-nav ul,
.sfd-mobile-nav li {
	list-style: none !important;
	padding-left: 0 !important;
}
.sfd-mobile-nav,
.sfd-mobile-nav ul {
	margin: 0;
	padding: 0;
}

.sfd-mobile-nav {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sfd-mobile-nav li {
	display: block !important;
	margin: 0;
	width: 100%;
	list-style: none !important;
	animation: sfd-mobile-item-in 0.4s ease both;
}


/* Staggered animation for menu items */
.sfd-mobile-nav li:nth-child(1) { animation-delay: 0.1s; }
.sfd-mobile-nav li:nth-child(2) { animation-delay: 0.15s; }
.sfd-mobile-nav li:nth-child(3) { animation-delay: 0.2s; }
.sfd-mobile-nav li:nth-child(4) { animation-delay: 0.25s; }
.sfd-mobile-nav li:nth-child(5) { animation-delay: 0.3s; }
.sfd-mobile-nav li:nth-child(6) { animation-delay: 0.35s; }

@keyframes sfd-mobile-item-in {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.sfd-mobile-nav a {
	display: block;
	padding: 14px 16px;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: #2D3748;
	text-decoration: none;
	background: #f8f9fa;
	border: 1px solid #eee;
	border-radius: 12px;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sfd-mobile-nav a:hover {
	background: #FFF0F4;
	color: #EE728E;
	border-color: rgba(238, 114, 142, 0.35);
}

.sfd-mobile-nav li.current-menu-item > a {
	background: rgba(238, 114, 142, 0.08);
	color: #6ec40b;
	border-color: rgba(238, 114, 142, 0.3);
}

/* Hide dropdown triangle, sub-items are always visible on mobile */
.sfd-mobile-nav .sfd-nav-triangle {
	display: none;
}

/* Mega panels shown inline on mobile */
.sfd-mobile-nav .sfd-mega-panel {
	display: block !important;
	position: static !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	height: auto !important;
	overflow: visible !important;
	animation: none !important;
	padding: 8px 0 0;
	margin: 0;
}

.sfd-mobile-nav .sfd-mega-panel-inner {
	max-width: 100%;
	padding: 0;
	height: auto;
	display: block;
}

.sfd-mobile-nav .sfd-mega-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.sfd-mobile-nav .sfd-mega-card {
	flex-direction: column;
	padding: 12px 14px;
	border-right: none !important;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fff;
	gap: 0;
}

.sfd-mobile-nav .sfd-mega-card-image {
	display: none;
}

.sfd-mobile-nav .sfd-mega-card-title {
	font-size: 13px;
	font-weight: 700;
	color: #2D3748;
	margin: 0 0 4px;
}

.sfd-mobile-nav .sfd-mega-card-desc {
	font-size: 12px;
	color: #718096;
	margin: 0;
}

.sfd-mobile-nav .sfd-mega-card-cta {
	display: none;
}

/* Regular submenus as 2×2 grid on mobile */
.sfd-mobile-nav .sfd-nav-submenu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 8px 0 0;
	margin: 0;
	list-style: none;
}

.sfd-mobile-nav .sfd-nav-submenu li {
	margin: 0;
	width: auto;
}

.sfd-mobile-nav .sfd-nav-submenu a {
	font-size: 14px;
	padding: 10px 12px;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
	overflow: hidden;
}

/* Responsive breakpoint */
@media (max-width: 1080px) {
	/* Show hamburger button on mobile */
	.sfd-burger {
		display: flex;
	}

	/* Hide desktop navigation on mobile */
	.sfd-nav {
		display: none !important;
	}

	/* Show mobile menu structure */
	.sfd-mobile-menu {
		display: block;
	}

	/* Adjust header buttons on mobile */
	.sfd-header-buttons {
		gap: 6px;
	}

	.sfd-header-buttons .sfd-btn {
		font-size: 13px;
		padding: 7px 12px;
		border-radius: 10px;
	}

	.sfd-burger {
		width: 36px;
		height: 36px;
		padding: 6px;
	}

	.sfd-cart-btn {
		width: 36px;
		height: 36px;
	}

	.sfd-cart-icon {
		width: 20px;
		height: 20px;
	}

	/* On very narrow screens, shrink buttons further so the hamburger doesn't overflow */
	@media (max-width: 600px) {
		.sfd-header {
			padding: 0 16px;
		}

		.sfd-header-buttons {
			gap: 4px;
		}

		.sfd-header-buttons .sfd-btn {
			font-size: 11px;
			padding: 5px 8px;
			border-radius: 8px;
		}

		.sfd-burger {
			width: 30px;
			height: 30px;
			padding: 5px;
		}

		.sfd-burger-line {
			width: 18px;
		}


		.sfd-cart-btn {
			width: 30px;
			height: 30px;
		}

		.sfd-cart-icon {
			width: 16px;
			height: 16px;
		}
	}

	/* Keep user badge visible on mobile, but hide text - only show avatar */
	.sfd-user-badge {
		display: inline-flex !important;
		padding: 4px !important;
		min-width: 32px;
		height: 32px;
	}
	
	.sfd-user-badge span {
		display: none !important;
	}
	
	.sfd-user-badge img {
		width: 24px !important;
		height: 24px !important;
	}

	/* Small grey circular placeholder when avatar is not available */
	.sfd-user-badge-placeholder {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #e0e0e0;
		display: inline-block;
		flex-shrink: 0;
	}
}


/* =============================================
   HERO SECTION, matches Figma exactly
   ============================================= */
.sfd-hero {
	background: #ffffff;
	padding: 80px 80px 96px;
	min-height: 45vh;
	display: flex;
	align-items: center;
}

.sfd-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}

/* Left: content */
.sfd-hero-content {
	display: flex;
	flex-direction: column;
}

/* Social proof row */
.sfd-social-proof {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}

.sfd-stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

.sfd-star {
	width: 16px;
	height: 16px;
	fill: #F9B233;
}

.sfd-rating-text {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #262626;
	line-height: 20px;
	margin-left: 8px;
}

.sfd-divider-v {
	width: 1px;
	height: 16px;
	background: #d9d9d9;
}

.sfd-reviews-text {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #262626;
	line-height: 20px;
}

/* Headline */
.sfd-hero-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 54px;
	line-height: 56px;
	letter-spacing: -1.08px;
	color: #262626;
	margin: 0 0 20px;
}

/* Subtext */
.sfd-hero-subtext {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #646464;
	margin: 0 0 32px;
	max-width: 515px;
}

.sfd-hero-subtext strong {
	font-weight: 800;
	color: #646464;
}

/* Hero buttons */
.sfd-hero-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sfd-btn-hero-primary {
	min-width: 240px;
	font-size: 16px;
	padding: 10px 20px;
}

/* Right: image composition, single Figma-exported PNG */
.sfd-hero-image {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.sfd-hero-image img {
	width: 100%;
	height: auto;
	max-width: 624px;
	display: block;
}

/* Round grey placeholder, shown when no hero image is set */
.sfd-hero-placeholder-circle {
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: #e8e8e8;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.sfd-hero-placeholder-circle {
		width: 360px;
		height: 360px;
	}
}

@media (max-width: 768px) {
	.sfd-hero-placeholder-circle {
		display: none;
	}
}

/* =============================================
   AS SEEN ON STRIP
   ============================================= */
.sfd-media-strip {
	background: #ffffff;
	padding: 24px 80px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}

.sfd-media-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
}

.sfd-media-label {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #aaaaaa;
	white-space: nowrap;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

/* Pink pulsing dot */
.sfd-media-label-badge {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #F34188;
	flex-shrink: 0;
	position: relative;
	animation: sfd-badge-pulse 2s ease-in-out infinite;
}

@keyframes sfd-badge-pulse {
	0%   { transform: scale(1); opacity: 1; }
	35%  { transform: scale(0.92); opacity: 0.95; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes sfd-badge-ripple {
	0% {
		background-size: 0 0, 0 0, 0 0, 0 0;
		opacity: 1;
	}
	20% {
		background-size: 18px 18px, 0 0, 0 0, 0 0;
	}
	40% {
		background-size: 30px 30px, 24px 24px, 0 0, 0 0;
	}
	60% {
		background-size: 42px 42px, 34px 34px, 26px 26px, 0 0;
	}
	80% {
		background-size: 56px 56px, 48px 48px, 40px 40px, 30px 30px;
		opacity: 0.9;
	}
	100% {
		background-size: 66px 66px, 58px 58px, 50px 50px, 40px 40px;
		opacity: 0;
	}
}

.sfd-media-divider {
	width: 1px;
	height: 24px;
	background: #e5e5e5;
	flex-shrink: 0;
}

/* ── Marquee container ── */
.sfd-media-logos {
	overflow: hidden;
	display: flex;
	flex: 1;
	/* Fade in/out at edges */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 64px, black calc(100% - 64px), transparent 100%);
	mask-image:         linear-gradient(to right, transparent 0%, black 64px, black calc(100% - 64px), transparent 100%);
}

/* ── Each duplicated track ── */
.sfd-media-logos-track {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-right: 48px; /* match gap so spacing is consistent at the wrap point */
	flex-shrink: 0;
	animation: sfd-marquee 30s linear infinite;
}

@keyframes sfd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Pause on hover */
.sfd-media-logos:hover .sfd-media-logos-track {
	animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.sfd-media-logos-track {
		animation: none;
	}
}

.sfd-media-logo {
	color: #808080;
	white-space: nowrap;
	transition: color 0.2s;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sfd-media-logo:hover {
	color: #555555;
}

@media (max-width: 768px) {
.sfd-media-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	overflow: hidden;
}
}

/* 9 Network, bold numeral */
.sfd-media-logo--nine {
	font-family: Arial Black, Arial, sans-serif;
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
}

/* TODAY, wide tracked caps */
.sfd-media-logo--today {
	font-family: Arial, sans-serif;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 3px;
}

/* Daily Telegraph, serif */
.sfd-media-logo--telegraph {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 16px;
}

/* news.com.au, sans bold lowercase */
.sfd-media-logo--news {
	font-family: Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
}

/* Woman's Day, serif italic */
.sfd-media-logo--womansday {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 16px;
}

/* mamamia., sans bold */
.sfd-media-logo--mamamia {
	font-family: Arial, sans-serif;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.5px;
}

/* Daily Mail, serif bold */
.sfd-media-logo--dailymail {
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 16px;
}

/* =============================================
   SECTION: Features / Why SFD
   ============================================= */
.sfd-section {
	padding: 80px;
}

.sfd-section-inner {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}

.sfd-section-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: #262626;
	text-align: center;
	margin: 0 0 48px;
}

/* Info Sections (for How IF Works page) */
.sfd-info-sections {
	position: relative;
	z-index: 1;
}

.sfd-info-block {
	position: relative;
	z-index: 1;
}

.sfd-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.sfd-info-grid--reverse {
	direction: rtl;
}

.sfd-info-grid--reverse > * {
	direction: ltr;
}

.sfd-info-text {
	padding: 0;
}

.sfd-info-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	color: #262626;
	margin: 0 0 20px;
}

.sfd-info-description {
	font-size: 16px;
	line-height: 1.7;
	color: #646464;
	margin: 0;
}

.sfd-info-image {
	border-radius: 16px;
	overflow: hidden;
}

.sfd-info-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.sfd-info-grid,
	.sfd-info-grid--reverse {
		grid-template-columns: 1fr;
		gap: 32px;
		direction: ltr;
	}
	
	.sfd-info-block {
		padding: 60px 24px !important;
	}
}

.sfd-section-subtitle {
	font-size: 18px;
	color: #646464;
	text-align: center;
	margin: -32px 0 0;
}

.sfd-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sfd-card {
	border-radius: 16px;
	padding: 32px;
}

.sfd-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.sfd-card h3 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #262626;
	margin: 0 0 8px;
}

.sfd-card p {
	font-size: 16px;
	color: #646464;
	line-height: 1.6;
	margin: 0;
}

/* =============================================
   WooCommerce Products
   ============================================= */
.sfd-products-section {
	background: #f7f7f7;
	padding: 80px;
}

/* =============================================
   Testimonials Slider  (sfd/testimonials block)
   Figma node 4246-10149
   ============================================= */

/* ── Section wrapper ── */
.sfd-tmsl-section {
	background: #ffffff;
	width: 100%;
	padding: 80px 80px;
}

.sfd-tmsl-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* ── Slider container: only the active slide is shown ── */
.sfd-tmsl-slider {
	position: relative;
}

.sfd-tmsl-slide {
	display: none;
}

.sfd-tmsl-slide.is-active {
	display: block;
}

/* ── Card: magenta bg, 24px radius, two-column row ── */
.sfd-tmsl-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background: #C80468;          /* Figma brand magenta, exact value from design */
	border-radius: 24px;
	overflow: hidden;
	/* no min-height, card height is driven by text content */
}

/* ── Left: text panel ── */
.sfd-tmsl-text {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 40px;
	box-sizing: border-box;
}

/* Stars + quote stacked */
.sfd-tmsl-upper {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Five gold stars row */
.sfd-tmsl-stars {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
}

.sfd-tmsl-star {
	display: block;
	flex-shrink: 0;
}

/* Quote, smaller than Figma original */
.sfd-tmsl-quote {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: -0.3px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	font-style: normal;
}

/* Attribution: name + stat stacked 4px */
.sfd-tmsl-attribution {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sfd-tmsl-name {
	font-family: 'Inter', 'Nunito Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 22px;
	color: #ffffff;
}

.sfd-tmsl-stat {
	font-family: 'Inter', 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.75);
}

/* Pagination dots */
.sfd-tmsl-dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.sfd-tmsl-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	border: none;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.5);
	transition: background 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

.sfd-tmsl-dot.is-active {
	background: #ffffff;
}

.sfd-tmsl-dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

.sfd-tmsl-dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ── Right: video / thumbnail panel ──
   Fixed 38% width (matches Figma 480/1280 = 37.5%) so the panel
   never blows out the card regardless of text height. */
.sfd-tmsl-video {
	flex: 0 0 38%;
	width: 38%;
	position: relative;
	background-color: #F7F7F7;   /* neutral grey placeholder until a thumbnail is set */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Gradient overlay to make play button readable */
.sfd-tmsl-video::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

/* Grey placeholder when no thumbnail */
.sfd-tmsl-video--no-thumb {
	background-color: #F7F7F7;
	background-image: none;
}

/* Play button: 80×80px frosted circle */
.sfd-tmsl-play-btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 48px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

.sfd-tmsl-play-btn:hover {
	background: rgba(0, 0, 0, 0.65);
	transform: scale(1.06);
}

.sfd-tmsl-play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	/* offset play triangle optically */
	padding-left: 3px;
}

/* ── Slide transition ── */
.sfd-tmsl-slide {
	animation: none;
}

.sfd-tmsl-slide.is-active {
	animation: sfd-tmsl-fadein 0.4s ease;
}

@keyframes sfd-tmsl-fadein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* =============================================
   PROGRAM FEATURES  (sfd/program-features block)
   3 × 2 grid of feature cards with circular avatar, title and description
   ============================================= */

.sfd-program-features {
	background: #ffffff;
	width: 100%;
	padding: 80px 80px;
}

.sfd-program-features__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Section header */
.sfd-program-features__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	margin-bottom: 48px;
}

.sfd-program-features__label {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
}

.sfd-program-features__heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: #262626;
	margin: 0;
}

.sfd-program-features__subtitle {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
	color: #646464;
	margin: 0;
	max-width: 560px;
	text-align: center;
}

/* 3-column grid */
.sfd-program-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual card, vertical: avatar on top, text below */
.sfd-program-features__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 28px;
	background: #f5f5f5;
	border-radius: 16px;
}

/* Avatar circle */
.sfd-program-features__avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 9999px;
	background-color: var(--avatar-bg, #E8E8E8);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sfd-program-features__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Inline SVG icon inside avatar */
.sfd-program-features__avatar > svg {
	width: 44px;
	height: 44px;
	display: block;
	flex-shrink: 0;
}

/* Text block */
.sfd-program-features__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfd-program-features__title {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 24px;
	color: #262626;
	margin: 0;
}

.sfd-program-features__desc {
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #646464;
	margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
	.sfd-program-features {
		padding: 60px 40px;
	}
	.sfd-program-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sfd-program-features {
		padding: 48px 24px;
	}
	.sfd-program-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sfd-program-features__heading {
		font-size: 28px;
		line-height: 36px;
	}
}

/* =============================================
   FAQ ACCORDION
   ============================================= */
.sfd-faq-section {
	padding: 80px;
	position: relative;
	overflow: hidden;
}

.sfd-faq-section .sfd-container {
	position: relative;
	z-index: 1;
}

/* Decorative background blobs, contained within each FAQ section */
.sfd-faq-bg-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.sfd-faq-bg-blobs .sfd-faq-blob {
	position: absolute;
	width: 320px;
	height: 280px;
	transform: translate(-50%, -50%);
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	animation: sfd-faq-blob-throb 8s ease-in-out infinite;
}

.sfd-faq-bg-blobs .sfd-faq-blob--2 {
	border-radius: 45% 55% 62% 38% / 52% 48% 52% 48%;
	animation-delay: -4s;
}

@keyframes sfd-faq-blob-throb {
	0%, 100% {
		border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
		transform: translate(-50%, -50%) scale(1);
	}
	25% {
		border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
		transform: translate(-50%, -50%) scale(1.08);
	}
	50% {
		border-radius: 45% 55% 48% 52% / 52% 48% 58% 42%;
		transform: translate(-50%, -50%) scale(0.95);
	}
	75% {
		border-radius: 55% 45% 52% 48% / 42% 58% 48% 52%;
		transform: translate(-50%, -50%) scale(1.04);
	}
}

/* ── Variant 1 ── */
.sfd-faq-bg--1 .sfd-faq-blob--1 { background: rgba(140, 217, 51, 0.08); }  /* green */
.sfd-faq-bg--1 .sfd-faq-blob--2 { background: rgba(243, 65, 136, 0.07); }  /* pink */

/* ── Variant 2 ── */
.sfd-faq-bg--2 .sfd-faq-blob--1 { background: rgba(243, 65, 136, 0.08); }  /* pink */
.sfd-faq-bg--2 .sfd-faq-blob--2 { background: rgba(249, 178, 51, 0.07); }  /* orange */

/* ── Variant 3 ── */
.sfd-faq-bg--3 .sfd-faq-blob--1 { background: rgba(249, 178, 51, 0.08); }  /* orange */
.sfd-faq-bg--3 .sfd-faq-blob--2 { background: rgba(140, 217, 51, 0.07); }  /* green */

.sfd-faq-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}

.sfd-faq-header .section__heading {
	margin: 0;
	text-align: left;
	position: relative;
}

/* Offset icon overlapping the FAQ heading, pseudo-element with inline SVG */
.sfd-faq-header .section__heading::before {
	content: '';
	position: absolute;
	left: -12px;
	top: -16px;
	width: 44px;
	height: 44px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ── Three interconnected circles as a visual marker for all FAQ headings ── */
.sfd-faq-heading--general::before,
.sfd-faq-heading--safety-medical-disclaimer::before,
.sfd-faq-heading--fasting::before,
.sfd-faq-heading--exercise::before,
.sfd-faq-heading--metabolism::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'%3E%3Ccircle cx='14' cy='22' r='6' fill='%23F34188' fill-opacity='0.25' stroke='%23F34188' stroke-width='1.5'/%3E%3Ccircle cx='22' cy='14' r='6' fill='%238CD933' fill-opacity='0.25' stroke='%238CD933' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='22' r='6' fill='%23F9B233' fill-opacity='0.25' stroke='%23F9B233' stroke-width='1.5'/%3E%3C/svg%3E");
}

.sfd-faq-read-all {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #F34188;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.sfd-faq-read-all:hover {
	color: #C80468;
}

.sfd-faq-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: #262626;
	margin: 0 0 48px;
}

.sfd-faq-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 1280px;
	margin: 50px auto 0;
	border-top: none;
	align-items: start;
}

.sfd-faq-item {
	background: #fff;
	padding: 30px;
	border-radius: 12px;
	border: 2px solid #E2E8F0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sfd-faq-section .sfd-faq-question {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
	color: #1A202C;
	background: none;
	border: none;
	padding: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.sfd-faq-question .sfd-faq-icon {
	margin-left: auto;
}

.sfd-faq-question-text {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: #262626;
	transition: color 0.2s;
}

.sfd-faq-question:hover .sfd-faq-question-text {
	color: #325D00;
}

.sfd-faq-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f3ffe6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6EC40B;
	transition: background 0.2s, transform 0.3s ease;
}

.sfd-faq-item.is-open .sfd-faq-icon {
	background: #F34188;
	color: #ffffff;
}

.sfd-faq-item.is-open .sfd-faq-icon-v {
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.sfd-faq-icon-v {
	transition: transform 0.25s ease;
}

/* Grid-based height animation, no JS height calculations needed */
.sfd-faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	margin-top: 16px;
	margin-bottom: 0;
}

.sfd-faq-item.is-open .sfd-faq-answer {
	grid-template-rows: 1fr;
}

.sfd-faq-answer-inner {
	overflow: hidden;
	max-width: 1020px;
}

.sfd-faq-answer-inner > *:first-child { margin-top: 0; }
.sfd-faq-answer-inner > *:last-child  { margin-bottom: 0; }

.sfd-faq-answer-inner p {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #646464;
	padding: 0;
	margin: 0;
}

@media (max-width: 768px) {
	.sfd-faq-list {
		grid-template-columns: 1fr;
	}

	.sfd-faq-item {
		padding: 15px;
	}

	/* Smaller offset icon on mobile */
	.sfd-faq-header .section__heading::before {
		width: 32px;
		height: 32px;
		left: -8px;
		top: -10px;
	}

	/* Smaller background blobs on mobile */
	.sfd-faq-bg-blobs .sfd-faq-blob {
		width: 180px;
		height: 160px;
	}
}


/* =============================================
   FAQ ALT (COLORED), InnerBlocks widget-based FAQ
   ============================================= */
.sfd-faq-alt-section {
	padding: 80px;
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

.sfd-faq-alt-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Decorative blob in right column */
.sfd-faq-alt-inner::after {
	content: '';
	width: 100%;
	aspect-ratio: 1;
	max-width: 480px;
	background: rgba(140, 217, 51, 0.12);
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	justify-self: center;
	animation: sfd-blob-float-2 22s ease-in-out infinite;
}

.sfd-faq-alt-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: #262626;
	margin: 0 0 48px;
	text-align: left;
	grid-column: 1 / 2;
}

.sfd-faq-alt-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	grid-column: 1 / 2;
}

/* Individual FAQ item */
.sfd-faq-alt-item {
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.sfd-faq-alt-item:hover {
	transform: translateY(-2px);
}

/* Question button */
.sfd-faq-alt-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 28px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s ease;
}

.sfd-faq-alt-question-text {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: #ffffff;
}

/* Icon */
.sfd-faq-alt-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: transform 0.3s ease;
}

.sfd-faq-alt-icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.sfd-faq-alt-item.is-open .sfd-faq-alt-icon {
	transform: rotate(45deg);
}

/* Answer wrapper with grid animation */
.sfd-faq-alt-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.sfd-faq-alt-item.is-open .sfd-faq-alt-answer {
	grid-template-rows: 1fr;
}

.sfd-faq-alt-answer-inner {
	overflow: hidden;
	padding: 0 28px;
}

.sfd-faq-alt-answer-inner > *:first-child {
	margin-top: 0;
}

.sfd-faq-alt-answer-inner > *:last-child {
	margin-bottom: 0;
	padding-bottom: 24px;
}

.sfd-faq-alt-answer-inner p {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #ffffff;
	margin: 0 0 16px;
}

/* ── Pink variant ── */
.sfd-faq-alt--pink .sfd-faq-alt-item {
	background: #F34188;
}

.sfd-faq-alt--pink .sfd-faq-alt-question:hover {
	background: rgba(255, 255, 255, 0.08);
}

.sfd-faq-alt--pink .sfd-faq-alt-icon svg circle {
	fill: rgba(255, 255, 255, 0.2);
}

/* ── Orange variant ── */
.sfd-faq-alt--orange .sfd-faq-alt-item {
	background: #F9B233;
}

.sfd-faq-alt--orange .sfd-faq-alt-question:hover {
	background: rgba(255, 255, 255, 0.08);
}

.sfd-faq-alt--orange .sfd-faq-alt-icon svg circle {
	fill: rgba(255, 255, 255, 0.2);
}

.sfd-faq-alt--orange .sfd-faq-alt-question-text,
.sfd-faq-alt--orange .sfd-faq-alt-answer-inner p {
	color: #262626;
}

.sfd-faq-alt--orange .sfd-faq-alt-icon {
	color: #262626;
}

.sfd-faq-alt--orange .sfd-faq-alt-icon svg path {
	stroke: #262626;
}

/* ── Green variant ── */
.sfd-faq-alt--green .sfd-faq-alt-item {
	background: #8CD933;
}

.sfd-faq-alt--green .sfd-faq-alt-question:hover {
	background: rgba(255, 255, 255, 0.08);
}

.sfd-faq-alt--green .sfd-faq-alt-icon svg circle {
	fill: rgba(255, 255, 255, 0.2);
}

.sfd-faq-alt--green .sfd-faq-alt-question-text,
.sfd-faq-alt--green .sfd-faq-alt-answer-inner p {
	color: #262626;
}

.sfd-faq-alt--green .sfd-faq-alt-icon {
	color: #262626;
}

.sfd-faq-alt--green .sfd-faq-alt-icon svg path {
	stroke: #262626;
}

/* Responsive */
@media (max-width: 768px) {
	.sfd-faq-alt-section {
		padding: 48px 24px;
	}

	.sfd-faq-alt-heading {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 32px;
	}

	.sfd-faq-alt-question {
		padding: 20px;
	}

	.sfd-faq-alt-question-text {
		font-size: 18px;
	}

	.sfd-faq-alt-answer-inner {
		padding: 0 20px;
	}

	.sfd-faq-alt-answer-inner > *:last-child {
		padding-bottom: 20px;
	}
}

/* =============================================
   Success Stories Section
   ============================================= */
.sfd-success-section {
	padding: 80px 80px 0;
	text-align: center;
}

.sfd-success-label {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
	margin: 0 0 12px;
	text-align: center;
}

.sfd-success-slider-wrap {
	position: relative;

	padding: 0 0 4px;
	margin-top: 0;
	overflow: hidden;
}

.sfd-success-slider,
.sfd-skeleton-slider {
	position: relative;
	height: 480px;
	max-width: 1280px;
	margin: 0 auto;
	overflow: visible;
}

a.sfd-success-card {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.sfd-success-card:hover {
	text-decoration: none;
}

.sfd-success-card.is-active:hover {
	transform: translate(-50%, calc(-50% - 6px)) scale(1);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Slider skeleton loader overlay */
.sfd-success-slider-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	z-index: 10;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	pointer-events: auto;
}

.sfd-success-slider-wrap.is-loaded .sfd-success-slider-loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sfd-skeleton-card {
	background: #ffffff;
	border: 1px solid #f0f0f0;
}

.sfd-skeleton-shimmer {
	background: #f0f0f0;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
}

.sfd-success-card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 380px;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
	transition: transform 0.4s ease, opacity 0.4s ease;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.85);
}

.sfd-success-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.sfd-success-card.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	z-index: 3;
}

.sfd-success-card.is-prev {
	opacity: 0.3;
	pointer-events: none;
	transform: translate(calc(-50% - 260px), -50%) scale(0.72);
	z-index: 2;
}

.sfd-success-card.is-next {
	opacity: 0.3;
	pointer-events: none;
	transform: translate(calc(-50% + 260px), -50%) scale(0.72);
	z-index: 2;
}

.sfd-success-card.is-far {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.7);
}

/* ── Pagination: arrows + dots ── */
#dots-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0;
	margin: 36px 0 36px;
}

#dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #DFE0DC;
	cursor: pointer;
	transition: background 0.25s, transform 0.25s;
	flex-shrink: 0;
}

.dot.active-dot {
	background: #F34188;
	transform: scale(1.35);
}

.dot:hover:not(.active-dot) {
	background: #bbbcb8;
}


.sfd-success-cta {
	text-align: center;
	padding: 40px 0 80px;
}

.sfd-success-cta--grey {
	background: #ffffff;
}

.sfd-success-images {
	display: flex;
	gap: 8px;
}

.sfd-success-img-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.sfd-success-img-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: 160px;
}

.sfd-success-img-wrap img {
	width: 100%;
	height: 260px !important;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	aspect-ratio: 4 / 6.5;
	background: #f0f0f0;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.sfd-success-img-placeholder {
	width: 100%;
	height: 240px;
	background: #e8e0d8;
	border-radius: 10px;
}

.sfd-success-img-after .sfd-success-img-placeholder {
	background: #fcd2dc;
}

.sfd-success-img-label {
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #aaaaaa;
	text-align: center;
}

.sfd-success-img-after .sfd-success-img-label {
	color: #F34188;
}

.sfd-success-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sfd-success-name {
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: #262626;
	margin: 0;
}

.sfd-success-meta {
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #888888;
	margin: 0;
	line-height: 1.3;
}

.sfd-success-stat {
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #ffffff;
	background: #F34188;
	border-radius: 6px;
	padding: 4px 10px;
	display: inline-block;
	width: max-content;
	margin: 0;
	line-height: 1.15;
	flex-shrink: 0;
}

.sfd-success-stat strong {
	color: #ffffff;
}

.sfd-success-excerpt {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #4a4a4a;
	margin: 0;
	text-align: left;
}

.sfd-success-program {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	color: #888;
	margin: 0;
}

/* Mobile responsive for success section */
@media (max-width: 768px) {
	.sfd-success-section {
		padding: 48px 24px 0;
	}

	.sfd-success-slider,
	.sfd-skeleton-slider {
		height: 420px;
	}

	.sfd-success-card {
		width: 90%;
		max-width: 400px;
		padding: 20px;
	}

	.sfd-success-cta {
		padding: 32px 0 60px;
	}
}

@media (max-width: 600px) {
	.sfd-success-section {
		padding: 40px 20px 0;
	}

	.sfd-success-slider,
	.sfd-skeleton-slider {
		height: 380px;
	}

	.sfd-success-card {
		width: 92%;
		max-width: 100%;
		padding: 16px;
	}

	.sfd-success-img-wrap {
		padding: 8px;
	}
	.sfd-success-img-wrap img {
		height: 200px !important;
		object-fit: cover;
		aspect-ratio: 4 / 5;
	}
	.sfd-success-img-placeholder {
		height: 220px;
	}

	.sfd-success-cta {
		padding: 24px 0 48px;
	}
}

/* =============================================
   Section label (shared pink uppercase label)
   ============================================= */
.sfd-section-label {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
	text-align: center;
	margin: 0 0 12px;
}

/* =============================================
   How It Works Section
   ============================================= */
.sfd-hiw-section {
	background: #ffffff;
	padding: 80px;
}

.sfd-hiw-section .sfd-section-title,
.sfd-hiw-section .sfd-section-subtitle {
	text-align: center;
}

.sfd-hiw-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.sfd-hiw-card {
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sfd-hiw-card--pink   { background: #FFF3F5; }
.sfd-hiw-card--orange { background: #FFF5E2; }
.sfd-hiw-card--green  { background: #F3FFE6; }

.sfd-hiw-dots {
	display: flex;
	gap: 6px;
	align-items: center;
}

.sfd-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-block;
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Animated state when card is in viewport */
.sfd-hiw-card.dots-visible .sfd-dot:nth-child(1) { animation: sfd-dot-pop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.1s both; }
.sfd-hiw-card.dots-visible .sfd-dot:nth-child(2) { animation: sfd-dot-pop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.2s both; }
.sfd-hiw-card.dots-visible .sfd-dot:nth-child(3) { animation: sfd-dot-pop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.3s both; }
.sfd-hiw-card.dots-visible .sfd-dot:nth-child(4) { animation: sfd-dot-pop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.4s both; }
.sfd-hiw-card.dots-visible .sfd-dot:nth-child(5) { animation: sfd-dot-pop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.5s both; }

@keyframes sfd-dot-pop {
	0%   { opacity: 0; transform: scale(0) rotate(-15deg); }
	50%  { opacity: 1; transform: scale(1.25) rotate(5deg); }
	70%  { transform: scale(0.9) rotate(-2deg); }
	85%  { transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sfd-dot {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

.sfd-hiw-card--pink   .sfd-dot           { background: #FCD2DC; }
.sfd-hiw-card--pink   .sfd-dot.sfd-dot--on { background: #F34188; }
.sfd-hiw-card--orange .sfd-dot             { background: #FCE5BC; }
.sfd-hiw-card--orange .sfd-dot.sfd-dot--on { background: #F9B233; }
.sfd-hiw-card--green  .sfd-dot             { background: #DBF1C3; }
.sfd-hiw-card--green  .sfd-dot.sfd-dot--on { background: #8CD933; }

/* Partial-fill dot variants (from Figma), filled from the bottom up */
.sfd-hiw-card--pink   .sfd-dot.sfd-dot--quarter      { background: linear-gradient(to top, #F34188 25%, #FCD2DC 25%); }
.sfd-hiw-card--orange .sfd-dot.sfd-dot--half          { background: linear-gradient(to top, #F9B233 50%, #FCE5BC 50%); }
.sfd-hiw-card--green  .sfd-dot.sfd-dot--three-quarter { background: linear-gradient(to top, #8CD933 75%, #DBF1C3 75%); }

.sfd-hiw-card-title {
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: #262626;
	margin: 0;
}

/* Front card titles also black */
.sfd-hiw-card--front .sfd-hiw-card-title {
	color: #262626;
}

.sfd-hiw-card-text {
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #646464;
	margin: 0;
}

/* ── 3D Flip Card Styles ── */
.sfd-hiw-card-container {
	perspective: 1000px;
	height: 100%;
	min-height: 320px;
}

.sfd-hiw-card-flipper {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.sfd-hiw-card-container:hover .sfd-hiw-card-flipper {
	transform: rotateY(180deg);
}

.sfd-hiw-card--front,
.sfd-hiw-card--back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.sfd-hiw-card--front {
	z-index: 2;
	transform: rotateY(0deg);
	justify-content: center;
	align-items: center;
	text-align: center;
}

.sfd-hiw-card--back {
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 40px 32px;
}

/* Icon on front card */
.sfd-hiw-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	color: inherit;
}

.sfd-hiw-card--pink .sfd-hiw-card-icon {
	color: #F34188;
}

.sfd-hiw-card--green .sfd-hiw-card-icon {
	color: #8CD933;
}

.sfd-hiw-card--orange .sfd-hiw-card-icon {
	color: #F9B233;
}

.sfd-hiw-card-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Back card specific colors - use solid brand colors */
.sfd-hiw-card--back.sfd-hiw-card--pink {
	background: #FF8AAD;
	color: #ffffff;
}

.sfd-hiw-card--back.sfd-hiw-card--green {
	background: #8BC34A;
	color: #ffffff;
}

.sfd-hiw-card--back.sfd-hiw-card--orange {
	background: #FFA726;
	color: #ffffff;
}

.sfd-hiw-card-back-title {
	font-family: 'Nunito', sans-serif;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 24px 0;
	letter-spacing: 0.5px;
}

.sfd-hiw-card--back .sfd-hiw-card-text {
	color: #ffffff;
	font-size: 16px;
	line-height: 1.6;
}

/* Disable flip animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sfd-hiw-card-flipper {
		transition: none;
	}
	.sfd-hiw-card-container:hover .sfd-hiw-card-flipper {
		transform: none;
	}
	.sfd-hiw-card--back {
		display: none;
	}
}

/* Responsive How It Works */
@media (max-width: 900px) {
	.sfd-hiw-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.sfd-hiw-card-container {
		min-height: 280px;
	}
	
	.sfd-hiw-card--back {
		padding: 32px 24px;
	}
}


@media (max-width: 600px) {
	.sfd-hiw-section {
		padding: 48px 24px;
	}
	
	.sfd-hiw-card {
		padding: 24px;
	}
}

/* =============================================
   Meet the Team Section
   ============================================= */
/* Styles for .sfd-team-section are now scoped to the
   sfd/experts block (blocks/sfd-experts/style.css).
   This section intentionally left empty to avoid
   duplicate/unscoped selectors. */

/* =============================================
   PRICING CARDS  (sfd/pricing block)
   ============================================= */

/* Outer section, white bg above, grey cards area */
.sfd-pricing-section {
	background: #ffffff;
	width: 100%;
}

/* Centred text header */
.sfd-pricing-header {
	max-width: 640px;
	margin: 0 auto;
	padding: 80px 40px 48px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sfd-pricing-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: #262626;
	margin: 0;
}

.sfd-pricing-subtitle {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #646464;
	margin: 0;
}

.sfd-pricing-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #262626;
	background: #fff4f8;
	border: 1px solid #ffd6e3;
	padding: 10px 18px;
	border-radius: 999px;
	margin: 16px auto 0;
	box-shadow: 0 2px 6px rgba(238, 114, 142, 0.08);
}

.sfd-pricing-note__asterisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #EE728E;
	color: #ffffff;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}

/* Cards wrap */
.sfd-pricing-cards-wrap {
	padding: 40px 80px;
}

.sfd-pricing-cards {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: center;
}

/* Individual card */
.sfd-pricing-card {
	background: #ffffff;
	border-radius: 16px;
	border: 1.5px solid #ebebeb;
	padding: 32px 28px 36px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	min-height: 460px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sfd-pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Popular card, pink border, taller + elevated */
.sfd-pricing-card--popular {
	border-color: #F34188;
	border-width: 2px;
	padding-top: 44px; /* extra room for the badge */
	min-height: 500px;
	box-shadow: 0 8px 40px rgba(243, 65, 136, 0.18);
	transform: translateY(-16px);
}

.sfd-pricing-card--popular:hover {
	transform: translateY(-22px);
	box-shadow: 0 20px 48px rgba(243, 65, 136, 0.24);
}

/* "Most Popular" badge, centred at top of card, always visible, two lines */
.sfd-pricing-badge {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	background: #F34188;
	color: #ffffff;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.25;
	padding: 5px 14px;
	border-radius: 9999px;
	text-align: center;
	white-space: normal;
}

/* Top row: name + price */
.sfd-pricing-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.sfd-pricing-name-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sfd-pricing-name {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 28px;
	color: #262626;
}

.sfd-pricing-tagline {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #888888;
}

/* Price: $ small, number large */
.sfd-pricing-price {
	display: flex;
	align-items: flex-start;
	gap: 1px;
	flex-shrink: 0;
}

.sfd-pricing-currency {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	color: #262626;
	margin-top: 4px;
}

.sfd-pricing-amount {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -1px;
	color: #262626;
}

/* Divider */
.sfd-pricing-divider {
	height: 1px;
	background: #f0f0f0;
}

/* Features list */
.sfd-pricing-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}

.sfd-pricing-feature {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 22px;
	color: #262626;
}

/* ── Elastic bounce keyframe for check icons ── */
@keyframes sfd-check-bounce {
	0%   { transform: scale(0)   rotate(-20deg); opacity: 0; }
	40%  { transform: scale(1.4) rotate(5deg);   opacity: 1; }
	60%  { transform: scale(0.9) rotate(-3deg); }
	75%  { transform: scale(1.12) rotate(2deg); }
	88%  { transform: scale(0.96); }
	100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}

.sfd-pricing-check-icon {
	flex-shrink: 0;
	margin-top: 1px;
	/* default: hidden, animation class added by IntersectionObserver */
	opacity: 0;
}

/* When the card enters the viewport, fire staggered bounces */
.sfd-pricing-card.checks-visible .sfd-pricing-feature:nth-child(1) .sfd-pricing-check-icon { animation: sfd-check-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.05s both; }
.sfd-pricing-card.checks-visible .sfd-pricing-feature:nth-child(2) .sfd-pricing-check-icon { animation: sfd-check-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.15s both; }
.sfd-pricing-card.checks-visible .sfd-pricing-feature:nth-child(3) .sfd-pricing-check-icon { animation: sfd-check-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.25s both; }
.sfd-pricing-card.checks-visible .sfd-pricing-feature:nth-child(4) .sfd-pricing-check-icon { animation: sfd-check-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.35s both; }
.sfd-pricing-card.checks-visible .sfd-pricing-feature:nth-child(5) .sfd-pricing-check-icon { animation: sfd-check-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.45s both; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.sfd-pricing-check-icon { opacity: 1 !important; animation: none !important; }
}

/* CTA area */
.sfd-pricing-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.sfd-pricing-btn {
	display: block;
	width: 100%;
	padding: 14px 24px;
	background: #8cd933;
	color: black;
	font-family: 'Nunito', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s ease;
	box-sizing: border-box;
}

.sfd-pricing-btn:hover {
	background: #7bc42e;
}

.sfd-pricing-cta-note {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 13px;
	line-height: 18px;
	color: #888888;
	text-align: center;
	margin: 0;
}

/* Guarantee strip */
.sfd-pricing-guarantee {
	background: #F3FFE6;
	padding: 24px 80px;
}

.sfd-pricing-guarantee-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 48px;
}

.sfd-pricing-guarantee-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
	color: #262626;
}

.sfd-pricing-guarantee-icon {
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
	.sfd-pricing-cards-wrap {
		padding: 40px 24px;
	}

	.sfd-pricing-cards {
		grid-template-columns: 1fr;
		max-width: 480px;
	}

	.sfd-pricing-guarantee {
		padding: 24px;
	}

	.sfd-pricing-guarantee-inner {
		flex-direction: column;
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.sfd-pricing-header {
		padding: 60px 24px 36px;
	}

	.sfd-pricing-heading {
		font-size: 30px;
		line-height: 38px;
	}
}

/* =============================================
   PROMO BANNER  (sfd/promo-banner block)
   Figma node 4246-10141, horizontal, text left / buttons right
   ============================================= */
.sfd-promo-banner {
	width: 100%;
}

.sfd-promo-banner-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

/* Text block, grows to fill remaining space */
.sfd-promo-banner-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 0;
}

.sfd-promo-banner-heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -0.72px;
	color: #262626;
	margin: 0;
}

.sfd-promo-banner-desc {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #646464;
	margin: 0;
}

/* Buttons row, shrinks to content */
.sfd-promo-banner-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Shared button base */
.sfd-promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s, box-shadow 0.15s;
	box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

/* Secondary, white bg, orange border + text */
.sfd-promo-btn--secondary {
	background: #ffffff;
	color: #D7811A;
	border: 1px solid #D7811A;
}

.sfd-promo-btn--secondary:hover {
	opacity: 0.85;
}

/* Primary, orange bg, dark text */
.sfd-promo-btn--primary {
	background: #F9B233;
	color: #262626;
	border: 2px solid transparent;
}

.sfd-promo-btn--primary:hover {
	opacity: 0.9;
}

/* ── Promo Banner Color Variants ── */

/* Pink text variant */
.sfd-promo-banner--pink .sfd-promo-banner-heading {
	color: #F34188;
}

.sfd-promo-banner--pink .sfd-promo-banner-desc {
	color: #C80468;
}

/* Orange text variant */
.sfd-promo-banner--orange .sfd-promo-banner-heading {
	color: #F9B233;
}

.sfd-promo-banner--orange .sfd-promo-banner-desc {
	color: #D7811A;
}

/* Green text variant */
.sfd-promo-banner--green .sfd-promo-banner-heading {
	color: #8CD933;
}

.sfd-promo-banner--green .sfd-promo-banner-desc {
	color: #56990F;
}

/* Button color variants - Pink */
.sfd-promo-btn--pink-primary {
	background: #F34188;
	color: #ffffff;
	border: 2px solid transparent;
}

.sfd-promo-btn--pink-secondary {
	background: #ffffff;
	color: #F34188;
	border: 1px solid #F34188;
}

/* Button color variants - Orange (default) */
.sfd-promo-btn--orange-primary {
	background: #F9B233;
	color: #262626;
	border: 2px solid transparent;
}

.sfd-promo-btn--orange-secondary {
	background: #ffffff;
	color: #D7811A;
	border: 1px solid #D7811A;
}

/* Button color variants - Green */
.sfd-promo-btn--green-primary {
	background: #8CD933;
	color: #262626;
	border: 2px solid transparent;
}

.sfd-promo-btn--green-secondary {
	background: #ffffff;
	color: #56990F;
	border: 1px solid #8CD933;
}

/* ── Centered Layout Variant ── */
.sfd-promo-banner--centered .sfd-promo-banner-inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 80px 80px;
	gap: 32px;
}

.sfd-promo-banner--centered .sfd-promo-banner-text {
	align-items: center;
	max-width: 1280px;
}

.sfd-promo-banner--centered .sfd-promo-banner-buttons {
	flex-direction: row;
	gap: 16px;
}

/* White button style for centered layout */
.sfd-promo-banner--centered .sfd-promo-btn {
	background: #ffffff;
	color: #262626;
	border: 2px solid #ffffff;
}

.sfd-promo-banner--centered .sfd-promo-btn:hover {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 900px) {
	.sfd-promo-banner-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 80px 40px;
		gap: 32px;
	}
	
	.sfd-promo-banner--centered .sfd-promo-banner-inner {
		padding: 60px 40px;
	}
}

@media (max-width: 600px) {
	.sfd-promo-banner-inner {
		padding: 60px 24px;
	}

	.sfd-promo-banner-heading {
		font-size: 28px;
		line-height: 36px;
	}

	.sfd-promo-banner-desc {
		font-size: 17px;
	}

	.sfd-promo-banner-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.sfd-promo-btn {
		text-align: center;
		justify-content: center;
	}
}

/* =============================================
   CTA Section
   ============================================= */
.sfd-cta-section {
	background: #8CD933;
	padding: 80px;
	text-align: center;
}

.sfd-cta-section h2 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -0.5px;
	color: #262626;
	margin: 0 0 16px;
}

.sfd-cta-section p {
	font-size: 20px;
	color: #325D00;
	margin: 0 0 40px;
}

/* =============================================
   NAVIGATION (Gutenberg wp-block-navigation override)
   ============================================= */
.wp-block-navigation .wp-block-navigation-item__content {
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #646464 !important;
	text-decoration: none;
	padding: 6px 8px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #262626 !important;
}

/* =============================================
   MEGA MENU, 2-card layout
   ============================================= */

/* Trigger nav item, panel spans full header width */
.sfd-nav-item.sfd-has-mega {
	position: static;
}

/* Triangle indicator for mega-menu trigger */
.sfd-nav-link--mega {
	display: inline-flex;
	align-items: center !important;
	gap: 8px;
}

/* CSS border-trick filled triangle */
.sfd-nav-triangle {
	display: inline-block;
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #aaaaaa;
	margin-top: 2px; /* optical alignment */
	transition: border-top-color 0.15s;
}

.sfd-nav-item.sfd-has-mega.is-open .sfd-nav-triangle {
	border-top-color: #325D00;
}

/* Panel, no border-top, narrow, compact */
.sfd-mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff;
	border-top: 1px solid #f0f0f0;
	/* Bottom-weighted shadow to avoid a visible shadow at the panel top edge */
	box-shadow: 0 18px 28px -18px rgba(0, 0, 0, 0.22);
	border-radius: 0 0 16px 16px;
	z-index: 200;
	animation: sfd-mega-in 0.18s ease forwards;
}

@keyframes sfd-mega-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sfd-nav-item.sfd-has-mega.is-open .sfd-mega-panel {
	display: block;
}

/* Inner, full container width */
.sfd-mega-panel-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 0px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

/* ── Auto-fill grid: each card min 200px, fills available width ── */
.sfd-mega-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0px;
	align-items: start;
	width: 100%;
}

/* Individual card container with divider */
.sfd-mega-cards > a {
	border-right: 1px solid #E5E5E5;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 16px 18px;
	align-self: stretch;
}

.sfd-mega-cards > a:last-child {
	border-right: none;
}

/* Individual card, image LEFT, text RIGHT, full grid-cell width */
.sfd-mega-card {
	display: flex !important;          /* override inline-level <a> default */
	flex-direction: row !important;
	align-items: flex-start;           /* pin image + text to the TOP of each card */
	gap: 14px;
	min-height: 0;
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.15s ease;
	width: 100%;
}

.sfd-mega-card:hover {
	background: #f7f7f7;
}

/* Image, LEFT side (first in DOM order), fixed square */
.sfd-mega-card-image {
	width: 84px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	order: 0;
}

/* Text block, RIGHT side (second in DOM order), grows to fill */
.sfd-mega-card-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	order: 1;
}

.sfd-mega-card-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.35;
	color: #262626;
	margin: 0;
}

.sfd-mega-card-desc {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #777;
	margin: 0;
	min-height: 80px;
}

/* CTA button in mega menu cards */
.sfd-mega-card-cta {
	display: inline-block;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #F9B233;
	margin-top: 8px;
	transition: color 0.2s ease;
}

.sfd-mega-card:hover .sfd-mega-card-cta {
	color: #D7811A;
}

.sfd-mega-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

/* Branded colour placeholder */

.sfd-mega-card-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	overflow: hidden;
}

.sfd-mega-card-placeholder > svg {
	width: 52px;
	height: 52px;
	display: block;
	flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
	.sfd-mega-panel {
		display: none !important;
	}
}

/* =============================================
   SUBSCRIPTION CTA  (pre-footer, footer.html)
   Figma node 4246-9654, white, centred, 160px v-padding
   ============================================= */
.sfd-sub-cta {
	background: #ffffff;
	width: 100%;
	border-top: 1px solid #f0f0f0;
	position: relative;
	overflow: hidden;
}

/* Three colored organic blobs in brand colors with animation */
.sfd-sub-cta::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 31%;
	transform: translate(-50%, -50%);
	width: 420px;
	height: 340px;
	background: rgba(243, 65, 136, 0.08); /* Pink */
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	pointer-events: none;
	z-index: 0;
	animation: sfd-blob-float-1 18s ease-in-out infinite;
}

.sfd-sub-cta::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 31%;
	transform: translate(50%, -50%);
	width: 380px;
	height: 310px;
	background: rgba(140, 217, 51, 0.08); /* Green */
	border-radius: 45% 55% 62% 38% / 52% 48% 52% 48%;
	pointer-events: none;
	z-index: 0;
	animation: sfd-blob-float-2 22s ease-in-out infinite;
}

/* Third blob using a generated child element via CSS */
.sfd-sub-cta__inner::before {
	content: '';
	position: absolute;
	top: 34%;
	left: 56%;
	transform: translate(-50%, -50%);
	width: 360px;
	height: 290px;
	background: rgba(251, 171, 4, 0.08); /* Orange */
	border-radius: 55% 45% 48% 52% / 38% 62% 38% 62%;
	pointer-events: none;
	z-index: 0;
	animation: sfd-blob-float-3 20s ease-in-out infinite;
}

/* Blob animations - subtle floating and throbbing */
@keyframes sfd-blob-float-1 {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
	}
	33% {
		transform: translate(-48%, -52%) scale(1.05);
	}
	66% {
		transform: translate(-52%, -48%) scale(0.98);
	}
}

@keyframes sfd-blob-float-2 {
	0%, 100% {
		transform: translate(50%, -50%) scale(1);
	}
	40% {
		transform: translate(52%, -48%) scale(1.06);
	}
	70% {
		transform: translate(48%, -52%) scale(0.97);
	}
}

@keyframes sfd-blob-float-3 {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
	}
	35% {
		transform: translate(-52%, -52%) scale(1.04);
	}
	65% {
		transform: translate(-48%, -48%) scale(0.99);
	}
}

/* Disable blob animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sfd-sub-cta::before,
	.sfd-sub-cta::after,
	.sfd-sub-cta__inner::before,
	.sfd-shop-hero::before,
	.sfd-blog-hero::before {
		animation: none;
	}
}

.sfd-sub-cta__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 160px 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Stars + rating + reviews row */
.sfd-sub-cta__proof {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sfd-sub-cta__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.sfd-sub-cta__rating,
.sfd-sub-cta__reviews {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #262626;
}

.sfd-sub-cta__divider {
	display: inline-block;
	width: 1px;
	height: 16px;
	background: #e5e5e5;
	flex-shrink: 0;
}

/* Heading + subtext */
.sfd-sub-cta__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sfd-sub-cta__heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -0.72px;
	color: #262626;
	margin: 0;
}

.sfd-sub-cta__desc {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #646464;
	margin: 0;
	max-width: 640px;
}

/* CTA button override, min-width matches Figma (240px) */
.sfd-sub-cta__btn {
	min-width: 240px;
}

/* Responsive */
@media (max-width: 768px) {
	.sfd-sub-cta__inner {
		padding: 80px 24px;
		gap: 28px;
	}

	.sfd-sub-cta__heading {
		font-size: 26px;
		line-height: 34px;
	}

	.sfd-sub-cta__desc {
		font-size: 17px;
	}

	.sfd-sub-cta__btn {
		min-width: unset;
		width: 100%;
		text-align: center;
	}
}

/* =============================================
   SITE FOOTER, matches Figma 4-column layout
   ============================================= */

/* Outer footer wrapper */
.sfd-footer {
	background: #ffffff;
	border-top: 1px solid #ebebeb;
	padding: 0;
}

/* Override FunnelKit's forced footer margin */
footer, .site-footer, #footer, .wfacp_footer_container {
	margin-top: 0 !important;
}

/* The wp-block-group constrained container already handles max-width 1280px */
.sfd-footer .wp-block-group__inner-container,
.sfd-footer > .wp-block-group {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Main column row */
.sfd-footer-main {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 60px 0px 56px !important;
}

/* Brand column */
.sfd-footer-brand {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	max-width: 240px;
}

.sfd-footer-logo {
	font-family: 'Nunito', sans-serif;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.44px;
	text-decoration: none;
	line-height: 1;
}

.sfd-footer-tagline {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #808080;
	margin: 0 !important;
}

/* "Join Now" widget in footer brand column, styled like the edge widget */
.sfd-footer-join-widget {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, #569E03 0%, #8CD933 100%);
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(86, 158, 3, 0.25);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	align-self: flex-start;
	margin-top: 12px;
}

.sfd-footer-join-widget:hover,
.sfd-footer-join-widget:focus-visible {
	background: linear-gradient(135deg, #8CD933 0%, #569E03 100%);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(86, 158, 3, 0.35);
	transform: translateY(-2px);
}

.sfd-footer-join-widget__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.sfd-footer-join-widget__icon svg {
	display: block;
}

.sfd-footer-join-widget__text {
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Each link column */
.sfd-footer-col {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}

/* Column section heading (e.g. "Programs", "Blog") */
.sfd-footer-col-heading,
h4.sfd-footer-col-heading {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #808080 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
}

/* Navigation links inside footer columns */
.sfd-footer-nav .wp-block-navigation__container,
ul.sfd-footer-nav,
.sfd-footer-nav ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sfd-footer-nav .wp-block-navigation-item__content,
ul.sfd-footer-nav a,
.sfd-footer-nav a {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: #646464 !important;
	text-decoration: none !important;
	padding: 0 !important;
	transition: color 0.15s;
}

.sfd-footer-nav a:hover,
.sfd-footer-nav .wp-block-navigation-item__content:hover {
	color: #262626 !important;
}

/* ── Bottom bar ── */
.sfd-footer-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap;
	gap: 16px;
	padding: 24px 0px !important;
	border-top: 1px solid #ebebeb;
}

.sfd-footer-copyright,
p.sfd-footer-copyright {
	font-family: 'Nunito', sans-serif !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #808080 !important;
	margin: 0 !important;
}

.sfd-footer-legal-row {
	display: flex !important;
	align-items: center !important;
	gap: 18px;
}

.sfd-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sfd-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	color: #808080;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

.sfd-footer-social__link:hover {
	color: #262626;
	background: #f7f7f7;
}

.sfd-footer-social__link svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Legal nav in bottom bar */
.sfd-footer-legal-nav .wp-block-navigation__container,
.sfd-footer-legal-nav ul {
	display: flex !important;
	flex-direction: row !important;
	gap: 24px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sfd-footer-legal-nav .wp-block-navigation-item__content,
.sfd-footer-legal-nav a {
	font-family: 'Nunito', sans-serif !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #808080 !important;
	text-decoration: none !important;
	padding: 0 !important;
}

.sfd-footer-legal-nav a:hover {
	color: #262626 !important;
}

/* Strip Gutenberg block gaps/margins inside footer nav blocks */
.sfd-footer .wp-block-navigation {
	--wp--style--block-gap: 12px;
}

.sfd-footer .wp-block-navigation .wp-block-navigation-item {
	margin: 0 !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
	.sfd-hero {
		padding: 60px 40px 72px;
	}
	.sfd-hero-inner {
		gap: 24px;
	}
	.sfd-hero-heading {
		font-size: 42px;
		line-height: 46px;
	}
	.sfd-section,
	.sfd-products-section,
	.sfd-cta-section {
		padding: 60px 40px;
	}

	/* Testimonials slider, tablet */
	.sfd-tmsl-text {
		padding: 32px 36px;
	}
}

@media (max-width: 768px) {
	.sfd-header {
		padding: 0 24px;
	}

	.sfd-header-inner {
		height: 64px;
	}

	/* Smaller logo on mobile to fit all header elements */
	.sfd-logo {
		font-size: 18px;
		letter-spacing: -0.36px;
	}

	.sfd-hero {
		padding: 48px 24px 64px;
	}

	.sfd-hero-inner {
		grid-template-columns: 1fr;
	}

	.sfd-hero-image {
		display: flex; /* show image on mobile at top */
	}

	.sfd-hero-heading {
		font-size: 32px;
		line-height: 36px;
		letter-spacing: -0.5px;
	}

	.sfd-hero-subtext {
		font-size: 17px;
	}

	.sfd-social-proof {
		gap: 6px;
	}

	.sfd-hero-buttons {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 12px;
	}

	.sfd-btn-hero-primary {
		min-width: unset;
		text-align: center;
	}

	.sfd-media-strip {
		padding: 24px;
	}

	.sfd-section,
	.sfd-products-section,
	.sfd-cta-section {
		padding: 48px 24px;
	}

	.sfd-cards {
		grid-template-columns: 1fr;
	}

	/* Testimonials slider, mobile: stack card vertically */
	.sfd-tmsl-section {
		padding: 48px 20px;
	}

	.sfd-tmsl-inner {
		padding: 0;
	}

	.sfd-tmsl-card {
		flex-direction: column-reverse;
		min-height: auto;
		border-radius: 20px;
	}

	.sfd-tmsl-text {
		padding: 36px 28px;
		gap: 24px;
	}

	.sfd-tmsl-upper {
		gap: 20px;
	}

	.sfd-tmsl-quote {
		font-size: 22px;
		line-height: 30px;
		letter-spacing: -0.44px;
	}

	.sfd-tmsl-name {
		font-size: 16px;
	}

	/* Mobile video: full width of card, height from 16:9 aspect-ratio */
	.sfd-tmsl-video {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9; /* inherits from base, explicit here for clarity */
		border-radius: 0 0 20px 20px;
	}

	.sfd-faq-section {
		padding: 48px 24px;
	}

	.sfd-faq-heading {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 32px;
	}

	.sfd-faq-question-text {
		font-size: 16px;
	}

	/* Footer responsive */
	.sfd-footer-main {
		flex-direction: column !important;
		padding: 40px 24px 32px !important;
		gap: 32px;
	}

	.sfd-footer-brand {
		max-width: 100%;
	}

	.sfd-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px !important;
	}

	.sfd-footer-legal-row {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.sfd-footer-legal-nav .wp-block-navigation__container,
	.sfd-footer-legal-nav ul {
		flex-wrap: wrap !important;
		gap: 16px !important;
	}
}


/* ==========================================================================
   Shop Hero  (sfd/shop-hero)
   ========================================================================== */

.sfd-shop-hero {
	background: #fff;
	padding: 80px 24px;
	position: relative;
	overflow: hidden;
	min-height: 45vh;
	display: flex;
	align-items: center;
}

.sfd-shop-hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 360px;
	height: 290px;
	background: rgba(140, 217, 51, 0.10);
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	pointer-events: none;
	z-index: 0;
	animation: sfd-blob-float-1 18s ease-in-out infinite;
}

.sfd-shop-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.sfd-shop-hero__inner > * {
	position: relative;
	z-index: 1;
}

/* "Shop" pink eyebrow label */
.sfd-shop-hero__label {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
}

.sfd-shop-hero__title-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.sfd-shop-hero__title {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	color: #262626;
}

.sfd-shop-hero__desc {
	margin: 0;
	max-width: 600px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #646464;
}

/* ==========================================================================
   Shop Grid  (sfd/shop-grid)
   ========================================================================== */

.sfd-shop-grid-section {
	background: #fff;
	padding: 0 24px 80px;
}

.sfd-shop-grid-inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */

.sfd-shop-filters {
	padding-bottom: 24px;
	border-bottom: 1px solid #E4E4E4;
	position: relative;
}

/* Scrollable wrapper with fade effect */
.sfd-shop-tabs-scroll-wrap {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* fade hint on right edge */
	mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}

.sfd-shop-tabs-scroll-wrap::-webkit-scrollbar {
	display: none;
}

.sfd-shop-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
}

.sfd-shop-tabs::-webkit-scrollbar {
	display: none;
}

.sfd-shop-tab {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 100px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #535862;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
	user-select: none;
	flex-shrink: 0;
}

.sfd-shop-tab:hover {
	border-color: #8CD933;
	color: #325D00;
	background: #F3FFE6;
}

.sfd-shop-tab--active {
	background: #8CD933;
	border-color: #8CD933;
	color: #181D27;
}

.sfd-shop-tab--active:hover {
	background: #7cc92e;
	border-color: #7cc92e;
	color: #181D27;
}

/* ── Product grid ──────────────────────────────────────────────────────────── */

.sfd-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sfd-shop-grid-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #808080;
	font-size: 15px;
	padding: 40px 0;
}

/* ── Product card ──────────────────────────────────────────────────────────── */

.sfd-shop-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* `display: flex` above overrides the UA default for [hidden], which
   is why the category filter looked dead, JS was setting hidden=""
   correctly, but cards remained visible. Force-hide when filtered. */
.sfd-shop-card[hidden] {
	display: none !important;
}

.sfd-shop-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

/* Card image */
.sfd-shop-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #F7F7F7;
	flex-shrink: 0;
}

.sfd-shop-card__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.sfd-shop-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sfd-shop-card:hover .sfd-shop-card__image img {
	transform: scale(1.04);
}

/* Card body */
.sfd-shop-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 16px 20px;
	flex: 1;
}

/* Category tag pill */
.sfd-shop-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 100px;
	align-self: flex-start;
}

.sfd-shop-tag-icon {
	flex-shrink: 0;
}

.sfd-shop-card__tag-label {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #808080;
    text-transform: capitalize;
    letter-spacing: 0.04em;
}

/* Title + rating + price */
.sfd-shop-card__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.sfd-shop-card__upper {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sfd-shop-card__title {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #262626;
	text-align: center;
}

.sfd-shop-card__title a {
	color: inherit;
	text-decoration: none;
}

.sfd-shop-card__title a:hover {
	color: #EE728E;
}

/* Star rating row */
.sfd-shop-card__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.sfd-shop-card__stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.sfd-shop-star-icon {
	display: inline-block;
	flex-shrink: 0;
}

.sfd-shop-card__review-count {
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #B0B0B0;
}

/* Price */
.sfd-shop-card__price {
	text-align: center;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: #262626;
}

.sfd-shop-card__price .woocommerce-Price-amount,
.sfd-shop-card__price .amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.sfd-shop-card__price del {
	color: #B0B0B0;
	font-weight: 400;
	margin-right: 4px;
}

.sfd-shop-card__price ins {
	text-decoration: none;
}

/* Add to Cart button */
.sfd-shop-card__btn {
	display: block;
	width: 100%;
	padding: 10px 16px;
	background: #DBF1C3;
	color: #315C00;
	border: 1.5px solid #A8D977;
	border-radius: 12px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	margin-top: auto;
}

.sfd-shop-card__btn:hover,
.sfd-shop-card__btn:focus-visible {
	background: #c8e9aa;
	border-color: #55A702;
	color: #274d00;
	text-decoration: none;
}

/* WooCommerce AJAX "added" state */
.sfd-shop-card__btn.added::after {
	content: ' ✓';
	font-weight: 800;
}

/* Hide the "View cart" link that WooCommerce injects after AJAX add-to-cart */
.sfd-shop-card__btn.added_to_cart.wc-forward {
	display: none !important;
}

/* WooCommerce AJAX "loading" state, WC adds this class to the button
   while the add-to-cart request is in flight. Hide the label and show
   a spinner so the user knows their click is being processed. */
.sfd-shop-card__btn.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	cursor: progress;
}
.sfd-shop-card__btn.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba( 49, 92, 0, 0.25 );
	border-top-color: #315C00;
	border-radius: 50%;
	animation: sfd-shop-btn-spin 0.65s linear infinite;
}
@keyframes sfd-shop-btn-spin {
	to { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.sfd-shop-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.sfd-shop-hero {
		padding: 48px 20px;
	}

	.sfd-shop-hero__title {
		font-size: 26px;
	}

	.sfd-shop-hero__desc {
		font-size: 15px;
	}

	.sfd-shop-grid-section {
		padding: 0 20px 60px;
	}

	.sfd-shop-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.sfd-shop-grid {
		grid-template-columns: 1fr;
	}

	.sfd-shop-card__body {
		padding: 12px 12px 16px;
	}
}

/* Image broken / missing, show a grey placeholder with a soft icon */
.sfd-shop-card__image img.is-placeholder,
.sfd-shop-card__image img[src=""] {
	opacity: 0;
}

.sfd-shop-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F0F0F0;
	color: #C0C0C0;
}

.sfd-shop-card__image--placeholder::after {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='10' fill='%23E8E8E8'/%3E%3Cpath d='M14 38l10-12 7 8 5-5 6 9H14z' fill='%23C8C8C8'/%3E%3Ccircle cx='21' cy='22' r='4' fill='%23C8C8C8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ==========================================================================
   Newsletter / Mailing List  (sfd/newsletter)
   Figma node 4246:8566, light grey bg, text left / form right
   ========================================================================== */

.sfd-newsletter {
	background: #F7F7F7;
	width: 100%;
	padding: 48px 80px;
}

.sfd-newsletter__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 24px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	gap: 48px;
}

/* Text */
.sfd-newsletter__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 768px;
	flex: 1;
}

.sfd-newsletter__heading {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	color: #262626;
}

.sfd-newsletter__desc {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #646464;
}

/* Right: form */
.sfd-newsletter__form {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfd-newsletter__fields {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

/* Email input */
.sfd-newsletter__input {
	flex: 1 1 0;
	min-width: 240px;
	padding: 10px 16px;
	background: #ffffff;
	border: 1px solid #D9D9D9;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #262626;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sfd-newsletter__input::placeholder {
	color: #808080;
}

.sfd-newsletter__input:focus {
	border-color: #8CD933;
	box-shadow: 0 0 0 3px rgba(140, 217, 51, 0.18);
}

/* Subscribe button */
.sfd-newsletter__btn {
	padding: 14px 32px;
	border: none;
	border-radius: 12px;
	background: #8cd933;
	color: #000000;
	font-family: 'Nunito', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.sfd-newsletter__btn:hover {
	opacity: 0.88;
}

.sfd-newsletter__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Feedback message */
.sfd-newsletter__feedback {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	line-height: 20px;
}

.sfd-newsletter__feedback.is-success {
	color: #325D00;
}

.sfd-newsletter__feedback.is-error {
	color: #C00;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.sfd-newsletter {
		padding: 48px 40px;
	}

	.sfd-newsletter__inner {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.sfd-newsletter__text {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.sfd-newsletter {
		padding: 40px 20px;
	}

	.sfd-newsletter__fields {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.sfd-newsletter__input {
		min-width: 0;
		width: 100%;
	}

	.sfd-newsletter__btn {
		text-align: center;
	}
}

/* ==========================================================================
   Simple Hero (sfd/simple-hero) - Reusable hero section with decorative blob
   ========================================================================== */

.sfd-simple-hero {
	background: #fff;
	padding: 60px 24px;
	border-bottom: 1px solid #f0f0f0;
	position: relative;
	overflow: hidden;
	min-height: 30vh;
	display: flex;
	align-items: center;
}

.sfd-simple-hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 360px;
	height: 290px;
	background: rgba(140, 217, 51, 0.10);
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	pointer-events: none;
	z-index: 0;
	animation: sfd-blob-intro 1.2s ease-out forwards, sfd-blob-float-1 18s ease-in-out 1.2s infinite;
}

/* Blob intro animation - zoom in and settle */
@keyframes sfd-blob-intro {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.3);
	}
	60% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (max-width: 768px) {
	.sfd-simple-hero::before {
		width: 280px;
		height: 220px;
	}
}

@media (max-width: 480px) {
	.sfd-simple-hero::before {
		width: 220px;
		height: 180px;
	}
}

/* Blob color variants */
.sfd-simple-hero--pink::before {
	background: rgba(243, 65, 136, 0.10);
}

.sfd-simple-hero--orange::before {
	background: rgba(251, 171, 4, 0.10);
}

.sfd-simple-hero--green::before {
	background: rgba(140, 217, 51, 0.10);
}

.sfd-simple-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.sfd-simple-hero__inner > * {
	position: relative;
	z-index: 1;
}

.sfd-simple-hero__label {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
}

.sfd-simple-hero__title {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.72px;
	color: #181d27;
}

.sfd-simple-hero__desc {
	margin: 4px 0 0;
	max-width: 624px;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #535862;
}

@media (max-width: 600px) {
	.sfd-simple-hero {
		padding: 32px 20px;
	}

	.sfd-simple-hero__title {
		font-size: 28px;
	}

	.sfd-simple-hero__desc {
		font-size: 16px;
	}
}

/* ==========================================================================
   Blog Archive  (archive.html)
   ========================================================================== */

/* ── Blog Category Filter Tabs ── */
/* Mirrors the shop grid tab pattern exactly */

/* ── Blog Filter Bar (inside grid-inner, border spans card width) ── */
.sfd-blog-filters {
	padding-bottom: 24px;
	border-bottom: 1px solid #E4E4E4;
}

/* Scrollable wrapper with fade effect */
.sfd-blog-tabs-scroll-wrap {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* fade hint on right edge */
	mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}

.sfd-blog-tabs-scroll-wrap::-webkit-scrollbar {
	display: none;
}

.sfd-blog-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
}

.sfd-blog-tabs::-webkit-scrollbar {
	display: none;
}

.sfd-blog-tab {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 100px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #535862;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
	user-select: none;
	flex-shrink: 0;
}

.sfd-blog-tab:hover {
	border-color: #8CD933;
	color: #325D00;
	background: #F3FFE6;
}

.sfd-blog-tab--active {
	background: #8CD933;
	border-color: #8CD933;
	color: #181D27;
}

.sfd-blog-tab--active:hover {
	background: #7cc92e;
	border-color: #7cc92e;
	color: #181D27;
}

/* ── Blog Featured Story Slider ── */
/* ── Blog Hero Grid (Sticky Posts) ── */
.sfd-blog-hero-wrap {
	background: #fff;
	margin-top: 48px;
}

.sfd-blog-hero__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto auto;
	gap: 24px;
}

/* Featured card (first sticky post) spans the left column full height */
.sfd-blog-hero-card--featured {
	grid-row: 1 / 3;
}

.sfd-blog-hero-card {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #EBEBEB;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sfd-blog-hero-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.sfd-blog-hero-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.sfd-blog-hero-card--featured .sfd-blog-hero-card__link {
	flex-direction: row;
}

.sfd-blog-hero-card__image {
	overflow: hidden;
	flex-shrink: 0;
}

.sfd-blog-hero-card:not(.sfd-blog-hero-card--featured) .sfd-blog-hero-card__image {
	height: 160px;
}

.sfd-blog-hero-card--featured .sfd-blog-hero-card__image {
	width: 50%;
	min-height: 380px;
}

.sfd-blog-hero-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sfd-blog-hero-card__content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.sfd-blog-hero-card--featured .sfd-blog-hero-card__content {
	padding: 32px;
	gap: 12px;
}

.sfd-blog-hero-card__category {
	display: inline-block;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cat-color, #8CD933);
	padding: 3px 10px;
	border: 1.5px solid var(--cat-color, #8CD933);
	border-radius: 100px;
	width: fit-content;
}

.sfd-blog-hero-card__title {
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: #1A1A1A;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfd-blog-hero-card--featured .sfd-blog-hero-card__title {
	font-size: 26px;
	-webkit-line-clamp: 4;
}

.sfd-blog-hero-card__title:hover {
	color: #8CD933;
}

.sfd-blog-hero-card__excerpt {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #555;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfd-blog-hero-card__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: 8px;
}

.sfd-blog-hero-card__meta time {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 13px;
	color: #999;
}

.sfd-blog-hero-card__read-more {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #8CD933;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sfd-blog-hero-card__read-more:hover {
	color: #6BBF1A;
}

/* ── Blog Grid Section ── */
.sfd-blog-grid-section {
	background: #fff;
	padding: 0 24px 80px;
}

.sfd-blog-grid-inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
	overflow: hidden;
}

/* ── Blog Grid ── */
.sfd-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	overflow: hidden;
}

.sfd-blog-grid > .wp-block-post {
	width: 100%;
	display: flex;
	min-width: 0;
}

.sfd-blog-grid-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #808080;
	font-size: 16px;
	padding: 60px 20px;
}

/* ── Blog Card ── */
.sfd-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #EBEBEB;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
	min-width: 0;
	width: 100%;
}

/* Force-hide blog cards when filtered by category tabs */
.sfd-blog-card[hidden],
.wp-block-post[hidden] {
	display: none !important;
}

.sfd-blog-card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
	transform: translateY(-4px);
}

.sfd-blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Card image */
.sfd-blog-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #F7F7F7;
	flex-shrink: 0;
	min-height: 180px;
}

/* Placeholder for posts without a featured image */
.sfd-blog-card__image:not(:has(img))::after {
	content: '';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F0F0F0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='10' fill='%23E8E8E8'/%3E%3Cpath d='M14 38l10-12 7 8 5-5 6 9H14z' fill='%23C8C8C8'/%3E%3Ccircle cx='21' cy='22' r='4' fill='%23C8C8C8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 56px;
}

.sfd-blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sfd-blog-card:hover .sfd-blog-card__image img {
	transform: scale(1.05);
}

/* Card body */
.sfd-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	flex: 1;
}

/* Meta row */
.sfd-blog-card__category {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Fade at edges so overflowing tags hint at more content */
	mask-image: linear-gradient(to right, black 0%, black 16px, black calc(100% - 16px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black 0%, black 16px, black calc(100% - 16px), transparent 100%);
}

.sfd-blog-card__category::-webkit-scrollbar {
	display: none;
}

.sfd-blog-card__category a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 100px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 600;
	color: #808080;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.sfd-blog-card__category a::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23808080' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23808080'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sfd-blog-card__category a:hover {
	color: #262626;
}

/* Brand colour variants, applied by JS via data-sfd-tag-color */
.sfd-blog-card__category a[data-sfd-tag-color="pink"] {
	background: #fff0f5;
	border-color: #ffc2d8;
	color: #C80468;
}
.sfd-blog-card__category a[data-sfd-tag-color="pink"]::before {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23C80468' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23C80468'/%3E%3C/svg%3E");
}
.sfd-blog-card__category a[data-sfd-tag-color="pink"]:hover {
	background: #ffe0ed;
	color: #9e0350;
}

.sfd-blog-card__category a[data-sfd-tag-color="green"] {
	background: #f3ffe6;
	border-color: #b8e87a;
	color: #325D00;
}
.sfd-blog-card__category a[data-sfd-tag-color="green"]::before {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23325D00' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23325D00'/%3E%3C/svg%3E");
}
.sfd-blog-card__category a[data-sfd-tag-color="green"]:hover {
	background: #dff5bb;
	color: #204000;
}

.sfd-blog-card__category a[data-sfd-tag-color="orange"] {
	background: #fff8ea;
	border-color: #fdd98a;
	color: #9a5c00;
}
.sfd-blog-card__category a[data-sfd-tag-color="orange"]::before {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%239a5c00' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%239a5c00'/%3E%3C/svg%3E");
}
.sfd-blog-card__category a[data-sfd-tag-color="orange"]:hover {
	background: #fdecc4;
	color: #7a4800;
}

.sfd-blog-card__category .wp-block-post-terms__separator {
	display: none;
}

.sfd-blog-card__date {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #999;
}

.sfd-blog-card__date time {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Date badge overlaid on image */
.sfd-blog-card__image .sfd-blog-card__date {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	background: #F34188;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 6px;
	pointer-events: none;
}

.sfd-blog-card__image .sfd-blog-card__date time {
	color: #ffffff;
	font-size: inherit;
	font-family: inherit;
}

/* Title */
.sfd-blog-card__title {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: #000000;
}

.sfd-blog-card__title a {
	color: #000000;
	text-decoration: none;
}

.sfd-blog-card:hover .sfd-blog-card__title a {
	color: #F34188;
}

/* Excerpt */
.sfd-blog-card__excerpt {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #646464;
	flex: 1;
}

.sfd-blog-card__excerpt p {
	margin: 0;
}

/* Read more */
.sfd-blog-card__read-more {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #F34188;
	margin-top: auto;
	display: inline-block;
}

.sfd-blog-card:hover .sfd-blog-card__read-more {
	color: #C80468;
}

.sfd-blog-card:hover .sfd-blog-card__read-more {
	opacity: 0.75;
}

/* ── Pagination ── */
.sfd-blog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.sfd-blog-pagination .wp-block-query-pagination-previous,
.sfd-blog-pagination .wp-block-query-pagination-next,
.sfd-blog-pagination .wp-block-query-pagination-numbers {
	margin: 0;
}

.sfd-blog-pagination a,
.sfd-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #646464;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.2s ease, color 0.2s ease;
}

.sfd-blog-pagination a:hover {
	background: #f7f7f7;
	color: #262626;
}

.sfd-blog-pagination .page-numbers.current {
	background: #F34188;
	color: #fff;
}

.sfd-blog-pagination .page-numbers.dots {
	background: none;
	color: #999;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.sfd-blog-hero__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.sfd-blog-hero-card--featured {
		grid-row: auto;
	}

	.sfd-blog-hero-card--featured .sfd-blog-hero-card__link {
		flex-direction: column;
	}

	.sfd-blog-hero-card--featured .sfd-blog-hero-card__image {
		width: 100%;
		min-height: 240px;
	}

	.sfd-blog-hero-card--featured .sfd-blog-hero-card__content {
		padding: 20px;
		gap: 8px;
	}

	.sfd-blog-hero-card--featured .sfd-blog-hero-card__title {
		font-size: 20px;
		-webkit-line-clamp: 3;
	}
}

@media (max-width: 900px) {
	.sfd-blog-grid-section {
		padding: 60px 20px;
	}

	.sfd-blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.sfd-blog-grid-section {
		padding: 48px 20px;
	}

	.sfd-blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.sfd-blog-card__body {
		padding: 20px;
	}
}

/* ==========================================================================
   Single Post (templates/single.html)
   ========================================================================== */

.sfd-single-post {
	background: #fff;
}

.sfd-single-hero {
	padding: 120px 24px 80px;
}

.sfd-single-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sfd-single-hero__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
}

.sfd-single-hero__date {
	font-size: 12px;
	color: #808080;
	margin: 0;
}

.sfd-single-hero__reading-time {
	font-size: 12px;
	color: #808080;
	margin: 0;
}

.sfd-single-hero__category {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin: 0;
}

.sfd-single-hero__category a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 100px;
	font-family: 'Nunito Sans', 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #808080;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.sfd-single-hero__category a::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23808080' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23808080'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sfd-single-hero__category a:hover {
	color: #262626;
}

.sfd-single-hero__category .wp-block-post-terms__separator {
	display: none;
}

.sfd-single-hero__tags {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.sfd-single-hero__tags a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 100px;
	font-family: "Nunito Sans", "Nunito", sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #808080;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.sfd-single-hero__tags a::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5h4.17l4.33 4.33a1 1 0 0 1 0 1.41L7.24 10a1 1 0 0 1-1.41 0L1.5 5.67V1.5z' stroke='%23808080' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='3.5' r='.75' fill='%23808080'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sfd-single-hero__tags a:hover {
	color: #262626;
}

.sfd-single-hero__tags .wp-block-post-terms__separator {
	display: none;
}

.sfd-single-hero__title {
	margin: 0;
	max-width: 880px;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #262626;
}

.sfd-single-hero__excerpt,
.sfd-single-hero__excerpt p {
	margin: 0;
	max-width: 860px;
	font-size: 20px;
	line-height: 1.6;
	color: #646464;
}

.sfd-single-hero__image {
	margin: 24px 0 0;
	border-radius: 10px;
	overflow: hidden;
}

.sfd-single-hero__image img {
	width: 100%;
	height: auto;
	display: block;
}

.sfd-single-content {
	padding: 0 24px 120px;
	border-top: 1px solid #f0f0f0;
}

.sfd-single-content__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-top: 64px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 64px;
	align-items: start;
}

.sfd-single-content__article {
	min-width: 0;
}

.sfd-single-content__body {
	font-size: 18px;
	line-height: 1.7;
	color: #262626;
}

.sfd-single-content__body > * {
	max-width: 860px;
}

.sfd-single-content__body h2,
.sfd-single-content__body h3 {
	color: #56990F;
	line-height: 1.3;
	margin-top: 2em;
}

.sfd-single-content__aside {
	position: relative;
}

.sfd-single-subscribe {
	position: sticky;
	top: 110px;
	border: 1px solid #ebebeb;
	border-radius: 16px;
	padding: 24px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sfd-single-subscribe__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #F34188;
}

.sfd-single-subscribe__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	color: #262626;
}

.sfd-single-subscribe__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #646464;
}

.sfd-single-subscribe__btn {
	margin-top: 6px;
	width: 100%;
	justify-content: center;
}

@media (max-width: 1024px) {
	.sfd-single-content__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.sfd-single-subscribe {
		position: static;
	}
}

@media (max-width: 600px) {
	.sfd-single-hero {
		padding: 60px 20px 48px;
	}

	.sfd-single-hero__excerpt,
	.sfd-single-hero__excerpt p {
		font-size: 17px;
	}

	.sfd-single-content {
		padding: 0 20px 64px;
	}

	.sfd-single-content__inner {
		padding-top: 40px;
	}
}


/* ==========================================================================
   HIW Hero (sfd/hiw-hero)
   ========================================================================== */

.sfd-hiw-hero {
	background: #ffffff;
	padding: 80px;
	min-height: 45vh;
	display: flex;
	align-items: center;
}

.sfd-hiw-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
}

.sfd-hiw-hero__content {
	flex: 1 1 0;
	min-width: 0;
}

.sfd-hiw-hero__heading {
	font-family: 'Nunito', sans-serif;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.15;
	color: #262626;
	margin: 0 0 20px;
}

.sfd-hiw-hero__subtext {
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: #555;
	margin: 0 0 32px;
}

.sfd-hiw-hero__image {
	flex: 0 0 auto;
}

.sfd-hiw-hero__image img {
	width: 100%;
	max-width: 540px;
	height: auto;
	border-radius: 16px;
	display: block;
}

/* ==========================================================================
   HIW Section (sfd/hiw-section)
   ========================================================================== */

.sfd-hiw-section {
	padding: 80px;
}

.sfd-hiw-section__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
}

.sfd-hiw-section__text-col {
	flex: 1 1 0;
	min-width: 0;
}

.sfd-hiw-section__image-col {
	flex: 1 1 0;
	min-width: 0;
}

.sfd-hiw-section__heading {
	font-family: 'Nunito', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.3;
	color: #262626;
	margin: 0 0 20px;
}

.sfd-hiw-section__text {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

.sfd-hiw-section__figure {
	margin: 0;
}

.sfd-hiw-section__figure img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}

@media (max-width: 768px) {
	.sfd-hiw-hero {
		padding: 48px 24px;
	}

	.sfd-hiw-hero__inner {
		flex-direction: column;
	}

	.sfd-hiw-hero__image img {
		max-width: 100%;
	}

	.sfd-hiw-section {
		padding: 48px 24px;
	}

	.sfd-hiw-section__inner {
		flex-direction: column;
	}
}

/* ==========================================================================
   WooCommerce Single Product Page
   ========================================================================== */

.sfd-single-product-page {
	background: #fff;
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* Product images */
.woocommerce-product-gallery {
	margin-bottom: 0;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery__image {
	border-radius: 12px;
	overflow: hidden;
}

/* Product title */
.sfd-single-product-page .wp-block-post-title {
	font-family: 'Nunito', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.3;
	color: #262626;
	margin: 0 0 20px;
}

/* Product price */
.sfd-single-product-page .woocommerce-Price-amount {
	font-family: 'Nunito', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #56990F;
}

/* Product excerpt */
.sfd-single-product-page .wp-block-post-excerpt {
	margin: 20px 0;
}

.sfd-single-product-page .wp-block-post-excerpt__excerpt {
	font-size: 16px;
	line-height: 1.7;
	color: #646464;
}

/* Add to cart form */
.sfd-single-product-page .wc-block-add-to-cart-form,
.sfd-single-product-page .wc-block-components-product-add-to-cart {
	margin: 30px 0;
}

.sfd-single-product-page .wc-block-components-product-button {
	background: #8CD933;
	color: #262626;
	border: 2px solid transparent;
	border-radius: 12px;
	padding: 12px 24px;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 16px;
	transition: opacity 0.15s;
}

.sfd-single-product-page .wc-block-components-product-button:hover {
	opacity: 0.9;
}

/* Product meta */
.sfd-single-product-page .wc-block-components-product-meta {
	margin: 20px 0;
	font-size: 14px;
	color: #808080;
}

/* Product tabs/details */
.sfd-single-product-page .wc-block-components-product-details {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 2px solid #e9ecef;
}

/* Breadcrumbs */
.sfd-single-product-page .woocommerce-breadcrumb {
	font-size: 14px;
	color: #808080;
	margin-bottom: 30px;
}

.sfd-single-product-page .woocommerce-breadcrumb a {
	color: #646464;
	text-decoration: none;
	transition: color 0.2s;
}

.sfd-single-product-page .woocommerce-breadcrumb a:hover {
	color: #262626;
}

@media (max-width: 768px) {
	/* Hero: Show image at top on mobile */
	.sfd-hero-inner {
		display: flex;
		flex-direction: column-reverse;
		gap: 32px;
	}
	
	.sfd-single-product-page {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sfd-single-product-page .wp-block-post-title {
		font-size: 24px;
	}

	.sfd-single-product-page .woocommerce-Price-amount {
		font-size: 22px;
	}
}

/* =============================================
   GLOBAL EDGE WIDGET, JOIN NOW
   ============================================= */
.sfd-join-now-edge-widget {
	--sfd-jn-glow: 0.18;
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 12px;
	min-width: 56px;
	border-radius: 12px 0 0 12px;
	background: #98DD48;
	color: #262626;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(152, 221, 72, var(--sfd-jn-glow));
	transition: background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
	opacity: 0.98;
}

.sfd-join-now-edge-widget:hover,
.sfd-join-now-edge-widget:focus-visible {
	--sfd-jn-glow: 0.34;
	background: #8CD933;
	color: #262626;
	opacity: 1;
}

.sfd-join-now-edge-widget__text {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
}

.sfd-join-now-edge-widget__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	transition: transform 0.4s ease;
}

.sfd-join-now-edge-widget__icon svg {
	display: block;
}

@media (max-width: 768px) {
	.sfd-join-now-edge-widget {
		display: none;
	}
}

/* =============================================
   Global section heading (used across homepage,
   about, contact, app, etc.)
   Base rule lives here so every page gets the
   same centered heading style regardless of which
   page-specific stylesheet is enqueued.
   ============================================= */
.section__heading {
	font-family: 'Nunito', sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: #262626;
	line-height: 1.2;
	margin: 0 0 1rem;
}

/* =============================================
   SUPER COACHES BLOCK (sfd/coaches)
   Used on About page and Team page.
   ============================================= */
.sfd-coaches {
	background: #fff;
}

.sfd-coaches__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sfd-coaches__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 624px;
	text-align: left;
}

.sfd-coaches__label {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #F34188;
	margin: 0;
}

.sfd-coaches__heading {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	letter-spacing: -0.72px;
	color: #181d27;
	margin: 0;
}

.sfd-coaches__desc {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #535862;
	margin: 4px 0 0;
}

.sfd-coaches__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

/* ── Coach card (compact: avatar left + name + intro + read more) ── */
.sfd-coach-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	background: #ffffff;
	border: 1px solid #eceff1;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	text-align: left;
}

.sfd-coach-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.sfd-coach-card__avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #f0f0f0;
}

.sfd-coach-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sfd-coach-card__avatar--placeholder {
	background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}

.sfd-coach-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.sfd-coach-card__name {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: #181d27;
	margin: 0;
}

.sfd-coach-card__role {
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: #ee7290;
	margin: 0;
}

.sfd-coach-card__intro {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #535862;
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sfd-coach-card__read-more {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 18px;
	color: #ee7290;
	display: inline-block;
	margin-top: auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.sfd-coaches__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.sfd-coaches__inner {
		padding: 60px 20px;
	}

	.sfd-coaches__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.sfd-coach-card {
		padding: 24px 16px 20px;
		gap: 10px;
	}

	.sfd-coach-card__avatar {
		width: 80px;
		height: 80px;
	}

	.sfd-coach-card__name {
		font-size: 16px;
		line-height: 22px;
	}

	.sfd-coaches__heading {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 480px) {
	.sfd-coaches__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.sfd-coach-card {
		padding: 16px 12px;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sfd-coach-card__avatar {
		width: 72px;
		height: 72px;
	}

	.sfd-coach-card__name {
		font-size: 15px;
		line-height: 20px;
	}

	.sfd-coaches__inner {
		padding: 48px 16px;
	}
}

/* =============================================
   COACH DETAIL CARDS (full details on /coaches/ page)
   ============================================= */

/* Decorative background blobs, contained within each coach detail section */
.sfd-coach-bg-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.sfd-coach-bg-blobs .sfd-coach-blob {
	position: absolute;
	width: 320px;
	height: 280px;
	transform: translate(-50%, -50%);
	border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
	animation: sfd-coach-blob-throb 8s ease-in-out infinite;
}

.sfd-coach-bg-blobs .sfd-coach-blob--2 {
	border-radius: 45% 55% 62% 38% / 52% 48% 52% 48%;
	animation-delay: -4s;
}

@keyframes sfd-coach-blob-throb {
	0%, 100% {
		border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%;
		transform: translate(-50%, -50%) scale(1);
	}
	25% {
		border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
		transform: translate(-50%, -50%) scale(1.08);
	}
	50% {
		border-radius: 45% 55% 48% 52% / 52% 48% 58% 42%;
		transform: translate(-50%, -50%) scale(0.95);
	}
	75% {
		border-radius: 55% 45% 52% 48% / 42% 58% 48% 52%;
		transform: translate(-50%, -50%) scale(1.04);
	}
}

/* ── Variant 1 ── */
.sfd-coach-bg--1 .sfd-coach-blob--1 { background: rgba(140, 217, 51, 0.08); }  /* green */
.sfd-coach-bg--1 .sfd-coach-blob--2 { background: rgba(243, 65, 136, 0.07); }  /* pink */

/* ── Variant 2 ── */
.sfd-coach-bg--2 .sfd-coach-blob--1 { background: rgba(243, 65, 136, 0.08); }  /* pink */
.sfd-coach-bg--2 .sfd-coach-blob--2 { background: rgba(249, 178, 51, 0.07); }  /* orange */

/* ── Variant 3 ── */
.sfd-coach-bg--3 .sfd-coach-blob--1 { background: rgba(249, 178, 51, 0.08); }  /* orange */
.sfd-coach-bg--3 .sfd-coach-blob--2 { background: rgba(140, 217, 51, 0.07); }  /* green */

@media (max-width: 768px) {
	.sfd-coach-bg-blobs .sfd-coach-blob {
		width: 180px;
		height: 160px;
	}
}

/* =============================================
   GUARANTEE BLOCK
   ============================================= */

.sfd-guarantee-block__link {
	font-size: 0.875rem;
}