/* ==========================================================================
   CHFB v4.0 — Header & Footer styles
   ========================================================================== */
:root {
	--chfb-header-bg:    #ffffff;
	--chfb-header-text:  #16351f;
	--chfb-accent:       #4caf50;
	--chfb-accent-hover: #388e3c;
	--chfb-muted-text:   #5b6b60;
	--chfb-border:       #e7ece8;
	--chfb-footer-bg:    #0d1f12;
	--chfb-footer-text:  #cfd9d2;
	--chfb-hamburger:    #16351f;
	--chfb-max-width:    1280px;
	--chfb-gap:          28px;
	--chfb-radius:       18px;
	--chfb-floating-margin: 20px;
}

.chfb-site-header, .chfb-site-footer,
.chfb-site-header *, .chfb-site-footer * {
	box-sizing: border-box;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.chfb-site-header {
	background: transparent;
	position: relative;
	z-index: 999;
	padding: var(--chfb-floating-margin) var(--chfb-floating-margin) 0;
}

.chfb-site-header-inner {
	max-width: var(--chfb-max-width);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chfb-gap);
	background: var(--chfb-header-bg) !important;
	border-radius: var(--chfb-radius);
	box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.chfb-site-logo img { max-height: 48px; width: auto; display: block; }

.chfb-site-logo-fallback {
	display: flex; align-items: center; gap: 12px; text-decoration: none;
}

.chfb-logo-text-wrap { display: flex; flex-direction: column; line-height: 1.2; }

.chfb-site-logo-text {
	font-size: 19px; font-weight: 800; color: var(--chfb-header-text); letter-spacing: .3px;
}

.chfb-site-tagline {
	font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
	color: var(--chfb-muted-text); text-transform: uppercase;
}

.chfb-site-nav-wrap {
	display: flex; align-items: center; gap: var(--chfb-gap); margin-left: auto;
}

/* ---- Nav menu ---- */
.chfb-main-navigation ul {
	list-style: none; display: flex; gap: 30px; margin: 0; padding: 0;
}
.chfb-main-navigation li { position: relative; }
.chfb-main-navigation a {
	color: var(--chfb-header-text) !important; text-decoration: none; font-weight: 600; font-size: 15px;
	padding-bottom: 4px; border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.chfb-main-navigation a:hover { color: var(--chfb-accent) !important; }
.chfb-main-navigation li.current-menu-item > a,
.chfb-main-navigation li.current_page_item > a {
	color: var(--chfb-accent) !important; border-bottom-color: var(--chfb-accent);
}
.chfb-main-navigation ul ul {
	position: absolute; top: 100%; left: 0; background: #fff;
	flex-direction: column; min-width: 200px; box-shadow: 0 8px 20px rgba(0,0,0,.1);
	padding: 8px 0; display: none; z-index: 100; border-radius: 10px; margin-top: 8px;
}
.chfb-main-navigation li:hover > ul { display: flex; }
.chfb-main-navigation ul ul li a { padding: 8px 16px; display: block; border-bottom: none; }

/* ---- Language pill ---- */
.chfb-lang-dropdown {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 14px; border: 1px solid var(--chfb-border); border-radius: 999px;
	font-size: 14px; font-weight: 600; color: var(--chfb-header-text);
}
.chfb-lang-globe { display: flex; align-items: center; color: var(--chfb-muted-text); }
.chfb-lang-dropdown .gtranslate_wrapper,
.chfb-lang-dropdown select { font: inherit; color: inherit; border: none; background: transparent; }

/* ---- Cart (Menu Cart plugin + fallback pill) ---- */
.chfb-menu-cart-wrap {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* Style the WooCommerce Menu Cart plugin output to look like a green pill */
.chfb-menu-cart-wrap .woo-menu-cart-wrapper,
.chfb-menu-cart-wrap .menu-cart-container,
.chfb-menu-cart-wrap > a,
.chfb-menu-cart-wrap .cart-contents {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--chfb-accent) !important;
	color: #fff !important;
	padding: 9px 16px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background .2s !important;
}
.chfb-menu-cart-wrap .woo-menu-cart-wrapper:hover,
.chfb-menu-cart-wrap .menu-cart-container:hover,
.chfb-menu-cart-wrap > a:hover,
.chfb-menu-cart-wrap .cart-contents:hover {
	background: var(--chfb-accent-hover) !important;
}

/* Cart count badge inside plugin output */
.chfb-menu-cart-wrap .cart-count,
.chfb-menu-cart-wrap .count {
	background: rgba(0,0,0,0.2) !important;
	border-radius: 999px !important;
	min-width: 20px !important;
	height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	padding: 0 5px !important;
}

/* Our own fallback pill */
.chfb-wc-cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--chfb-accent);
	color: #fff;
	padding: 9px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s;
}
.chfb-wc-cart-pill:hover { background: var(--chfb-accent-hover); color: #fff; }

.chfb-wc-cart-amount { line-height: 1; }

.chfb-wc-cart-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chfb-wc-cart-count {
	position: absolute;
	top: -9px;
	right: -9px;
	background: #fff;
	color: var(--chfb-accent);
	font-size: 10px;
	font-weight: 900;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	border: 2px solid var(--chfb-accent);
	line-height: 1;
}

/* ---- Buy button ---- */
.chfb-buy-button {
	background: var(--chfb-accent); color: #fff; padding: 12px 22px; border-radius: 999px;
	text-decoration: none; font-weight: 700; font-size: 14.5px; white-space: nowrap;
	transition: background .2s;
}
.chfb-buy-button:hover { background: var(--chfb-accent-hover); color: #fff; }

/* ---- Hamburger ---- */
.chfb-menu-toggle {
	display: none; background: var(--chfb-hamburger-bg, transparent);
	border: none; cursor: pointer;
	padding: 8px; flex-direction: column; gap: 5px;
	border-radius: 6px;
	transition: background .2s;
}
.chfb-menu-toggle-bar {
	width: 26px; height: 3px;
	background: var(--chfb-hamburger); /* controlled from backend */
	border-radius: 2px; transition: transform .2s, opacity .2s;
}
.chfb-screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.chfb-menu-toggle[aria-expanded="true"] .chfb-menu-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.chfb-menu-toggle[aria-expanded="true"] .chfb-menu-toggle-bar:nth-child(2) { opacity: 0; }
.chfb-menu-toggle[aria-expanded="true"] .chfb-menu-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile */
@media (max-width: 860px) {
	.chfb-menu-toggle { display: flex; order: 3; }
	.chfb-site-header-inner { flex-wrap: wrap; }
	.chfb-site-nav-wrap {
		display: none; flex-direction: column; align-items: flex-start;
		width: 100%; order: 4; margin-left: 0; padding-top: 16px; gap: 16px;
	}
	.chfb-site-nav-wrap.chfb-is-open { display: flex; }
	.chfb-main-navigation { width: 100%; }
	.chfb-main-navigation ul { flex-direction: column; gap: 4px; width: 100%; }
	.chfb-main-navigation ul ul { position: static; box-shadow: none; padding-left: 16px; display: none; }
	.chfb-main-navigation li.chfb-submenu-open > ul { display: flex; }
	.chfb-buy-button { width: 100%; text-align: center; }
	.chfb-lang-dropdown, .chfb-menu-cart-wrap { align-self: flex-start; }
	.chfb-wc-cart-pill { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
	.chfb-site-header-inner { padding: 12px 16px; }
	.chfb-site-logo img { max-height: 40px; }
}


/* ==========================================================================
   FOOTER — rich 4-column design
   ========================================================================== */
.chfb-site-footer {
	background: var(--chfb-footer-bg);
	color: var(--chfb-footer-text);
	font-family: inherit;
}

.chfb-footer-inner {
	max-width: var(--chfb-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ----- Main grid ----- */
.chfb-footer-main { padding: 56px 0 40px; }

/* Default: 4 columns — Brand | Navigation | Information | Contact */
.chfb-footer-main .chfb-footer-inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 48px;
	align-items: start;
}

/* 5th column present (Buy button / CTA / Stay Updated). PHP adds this class only when the
   column actually renders, so we never reserve an empty track.
   These three used to be stacked UNDER the contact rows, which made that column enormous
   and dragged the whole footer's height down with it. */
.chfb-footer-main .chfb-footer-inner-5 {
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1.2fr;
	gap: 40px;
}

/* Buy / Stay Updated column */
.chfb-fcol-cta { gap: 14px; }
.chfb-fcol-cta .chfb-footer-buy-btn { margin-top: 0; }
.chfb-fcol-cta .chfb-fsub { margin-top: 0; }
.chfb-fcol-cta .chfb-footer-cta-line { margin: 0; }

/* Column base */
.chfb-fcol { display: flex; flex-direction: column; gap: 0; }

/* Brand column */
.chfb-footer-logo img {
	max-height: 52px; width: auto;
}
.chfb-footer-sitename {
	font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .4px;
}
.chfb-footer-desc {
	font-size: 14px; line-height: 1.65; color: var(--chfb-footer-text); margin: 16px 0 0; opacity: .85;
}
.chfb-footer-divider {
	width: 42px; height: 2px; background: var(--chfb-accent); margin: 20px 0; border-radius: 2px;
}
.chfb-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.chfb-social-btn {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center;
	justify-content: center; color: var(--chfb-footer-text); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.chfb-social-btn:hover { border-color: var(--chfb-accent); color: var(--chfb-accent); }

/* Optional brand image (replaces the old hardcoded decorative plant SVG, which rendered
   as a faint heart/tulip outline at opacity .25 and could not be turned off). */
.chfb-footer-brand-img-wrap { margin-top: 16px; }
.chfb-footer-brand-img {
	display: block;
	width: 100%;          /* max-width comes from the settings-driven inline CSS */
	height: auto;
	object-fit: contain;
	border-radius: 6px;
}
.chfb-footer-brand-img-link { display: inline-block; transition: opacity .15s; }
.chfb-footer-brand-img-link:hover { opacity: .85; }

/* Footer Buy button icon wrapper — one size rule governs inline SVG and uploads alike */
.chfb-fbuy-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	max-width: 40px;
	max-height: 40px;
}
.chfb-fbuy-icon svg,
.chfb-fbuy-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Column headings */
.chfb-fcol-title {
	display: flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 20px;
	letter-spacing: .2px;
}
.chfb-fcol-title svg { color: var(--chfb-accent); flex-shrink: 0; }

/* Footer nav menus */
.chfb-footer-nav ul {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.chfb-footer-nav a {
	color: var(--chfb-footer-text); text-decoration: none; font-size: 14px;
	display: flex; align-items: center; gap: 8px; opacity: .85;
	transition: color .2s, opacity .2s;
}
.chfb-footer-nav a::before {
	content: '';
	display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
	background-color: var(--chfb-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chfb-footer-nav a:hover { color: #fff; opacity: 1; }

/* Contact column */
.chfb-fcol-contact { gap: 0; }
.chfb-contact-items { display: flex; flex-direction: column; gap: 12px; }
.chfb-contact-items { display: flex; flex-direction: column; gap: 14px; }
.chfb-contact-row {
	display: flex;
	gap: 12px;
	align-items: center;      /* icon vertically centred against the two text lines */
}
.chfb-contact-icon {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; color: var(--chfb-footer-text);
}
/* Label + value as a tight flex column. The markup used to be
   `<span class="chfb-contact-label">…</span><br><a>…</a>` — and since the label is
   display:block, that <br> added a SECOND line break, which is what left the huge
   gap between "Téléphone" and the number. */
.chfb-contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.35;
}
.chfb-contact-label {
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}
.chfb-contact-row a {
	font-size: 13.5px;
	color: var(--chfb-footer-text);
	text-decoration: none;
	opacity: .85;
	line-height: 1.3;
	word-break: break-word;
	transition: color .2s;
}
.chfb-contact-row a:hover { color: var(--chfb-accent); opacity: 1; }

/* Buy button in footer */
.chfb-footer-buy-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--chfb-accent); color: #fff;
	padding: 14px 24px; border-radius: 8px; text-decoration: none;
	font-weight: 700; font-size: 15px; margin-top: 4px;
	transition: background .2s; width: 100%; justify-content: center;
}
.chfb-footer-buy-btn:hover { background: var(--chfb-accent-hover); color: #fff; }

.chfb-footer-cta-line {
	font-size: 13px; color: var(--chfb-footer-text); margin: 12px 0 0; opacity: .8;
}
.chfb-cta-link { color: var(--chfb-accent); text-decoration: none; font-weight: 600; }
.chfb-cta-link:hover { text-decoration: underline; }

/* ----- Trust bar ----- */
.chfb-trust-bar {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 28px 0;
}
.chfb-trust-bar .chfb-footer-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.chfb-trust-item {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 0 24px 0 0;
}
.chfb-trust-item-divider {
	border-right: 1px solid rgba(255,255,255,0.1);
	margin-right: 0; padding-right: 24px;
}
.chfb-trust-icon { color: var(--chfb-accent); flex-shrink: 0; padding-top: 2px; }
.chfb-trust-title {
	font-size: 14px; font-weight: 700; color: var(--chfb-accent); display: block; margin-bottom: 4px;
}
.chfb-trust-desc {
	font-size: 13px; color: var(--chfb-footer-text); margin: 0; line-height: 1.5; opacity: .8;
}

/* ----- Bottom bar ----- */
.chfb-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 18px 0;
}
.chfb-footer-bottom .chfb-footer-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.chfb-footer-copy { font-size: 13px; color: rgba(255,255,255,0.45); }
.chfb-footer-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chfb-footer-badges img { height: 24px; width: auto; opacity: .7; filter: brightness(0) invert(1); }

/* ----- Responsive footer ----- */
@media (max-width: 1280px) {
	/* 5 columns get cramped before 4 do — drop to 3 first so nothing squashes */
	.chfb-footer-main .chfb-footer-inner-5 {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 36px;
	}
}

@media (max-width: 1024px) {
	.chfb-footer-main .chfb-footer-inner,
	.chfb-footer-main .chfb-footer-inner-5 {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.chfb-trust-bar .chfb-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	.chfb-trust-item-divider {
		border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 24px;
	}
}

@media (max-width: 640px) {
	.chfb-footer-main .chfb-footer-inner,
	.chfb-footer-main .chfb-footer-inner-5 {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.chfb-trust-bar .chfb-footer-inner {
		grid-template-columns: 1fr;
	}
	.chfb-trust-item-divider { border-right: none; padding-right: 0; }
	.chfb-footer-bottom .chfb-footer-inner { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   CART DRAWER — slide in from right
   ========================================================================== */
#chfb-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
#chfb-cart-overlay.chfb-drawer-open {
	opacity: 1;
	pointer-events: all;
}

#chfb-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 380px;
	max-width: 95vw;
	height: 100vh;
	background: #fff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 40px rgba(0,0,0,0.18);
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#chfb-cart-drawer.chfb-drawer-open {
	transform: translateX(0);
}

/* Drawer header */
.chfb-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}
.chfb-drawer-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #16351f;
	margin: 0;
}
.chfb-drawer-title svg { color: var(--chfb-accent); }

#chfb-cart-drawer-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .2s, color .2s;
}
#chfb-cart-drawer-close:hover { background: #f5f5f5; color: #111; }

/* Drawer body — scrollable */
.chfb-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 22px;
}

/* WooCommerce mini cart inside drawer */
.chfb-drawer-body .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.chfb-drawer-body .woocommerce-mini-cart-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f0;
	align-items: flex-start;
}
.chfb-drawer-body .woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}
.chfb-drawer-body .mini_cart_item a:not(.remove) {
	font-weight: 600;
	font-size: 14px;
	color: #111;
	text-decoration: none;
}
.chfb-drawer-body .mini_cart_item .quantity {
	font-size: 13px;
	color: #666;
	margin-top: 4px;
}
.chfb-drawer-body .mini_cart_item .remove {
	color: #999;
	font-size: 18px;
	text-decoration: none;
	line-height: 1;
}
.chfb-drawer-body .mini_cart_item .remove:hover { color: #e00; }
.chfb-drawer-body .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 0 8px;
	color: #111;
}
.chfb-drawer-body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.chfb-drawer-body .woocommerce-mini-cart__buttons a {
	display: block;
	text-align: center;
	padding: 12px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.chfb-drawer-body .woocommerce-mini-cart__buttons .checkout {
	background: var(--chfb-accent);
	color: #fff;
}
.chfb-drawer-body .woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--chfb-accent-hover);
}
.chfb-drawer-body .woocommerce-mini-cart__buttons .wc-forward {
	background: #f5f5f5;
	color: #333;
}
.chfb-drawer-body .woocommerce-mini-cart__buttons .wc-forward:hover {
	background: #e8e8e8;
}

