/* ============================================================
   SnatchFive brand layer  v1.13.0
   One type scale, colour set, button and image treatment for every
   front-end page: our shortcode pages, WooCommerce (shop, product, cart,
   checkout, account), the blog and Why We Cook. Loaded after
   sf-platform.css. Sizes are in px because the theme's root font-size
   is 10px (rem would render ~40% small).
   ============================================================ */
:root {
	--sfb-ink: #3b3d43;
	--sfb-text: #5c5f66;
	--sfb-muted: #8a8d94;
	--sfb-blue: #0857f4;
	--sfb-lime: #b4e94c;
	--sfb-lime-hover: #a3d93f;
	--sfb-line: #e7e9ee;
	--sfb-soft: #f6f7f4;
	--sfb-radius: 18px;
	--sfb-radius-lg: 26px;
	--sfb-shadow: 0 14px 40px rgba(59, 61, 67, .10);
	--sfb-shadow-sm: 0 6px 18px rgba(59, 61, 67, .07);
	--sfb-h1: clamp(32px, 2.4vw + 19px, 50px);
	--sfb-h2: clamp(26px, 1.6vw + 18px, 38px);
	--sfb-h3: clamp(19px, .5vw + 16px, 22px);
}

/* ---- 1. Page heads on our own pages (How it Works, FAQ, Contact, Catering,
   Stockist, Community, Discount, Refer a Friend, Track Order, Affiliate) ---- */
.sf-page :is(.sf-hiw__title, .sf-faq__title, .sf-lead__title, .sf-track__title, .sf-refer__title, .sf-affil__title, .sf-disc__headline) {
	font-size: var(--sfb-h1) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em;
	color: var(--sfb-ink) !important;
	margin: 0 0 14px !important;
}
.sf-page :is(.sf-hiw__lead, .sf-faq__lead, .sf-lead__intro, .sf-track__lead, .sf-refer__lead, .sf-affil__lead) {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--sfb-text) !important;
}
.sf-page :is(.sf-hiw__head, .sf-faq__head, .sf-lead__head, .sf-track__head, .sf-refer__hero, .sf-affil__head) { margin-bottom: 36px !important; }
/* Section headings inside those pages. */
.sf-page :is(.sf-hiw__whytitle, .sf-card__title) {
	font-size: var(--sfb-h2) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	line-height: 1.15 !important;
	color: var(--sfb-ink) !important;
}
.sf-page :is(h3, h4):not([class*="__num"]) { color: var(--sfb-ink); letter-spacing: -.01em; }

/* ---- 2. Primary buttons: lime pill, dark text, one size everywhere ---- */
:is(.sf-page, .sf-dash, .ab-page, .ab-section, .ab-final, .ab-cater, .woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(
	.sf-btn--primary, .sf-lead__btn, .ab-btn--lime, .ab-btn--primary,
	.wc-proceed-to-checkout .checkout-button, #place_order,
	.woocommerce-Button, .woocommerce-button, .return-to-shop .button,
	button[name="login"], button[name="register"], button[name="save_account_details"], button[name="save_address"]
) {
	background: var(--sfb-lime) !important;
	border: 0 !important;
	color: var(--sfb-ink) !important;
	border-radius: 999px !important;
	min-height: 50px;
	padding: 0 28px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	text-transform: none !important;
	box-shadow: 0 10px 26px rgba(180, 233, 76, .3) !important;
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
:is(.sf-page, .sf-dash, .ab-page, .ab-section, .ab-final, .ab-cater, .woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(
	.sf-btn--primary, .sf-lead__btn, .ab-btn--lime, .ab-btn--primary,
	.wc-proceed-to-checkout .checkout-button, #place_order,
	.woocommerce-Button, .woocommerce-button, .return-to-shop .button,
	button[name="login"], button[name="register"], button[name="save_account_details"], button[name="save_address"]
):hover {
	background: var(--sfb-lime-hover) !important;
	color: var(--sfb-ink) !important;
	transform: translateY(-1px);
}
/* Theme Options CSS forces white "Place order" text; dark text on lime instead. */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout form.checkout #place_order { color: var(--sfb-ink) !important; }
/* Full width where the theme stretches them (checkout, cart totals). */
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 17px !important; }
/* Secondary buttons: brand-black outline pill. */
:is(.sf-page, .ab-section, .ab-final, .ab-cater) :is(.sf-btn--ghost, .ab-btn--ghost) {
	border-radius: 999px !important;
	min-height: 50px;
	padding: 0 26px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* ---- 3. Shop and category pages ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--sfb-ink) !important;
	letter-spacing: -.005em;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--sfb-ink) !important;
}
.woocommerce ul.products li.product .product-media {
	border-radius: var(--sfb-radius);
	overflow: hidden;
	background: var(--sfb-soft);
}
.woocommerce ul.products li.product .product-media img {
	border-radius: var(--sfb-radius);
	transition: transform .4s ease;
}
.woocommerce ul.products li.product .product-wrap:hover .product-media img { transform: scale(1.04); }
.shop-sidebar .widget-title,
.sidebar .widget-title {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--sfb-ink) !important;
	letter-spacing: -.005em;
	text-transform: none !important;
}

/* ---- 4. Single product ---- */
/* Theme Options custom CSS hides .entry-title site-wide (meant for page-title
   banners); that also hid every product name. Show it again on product pages. */
body.single-product .summary h1.product_title.entry-title { display: block !important; }
.single-product .product_title {
	font-size: var(--sfb-h2) !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
	letter-spacing: -.02em;
	color: var(--sfb-ink) !important;
}
.single-product .summary > .price,
.single-product .summary > .price .amount,
.single-product .summary .woocommerce-variation-price .amount {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--sfb-ink) !important;
}
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--sfb-text) !important;
}
.single-product .woocommerce-product-gallery img {
	border-radius: var(--sfb-radius-lg);
}
.single-product .woocommerce-tabs .tabs a,
.single-product .woocommerce-tabs .nav-link {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--sfb-ink) !important;
	text-transform: none !important;
}
.single-product .woocommerce-Tabs-panel,
.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li {
	font-size: 16px;
	line-height: 1.7;
	color: var(--sfb-text);
}
.single-product .woocommerce-Tabs-panel h2,
.single-product .related > h2,
.single-product .related .title,
.single-product section.related h2 {
	font-size: var(--sfb-h3) !important;
	font-weight: 800 !important;
	color: var(--sfb-ink) !important;
	text-transform: none !important;
	letter-spacing: -.01em;
}

/* ---- 5. Cart, checkout and account headings ---- */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.cart_totals > h2, #order_review_heading, .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .u-column1 > h2, .u-column2 > h2) {
	font-size: var(--sfb-h3) !important;
	font-weight: 800 !important;
	color: var(--sfb-ink) !important;
	letter-spacing: -.01em;
	text-transform: none !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(input.input-text, select, textarea) {
	border-radius: 12px !important;
	border-color: #d7dae1 !important;
	min-height: 48px;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(input.input-text, select, textarea):focus {
	border-color: var(--sfb-blue) !important;
	box-shadow: 0 0 0 3px rgba(8, 87, 244, .12) !important;
	outline: none;
}

/* ---- 6. Blog: listing and posts ---- */
:is(.blog, .single-post, .archive.category) :is(.post-title, .entry-title, .post-title a, .entry-title a) {
	color: var(--sfb-ink) !important;
	font-weight: 800 !important;
	letter-spacing: -.015em;
}
.single-post .post-title,
.single-post .entry-title { font-size: var(--sfb-h1) !important; line-height: 1.1 !important; }
.single-post :is(.post-content, .entry-content) :is(p, li) {
	font-size: 17px;
	line-height: 1.75;
	color: var(--sfb-text);
}
.single-post :is(.post-content, .entry-content) :is(h2, h3) {
	color: var(--sfb-ink);
	font-weight: 800;
	letter-spacing: -.015em;
	margin-top: 1.6em;
}
.single-post :is(.post-content, .entry-content) h2 { font-size: var(--sfb-h2); }
.single-post :is(.post-content, .entry-content) h3 { font-size: var(--sfb-h3); }
:is(.blog, .single-post, .archive.category) :is(.post-media img, .entry-content img, .post-content img, .wp-block-image img) {
	border-radius: var(--sfb-radius);
}

/* ---- 7. Why We Cook (custom page, ab-*) ---- */
.ab-section :is(h1, h2) { color: var(--sfb-ink); font-weight: 800; letter-spacing: -.025em; }
.ab-section h3 { color: var(--sfb-ink); letter-spacing: -.01em; }
.ab-section img:not([width="24"]):not([width="32"]) { border-radius: var(--sfb-radius); }

/* ---- 8. Subscription plans, calculator, sign-up wizard and dashboard
   (snatchfive-subscriptions, everything inside .sf-wrap). Its own palette was
   navy (#1A3C5E) and a system font: re-pointed to the brand here, scoped to
   .sf-wrap so nothing else that shares the variable names changes. ---- */
.sf-wrap {
	--sf-blue: #3b3d43;
	--sf-blue-light: #26282c;
	--sf-text: #3b3d43;
	--sf-muted: #5c5f66;
	--sf-green-dark: #a3d93f;
	--sf-border: #e7e9ee;
	--sf-radius: 18px;
	--sf-radius-sm: 12px;
	--sf-font: 'Poppins', sans-serif;
	font-family: 'Poppins', sans-serif;
	color: var(--sfb-ink);
}
.sf-wrap :is(h1, h2, h3, h4) { font-family: 'Poppins', sans-serif; color: var(--sfb-ink); letter-spacing: -.02em; }
.sf-wrap h2 { font-weight: 800; }
/* Every plan call to action: the same lime pill with dark text. */
.sf-wrap .sf-cta-btn,
.sf-wrap :is(.sf-cta-essential, .sf-cta-signature, .sf-cta-premium) {
	background: var(--sfb-lime) !important;
	color: var(--sfb-ink) !important;
	border-radius: 999px !important;
	font-weight: 700;
	box-shadow: 0 10px 26px rgba(180, 233, 76, .28);
}
.sf-wrap .sf-cta-btn:hover { background: var(--sfb-lime-hover) !important; color: var(--sfb-ink) !important; }
.sf-wrap .sf-btn { border-radius: 999px; font-family: 'Poppins', sans-serif; }
.sf-wrap .sf-btn-primary { background: var(--sfb-lime); border-color: var(--sfb-lime); color: var(--sfb-ink); font-weight: 700; }
.sf-wrap .sf-btn-primary:hover { background: var(--sfb-lime-hover); border-color: var(--sfb-lime-hover); color: var(--sfb-ink); }

/* ---- 9. One button shape everywhere: pills ---- */
body.single-product form.cart .single_add_to_cart_button,
body.single-product form.cart .single_buy_now_button,
#sf-modal-body .sf-modal-actions .single_add_to_cart_button,
#sf-modal-body .sf-modal-actions .sf-modal-buy,
.sf-offers .sf-offer-btn,
.sf-offers .sf-pill,
a.button.sf-fixed-atc,
.woocommerce ul.products li.product .sf-fixed-atc,
.woocommerce-mini-cart__buttons a.button,
.sf-cart-bar-btns a { border-radius: 999px !important; }
.sf-offers .sf-pill { padding: 0 20px; }