/* Empty cart */
.chfb-cart-empty {
	text-align: center;
	color: #999;
	font-size: 15px;
	padding: 40px 0;
}

/* Drawer footer — Buy Now button */
.chfb-drawer-footer {
	padding: 16px 22px;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}
.chfb-drawer-buy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--chfb-accent);
	color: #fff;
	padding: 14px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background .2s;
}
.chfb-drawer-buy-btn:hover { background: var(--chfb-accent-hover); color: #fff; }

/* Custom uploaded logo via plugin settings */
.chfb-custom-logo-img {
	max-height: 48px;
	width: auto;
	display: block;
}
.chfb-footer-logo-img {
	max-height: 52px;
	width: auto;
	display: block;
}

/* ==========================================================================
   TRANSPARENT / GLASS HEADER
   ========================================================================== */
/* When transparent is on, header floats over page content */
.chfb-site-header.chfb-header-transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: transparent;
	padding-top: 16px;
}
.chfb-site-header.chfb-header-transparent .chfb-site-header-inner {
	background: transparent;
	box-shadow: none;
	border: none;
}
/* Glass variant */
.chfb-site-header.chfb-header-glass .chfb-site-header-inner {
	background: rgba(255,255,255,0.12) !important;
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.18) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
/* Glass text — uses backend color, NOT forced white */
.chfb-site-header.chfb-header-glass .chfb-main-navigation a,
.chfb-site-header.chfb-header-glass .chfb-site-logo-text,
.chfb-site-header.chfb-header-glass .chfb-lang-dropdown {
	color: var(--chfb-header-text) !important;
}
.chfb-site-header.chfb-header-glass .chfb-lang-dropdown {
	border-color: rgba(255,255,255,0.3);
}

/* ==========================================================================
   SMART SCROLL — hide/show header
   ========================================================================== */
#chfb-masthead {
	transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
#chfb-masthead.chfb-header-hidden {
	transform: translateY(-120%);
	opacity: 0;
	pointer-events: none;
}

/* When header is position:absolute (transparent mode), make it fixed so scroll works */
.chfb-site-header.chfb-header-transparent {
	position: fixed;
}

/* ==========================================================================
   POLYLANG / WPML LANGUAGE LIST IN HEADER
   ========================================================================== */
.chfb-pll-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.chfb-pll-list li a {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--chfb-header-text) !important;
	text-decoration: none !important;
	padding: 2px 6px;
	border-radius: 4px;
	transition: background .15s, color .15s;
	border-bottom: none !important;
}
.chfb-pll-list li a:hover {
	background: rgba(76,175,80,.12);
	color: var(--chfb-accent) !important;
}
.chfb-pll-list li.chfb-lang-active a,
.chfb-pll-list li.current-lang a {
	color: var(--chfb-accent) !important;
	font-weight: 700;
}
.chfb-pll-list li a img {
	width: 18px;
	height: 12px;
	object-fit: cover;
	border-radius: 2px;
}

/* ==========================================================================
   MOBILE MENU — SLIDE PANEL
   ========================================================================== */
.chfb-slide-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 99990;
	opacity: 0;
	transition: opacity .3s ease;
}
.chfb-slide-overlay.chfb-slide-open { display: block; opacity: 1; }

.chfb-slide-panel {
	position: fixed;
	top: 0;
	width: min(300px, 82vw);
	/* 100vh on mobile is the LARGE viewport — the height as if the URL bar were retracted.
	   While the bar IS showing (i.e. any time you've scrolled) the panel is 50-100px taller
	   than the screen and its bottom — where margin-top:auto parks the cart pill — falls
	   below the fold. dvh tracks the actually-visible area. vh stays as the old-browser
	   fallback and must come first. */
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0,0,0,0.25);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
	overscroll-behavior: contain;   /* don't chain the scroll to the page behind */
}

/* Logged-in admins get a 46px admin bar on mobile; the panel had no offset for it at all. */
body.admin-bar .chfb-slide-panel {
	top: 46px;
	height: calc(100vh - 46px);
	height: calc(100dvh - 46px);
}
@media screen and (min-width: 783px) {
	body.admin-bar .chfb-slide-panel {
		top: 32px;
		height: calc(100vh - 32px);
		height: calc(100dvh - 32px);
	}
}
.chfb-slide-panel.chfb-slide-left  { left:0;  transform: translateX(-100%); }
.chfb-slide-panel.chfb-slide-right { right:0; transform: translateX(100%); }
.chfb-slide-panel.chfb-slide-left.chfb-slide-open  { transform: translateX(0); }
.chfb-slide-panel.chfb-slide-right.chfb-slide-open { transform: translateX(0); }

.chfb-slide-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #eee;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
}

.chfb-slide-close-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: #666;
	border-radius: 6px;
	display: flex;
	align-items: center;
	transition: background .2s, color .2s;
}
.chfb-slide-close-btn:hover { background: #f5f5f5; color: #111; }

/* NOTE: the old `.chfb-slide-body` rules lived here. That class was never created by the
   JS (the panel builds .chfb-slide-content > .chfb-slide-section-*), so they were dead
   code AND contradicted the current row design. See the SLIDE PANEL MENU ROWS block. */

.chfb-slide-footer {
	padding: 14px 18px;
	border-top: 1px solid #eee;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.chfb-slide-footer .chfb-lang-dropdown { margin: 0; }
.chfb-slide-footer .chfb-pll-list { flex-wrap: wrap; }
.chfb-slide-footer .chfb-wc-cart-pill { width: 100%; justify-content: center; }

/* Footer iframe - no scroll, auto height */
.chfb-footer-iframe {
	display: block;
	width: 100%;
	border: none;
	overflow: hidden;
	min-height: 100px;
	/* Height set dynamically by JS */
}

/* ==========================================================================
   MOBILE-INLINE LANGUAGE SWITCHER (top row of pill on mobile)  (v5.5.6)
   ========================================================================== */
/* Slot wrapper — hidden on desktop, becomes a full-width centered row on mobile */
.chfb-lang-mobile-slot { display: none; }

.chfb-lang-mobile-inline {
	display: inline-flex;
	padding: 5px 12px;
	gap: 6px;
	border-radius: 999px;
	border: 1px solid var(--chfb-lang-border, var(--chfb-border, #e7ece8));
	background: transparent;
	align-items: center;
}
.chfb-lang-mobile-inline .chfb-lang-globe {
	display: inline-flex;
	color: var(--chfb-header-text, #16351f);
	flex-shrink: 0;
}
.chfb-lang-mobile-inline .chfb-pll-list,
.chfb-lang-mobile-inline .chfb-mobile-pll {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
}
.chfb-lang-mobile-inline .chfb-pll-list li,
.chfb-lang-mobile-inline .chfb-mobile-pll li { display: inline-flex; }
.chfb-lang-mobile-inline .chfb-pll-list li a,
.chfb-lang-mobile-inline .chfb-mobile-pll li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 2px 3px;
	border-radius: 4px;
	line-height: 1;
	color: var(--chfb-header-text, #16351f);
	transition: transform .15s, opacity .15s;
	opacity: 0.75;
}
.chfb-lang-mobile-inline .chfb-pll-list li a:hover,
.chfb-lang-mobile-inline .chfb-mobile-pll li a:hover { opacity: 1; transform: scale(1.08); }
.chfb-lang-mobile-inline .chfb-pll-list li.chfb-lang-active a,
.chfb-lang-mobile-inline .chfb-pll-list li.current-lang a,
.chfb-lang-mobile-inline .chfb-mobile-pll li.chfb-lang-active a,
.chfb-lang-mobile-inline .chfb-mobile-pll li.current-lang a { opacity: 1; }
.chfb-lang-mobile-inline .chfb-pll-list li a img,
.chfb-lang-mobile-inline .chfb-mobile-pll li a img {
	width: 20px;
	height: 14px;
	display: block;
	border-radius: 2px;
}
/* Force Polylang name text hidden inside compact pill (flags only) */
.chfb-lang-mobile-inline .chfb-pll-list li a span:not(.chfb-lang-globe),
.chfb-lang-mobile-inline .chfb-mobile-pll li a span:not(.chfb-lang-globe) {
	display: none;
}
/* GTranslate compact fit */
.chfb-lang-mobile-inline .gtranslate_wrapper,
.chfb-lang-mobile-inline .gt_container-en {
	font-size: 11px !important;
	line-height: 1 !important;
}

@media (max-width: 860px) {
	/* Two-row pill on mobile: translation on top row, logo + hamburger on bottom row */
	.chfb-site-header-inner {
		flex-wrap: wrap;
		row-gap: 10px;
		/* Force LTR so logo stays on LEFT and hamburger on RIGHT even when the page is RTL (Arabic). */
		direction: ltr;
	}
	/* Slot occupies full top row and centers the chip inside */
	.chfb-lang-mobile-slot {
		display: flex;
		order: 1;
		width: 100%;
		justify-content: center;
	}
	/* Bottom row: logo left, hamburger right */
	.chfb-site-logo   { order: 2; margin-right: auto; }
	.chfb-menu-toggle { order: 3; }

	/* Hide the desktop copy that lives inside .chfb-site-nav-wrap on mobile */
	#chfb-masthead .chfb-site-nav-wrap > .chfb-lang-dropdown:not(.chfb-lang-mobile-inline) { display: none !important; }
}

/* Apply the border color variable to the desktop switcher too */
.chfb-lang-dropdown { border-color: var(--chfb-lang-border, var(--chfb-border, #e7ece8)); }

/* ==========================================================================
   SLIDE PANEL — 3-column head: logo LEFT | title CENTER | X RIGHT  (v5.5.6)
   ========================================================================== */
.chfb-slide-head-3col {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	direction: ltr;
	unicode-bidi: isolate;
}
.chfb-slide-head-cell {
	display: flex;
	align-items: center;
	min-width: 0;
}
.chfb-slide-head-left   { justify-content: flex-start; }
.chfb-slide-head-center { justify-content: center; text-align: center; overflow: hidden; }
.chfb-slide-head-right  { justify-content: flex-end; }

.chfb-slide-head-left img,
.chfb-slide-head-left .custom-logo-link img {
	max-height: 36px;
	width: auto;
	display: block;
}
.chfb-slide-head-left .chfb-site-logo-fallback {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chfb-slide-head-center .chfb-site-title-link {
	margin: 0;
	display: inline-flex;
	max-width: 100%;
	overflow: hidden;
}
.chfb-slide-head-center .chfb-site-title {
	overflow: hidden;
	max-width: 100%;
}
/* Show only the slide-context version inside the slide head */
.chfb-slide-head-center .chfb-site-title-desktop,
.chfb-slide-head-center .chfb-site-title-mobile { display: none !important; }
.chfb-slide-head-center .chfb-site-title-slide  { display: inline-flex !important; }

/* ==========================================================================
   SLIDE PANEL — content sections (configurable order)  (v5.5.6)
   ========================================================================== */
/* NO min-height here. It used to be `calc(100vh - 70px)`, which — added to the ~70px sticky
   head — made the content exactly as tall as the panel itself. scrollHeight == clientHeight,
   so overflow-y:auto produced ZERO scrollable range and anything clipped off the bottom (the
   cart pill) was permanently unreachable. The 70px was a magic number too: the head's real
   height depends on mobile_slider_logo_height, which is user-configurable.

   flex:1 lets the content fill whatever space is actually left, so `margin-top:auto` still
   parks the cart at the bottom — with no hardcoded heights — and genuine overflow scrolls. */
.chfb-slide-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.chfb-slide-section { padding-left: 18px; padding-right: 18px; }
.chfb-slide-section-menu    { padding-top: 6px; }
.chfb-slide-section-socials { padding-top: 14px; padding-bottom: 14px; }
/* Cart pushed to bottom if it's the LAST section */
.chfb-slide-section-cart    { padding-top: 14px; }
.chfb-slide-content > .chfb-slide-section-cart:last-child { margin-top: auto; }
.chfb-slide-content > .chfb-slide-section-socials:last-child { margin-top: auto; }
.chfb-slide-content > .chfb-slide-section-menu:last-child { margin-top: auto; }

/* Menu icons + labels on same row */
.chfb-slide-section-menu .chfb-main-navigation li > a { display: flex; align-items: center; }

/* ==========================================================================
   SITE TITLE (coloured segments next to logo)  (v5.5.6)
   ========================================================================== */
.chfb-site-title-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
	color: inherit;
	line-height: 1;
	margin-left: 8px;
}
.chfb-site-title {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	white-space: nowrap;
	letter-spacing: 0.5px;
	line-height: 1.05;
}
.chfb-site-title > span { transition: opacity .15s; }
.chfb-site-title-link:hover .chfb-site-title > span { opacity: 0.88; }

/* Show only ONE version at a time based on viewport */
.chfb-site-title-desktop { display: inline-flex; }
.chfb-site-title-mobile  { display: none; }
@media (max-width: 860px) {
	.chfb-site-title-desktop { display: none; }
	.chfb-site-title-mobile  { display: inline-flex; }
}

/* ==========================================================================
   LOGO TAGLINE (the small line under the site title)  (v5.5.9)
   Same coloured-segment system as the title. The stack keeps title on line 1
   and tagline on line 2; the per-context copies that aren't active are
   display:none, so they never add an empty row.
   ========================================================================== */
.chfb-title-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}
.chfb-logo-tagline {
	display: inline-flex;
	align-items: baseline;
	white-space: nowrap;
	line-height: 1.1;
	opacity: .92;
}
.chfb-logo-tagline > span { transition: opacity .15s; }
.chfb-site-title-link:hover .chfb-logo-tagline > span { opacity: 0.88; }

.chfb-logo-tagline-desktop { display: inline-flex; }
.chfb-logo-tagline-mobile  { display: none; }
.chfb-logo-tagline-slide   { display: none; }
@media (max-width: 860px) {
	.chfb-logo-tagline-desktop { display: none; }
	.chfb-logo-tagline-mobile  { display: inline-flex; }
}

/* Inside the slide-panel head, only the -slide copy may show (mirrors the title rules) */
.chfb-slide-head-center .chfb-logo-tagline-desktop,
.chfb-slide-head-center .chfb-logo-tagline-mobile { display: none !important; }
.chfb-slide-head-center .chfb-logo-tagline-slide  { display: inline-flex !important; }
.chfb-slide-head-center .chfb-title-stack { align-items: flex-start; }

.chfb-site-logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}

/* Socials row inside slide footer (replaces old lang list position) */
.chfb-slide-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
	padding: 4px 0 4px;
}
.chfb-slide-socials .chfb-social-btn,
.chfb-slide-socials .chfb-slide-social-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--chfb-header-text, #16351f);
	text-decoration: none;
	transition: border-color .18s, color .18s, background .18s;
	background: transparent;
}
.chfb-slide-socials .chfb-social-btn:hover,
.chfb-slide-socials .chfb-slide-social-btn:hover {
	border-color: var(--chfb-accent, #4caf50);
	color: var(--chfb-accent, #4caf50);
	background: rgba(76,175,80,0.06);
}
.chfb-slide-socials img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* If glass/transparent slide panel is on, keep socials readable using the slide text color */
.chfb-slide-panel .chfb-slide-socials .chfb-social-btn,
.chfb-slide-panel .chfb-slide-socials .chfb-slide-social-btn {
	color: inherit;
}

/* When the socials source block is empty and cart isn't shown, hide the empty footer */
.chfb-slide-footer:empty { display: none; }

/* ==========================================================================
   SITE TITLE — slide-panel context variant  (v5.5.6)
   ========================================================================== */
.chfb-site-title-slide { display: none; }

/* ==========================================================================
   CART POPUP MODAL  (v5.5.6)
   ========================================================================== */
.chfb-cart-modal-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 100010;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}
.chfb-cart-modal-overlay.chfb-cart-modal-open { opacity: 1; pointer-events: auto; }
.chfb-cart-modal {
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 100011;
	width: min(460px, 92vw);
	max-height: 82vh;
	background: var(--chfb-cart-bg, #fff);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity .18s ease, transform .22s ease;
	color: var(--chfb-cart-text, #16351f);
	font-family: inherit;
}
.chfb-cart-item-name { color: var(--chfb-cart-text, #16351f) !important; }
.chfb-cart-item-name:hover { color: var(--chfb-cart-accent, var(--chfb-accent, #4caf50)) !important; }
.chfb-cart-modal.chfb-cart-modal-open { opacity: 1; transform: none; pointer-events: auto; }

.chfb-cart-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.chfb-cart-modal-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--chfb-cart-text, #16351f); }
.chfb-cart-modal-close {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	color: var(--chfb-cart-text, #16351f) !important;
	transition: background .15s;
}
.chfb-cart-modal-close svg { display: block; stroke: currentColor; }
.chfb-cart-modal-close:hover { background: rgba(0,0,0,0.06) !important; }

.chfb-cart-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}
.chfb-cart-loading, .chfb-cart-empty {
	padding: 40px 20px;
	text-align: center;
	color: #5b6b60;
	font-size: 14px;
}
.chfb-cart-items { list-style: none; margin: 0; padding: 0; }
.chfb-cart-item {
	display: grid;
	grid-template-columns: 54px 1fr auto auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px 20px;
	border-bottom: 1px solid #f2f2f2;
}
.chfb-cart-item-busy { opacity: 0.55; pointer-events: none; }
.chfb-cart-item:last-child { border-bottom: none; }
.chfb-cart-item-thumb {
	width: 54px; height: 54px; object-fit: cover;
	border-radius: 8px; background: #f5f5f5;
}
.chfb-cart-item-name {
	display: block; color: #16351f; text-decoration: none;
	font-weight: 600; font-size: 14px; line-height: 1.3;
}
.chfb-cart-item-name:hover { color: var(--chfb-accent,#4caf50); }
.chfb-cart-item-price { font-size: 12px; color: #6b7570; margin-top: 3px; }
.chfb-cart-item-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: rgba(0, 0, 0, .03);
	box-sizing: border-box;
}
/* ── Quantity pill.
   Every control in this modal is a bare <button>, and themes style those hard
   (`button { border: 2px solid …; padding; line-height }`). A plain `border:none`
   LOSES to that — which is where the pink borders came from, and why the `−` glyph
   sat off-centre (the theme's line-height/padding leaked in). Everything below is
   !important so the popup looks identical on any theme. The +/− are SVG now, so no
   font metric can knock them out of alignment. ── */
.chfb-qty-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;          /* kill any theme text metrics */
	box-sizing: border-box !important;
	color: var(--chfb-cart-text, #16351f) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	flex-shrink: 0;
	transition: background .15s;
}
.chfb-qty-btn svg { display: block; width: 13px; height: 13px; stroke: currentColor; }
.chfb-qty-btn:hover:not(:disabled) { background: rgba(0,0,0,0.07) !important; }
.chfb-qty-btn:disabled { opacity: 0.5; cursor: wait !important; }

.chfb-qty-val {
	min-width: 26px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--chfb-cart-text, #16351f);
	user-select: none;
}
.chfb-cart-item-total { font-weight: 700; font-size: 14px; color: var(--chfb-cart-text, #16351f); }

/* Per-line remove (trash) button */
.chfb-cart-item-remove {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	border-radius: 999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #9aa79e !important;
	transition: color .15s, background .15s;
}
.chfb-cart-item-remove svg { display: block; }
.chfb-cart-item-remove:hover:not(:disabled) {
	color: var(--chfb-cart-remove, #e03131) !important;
	background: rgba(224, 49, 49, .08) !important;
}
.chfb-cart-item-remove:disabled { opacity: 0.5; cursor: wait !important; }

/* Empty cart state */
.chfb-cart-empty-icon { color: #cfd9d2; margin-bottom: 10px; }
.chfb-cart-empty-msg  { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--chfb-cart-text, #16351f); }
.chfb-cart-empty-cta  {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--chfb-cart-accent, var(--chfb-accent, #4caf50)) !important;
	color: var(--chfb-cart-btn-text, #fff) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 11px 22px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	transition: background .15s;
}
.chfb-cart-empty-cta:hover {
	background: var(--chfb-cart-accent-hover, var(--chfb-cart-accent, var(--chfb-accent, #4caf50))) !important;
	filter: brightness(1.06);
}

.chfb-cart-modal-foot {
	padding: 14px 20px;
	border-top: 1px solid #eee;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	background: rgba(0, 0, 0, .02);
}
.chfb-cart-modal-totals { font-size: 13px; color: #5b6b60; }
.chfb-cart-modal-total { color: var(--chfb-cart-text, #16351f); font-size: 16px; margin-left: 4px; }
.chfb-cart-modal-actions { display: flex; align-items: center; gap: 8px; }

.chfb-cart-modal-view {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	color: var(--chfb-cart-text, #16351f) !important;
	border: 1.5px solid rgba(0, 0, 0, .14) !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 10px 18px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	transition: border-color .15s, color .15s;
}
.chfb-cart-modal-view:hover {
	border-color: var(--chfb-cart-accent, var(--chfb-accent, #4caf50)) !important;
	color: var(--chfb-cart-accent, var(--chfb-accent, #4caf50)) !important;
}

.chfb-cart-modal-checkout,
.chfb-cart-modal-proceed {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--chfb-cart-accent, var(--chfb-accent, #4caf50)) !important;
	color: var(--chfb-cart-btn-text, #fff) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 11px 22px !important;
	margin: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	transition: background .15s;
}
.chfb-cart-modal-checkout:hover,
.chfb-cart-modal-proceed:hover {
	background: var(--chfb-cart-accent-hover, var(--chfb-cart-accent, var(--chfb-accent, #4caf50))) !important;
	filter: brightness(1.06);
}

/* ==========================================================================
   ADDED-TO-CART TOAST  (v5.5.6)
   ========================================================================== */
.chfb-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #16351f;
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	z-index: 100020;
	opacity: 0;
	box-shadow: 0 10px 30px rgba(0,0,0,0.24);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
	max-width: 88vw;
	text-align: center;
}
.chfb-toast.chfb-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
	.chfb-cart-item {
		grid-template-columns: 44px 1fr auto auto;
		grid-template-areas: "thumb info total remove" "thumb qty qty remove";
	}
	.chfb-cart-item-thumb  { grid-area: thumb; width: 44px; height: 44px; }
	.chfb-cart-item-info   { grid-area: info; }
	.chfb-cart-item-qty    { grid-area: qty; justify-self: start; margin-top: 6px; }
	.chfb-cart-item-total  { grid-area: total; }
	.chfb-cart-item-remove { grid-area: remove; align-self: center; }

	.chfb-cart-modal-foot { flex-wrap: wrap; }
	.chfb-cart-modal-actions { width: 100%; }
	.chfb-cart-modal-view,
	.chfb-cart-modal-checkout { flex: 1; }
}

/* ==========================================================================
   SLIDE PANEL — MENU ROWS  (chip + label + chevron accordion)   (v5.5.8)

   Every selector below is prefixed .chfb-slide-panel, so the DESKTOP nav
   (#chfb-masthead) is untouched and KEEPS its hover flyout from lines 84-90.

   Scoping is by CLASS, never by media query: the panel lives in the DOM at all
   widths (it is only translated off-screen), which is exactly why the unscoped
   `.chfb-main-navigation li:hover > ul` rule at line 89 was able to fly the
   submenu out inside the panel at every screen size.
   ========================================================================== */
.chfb-slide-panel {
	--chfb-row-active-bg: #eef4ee;
	--chfb-row-bar:       #16351f;
	--chfb-row-divider:   #eef0ec;
	--chfb-row-radius:    14px;
}

.chfb-slide-panel .chfb-slide-section-menu { padding-top: 8px; }

/* ---- list reset (beats the desktop flex row + gap:30px at lines 70-72) ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation { width: 100%; }
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul {
	display: block;
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
}

/* ---- row ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;          /* lets ul.sub-menu drop onto its own full-width line */
	align-items: center;
	padding: 0 8px 0 12px;
	border-radius: var(--chfb-row-radius);
}

/* Divider drawn on the top edge of every row but the first. Suppressed around the
   active row so the pill's rounded corners are not sliced by a line. */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li + li::after {
	content: '';
	position: absolute;
	top: 0;
	left: 12px;
	right: 8px;
	height: 1px;
	background: var(--chfb-row-divider);
	pointer-events: none;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current-menu-item::after,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current-menu-item + li::after,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current_page_item::after,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current_page_item + li::after {
	display: none;
}

/* ---- label ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li > a {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 14px 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1px;
	text-decoration: none;
	border-bottom: 0;         /* kills the underline inherited from lines 76 / 82 */
	transition: opacity .15s;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li > a:hover { opacity: .72; }

/* ---- active row: light pill + dark rounded bar on the far left ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current-menu-item,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current_page_item {
	background: var(--chfb-row-active-bg);
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current-menu-item::before,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation > ul > li.current_page_item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--chfb-row-bar);
	pointer-events: none;
}

/* ---- chevron toggle (a real <button>, injected by JS as a sibling of the <a>) ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-sub-toggle {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	color: var(--chfb-accent, #4caf50);
	-webkit-tap-highlight-color: transparent;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-sub-toggle:hover,
.chfb-slide-panel .chfb-slide-section-menu .chfb-sub-toggle:focus-visible {
	background: rgba(22, 53, 31, .06);
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-sub-toggle svg {
	display: block;
	transition: transform .25s ease;
}
.chfb-slide-panel .chfb-slide-section-menu li.chfb-submenu-open > .chfb-sub-toggle svg {
	transform: rotate(90deg);
}

/* ---- SUBMENU: kill the flyout, become an inline collapsed accordion ----
   (0,4,2) — outranks line 84 (0,1,2), the line 89 :hover rule (0,2,2), and the
   mobile rules at 235/236, on EVERY property including `display`. :hover adds no
   weight beyond the class column already counted here, so this wins outright.
   max-height:0 + overflow:hidden is the belt-and-braces: even if `display` leaked
   through, nothing would be visible or occupy space. */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation li > ul.sub-menu {
	position: static;         /* was absolute        (line 85) */
	top: auto;
	left: auto;
	background: transparent;  /* was #fff           (line 85) */
	box-shadow: none;         /* was a drop shadow  (line 86) */
	border-radius: 0;
	min-width: 0;             /* was 200px          (line 86) */
	z-index: auto;
	margin: 0;
	padding: 0 0 4px 16px;    /* PHP overrides padding-left when icons are on */
	flex: 1 0 100%;           /* full-width second line inside the flex-wrap li */
	display: block;
	list-style: none;
	overflow: hidden;
	max-height: 0;
	transition: max-height .28s ease;
}
/* Explicit: hovering NEVER opens anything inside the panel. */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation li:not(.chfb-submenu-open) > ul.sub-menu,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation li:not(.chfb-submenu-open):hover > ul.sub-menu {
	max-height: 0;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation li.chfb-submenu-open > ul.sub-menu {
	max-height: 1200px;
}

/* ---- submenu rows (beats line 90 `.chfb-main-navigation ul ul li a`) ---- */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation ul.sub-menu li {
	display: block;
	padding: 0;
	border-radius: 8px;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation ul.sub-menu li > a {
	display: block;
	padding: 10px 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	border-bottom: 0;
	opacity: .82;
}
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation ul.sub-menu li > a:hover { opacity: 1; }
/* Submenu items never get an icon chip — the icon map only holds top-level IDs. */
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation ul.sub-menu li > a::before,
.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation ul.sub-menu li > a::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.chfb-slide-panel .chfb-slide-section-menu .chfb-main-navigation li > ul.sub-menu,
	.chfb-slide-panel .chfb-slide-section-menu .chfb-sub-toggle svg { transition: none; }
}

/* ==========================================================================
   SUBSCRIBE POPUP  (v5.6.0)
   One set of fields, seven layouts. Everything below is scoped to
   .chfb-sub-* so it cannot collide with the cart modal.
   ========================================================================== */
.chfb-sub-overlay {
	position: fixed; inset: 0;
	background: rgba(12, 24, 16, .62);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 100030;
	opacity: 0;
	transition: opacity .28s ease;
}
.chfb-sub-overlay.chfb-sub-open { opacity: 1; }
.chfb-sub-overlay[hidden] { display: none; }

.chfb-sub-modal {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -46%) scale(.97);
	width: min(560px, 94vw);
	max-height: 92vh;
	overflow-y: auto;
	z-index: 100031;
	background: #f6f3e7;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .40);
	opacity: 0;
	transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
	font-size: 15px;
	line-height: 1.5;
}
.chfb-sub-modal.chfb-sub-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.chfb-sub-modal[hidden] { display: none; }

/* The close X and the submit button are bare <button>s, which themes style hard
   (borders, padding, odd colours). Everything here is !important so the popup looks
   the same on any theme — this is what was turning the X into a pink rectangle. */
.chfb-sub-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, .40) !important;
	color: #fff !important;
	font-size: 0 !important;      /* kill any theme ::before/text metrics */
	line-height: 1 !important;
	z-index: 5;
	transition: background .15s, transform .15s;
}
.chfb-sub-close:hover,
.chfb-sub-close:focus { background: rgba(0, 0, 0, .62) !important; transform: rotate(90deg); }
.chfb-sub-close svg { display: block; width: 18px; height: 18px; stroke: #fff !important; }

.chfb-sub-hero {
	height: 210px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.chfb-sub-body { padding: 22px 30px 26px; text-align: center; }

.chfb-sub-title {
	margin: 0 0 10px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.22;
	color: #14350f;
}
.chfb-sub-desc { margin: 0 0 20px; color: #4a5a48; font-size: 15px; }

.chfb-sub-form { display: flex; flex-direction: column; gap: 11px; }

.chfb-sub-field {
	display: flex; align-items: center; gap: 10px;
	background: #fff;
	border: 1.5px solid #e2ddc8;
	border-radius: 10px;
	padding: 0 14px;
	transition: border-color .15s, box-shadow .15s;
}
.chfb-sub-field:focus-within {
	border-color: var(--chfb-accent, #5aa832);
	box-shadow: 0 0 0 3px rgba(90, 168, 50, .14);
}
/* Field icon wrapper. The size is set by the settings-driven inline CSS; these rules
   only guarantee it can never inherit a runaway intrinsic size from an uploaded SVG. */
.chfb-sub-field-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #6f8a5f;
	max-width: 32px;
	max-height: 32px;
}
.chfb-sub-field-ico svg,
.chfb-sub-field-ico img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.chfb-sub-field input {
	flex: 1 !important;
	min-width: 0 !important;
	width: auto !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 14px 0 !important;
	font-size: 15px;
	color: #22331f;
	height: auto !important;
}
.chfb-sub-field input::placeholder { color: #97a394; opacity: 1; }

/* Honeypot — must be reachable by bots, invisible to humans.
   display:none would let smarter bots skip it, so hide it off-canvas instead. */
.chfb-sub-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

.chfb-sub-btn {
	margin: 4px 0 0 !important;
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	padding: 15px 26px !important;
	border: none !important;
	outline: none !important;
	cursor: pointer !important;
	border-radius: 999px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: .6px;
	text-transform: none;
	background: #5aa832;   /* overridden !important by the settings-driven inline CSS */
	color: #fff;
	transition: background .15s, transform .12s;
	box-shadow: 0 6px 18px rgba(90, 168, 50, .30);
}
.chfb-sub-btn:hover:not(:disabled) { transform: translateY(-1px); }
.chfb-sub-btn:disabled { opacity: .65; cursor: wait !important; }
.chfb-sub-btn-icon {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	flex-shrink: 0;
	max-width: 40px; max-height: 40px;
}
.chfb-sub-btn-icon svg,
.chfb-sub-btn-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.chfb-sub-loading .chfb-sub-btn { pointer-events: none; }

.chfb-sub-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; min-height: 1.2em; }
.chfb-sub-msg-ok  { color: #2d7a2d; }
.chfb-sub-msg-err { color: #c0392b; }

/* ---- trust badges ---- */
.chfb-sub-badges {
	display: flex; flex-wrap: wrap; gap: 10px 18px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}
.chfb-sub-badges-center  { justify-content: center; }
.chfb-sub-badges-left    { justify-content: flex-start; }
.chfb-sub-badges-right   { justify-content: flex-end; }
.chfb-sub-badges-between { justify-content: space-between; }

.chfb-sub-badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 700; color: #35492f;
}
/* The wrapper is what carries the class for BOTH built-in SVG and uploaded images —
   an uploaded SVG with no width/height would otherwise render at its intrinsic size. */
.chfb-sub-badge-icon {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	flex-shrink: 0;
	color: var(--chfb-accent, #5aa832);
	max-width: 40px; max-height: 40px;
}
.chfb-sub-badge-icon svg,
.chfb-sub-badge-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* ==========================================================================
   PRESETS — each only overrides what differs from the base above
   ========================================================================== */

/* 1. CLASSIC — hero image + curved band (the supplied design) */
.chfb-sub-classic .chfb-sub-hero { position: relative; height: 230px; }
.chfb-sub-classic .chfb-sub-hero::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 62px;
	background: var(--chfb-accent, #5aa832);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.chfb-sub-classic .chfb-sub-body { padding-top: 0; }
.chfb-sub-classic .chfb-sub-title {
	background: var(--chfb-accent, #5aa832);
	color: #fff;
	margin: 0 -30px 18px;
	padding: 0 30px 20px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* 2. SIDE — image left, form right */
.chfb-sub-side { width: min(840px, 95vw); display: flex; overflow: hidden; }
.chfb-sub-side .chfb-sub-hero { flex: 0 0 42%; height: auto; min-height: 380px; }
.chfb-sub-side .chfb-sub-body { flex: 1; text-align: left; padding: 34px; }
.chfb-sub-side .chfb-sub-badges { justify-content: flex-start; }
@media (max-width: 720px) {
	.chfb-sub-side { flex-direction: column; }
	.chfb-sub-side .chfb-sub-hero { flex: none; min-height: 170px; }
}

/* 3. MINIMAL — centred card, image suppressed */
.chfb-sub-minimal { width: min(440px, 92vw); background: #fff; border-radius: 16px; }
.chfb-sub-minimal .chfb-sub-hero { display: none; }
.chfb-sub-minimal .chfb-sub-body { padding: 38px 30px 30px; }
.chfb-sub-minimal .chfb-sub-field { background: #f7f8f6; border-color: #e6eae4; }

/* 4. FULLBG — image behind everything */
.chfb-sub-fullbg { background: #14350f; overflow: hidden; }
.chfb-sub-fullbg .chfb-sub-hero {
	position: absolute; inset: 0;
	height: auto;
	opacity: .34;
}
.chfb-sub-fullbg .chfb-sub-body { position: relative; z-index: 2; padding: 44px 34px 34px; }
.chfb-sub-fullbg .chfb-sub-title { color: #fff; }
.chfb-sub-fullbg .chfb-sub-desc  { color: #d8e6d2; }
.chfb-sub-fullbg .chfb-sub-field { background: rgba(255,255,255,.94); border-color: transparent; }
.chfb-sub-fullbg .chfb-sub-badge { color: #e6f2e2; }
.chfb-sub-fullbg .chfb-sub-badges { border-top-color: rgba(255,255,255,.18); }

/* 5. SPLIT — solid colour block above the form */
.chfb-sub-split { background: #fff; overflow: hidden; }
.chfb-sub-split .chfb-sub-hero { height: 150px; }
.chfb-sub-split .chfb-sub-title {
	background: var(--chfb-accent, #5aa832);
	color: #fff;
	margin: 0 0 20px;
	padding: 22px 30px;
}
.chfb-sub-split .chfb-sub-body { padding: 0 30px 28px; }
.chfb-sub-split .chfb-sub-desc { padding-top: 2px; }

/* 6. COMPACT — slim bar pinned to the bottom */
.chfb-sub-compact {
	top: auto; bottom: 0; left: 50%;
	transform: translate(-50%, 20px);
	width: min(900px, 100vw);
	border-radius: 16px 16px 0 0;
	max-height: none;
}
.chfb-sub-compact.chfb-sub-open { transform: translate(-50%, 0); }
.chfb-sub-compact .chfb-sub-hero { display: none; }
.chfb-sub-compact .chfb-sub-body {
	display: flex; align-items: center; gap: 20px;
	text-align: left;
	padding: 18px 26px;
}
.chfb-sub-compact .chfb-sub-title { font-size: 18px; margin: 0; flex: 0 0 auto; }
.chfb-sub-compact .chfb-sub-desc  { margin: 0; flex: 1 1 auto; font-size: 13.5px; }
.chfb-sub-compact .chfb-sub-form  { flex-direction: row; align-items: center; flex: 1 1 340px; }
.chfb-sub-compact .chfb-sub-field { flex: 1; }
.chfb-sub-compact .chfb-sub-field input { padding: 11px 0; }
.chfb-sub-compact .chfb-sub-btn   { margin-top: 0; padding: 12px 22px; font-size: 14px; white-space: nowrap; }
.chfb-sub-compact .chfb-sub-badges { display: none; }
.chfb-sub-compact .chfb-sub-msg {
	position: absolute; left: 26px; bottom: 2px; margin: 0; font-size: 12px;
}
@media (max-width: 880px) {
	.chfb-sub-compact .chfb-sub-body { flex-direction: column; align-items: stretch; text-align: center; }
	.chfb-sub-compact .chfb-sub-form { flex-direction: column; }
	.chfb-sub-compact .chfb-sub-msg  { position: static; }
}

/* 7. DARK — inverted */
.chfb-sub-dark { background: #16241a; }
.chfb-sub-dark .chfb-sub-title { color: #fff; }
.chfb-sub-dark .chfb-sub-desc  { color: #b7c9b3; }
.chfb-sub-dark .chfb-sub-field {
	background: #1f3324;
	border-color: #2c4632;
}
.chfb-sub-dark .chfb-sub-field input { color: #eaf3e7; }
.chfb-sub-dark .chfb-sub-field input::placeholder { color: #7e9479; }
.chfb-sub-dark .chfb-sub-field svg { color: #8fb984; }
.chfb-sub-dark .chfb-sub-badge { color: #cfe2c9; }
.chfb-sub-dark .chfb-sub-badges { border-top-color: rgba(255, 255, 255, .12); }

@media (max-width: 520px) {
	.chfb-sub-body { padding: 20px 20px 24px; }
	.chfb-sub-title { font-size: 21px; }
	.chfb-sub-classic .chfb-sub-title { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
	.chfb-sub-hero, .chfb-sub-classic .chfb-sub-hero { height: 160px; }
	.chfb-sub-badges { gap: 8px 12px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.chfb-sub-modal, .chfb-sub-overlay, .chfb-sub-close, .chfb-sub-btn { transition: none; }
}

/* ==========================================================================
   FOOTER SUBSCRIBE BLOCK  (v5.6.1)
   Deliberately simple and styled separately from the popup: a heading, a line
   of text, and one button that opens the popup.
   ========================================================================== */
.chfb-fsub { margin-top: 18px; }
.chfb-fsub-left   { text-align: left; }
.chfb-fsub-center { text-align: center; }
.chfb-fsub-right  { text-align: right; }

.chfb-fsub-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: inherit;
}
.chfb-fsub-desc {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: .82;
}
.chfb-fsub-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px;
	padding: 12px 24px !important;
	margin: 0 !important;
	border: none !important;
	outline: none !important;
	cursor: pointer !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	background: #5aa832;   /* overridden !important by the settings-driven inline CSS */
	color: #fff;
	transition: background .15s, transform .12s;
}
.chfb-fsub-btn:hover { transform: translateY(-1px); }
.chfb-fsub-btn-icon {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	flex-shrink: 0;
	max-width: 36px; max-height: 36px;
}
.chfb-fsub-btn-icon svg,
.chfb-fsub-btn-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
	.chfb-fsub-btn { transition: none; }
}

/* ==========================================================================
   FOOTER COLUMN HEADING ICONS + CONTACT ROW ICONS  (v5.6.2)
   Both built-in SVGs and uploaded images live inside a wrapper span, so ONE
   size rule governs each — an uploaded SVG can never render at its natural
   (often huge) size.
   ========================================================================== */
.chfb-fcol-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	max-width: 40px;
	max-height: 40px;
	color: inherit;
}
.chfb-fcol-ico svg,
.chfb-fcol-ico img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Contact rows: an uploaded icon may be used for ANY type, not just "custom".
   Size ONLY the glyph inside the circle — this rule used to set width/height on
   .chfb-contact-icon itself, which (being later in the file) crushed the 34px circle
   defined above down to 16px. */
.chfb-contact-icon svg,
.chfb-contact-icon img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}