/* ==========================================================================
   Food Calorie Calculator — Frontend Styles v2
   Brand palette — Option 1 "Fresh & Healthy":
     Primary  Forest Green  #148B43
     Accent   Lime Pop      #6DBF67
     CTA      Tangerine     #F47B20
     BG       Off-White     #F8FAF5
     Text     Deep Charcoal #1E2A1E

   Custom properties injected via PHP (wp_add_inline_style):
     --fcc-primary      default #148B43
     --fcc-accent       default #F47B20
     --fcc-bg           default #F8FAF5
     --fcc-radius       default 8px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset / scope
   -------------------------------------------------------------------------- */
.fcc-calculator *,
.fcc-calculator *::before,
.fcc-calculator *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Root + custom properties
   -------------------------------------------------------------------------- */
.fcc-calculator {
	--fcc-primary:       #148B43;
	--fcc-accent:        #FF3F33;
	--fcc-bg:            #FFE6E1;
	--fcc-radius:        8px;
	--fcc-surface:       #ffffff;
	--fcc-border:        #d4ddd8;
	--fcc-text:          #1a2e2f;
	--fcc-text-muted:    #4a7a5a;
	--fcc-text-light:    #7a9a8a;
	--fcc-green:         #9FC87E;
	--fcc-green-bg:      #f0f7ea;
	--fcc-green-border:  #c5e0a8;
	--fcc-amber:         #b45309;
	--fcc-amber-bg:      #fef3c7;
	--fcc-amber-border:  #fcd34d;
	--fcc-red:           #b91c1c;
	--fcc-red-bg:        #fee2e2;
	--fcc-red-border:    #fca5a5;
	--fcc-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--fcc-shadow:        0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
	--fcc-shadow-lg:     0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
	--fcc-transition:    0.18s ease;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
	font-size: 15px;
	color: var(--fcc-text);
	background: var(--fcc-surface);
	border-radius: 16px;
	box-shadow: var(--fcc-shadow-lg);
	max-width: 860px;
	margin: 0 auto;
	line-height: 1.5;
	box-sizing: border-box;
}

.fcc-calculator *, .fcc-calculator *::before, .fcc-calculator *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.fcc-calculator[data-fcc-dark="auto"] {
		--fcc-surface:    #0f172a;
		--fcc-bg:         #1e293b;
		--fcc-border:     #334155;
		--fcc-text:       #f1f5f9;
		--fcc-text-muted: #94a3b8;
		--fcc-text-light: #64748b;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fcc-calculator * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Hero header
   -------------------------------------------------------------------------- */
.fcc-hero {
	background: linear-gradient(135deg, #159A4C 0%, var(--fcc-primary) 55%, #2D9A54 100%);
	padding: 1.5rem 1.75rem;
	position: relative;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
}

.fcc-hero::after {
	content: '';
	position: absolute;
	right: -40px;
	top: -40px;
	width: 200px;
	height: 200px;
	background: rgba(255,255,255,.05);
	border-radius: 50%;
	pointer-events: none;
}

.fcc-hero::before {
	content: '';
	position: absolute;
	right: 60px;
	bottom: -60px;
	width: 150px;
	height: 150px;
	background: rgba(255,255,255,.04);
	border-radius: 50%;
	pointer-events: none;
}

.fcc-hero__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
	z-index: 1;
}

.fcc-hero__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,.15);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border: 1px solid rgba(255,255,255,.2);
}

.fcc-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.2rem;
	line-height: 1.2;
}

.fcc-hero__sub {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255,255,255,.75);
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Tab Navigation
   -------------------------------------------------------------------------- */
.fcc-tabs-nav {
	display: flex;
	background: #f8fafc;
	border-bottom: 1px solid var(--fcc-border);
	padding: 0 1rem;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.fcc-tabs-nav::-webkit-scrollbar { display: none; }

.fcc-calculator .fcc-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.25rem;
	background: transparent !important;
	white-space: nowrap;
	flex-shrink: 0;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--fcc-text-muted) !important;
	cursor: pointer;
	transition: color var(--fcc-transition), border-color var(--fcc-transition), background var(--fcc-transition);
	white-space: nowrap;
	margin-bottom: -1px;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline-offset: -2px;
}

.fcc-calculator .fcc-tab-btn svg { opacity: .7; }

.fcc-calculator .fcc-tab-btn:hover,
.fcc-calculator .fcc-tab-btn:focus {
	background: #EEF8F1 !important;
	color: var(--fcc-primary) !important;
	border-bottom-color: transparent !important;
}

.fcc-calculator .fcc-tab-btn--active,
.fcc-calculator .fcc-tab-btn--active:hover,
.fcc-calculator .fcc-tab-btn--active:focus {
	background: transparent !important;
	color: var(--fcc-primary) !important;
	border-bottom-color: var(--fcc-primary) !important;
}

.fcc-calculator .fcc-tab-btn--active svg { opacity: 1; }

.fcc-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	background: var(--fcc-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	border-radius: 9px;
	padding: 0 0.3rem;
	margin-left: 0.25rem;
	line-height: 1;
}
.fcc-tab-badge[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Tabs body + panels
   -------------------------------------------------------------------------- */
.fcc-tabs-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.fcc-tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.fcc-section {
	background: var(--fcc-surface);
	border: 1px solid var(--fcc-border);
	border-radius: calc(var(--fcc-radius) + 2px);
	padding: 1.25rem 1.5rem;
	margin-bottom: 0.875rem;
	box-shadow: var(--fcc-shadow-sm);
}

.fcc-section-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--fcc-primary);
	margin: 0 0 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 2px solid var(--fcc-border);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fcc-section-title--inline {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.25rem;
}

.fcc-subsection-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--fcc-text);
	margin: 1rem 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Search Section
   -------------------------------------------------------------------------- */
.fcc-search-section {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
}

.fcc-search-inner {
	background: linear-gradient(145deg, #e8f8ef 0%, #dcfce7 60%, #EEF8F1 100%);
	border: 1.5px solid #86efac;
	border-radius: 14px;
	padding: 1.75rem 1.75rem 1.25rem;
}

.fcc-label {
	display: block;
	font-weight: 600;
	font-size: 0.825rem;
	margin-bottom: 0.5rem;
	color: var(--fcc-text);
	letter-spacing: 0.01em;
}

.fcc-label--search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--fcc-primary);
	margin-bottom: 0.75rem;
	letter-spacing: 0.01em;
}

.fcc-label--search svg { flex-shrink: 0; color: var(--fcc-primary); }

.fcc-autocomplete { position: relative; }

.fcc-search-input {
	width: 100%;
	padding: 0.9rem 3rem 0.9rem 3rem !important;
	border: 2px solid #2D9A54 !important;
	border-radius: 10px !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	background: #fff !important;
	color: var(--fcc-text) !important;
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 2px 8px rgba(21,154,76,.08) !important;
	line-height: 1.5 !important;
}

.fcc-search-input:focus {
	border-color: var(--fcc-primary) !important;
	box-shadow: 0 0 0 3px rgba(20,139,67,.15), 0 2px 8px rgba(21,154,76,.08) !important;
}

.fcc-search-input::placeholder {
	color: #94a3b8 !important;
	font-weight: 400 !important;
}

.fcc-search-icon {
	position: absolute;
	left: 0.9rem;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 20px;
	color: #6bab88;
	pointer-events: none;
	display: flex;
	align-items: center;
}

.fcc-search-hint {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: #1a7a3f;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.fcc-search-hint::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	background: #6bab88;
	border-radius: 50%;
	flex-shrink: 0;
}

.fcc-popular-section {
	margin-top: 1rem;
}

.fcc-popular-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1a7a3f;
	margin: 0 0 0.5rem;
}

.fcc-popular-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.fcc-popular-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	font-size: 0.8rem;
	font-family: inherit;
	color: #148B43;
	background: rgba(33, 186, 95, 0.08);
	border: 1px solid rgba(33, 186, 95, 0.25);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
}

.fcc-popular-chip:hover,
.fcc-popular-chip:focus-visible {
	background: rgba(33, 186, 95, 0.15);
	border-color: #148B43;
	color: #1a7a3f;
	outline: none;
}

/* ---- No-results request button ---- */
.fcc-no-results {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
}

.fcc-no-results__text {
	color: #6b7280;
	font-size: 0.875rem;
}

.fcc-no-results__request {
	align-self: flex-start;
	font-size: 0.8rem;
	font-family: inherit;
	font-weight: 600;
	color: #148B43;
	background: none;
	border: 1px solid rgba(33, 186, 95, 0.4);
	border-radius: 6px;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.fcc-no-results__request:hover {
	background: rgba(33, 186, 95, 0.08);
	border-color: #148B43;
}

/* ---- Search-box modifier suggestion, plan item #2's final piece ----
   A confirmed zero-result search like "low calorie biscuit" often
   still describes a real, live page (detectSearchModifier() in
   fcc-calculator.js). Shown as its own, more prominent dropdown item
   right above the plain "No foods found" message, a real, tinted
   destination link rather than a dead search. */
.fcc-search-suggestion {
	padding: 0.6rem 1rem;
	background: rgba(33, 186, 95, 0.08);
	border-bottom: 1px solid rgba(33, 186, 95, 0.15);
}

.fcc-search-suggestion__link {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: #148B43;
	text-decoration: none;
}

.fcc-search-suggestion__link:hover {
	text-decoration: underline;
}

/* ---- Food request panel ---- */
.fcc-request-panel {
	margin-top: 0.75rem;
	background: #f0f9f4;
	border: 1px solid rgba(33, 186, 95, 0.25);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.fcc-request-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.fcc-request-panel__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1E2A1E;
	margin: 0;
	line-height: 1.4;
}

.fcc-request-panel__title strong {
	color: #148B43;
}

.fcc-request-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 0 0.2rem;
	flex-shrink: 0;
}

.fcc-request-close:hover { color: #374151; }

.fcc-req-row {
	margin-bottom: 0.65rem;
}

.fcc-req-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.3rem;
}

.fcc-req-opt {
	font-weight: 400;
	color: #9ca3af;
}

.fcc-req-required {
	color: #dc2626;
	margin-left: 2px;
}

.fcc-req-hint {
	margin: 0.25rem 0 0;
	font-size: 0.72rem;
	color: #159A4C;
}

.fcc-req-error {
	margin: 0.25rem 0 0;
	font-size: 0.72rem;
	color: #dc2626;
	font-weight: 600;
}

.fcc-req-input--error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.fcc-req-row--optin {
	margin-bottom: 0.5rem;
}

.fcc-req-optin-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: #374151;
	cursor: pointer;
	line-height: 1.4;
}

.fcc-req-optin-label input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: #148B43;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.fcc-req-input,
.fcc-req-textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: #1E2A1E;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.fcc-req-input:focus,
.fcc-req-textarea:focus {
	outline: none;
	border-color: #148B43;
	box-shadow: 0 0 0 3px rgba(33, 186, 95, 0.12);
}

.fcc-req-textarea { resize: vertical; min-height: 60px; }

.fcc-req-footer {
	margin-top: 0.75rem;
}

.fcc-req-submit {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	font-size: 0.875rem;
	font-family: inherit;
	font-weight: 600;
	color: #fff !important;
	background: #148B43 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background 0.15s;
}

.fcc-req-submit:hover { background: #1a7a3f !important; }
.fcc-req-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.fcc-request-success {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #148B43;
	padding: 0.25rem 0;
}

.fcc-search-spinner {
	position: absolute;
	right: 0.875rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--fcc-border);
	border-top-color: var(--fcc-primary);
	border-radius: 50%;
	display: none;
}

.fcc-search-spinner.fcc-spinning {
	display: block;
	animation: fcc-spin 0.65s linear infinite;
	will-change: transform;
}

@keyframes fcc-spin { to { transform: rotate(360deg); } }

.fcc-search-clear {
	position: absolute;
	right: 0.75rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fcc-border);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--fcc-text-muted);
	padding: 0;
	transition: background var(--fcc-transition), color var(--fcc-transition);
	flex-shrink: 0;
}

.fcc-search-clear:hover {
	background: var(--fcc-red-bg);
	color: var(--fcc-red);
}

.fcc-search-clear[hidden] { display: none; }

.fcc-results-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--fcc-surface);
	border: 1px solid var(--fcc-border);
	border-radius: calc(var(--fcc-radius) + 2px);
	box-shadow: var(--fcc-shadow-lg);
	list-style: none;
	margin: 0;
	padding: 0.375rem;
	z-index: 9999;
	max-height: 320px;
	overflow-y: auto;
}

.fcc-results-dropdown[hidden],
.fcc-results-dropdown:empty { display: none; }

.fcc-results-dropdown li {
	padding: 0.625rem 0.875rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: var(--fcc-radius);
	font-size: 0.9rem;
	transition: background var(--fcc-transition);
}

.fcc-results-dropdown li:hover,
.fcc-results-dropdown li[aria-selected="true"] {
	background: #EEF8F1;
}

.fcc-result-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.fcc-result-name__text { font-weight: 500; color: var(--fcc-text); min-width: 0; }

/* A quantity recognised from the search box itself ("500g pasta"),
   added 2026-08-31. Deliberately not bold/full-strength text colour
   like the food name it follows, this is a hint of what selecting the
   row will pre-fill, not part of the food's own real name. */
.fcc-result-qty-tag { font-weight: 400; color: var(--fcc-text-muted, #4a7a5a); }

/* A real sponsor product photo, added 2026-08-31, distinct from the
   sponsor bar's own brand logo. Only rendered when a food actually has
   one on file, no placeholder/fallback image for any other food. */
.fcc-result-photo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--fcc-border);
}

.fcc-result-kcal {
	font-weight: 700;
	color: var(--fcc-primary);
	font-size: 0.8rem;
	white-space: nowrap;
	background: #EEF8F1;
	padding: 0.2rem 0.5rem;
	border-radius: 20px;
	margin-left: 0.5rem;
}

/* Promotional badge pill in dropdown */
.fcc-promo-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: linear-gradient(135deg, #FF3F33, #ff6b5e);
	color: #fff;
	padding: 0.15rem 0.45rem;
	border-radius: 10px;
	margin-left: 0.4rem;
	vertical-align: middle;
	line-height: 1.3;
}

/* Trending header in dropdown */
.fcc-trending-header {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fcc-text-muted);
	padding: 0.5rem 0.875rem 0.25rem;
	cursor: default;
}

/* Promotional banner below results */
.fcc-promo-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: linear-gradient(135deg, #fff5f4 0%, #ffe8e5 100%);
	border: 1.5px solid #fca5a5;
	border-radius: var(--fcc-radius);
	padding: 0.75rem 1rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}
.fcc-promo-banner__msg {
	flex: 1;
	font-size: 0.88rem;
	font-weight: 500;
	color: #333;
}
.fcc-promo-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.45rem 1rem;
	background: var(--fcc-accent, #FF3F33);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, transform 0.15s;
}
.fcc-promo-banner__cta:hover {
	background: #e63529;
	transform: translateY(-1px);
	color: #fff;
}

.fcc-no-results {
	padding: 0.875rem;
	color: var(--fcc-text-muted);
	font-style: italic;
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Food Header (name + kcal badge)
   -------------------------------------------------------------------------- */
.fcc-food-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.125rem;
	background: linear-gradient(135deg, #EEF8F1 0%, #dcfce7 100%);
	border: 1px solid #86efac;
	border-radius: calc(var(--fcc-radius) + 2px);
	margin-bottom: 1rem;
}

.fcc-food-header__label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fcc-primary);
	opacity: 0.8;
	margin-bottom: 0.2rem;
}

.fcc-selected-food-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--fcc-text);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.fcc-selected-food-name__text { min-width: 0; }

/* Restructured 2026-08-31, on request: the photo used to sit only
   beside the name, with the sponsor bar as a separate full-width row
   underneath both. Now the photo is the sole left-side element and
   this column holds the name on top with the sponsor bar directly
   beneath it, left-aligned with the name specifically (not the whole
   photo+name row), matching a standard avatar-plus-two-lines layout.
   .fcc-sponsor-bar's own old top margin is zeroed below in favour of
   this gap, so the two don't stack. */
.fcc-selected-food-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	min-width: 0;
}

/* A real sponsor product photo, added 2026-08-31, shown left of the
   calculated food's name. Distinct from .fcc-sponsor-logo (the brand
   logo in the sponsor bar below the name). Sized dynamically, not
   fixed at 40px (reworked the same day): align-self: stretch makes it
   match .fcc-selected-food-info's real height (top aligned with the
   name, bottom aligned with the sponsor bar underneath it), and
   aspect-ratio keeps it a true square regardless of that height,
   width tracks height automatically rather than being set separately.
   The max-width/max-height cap only guards against an unusually tall
   info column (e.g. a long sponsor name wrapping to two lines)
   growing the photo past a sensible size. */
.fcc-product-photo {
	width: auto;
	max-width: 72px;
	max-height: 72px;
	aspect-ratio: 1 / 1;
	align-self: stretch;
	border-radius: var(--fcc-radius);
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--fcc-border);
}

.fcc-food-header__kcal {
	text-align: center;
	flex-shrink: 0;
	background: var(--fcc-primary);
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	min-width: 80px;
}

.fcc-food-kcal-num {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.fcc-food-kcal-unit {
	display: block;
	font-size: 0.7rem;
	opacity: .85;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   Quantity Controls
   -------------------------------------------------------------------------- */
.fcc-quantity-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
}

/* Joined pill: [Quantity | Unit] */
.fcc-quantity-controls {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--fcc-border);
	border-radius: 12px;
	background: var(--fcc-surface);
	flex: 1;
	min-width: min(240px, 100%);
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
	box-shadow: var(--fcc-shadow-sm);
}

.fcc-quantity-controls:focus-within {
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

.fcc-qty-group {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.875rem 0.6rem;
	flex: 1;
	position: relative;
}

/* Left half of pill */
.fcc-qty-group:first-child {
	border-right: 1.5px solid var(--fcc-border);
	max-width: 130px;
	flex: 0 0 130px;
	border-radius: 10px 0 0 10px;
}

/* Right half of pill — overflow visible so dropdown can escape */
.fcc-qty-group:last-child {
	border-radius: 0 10px 10px 0;
	overflow: visible;
}

.fcc-qty-group .fcc-label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fcc-text-muted);
	margin-bottom: 0.2rem;
}

.fcc-quantity-input {
	width: 100% !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	text-align: left !important;
	color: var(--fcc-text) !important;
	background: transparent !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.3;
}

/* appearance:none above strips the input's own chrome, but Chrome's
   built-in up/down spinner is a separate sub-part it doesn't fully
   control, left at its default hover/focus-only opacity. Force it
   visible always, not just on hover. */
.fcc-quantity-input::-webkit-inner-spin-button,
.fcc-quantity-input::-webkit-outer-spin-button {
	opacity: 1;
}

/* Hidden native select — kept as JS source of truth */
.fcc-unit-select { display: none; }

/* --------------------------------------------------------------------------
   Custom Unit Dropdown
   -------------------------------------------------------------------------- */
.fcc-unit-custom {
	position: relative;
	width: 100%;
}

.fcc-calculator .fcc-unit-trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: var(--fcc-text) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	gap: 0.375rem;
	outline: none !important;
	text-align: left;
	min-width: 0;
	line-height: 1.3;
	transition: color var(--fcc-transition);
}

.fcc-calculator .fcc-unit-trigger:hover,
.fcc-calculator .fcc-unit-trigger:focus {
	background: transparent !important;
	color: var(--fcc-primary) !important;
}

.fcc-unit-trigger__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcc-unit-chevron {
	flex-shrink: 0;
	color: var(--fcc-text-muted);
	transition: transform 0.18s ease, color 0.18s ease;
}

.fcc-unit-custom--open .fcc-unit-chevron {
	transform: rotate(180deg);
	color: var(--fcc-primary);
}

.fcc-unit-options {
	position: absolute;
	top: calc(100% + 8px);
	left: -0.875rem;
	min-width: 220px;
	background: #fff;
	border: 1.5px solid var(--fcc-border);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
	list-style: none;
	padding: 0.375rem;
	margin: 0;
	z-index: 9998;
	display: none;
	animation: fcc-unit-dropdown-in 0.15s ease;
}

.fcc-unit-custom--open .fcc-unit-options { display: block; }

@keyframes fcc-unit-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fcc-unit-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.875rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--fcc-text);
	transition: background 0.15s, color 0.15s;
	gap: 0.5rem;
	-webkit-user-select: none;
	user-select: none;
}

.fcc-unit-option:hover {
	background: #EEF8F1;
	color: var(--fcc-primary);
}

.fcc-unit-option--active {
	color: var(--fcc-primary);
	font-weight: 600;
}

.fcc-unit-option__check {
	flex-shrink: 0;
	color: var(--fcc-primary);
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.fcc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--fcc-radius);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background var(--fcc-transition), border-color var(--fcc-transition),
	            color var(--fcc-transition), transform var(--fcc-transition),
	            box-shadow var(--fcc-transition);
	text-decoration: none;
	white-space: nowrap;
	outline: none;
}

.fcc-btn:active { transform: translateY(1px); }

.fcc-btn--primary {
	background: var(--fcc-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(20,139,67,.3);
}

.fcc-btn--primary:hover {
	background: #236940;
	box-shadow: 0 4px 12px rgba(20,139,67,.35);
}

.fcc-btn--secondary {
	background: var(--fcc-accent, #FF3F33);
	color: #fff;
	box-shadow: 0 2px 8px rgba(255,63,51,.25);
	padding: 0.75rem 1.375rem;
	border-radius: 8px;
	font-size: 0.9rem;
	justify-content: center;
	width: 100%;
}

.fcc-btn--secondary:hover { background: #e63529; }

.fcc-btn--ghost {
	background: transparent;
	border-color: var(--fcc-border);
	color: var(--fcc-text-muted);
}

.fcc-btn--ghost:hover {
	border-color: var(--fcc-primary);
	color: var(--fcc-primary);
	background: #EEF8F1;
}

/* --------------------------------------------------------------------------
   Health Highlights
   -------------------------------------------------------------------------- */
.fcc-health-highlights {
	margin-bottom: 1rem;
}

.fcc-health-highlights__label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fcc-text-light);
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.fcc-health-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.fcc-health-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.5;
}

.fcc-health-chip--positive {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.fcc-health-chip--omega3 {
	background: #e0f2fe;
	color: #0369a1;
	border: 1px solid #7dd3fc;
}

.fcc-health-chip--warning {
	background: var(--fcc-amber-bg);
	color: var(--fcc-amber);
	border: 1px solid var(--fcc-amber-border);
}

.fcc-health-chip--danger {
	background: var(--fcc-red-bg);
	color: var(--fcc-red);
	border: 1px solid var(--fcc-red-border);
}

/* --------------------------------------------------------------------------
   FSA Traffic Lights — pill badge design
   -------------------------------------------------------------------------- */
.fcc-traffic-lights {
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: linear-gradient(135deg, #f8fafc 0%, #EEF8F1 100%);
	border: 1px solid var(--fcc-border);
	border-radius: 12px;
}

.fcc-tl-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fcc-text-light);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.fcc-tl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fcc-tl-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem 0.5rem 0.625rem;
	border-radius: 10px;
	border: 1.5px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
	background: #f8fafc;
	transition: transform var(--fcc-transition);
	cursor: default;
}

.fcc-tl-item--green {
	background: var(--fcc-green-bg);
	border-color: var(--fcc-green-border);
}

.fcc-tl-item--amber {
	background: var(--fcc-amber-bg);
	border-color: var(--fcc-amber-border);
}

.fcc-tl-item--red {
	background: var(--fcc-red-bg);
	border-color: var(--fcc-red-border);
}

.fcc-tl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #cbd5e1;
	flex-shrink: 0;
}

.fcc-tl-dot--green { background: #16a34a; }
.fcc-tl-dot--amber { background: #d97706; }
.fcc-tl-dot--red   { background: #dc2626; }

.fcc-tl-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fcc-tl-nutrient {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--fcc-text);
	line-height: 1.1;
}

.fcc-tl-value {
	font-size: 0.7rem;
	color: var(--fcc-text-muted);
	line-height: 1;
}

.fcc-tl-rating {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	line-height: 1.4;
}

.fcc-tl-item--green .fcc-tl-rating {
	background: rgba(21,128,61,.15);
	color: var(--fcc-green);
}

.fcc-tl-item--amber .fcc-tl-rating {
	background: rgba(180,83,9,.12);
	color: var(--fcc-amber);
}

.fcc-tl-item--red .fcc-tl-rating {
	background: rgba(185,28,28,.12);
	color: var(--fcc-red);
}

.fcc-tl-footnote {
	font-size: 0.72rem;
	color: var(--fcc-text-light);
	margin: 0.625rem 0 0;
}

/* --------------------------------------------------------------------------
   Nutrition Table
   -------------------------------------------------------------------------- */
.fcc-nutrition-table-wrapper {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(20,139,67,.15);
	padding: 2px;
	background: #148B43;
}

.fcc-nutrition-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 14px;
	overflow: hidden;
	font-size: 0.875rem;
}

.fcc-nutrition-table th,
.fcc-nutrition-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #e6eded;
	border-right: 1px solid #d0e5d8;
	text-align: left;
}
.fcc-nutrition-table th:last-child,
.fcc-nutrition-table td:last-child {
	border-right: none;
}

.fcc-nutrition-table thead th {
	background: #148B43;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #fff;
	border-bottom: none;
	border-right: 1px solid rgba(255,255,255,0.2);
	padding: 0.8rem 1rem;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
}
.fcc-nutrition-table thead th:last-child { border-right: none; }

.fcc-nutrition-table tbody { background: #fff; }
.fcc-nutrition-table tbody tr {
	transition: background .15s;
}
.fcc-nutrition-table tbody tr:nth-child(even) {
	background: #EEF8F1;
}
.fcc-nutrition-table tbody tr:hover {
	background: #d6eedd;
}

/* Nutrient name column */
.fcc-nutrition-table tbody td:first-child {
	font-weight: 600;
	color: var(--fcc-text, #1a2e2f);
	position: relative;
}

/* Left accent bar on nutrient name */
.fcc-nutrition-table tbody td:first-child::before {
	content: '';
	position: absolute;
	left: 0;
	top: 25%;
	height: 50%;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--fcc-primary, #148B43);
	opacity: 0;
	transition: opacity .15s;
}
.fcc-nutrition-table tbody tr:hover td:first-child::before { opacity: 1; }

.fcc-col-per,
.fcc-col-per100,
.fcc-col-ri { text-align: right; }

.fcc-col-per { font-weight: 600; color: var(--fcc-text, #1a2e2f); }
.fcc-col-per100 { color: var(--fcc-text-muted, #4a7a5a); font-size: 0.82rem; }

.fcc-col-ri { vertical-align: middle; }

/* RI progress bar cell */
.fcc-ri-cell {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	min-width: 58px;
}

.fcc-ri-val {
	font-weight: 800;
	font-size: 0.9rem;
	line-height: 1;
	color: var(--fcc-primary, #148B43);
}

.fcc-ri-bar {
	width: 100%;
	height: 6px;
	background: #e0eaea;
	border-radius: 3px;
	overflow: hidden;
}

.fcc-ri-bar__fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease;
}

/* Energy rows: prominent band */
.fcc-row--energy td,
.fcc-row--energy th {
	font-weight: 700;
	background: linear-gradient(to right, var(--fcc-bg, #FFE6E1) 0%, #faf5f4 60%, transparent 100%) !important;
	border-bottom: 2px solid rgba(20,139,67,.15);
}

/* Sub-rows: indented, muted */
.fcc-row--sub td:first-child,
.fcc-row--sub th {
	padding-left: 2rem;
	color: var(--fcc-text-muted, #4a7a5a);
	font-weight: 400;
	font-style: italic;
}
.fcc-row--sub td:first-child::before { display: none; }

.fcc-ri-footnote {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	padding: 0.5rem 0.5rem;
}

/* ── Nutrition table mobile ── */
@media (max-width: 480px) {
	.fcc-nutrition-table-wrapper { border-radius: 12px; padding: 1.5px; }
	.fcc-nutrition-table { border-radius: 10px; }
	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.55rem 0.5rem; font-size: 0.78rem; }
	.fcc-nutrition-table thead th { font-size: 0.6rem; padding: 0.6rem 0.5rem; }
	.fcc-col-per100 { display: none; }
	.fcc-ri-cell { min-width: 44px; }
	.fcc-ri-val { font-size: 0.78rem; }
	.fcc-ri-bar { height: 4px; }
	.fcc-row--sub td:first-child,
	.fcc-row--sub th { padding-left: 1.25rem; }
}
@media (max-width: 360px) {
	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.45rem 0.35rem; font-size: 0.72rem; }
	.fcc-col-per { font-size: 0.72rem; }
}

.fcc-serving-desc {
	font-weight: 700;
}
.fcc-nutrition-table thead .fcc-serving-desc {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Macro Chart
   -------------------------------------------------------------------------- */
.fcc-macro-chart-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 1.5rem;
	background: #EEF8F1;
	border: 2px solid transparent;
	border-radius: 16px;
	background-clip: padding-box;
	position: relative;
}
.fcc-macro-chart-wrapper::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 18px;
	background: #148B43;
	z-index: -1;
}

/* SVG Macro Rings */
.fcc-macro-rings {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.fcc-macro-ring-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.fcc-macro-ring { display: block; }
.fcc-macro-ring circle:first-child { opacity: 0.3; }
.fcc-macro-ring-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fcc-text-muted, #4a7a5a);
}

/* Macro progress bars */
.fcc-macro-bars { display: flex; flex-direction: column; gap: 0.6rem; }
.fcc-macro-bar__header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	margin-bottom: 0.2rem;
}
.fcc-macro-bar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.fcc-macro-bar__label {
	font-weight: 600;
	color: var(--fcc-text, #1a2e2f);
}
.fcc-macro-bar__val {
	font-weight: 800;
	color: var(--fcc-text, #1a2e2f);
	margin-left: auto;
}
.fcc-macro-bar__kcal {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--fcc-text-muted, #4a7a5a);
	padding: 1px 5px;
	background: rgba(255,255,255,.7);
	border-radius: 4px;
}
.fcc-macro-bar__pct {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fcc-text-muted);
	min-width: 32px;
	text-align: right;
}
.fcc-macro-bar__track {
	height: 8px;
	background: rgba(255,255,255,.6);
	border-radius: 4px;
	overflow: hidden;
}
.fcc-macro-bar__fill {
	height: 100%;
	border-radius: 4px;
	transition: width .4s ease;
}

/* Mini stat grid */
.fcc-macro-detail { margin-top: 0.25rem; }
.fcc-macro-detail__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 0.5rem;
}
.fcc-macro-detail__stat {
	text-align: center;
	border-radius: 10px;
	padding: 0.5rem 0.3rem;
	border: 2px solid #43C977;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.fcc-macro-detail__stat-val {
	display: block;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
}
.fcc-macro-detail__stat-lbl {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0.1rem;
}
.fcc-macro-detail__stat--kcal     { background: #148B43; }
.fcc-macro-detail__stat--kcal .fcc-macro-detail__stat-val { color: #fff; }
.fcc-macro-detail__stat--kcal .fcc-macro-detail__stat-lbl { color: rgba(255,255,255,.85); }
.fcc-macro-detail__stat--density  { background: #0e6b33; }
.fcc-macro-detail__stat--density .fcc-macro-detail__stat-val { color: #fff; }
.fcc-macro-detail__stat--density .fcc-macro-detail__stat-lbl { color: rgba(255,255,255,.85); }
.fcc-macro-detail__stat--protein  { background: #159A4C; }
.fcc-macro-detail__stat--protein .fcc-macro-detail__stat-val { color: #fff; }
.fcc-macro-detail__stat--protein .fcc-macro-detail__stat-lbl { color: rgba(255,255,255,.85); }
.fcc-macro-detail__stat--fat      { background: #2D9A54; }
.fcc-macro-detail__stat--fat .fcc-macro-detail__stat-val { color: #fff; }
.fcc-macro-detail__stat--fat .fcc-macro-detail__stat-lbl { color: rgba(255,255,255,.85); }

@media (max-width: 600px) {
	/* macro wrapper is already column layout */
	.fcc-macro-right { width: 100%; }
	.fcc-macro-detail__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Omega-3 Cards
   -------------------------------------------------------------------------- */
.fcc-omega3-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
	margin-top: 0.75rem;
}

.fcc-omega3-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.875rem 0.5rem 0.75rem;
	border-radius: 12px;
	border: 1.5px solid var(--fcc-border);
	background: var(--fcc-surface);
	gap: 0.15rem;
}

.fcc-omega3-card--total {
	background: linear-gradient(135deg, #EEF8F1 0%, #e8f8ef 100%);
	border-color: #86efac;
}

.fcc-omega3-card__icon {
	margin-bottom: 0.3rem;
	display: flex;
}

.fcc-omega3-card--total .fcc-omega3-card__icon { color: var(--fcc-primary); }
.fcc-omega3-card--ala   .fcc-omega3-card__icon { color: #16a34a; }
.fcc-omega3-card--epa   .fcc-omega3-card__icon { color: #0284c7; }
.fcc-omega3-card--dha   .fcc-omega3-card__icon { color: #7c3aed; }

.fcc-omega3-val {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--fcc-text);
	min-height: 1.3em;
	line-height: 1.3;
}

.fcc-omega3-card__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fcc-text-muted);
	margin-top: 0.1rem;
}

.fcc-omega3-card__sub {
	font-size: 0.62rem;
	color: var(--fcc-text-light);
	line-height: 1.3;
}

@media (max-width: 480px) {
	.fcc-omega3-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Caffeine
   -------------------------------------------------------------------------- */
.fcc-caffeine-value { font-weight: 600; font-size: 1rem; }

.fcc-data-na { color: var(--fcc-text-light); font-style: italic; font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Micronutrients (Iron, Calcium, Vitamin C)
   -------------------------------------------------------------------------- */
.fcc-micronutrients-section { margin-top: 0.75rem; }
.fcc-micro-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625rem;
}
.fcc-micro-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.75rem 0.5rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #bbf7d0;
	transition: transform 0.15s, box-shadow 0.15s;
}
.fcc-micro-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(34,197,94,.15);
}
.fcc-micro-card__icon { font-size: 1.25rem; margin-bottom: 0.25rem; }
.fcc-micro-val {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--fcc-primary, #148B43);
}
.fcc-micro-card__label {
	font-size: 0.72rem;
	color: #4b5563;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 0.15rem;
}
@media (max-width: 480px) {
	.fcc-micro-cards { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
	.fcc-micro-card { padding: 0.5rem 0.25rem; }
	.fcc-micro-val { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   Action buttons row
   -------------------------------------------------------------------------- */
.fcc-result-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fcc-border);
}

/* --------------------------------------------------------------------------
   Meal empty state
   -------------------------------------------------------------------------- */
.fcc-meal-empty {
	text-align: center;
	padding: 3rem 1.5rem 2.5rem;
	color: var(--fcc-text-muted);
}

.fcc-meal-empty svg {
	display: block;
	margin: 0 auto 1.25rem;
	opacity: .25;
	color: var(--fcc-primary);
}

.fcc-meal-empty p {
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
	color: var(--fcc-text);
}

.fcc-meal-empty__hint {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fcc-text-light);
	margin: 0;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Meal Builder
   -------------------------------------------------------------------------- */
.fcc-meal-items { margin-bottom: 0.75rem; }

.fcc-meal-item {
	display: flex;
	align-items: center;
	padding: 0.65rem 0.875rem;
	background: #f8fafc;
	border: 1.5px solid var(--fcc-border);
	border-radius: 10px;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	gap: 0.6rem;
	transition: border-color .15s, box-shadow .15s;
}

.fcc-meal-item__name { font-weight: 600; flex: 1; }
.fcc-meal-item__detail { color: var(--fcc-text-muted); font-size: 0.8rem; }

.fcc-meal-item__kcal {
	font-weight: 700;
	color: var(--fcc-primary);
	background: #EEF8F1;
	padding: 0.15rem 0.5rem;
	border-radius: 6px;
	font-size: 0.85rem;
}

.fcc-meal-item__remove {
	background: none;
	border: none;
	color: var(--fcc-red);
	cursor: pointer;
	font-size: 1.1rem;
	padding: 0.1rem 0.3rem;
	border-radius: 4px;
	line-height: 1;
	transition: background var(--fcc-transition);
}

.fcc-meal-item__remove:hover { background: var(--fcc-red-bg); }

.fcc-meal-totals { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   BMR / TDEE Section — Redesigned
   -------------------------------------------------------------------------- */

/* Gradient header */
.fcc-bmr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #159A4C 0%, var(--fcc-primary) 55%, #2D9A54 100%);
	border-radius: 14px 14px 0 0;
	margin: -1.25rem -1.25rem 1.25rem;
}

.fcc-bmr-header__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.fcc-bmr-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.18);
	border-radius: 10px;
	flex-shrink: 0;
	color: #fff;
}

.fcc-bmr-header__title {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.1rem;
}

.fcc-bmr-header__sub {
	font-size: 0.72rem;
	color: rgba(255,255,255,0.78);
	margin: 0;
	font-weight: 500;
}

/* Input grid */
.fcc-bmr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
	align-items: end;
}

.fcc-bmr-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Styled number input box with unit badge */
.fcc-bmr-input-box {
	display: flex;
	align-items: stretch;
	min-height: 54px;
	background: #fff;
	border: 1.5px solid var(--fcc-border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fcc-bmr-input-box:focus-within {
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

.fcc-bmr-num-input {
	all: unset;
	flex: 1 !important;
	min-width: 0 !important;
	padding: 0.7rem 0.5rem 0.7rem 0.875rem !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--fcc-text) !important;
	background: transparent !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	display: block !important;
}

.fcc-bmr-num-input::-webkit-outer-spin-button,
.fcc-bmr-num-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fcc-bmr-input-box__unit {
	display: flex !important;
	align-items: center !important;
	padding: 0 0.75rem !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #fff !important;
	background: var(--fcc-primary) !important;
	flex-shrink: 0 !important;
	border-left: none !important;
	white-space: nowrap !important;
}

.fcc-bmr-field-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fcc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fcc-bmr-field-label--block {
	display: flex;
	margin-bottom: 0.5rem;
}

.fcc-bmr-field-label-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.35rem;
}

.fcc-bmr-field-label-wrap .fcc-bmr-field-label {
	margin-bottom: 0;
}

.fcc-bmr-unit-toggle {
	display: inline-flex !important;
	border: 1.5px solid var(--fcc-border) !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	flex-shrink: 0;
}

/* Override WP theme button styles completely */
.fcc-bmr-height-unit-btn {
	all: unset;
	display: inline-block !important;
	padding: 0.18rem 0.6rem !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	border: none !important;
	border-radius: 0 !important;
	background: var(--fcc-surface) !important;
	color: var(--fcc-text-muted) !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	min-height: unset !important;
	height: auto !important;
	width: auto !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

.fcc-bmr-height-unit-btn + .fcc-bmr-height-unit-btn {
	border-left: 1.5px solid var(--fcc-border) !important;
}

.fcc-bmr-height-unit-btn--active {
	background: var(--fcc-primary) !important;
	color: #fff !important;
}

.fcc-bmr-input {
	width: 100%;
	padding: 0.6rem 0.875rem;
	border: 1.5px solid var(--fcc-border);
	border-radius: 10px;
	font-size: 0.925rem;
	background: var(--fcc-surface);
	color: var(--fcc-text);
	outline: none;
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
	-webkit-appearance: none;
	appearance: none;
}

.fcc-bmr-input:focus {
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.14);
}

select.fcc-bmr-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2rem;
}

/* Biological Sex toggle */
.fcc-bmr-sex-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	min-height: 54px;
}

.fcc-bmr-sex-btn {
	all: unset;
	display: flex !important;
	min-height: 54px !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem !important;
	padding: 0.65rem 0.75rem !important;
	border: 1.5px solid var(--fcc-border) !important;
	border-radius: 10px !important;
	background: var(--fcc-surface) !important;
	color: var(--fcc-text-muted) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
	text-align: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.fcc-bmr-sex-btn:hover {
	border-color: var(--fcc-primary) !important;
	background: #EEF8F1 !important;
	color: #1a5c35 !important;
}

.fcc-bmr-sex-btn--active {
	border-color: var(--fcc-primary) !important;
	background: #EEF8F1 !important;
	color: #1a5c35 !important;
	box-shadow: 0 0 0 3px rgba(20,139,67,.14) !important;
}

.fcc-bmr-sex-btn__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* Full-width field container */
.fcc-bmr-field--full {
	margin-bottom: 1.25rem;
}

/* Activity cards */
.fcc-bmr-act-cards {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.fcc-bmr-act-card {
	flex: 1 1 0;
	min-width: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.65rem 0.4rem;
	border: 1.5px solid var(--fcc-border);
	border-radius: 12px;
	background: var(--fcc-surface);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--fcc-transition), background var(--fcc-transition), box-shadow var(--fcc-transition);
}

.fcc-bmr-act-card:hover {
	border-color: var(--fcc-primary);
	background: #EEF8F1;
}

.fcc-bmr-act-card--active {
	border-color: var(--fcc-primary);
	background: #EEF8F1;
	box-shadow: 0 0 0 3px rgba(20,139,67,.15);
}

.fcc-bmr-act-card__emoji {
	font-size: 1.4rem;
	line-height: 1;
}

.fcc-bmr-act-card__name {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fcc-text);
}

.fcc-bmr-act-card--active .fcc-bmr-act-card__name { color: #1a5c35; }

.fcc-bmr-act-card__desc {
	font-size: 0.62rem;
	color: var(--fcc-text-muted);
	line-height: 1.2;
}

/* Goal pills */
.fcc-bmr-goal-pills,
.fcc-macro-split-pills {
	display: flex;
	gap: 0.5rem;
}

.fcc-bmr-goal-pill,
.fcc-macro-split-pill {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.7rem 0.5rem;
	border: 1.5px solid var(--fcc-border);
	border-radius: 12px;
	background: var(--fcc-surface);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--fcc-transition), background var(--fcc-transition), box-shadow var(--fcc-transition);
	/* Found live 2026-09-04 from a real phone screenshot: mid-tap, the
	   Lower Carb pill showed a flat, unbranded grey fill instead of its
	   own amber accent. Root cause: neither of these two pill families
	   had ever defined a real :active (touch-press) state, so a mobile
	   browser fell back to its own default translucent-grey tap
	   highlight during the press, before the JS-toggled --active class
	   even had a chance to apply. Fixed two ways together, below: this
	   turns the default grey overlay off, and every hover rule for both
	   pill families gained a matching :active selector (see each one),
	   so a touch press now shows the pill's own on-brand colour flash
	   immediately, not a mismatched grey one. */
	-webkit-tap-highlight-color: transparent;
}

/* Macro Calculator's own split selector (/macro-calculator/, added
   2026-09-04, given its own per-variant accent colours 2026-09-04 on
   the site owner flagging a live screenshot as "gray and not
   attractive"). A deliberately separate class from .fcc-bmr-goal-pill
   (see the PHP template's own comment on this): the Goal-pill click
   handler in fcc-calculator.js queries `.fcc-bmr-goal-pill` unscoped
   across the whole panel, so sharing that class would let this pill
   group and the real Goal pill group silently clear each other's
   active state. Visual styling is still shared via this extended
   selector list, not a shared HTML class. Now uses the same
   lose/maintain/gain-style per-variant colour concept the Goal row
   below already established (green/blue/amber here instead of
   red/green/green, since there's no bad/neutral/good semantic for a
   macro split, just three distinct real choices), rather than one flat
   green shared across all three: each variant modifier class
   (--balanced/--higher-protein/--lower-carb) gets its own accent on
   both the coloured glyph (.fcc-macro-split-pill__icon, always
   coloured, even at rest) and the hover/active border+background, so
   the three pills read as visually distinct from first paint, not one
   grey box repeated three times.
   Every `.fcc-macro-split-pill--{variant}.fcc-macro-split-pill--active`
   rule below is a real compound selector (both classes on the one
   element, no space) deliberately, not `.fcc-macro-split-pill--active`
   alone: found live 2026-09-04 that a bare single-class version has the
   same specificity (0,1,0) as WoodMart's own generic `:is(.btn,
   .button, button, [type="button"], ...)` reset rule (a `:is()`'s
   specificity is that of its most specific argument, and
   `[type="button"]` is a plain attribute selector, also 0,1,0), and
   that theme rule genuinely wins the resulting tie: fcc-public.css is
   deliberately enqueued early (see maybe_enqueue_style_early(), to
   prevent a flash of unstyled content), so it loads BEFORE the theme's
   own CSS, and CSS breaks a specificity tie by source order, later
   wins. A real two-class compound selector is (0,2,0), genuinely more
   specific regardless of load order, the same technique the
   already-working `.fcc-bmr-goal-pill--maintain.fcc-bmr-goal-pill--active`
   rule right below this one already uses for the identical reason,
   confirmed live via getComputedStyle() before and after this exact
   fix. */
.fcc-macro-split-pill--balanced:hover,
.fcc-macro-split-pill--balanced:active,
.fcc-macro-split-pill--balanced.fcc-macro-split-pill--active {
	border-color: var(--fcc-primary);
	background: #EEF8F1;
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

.fcc-macro-split-pill--higher-protein:hover,
.fcc-macro-split-pill--higher-protein:active,
.fcc-macro-split-pill--higher-protein.fcc-macro-split-pill--active {
	border-color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.fcc-macro-split-pill--lower-carb:hover,
.fcc-macro-split-pill--lower-carb:active,
.fcc-macro-split-pill--lower-carb.fcc-macro-split-pill--active {
	border-color: #d97706;
	background: #fffbeb;
	box-shadow: 0 0 0 3px rgba(217,119,6,.12);
}

/* Small coloured glyph above each split pill's name, matching the
   .fcc-bmr-goal-pill__arrow pattern one row up: each split gets its
   own accent colour (green/blue/amber) at rest, not just on hover or
   active, so the three pills read as visually distinct from the very
   first paint instead of one flat grey box repeated three times. */
.fcc-macro-split-pill__icon {
	font-size: 0.85rem;
	line-height: 1;
}

.fcc-macro-split-pill--balanced .fcc-macro-split-pill__icon { color: var(--fcc-primary); }
.fcc-macro-split-pill--higher-protein .fcc-macro-split-pill__icon { color: #2563eb; }
.fcc-macro-split-pill--lower-carb .fcc-macro-split-pill__icon { color: #d97706; }

.fcc-bmr-goal-pill--lose:hover,
.fcc-bmr-goal-pill--lose:active,
.fcc-bmr-goal-pill--lose.fcc-bmr-goal-pill--active  {
	border-color: #ef4444;
	background: #fff1f2;
	box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.fcc-bmr-goal-pill--maintain:hover,
.fcc-bmr-goal-pill--maintain:active,
.fcc-bmr-goal-pill--maintain.fcc-bmr-goal-pill--active {
	border-color: var(--fcc-primary);
	background: #EEF8F1;
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

.fcc-bmr-goal-pill--gain:hover,
.fcc-bmr-goal-pill--gain:active,
.fcc-bmr-goal-pill--gain.fcc-bmr-goal-pill--active {
	border-color: #22c55e;
	background: #f0fdf4;
	box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

.fcc-bmr-goal-pill__arrow {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
}

.fcc-bmr-goal-pill--lose .fcc-bmr-goal-pill__arrow { color: #ef4444; }
.fcc-bmr-goal-pill--maintain .fcc-bmr-goal-pill__arrow { color: var(--fcc-primary); }
.fcc-bmr-goal-pill--gain .fcc-bmr-goal-pill__arrow { color: #22c55e; }

.fcc-bmr-goal-pill__name,
.fcc-macro-split-pill__name {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fcc-text);
}

.fcc-bmr-goal-pill__sub,
.fcc-macro-split-pill__sub {
	font-size: 0.65rem;
	color: var(--fcc-text-muted);
}

/* Small label above the P/C/F macro-target row, /macro-calculator/
   only. New, standalone rule, not extended from an existing class:
   nothing on this panel already has this exact "small uppercase label
   on a light background, immediately above a stat row" shape (the
   comparable .fcc-bmr-result-top__label is white-on-green, wrong here,
   this caption sits on the panel's own light background below the top
   gradient bar). */
.fcc-macro-result-caption {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fcc-text-muted);
	padding: 0.75rem 1.25rem 0;
}

/* Full-width button modifier */
.fcc-btn--block {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Result card */
.fcc-bmr-result {
	margin-top: 1.25rem;
}

.fcc-bmr-result-card {
	border-radius: 14px;
	overflow: hidden;
	border: 1.5px solid var(--fcc-border);
}

.fcc-bmr-result-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #159A4C 0%, var(--fcc-primary) 55%, #2D9A54 100%);
	gap: 1rem;
}

.fcc-bmr-result-top__label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.75);
	display: block;
	margin-bottom: 0.2rem;
}

.fcc-bmr-result-top__kcal {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
}

.fcc-bmr-tdee-display {
	font-size: 2.2rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.fcc-bmr-result-top__unit {
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255,255,255,0.8);
}

.fcc-bmr-result-top__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	background: rgba(255,255,255,0.12);
	border-radius: 10px;
	padding: 0.5rem 0.75rem;
	flex-shrink: 0;
}

.fcc-bmr-result-top__bmr-label {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.7);
}

.fcc-bmr-bmr-val {
	font-size: 1.1rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.fcc-bmr-result-top__bmr-unit {
	font-size: 0.65rem;
	color: rgba(255,255,255,0.7);
}

/* 3-goal stat boxes */
.fcc-bmr-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #EEF8F1;
}

.fcc-bmr-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.875rem 0.5rem;
	border-right: 1px solid var(--fcc-border);
	transition: background var(--fcc-transition);
}

.fcc-bmr-stat:last-child { border-right: none; }

.fcc-bmr-stat--selected {
	background: #dcfce7;
}

.fcc-bmr-stat__arrow {
	font-size: 0.8rem;
	font-weight: 800;
}

.fcc-bmr-stat--lose .fcc-bmr-stat__arrow    { color: #ef4444; }
.fcc-bmr-stat--maintain .fcc-bmr-stat__arrow { color: var(--fcc-primary); }
.fcc-bmr-stat--gain .fcc-bmr-stat__arrow     { color: #22c55e; }

.fcc-bmr-stat__label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fcc-text-muted);
}

.fcc-bmr-stat__val {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--fcc-text);
}

.fcc-bmr-stat--selected .fcc-bmr-stat__val  { color: #1a5c35; }

.fcc-bmr-comparison {
	font-size: 0.8rem;
	color: var(--fcc-text-muted);
	margin: 0;
	padding: 0.625rem 1rem;
	border-top: 1px solid var(--fcc-border);
	background: #EEF8F1;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Gram to Calorie Portion Calculator (/gram-to-calorie-calculator/,
   added 2026-09). Its own header/section/form/field-group/error/macros
   styling; the number-input and result-card look itself is intentionally
   shared with the BMR section above (.fcc-bmr-row/.fcc-bmr-field-label/
   .fcc-bmr-input-box/.fcc-bmr-num-input/.fcc-bmr-result-card and its
   children, reused as-is on this panel), see frontend-calculator.php's
   own comment on why.
   -------------------------------------------------------------------------- */

/* Gradient header, identical bleed technique to .fcc-bmr-header */
.fcc-portion-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #159A4C 0%, var(--fcc-primary) 55%, #2D9A54 100%);
	border-radius: 14px 14px 0 0;
	margin: -1.25rem -1.25rem 1.25rem;
}

.fcc-portion-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.18);
	border-radius: 10px;
	flex-shrink: 0;
	color: #fff;
}

.fcc-portion-header__title {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.1rem;
}

.fcc-portion-header__sub {
	font-size: 0.72rem;
	color: rgba(255,255,255,0.78);
	margin: 0;
	font-weight: 500;
}

.fcc-portion-form__intro {
	font-size: 0.85rem;
	color: var(--fcc-text-muted);
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.fcc-portion-field-group {
	margin-bottom: 1.25rem;
}

.fcc-portion-field-group__title {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fcc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.6rem;
}

.fcc-portion-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

.fcc-portion-grid--three {
	grid-template-columns: repeat(3, 1fr);
}

.fcc-portion-error {
	font-size: 0.82rem;
	font-weight: 600;
	color: #b91c1c;
	background: var(--fcc-red-bg, #fee2e2);
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 0.6rem 0.875rem;
	margin: 0 0 1rem;
}

.fcc-portion-macros-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #EEF8F1;
}

@media (max-width: 480px) {
	.fcc-portion-grid,
	.fcc-portion-grid--three { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Calorie Budget Finder (content plan #4, Piece A)
   -------------------------------------------------------------------------- */
.fcc-budget-finder {
	padding: 0.875rem 1rem 1rem;
	border-top: 1px solid var(--fcc-border);
}

.fcc-budget-finder__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem;
	margin-bottom: 0.625rem;
}

.fcc-budget-finder__title {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--fcc-text);
}

.fcc-budget-finder__remaining {
	margin: 0;
	font-size: 0.8rem;
	color: var(--fcc-text-muted);
}

.fcc-budget-finder__remaining-val {
	color: var(--fcc-primary);
	font-weight: 800;
}

.fcc-budget-finder__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fcc-budget-finder__input {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1.5px solid var(--fcc-border);
	border-radius: var(--fcc-radius);
	font-size: 0.9rem;
	color: var(--fcc-text);
	background: var(--fcc-surface);
}

.fcc-budget-finder__input:focus {
	outline: none;
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

.fcc-budget-finder__unit {
	font-size: 0.8rem;
	color: var(--fcc-text-muted);
	flex-shrink: 0;
}

.fcc-budget-finder__find {
	flex-shrink: 0;
	white-space: nowrap;
}

.fcc-budget-finder__empty {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--fcc-text-muted);
	text-align: center;
}

.fcc-budget-finder__results {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.fcc-budget-finder__results li {
	padding: 0.625rem 0.75rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: var(--fcc-radius);
	font-size: 0.875rem;
	transition: background var(--fcc-transition);
}

.fcc-budget-finder__results li + li { margin-top: 0.2rem; }

.fcc-budget-finder__results li:hover { background: #EEF8F1; }

@media (max-width: 420px) {
	.fcc-budget-finder__row { flex-wrap: wrap; }
	.fcc-budget-finder__input { flex-basis: 100%; }
	.fcc-budget-finder__find { flex: 1; }
}

/* --------------------------------------------------------------------------
   Standalone BMR page: "calorie needs by activity level" reference
   table, shown in place of the Activity picker (added 2026-09).
   -------------------------------------------------------------------------- */
.fcc-bmr-activity-table-wrap {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.fcc-bmr-activity-table-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--fcc-text);
	margin: 0 0 0.5rem;
}

.fcc-bmr-activity-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	border: 1.5px solid var(--fcc-border);
	border-radius: var(--fcc-radius);
	overflow: hidden;
}

.fcc-bmr-activity-table th,
.fcc-bmr-activity-table td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--fcc-border);
}

.fcc-bmr-activity-table thead th {
	background: var(--fcc-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fcc-bmr-activity-table tbody tr:last-child th,
.fcc-bmr-activity-table tbody tr:last-child td { border-bottom: none; }

.fcc-bmr-activity-table tbody tr:nth-child(even) td { background: #f8fafc; }

.fcc-bmr-activity-table__kcal {
	font-weight: 800;
	color: var(--fcc-primary);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Meal item swap suggestion (content plan #4, Piece B)
   -------------------------------------------------------------------------- */
.fcc-meal-item__swap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.6rem;
	background: #FFF7ED;
	border: 1px dashed #F0B858;
	border-radius: 8px;
	font-size: 0.78rem;
}

.fcc-meal-item__swap-icon { flex-shrink: 0; }

.fcc-meal-item__swap-text {
	flex: 1;
	min-width: 120px;
	color: var(--fcc-text-muted);
}

.fcc-meal-item__swap-text strong { color: var(--fcc-text); }

.fcc-meal-item__swap-btn {
	flex-shrink: 0;
	padding: 0.3rem 0.65rem;
	border: 1.5px solid var(--fcc-primary);
	background: #fff;
	color: var(--fcc-primary);
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 20px;
	cursor: pointer;
	transition: background var(--fcc-transition), color var(--fcc-transition);
}

.fcc-meal-item__swap-btn:hover {
	background: var(--fcc-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.fcc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* ── 640px — Tablets / large phones ──────────────────────────────────── */
@media (max-width: 640px) {
	.fcc-tabs-body { padding: 1rem; }
	.fcc-section { padding: 1rem; }

	.fcc-food-header {
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		padding: 0.75rem 0.875rem;
	}
	/* Real, pre-existing bug found 2026-08-31: this selector named
	   .fcc-food-header__info, a class that doesn't exist anywhere in the
	   real markup (the actual wrapper is .fcc-food-header__name, see the
	   base rule below). This min-width:0 reset had never actually applied
	   at this breakpoint since the day it was written, letting
	   .fcc-food-header__name's own content (now including the sponsor
	   logo/product photo) force the flex row wider than the mobile
	   viewport instead of being allowed to shrink. */
	.fcc-food-header__name { flex: 1; min-width: 0; }
	.fcc-food-header__label { font-size: 0.6rem; margin-bottom: 0.1rem; }
	.fcc-selected-food-name { font-size: 0.95rem; }
	.fcc-food-header__kcal { flex-direction: row; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; min-width: auto; }
	.fcc-food-kcal-num { font-size: 1.1rem; }
	.fcc-food-kcal-unit { font-size: 0.65rem; margin-top: 0; }

	.fcc-quantity-row { flex-direction: column; align-items: stretch; }
	.fcc-quantity-controls { width: 100%; min-width: unset; }
	.fcc-qty-group:first-child { flex: 0 0 110px; max-width: 110px; }

	.fcc-tl-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
	.fcc-tl-item {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 0.5rem 0.6rem;
		gap: 0.2rem;
		min-width: 0;
	}
	.fcc-tl-item__top { display: flex; align-items: center; gap: 0.3rem; }
	.fcc-tl-dot { width: 10px; height: 10px; flex-shrink: 0; }
	.fcc-tl-item__label { font-size: 0.82rem; font-weight: 700; }
	.fcc-tl-item__val { font-size: 0.68rem; color: #666; }
	.fcc-tl-rating { font-size: 0.6rem; padding: 0.15rem 0.4rem; margin-top: 0.1rem; }
	.fcc-tl-item { padding: 0.4rem 0.625rem; }

	.fcc-bmr-grid { grid-template-columns: 1fr; }
	.fcc-bmr-row--wide { grid-column: auto; }
	.fcc-bmr-act-cards { flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; }
	.fcc-bmr-act-card { min-width: 60px; padding: 0.5rem 0.25rem; }
	.fcc-bmr-act-card__emoji { font-size: 1.1rem; }
	.fcc-bmr-act-card__desc { display: none; }
	.fcc-bmr-goal-pills,
	.fcc-macro-split-pills { gap: 0.35rem; }
	.fcc-bmr-goal-pill,
	.fcc-macro-split-pill { padding: 0.6rem 0.35rem; }
	.fcc-bmr-result-top { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	.fcc-bmr-result-top__right { align-items: flex-start; width: 100%; flex-direction: row; justify-content: flex-start; gap: 0.4rem; align-items: center; }
	.fcc-bmr-tdee-display { font-size: 1.8rem; }
	.fcc-bmr-header { border-radius: 10px 10px 0 0; }

	/* macro wrapper is already column layout */
	/* macro rings stack on mobile via flex-wrap */

	.fcc-tab-btn { padding: 0.75rem 1rem; font-size: 0.82rem; }
	.fcc-tab-btn svg { display: none; }

	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.45rem 0.5rem; font-size: 0.8rem; }
	.fcc-nutrition-table thead th { font-size: 0.65rem; }
}

/* ── 480px — Standard phones ────────────────────────────────────────── */
@media (max-width: 480px) {
	.fcc-tabs-body { padding: 0.75rem; }
	.fcc-section { padding: 0.75rem; }
	.fcc-hero { padding: 1.25rem 1rem; }
	.fcc-subtitle { font-size: 0.75rem; }

	.fcc-tabs-nav { padding: 0 0.5rem; }
	.fcc-tab-btn { padding: 0.7rem 0.9rem; font-size: 0.78rem; }

	.fcc-search-input { padding: 0.8rem 2.5rem; font-size: 0.9rem; }
	.fcc-search-icon { left: 0.75rem; }
	.fcc-search-clear { right: 0.6rem; width: 28px; height: 28px; }

	.fcc-btn { padding: 0.55rem 1rem; font-size: 0.8rem; }
	.fcc-btn--secondary { padding: 0.65rem 1rem; }

	.fcc-quantity-controls { border-radius: 10px; }
	.fcc-qty-group:first-child { flex: 0 0 90px; max-width: 90px; }

	.fcc-unit-options { min-width: 180px; left: -0.5rem; }

	.fcc-health-highlights { gap: 0.35rem; }

	.fcc-tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
	.fcc-tl-item { padding: 0.4rem 0.5rem; font-size: 0.72rem; }

	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.4rem 0.375rem; font-size: 0.75rem; }

	.fcc-macro-ring { width: 80px !important; height: 80px !important; }

	.fcc-bmr-act-card { min-width: 52px; font-size: 0.7rem; }
	.fcc-bmr-goal-pill,
	.fcc-macro-split-pill { font-size: 0.8rem; }
	.fcc-bmr-goal-pill__sub,
	.fcc-macro-split-pill__sub { font-size: 0.6rem; }
	.fcc-bmr-tdee-display { font-size: 1.5rem; }

	.fcc-food-kcal-num { font-size: 1.1rem; }
}

/* ── 380px — Small phones ───────────────────────────────────────────── */
@media (max-width: 380px) {
	.fcc-hero { padding: 1rem 0.75rem; }
	.fcc-hero__icon { display: flex; }
	.fcc-title { font-size: 1.1rem; }
	.fcc-subtitle { font-size: 0.7rem; }

	.fcc-tabs-body { padding: 0.625rem; }
	.fcc-section { padding: 0.625rem; border-radius: 10px; }

	.fcc-tabs-nav { padding: 0 0.25rem; }
	.fcc-tab-btn { padding: 0.6rem 0.85rem; font-size: 0.75rem; }

	.fcc-search-section { padding: 0 !important; }
	.fcc-search-input { padding: 0.7rem 2.25rem; font-size: 0.85rem; border-radius: 10px; }

	.fcc-btn { padding: 0.5rem 0.75rem; font-size: 0.78rem; border-radius: 8px; }
	.fcc-btn--secondary { padding: 0.6rem 0.875rem; font-size: 0.8rem; }

	.fcc-quantity-row { gap: 0.5rem; }
	.fcc-qty-group:first-child { flex: 0 0 95px; max-width: 95px; }
	.fcc-qty-group .fcc-label { letter-spacing: 0; }
	.fcc-quantity-input { font-size: 1rem; padding: 0.5rem; }

	.fcc-unit-options { min-width: unset; left: 0; right: 0; }

	.fcc-food-header__name { font-size: 0.85rem; }
	.fcc-food-kcal-num { font-size: 1rem; }

	.fcc-health-highlights { gap: 0.25rem; }

	.fcc-tl-item { font-size: 0.65rem; padding: 0.25rem 0.4rem; }
	.fcc-tl-item__label { display: none; }

	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.35rem 0.25rem; font-size: 0.7rem; }
	.fcc-nutrition-table thead th { font-size: 0.6rem; letter-spacing: 0.03em; }

	.fcc-macro-ring { width: 70px !important; height: 70px !important; }
	.fcc-macro-ring-label { font-size: 0.65rem; }
	.fcc-macro-detail__row { padding: 0.25rem 0.4rem; font-size: 0.75rem; }
	.fcc-macro-detail { min-width: unset; }

	.fcc-bmr-act-card { min-width: 46px; padding: 0.4rem 0.15rem; }
	.fcc-bmr-act-card__emoji { font-size: 0.95rem; }
	.fcc-bmr-act-card__label { font-size: 0.55rem; }
	.fcc-bmr-goal-pill,
	.fcc-macro-split-pill { padding: 0.5rem 0.25rem; font-size: 0.75rem; }
	.fcc-bmr-tdee-display { font-size: 1.3rem; }
	.fcc-bmr-stat__val { font-size: 0.95rem; }

	.fcc-popular-chips { gap: 0.25rem; }
	.fcc-popular-chip { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

	.fcc-omega3-cards { gap: 0.35rem; }
	.fcc-omega3-card { padding: 0.5rem; }
	.fcc-omega3-card__val { font-size: 1rem; }
}

/* ── 320px — Very small phones (iPhone SE, etc.) ────────────────────── */
@media (max-width: 320px) {
	.fcc-hero { padding: 0.875rem 0.625rem; }
	.fcc-title { font-size: 0.95rem; }

	.fcc-tabs-body { padding: 0.5rem; }
	.fcc-section { padding: 0.5rem; }
	.fcc-tab-btn { padding: 0.55rem 0.75rem; font-size: 0.72rem; }

	.fcc-search-input { padding: 0.65rem 2rem; font-size: 0.8rem; }

	.fcc-nutrition-table th,
	.fcc-nutrition-table td { padding: 0.3rem 0.2rem; font-size: 0.65rem; }

	.fcc-macro-ring { width: 60px !important; height: 60px !important; }

	.fcc-bmr-act-card { min-width: 40px; }
	.fcc-bmr-tdee-display { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Print — JS injects .fcc-print-clone directly into <body>; hide everything else
   -------------------------------------------------------------------------- */
@media print {
	body > *:not(.fcc-print-clone) { display: none !important; }

	.fcc-print-clone {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		overflow: visible !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		z-index: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 11pt !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Hide non-print elements */
	.fcc-print-clone .fcc-hero,
	.fcc-print-clone .fcc-powered-by,
	.fcc-print-clone .fcc-affiliate-links,
	.fcc-print-clone .fcc-supplement-suggestions,
	.fcc-print-clone .fcc-ad-slot,
	.fcc-print-clone .fcc-add-to-meal,
	.fcc-print-clone .fcc-result-actions,
	.fcc-print-clone .fcc-quantity-section,
	.fcc-print-clone .fcc-food-header,
	.fcc-print-clone .fcc-quantity-row,
	.fcc-print-clone .fcc-meal-empty,
	.fcc-print-clone .fcc-meal-templates,
	.fcc-print-clone .fcc-meal-categories,
	.fcc-print-clone .fcc-meal-actions,
	.fcc-print-clone .fcc-meal-print-btn,
	.fcc-print-clone .fcc-meal-cat-pills,
	.fcc-print-clone .fcc-pwa-install-btn,
	.fcc-print-clone .fcc-promo-banner,
	.fcc-print-clone .fcc-tabs-nav,
	.fcc-print-clone .fcc-search-section,
	.fcc-print-clone .fcc-popular-section,
	.fcc-print-clone .fcc-favourites-section,
	.fcc-print-clone .fcc-trending-section,
	.fcc-print-clone .fcc-voice-btn,
	.fcc-print-clone .fcc-search-clear,
	.fcc-print-clone .fcc-meal-item__remove,
	.fcc-print-clone .fcc-label--search,
	.fcc-print-clone .fcc-autocomplete,
	.fcc-print-clone .fcc-search-hint,
	.fcc-print-clone .fcc-meal-tpl-save,
	.fcc-print-clone .fcc-meal-actions-row { display: none !important; }

	/* Force-show result sections */
	.fcc-print-clone .fcc-tab-panel,
	.fcc-print-clone .fcc-section,
	.fcc-print-clone .fcc-results-section,
	.fcc-print-clone .fcc-food-header,
	.fcc-print-clone .fcc-health-highlights,
	.fcc-print-clone .fcc-nutrition-table-wrapper,
	.fcc-print-clone .fcc-macro-chart-wrapper,
	.fcc-print-clone .fcc-macro-detail,
	.fcc-print-clone .fcc-traffic-lights,
	.fcc-print-clone .fcc-omega3-section,
	.fcc-print-clone .fcc-caffeine-section,
	.fcc-print-clone .fcc-tabs-body,
	.fcc-print-clone .fcc-meal-section,
	.fcc-print-clone .fcc-meal-items,
	.fcc-print-clone .fcc-meal-totals,
	.fcc-print-clone .fcc-print-footer {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.fcc-print-clone .fcc-print-header {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.fcc-print-clone .fcc-tab-panel[hidden] {
		display: block !important;
	}

	/* Clean up sections */
	.fcc-print-clone .fcc-section {
		border: none !important;
		box-shadow: none !important;
		padding: 0.35rem 0 !important;
		margin: 0 0 0.25rem !important;
	}
	.fcc-print-clone .fcc-section:first-child {
		padding-top: 0 !important;
	}

	/* Section title — green accent */
	.fcc-print-clone .fcc-section-title {
		color: #148B43 !important;
		border-bottom: 2px solid #148B43 !important;
		padding-bottom: 4px !important;
		margin-bottom: 8px !important;
	}

	/* Health highlights — amplified for print, these sell the product */
	.fcc-print-clone .fcc-health-highlights {
		margin-bottom: 10px !important;
		padding: 10px 12px !important;
		background: #EEF8F1 !important;
		border: 1.5px solid #86efac !important;
		border-radius: 10px !important;
		gap: 0.5rem !important;
	}

	/* Traffic lights — compact */
	.fcc-print-clone .fcc-traffic-lights { margin-bottom: 8px !important; }

	/* Nutrition table — dynamic print design */
	.fcc-print-clone .fcc-nutrition-table {
		border: none !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		box-shadow: 0 0 0 1.5px #148B43 !important;
	}
	.fcc-print-clone .fcc-nutrition-table thead th {
		border: none !important;
		padding: 8px 10px !important;
		font-size: 8pt !important;
		background: linear-gradient(135deg, #159A4C, #148B43) !important;
		color: #fff !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
	}
	.fcc-print-clone .fcc-nutrition-table td {
		border: none !important;
		border-bottom: 1px solid #e8f0e8 !important;
		padding: 6px 10px !important;
		font-size: 9pt !important;
	}
	.fcc-print-clone .fcc-nutrition-table th[scope="row"] {
		background: transparent !important;
		color: #1a2e2f !important;
		font-weight: 600 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
	}
	.fcc-print-clone .fcc-nutrition-table tbody tr:nth-child(even) { background: #EEF8F1 !important; }
	.fcc-print-clone .fcc-nutrition-table tbody tr:hover { background: #e8f5f5 !important; }
	.fcc-print-clone .fcc-ri-cell { min-width: 50px !important; }
	.fcc-print-clone .fcc-ri-val { font-size: 9pt !important; font-weight: 800 !important; }
	.fcc-print-clone .fcc-ri-bar {
		height: 5px !important;
		background: #e0eaea !important;
		border-radius: 3px !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.fcc-print-clone .fcc-ri-bar__fill {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.fcc-print-clone .fcc-row--sub th { font-style: italic !important; color: #555 !important; font-weight: 400 !important; }

	/* SVG rings print natively — no special handling needed */
	.fcc-print-clone .fcc-macro-chart-wrapper {
		break-inside: avoid;
		padding: 0.5rem !important;
		border: 1.5px solid #e8f0e8 !important;
		border-radius: 8px !important;
		margin-bottom: 8px !important;
	}
	.fcc-print-clone .fcc-macro-rings { gap: 0.5rem !important; }
	.fcc-print-clone .fcc-macro-ring { width: 70px !important; height: 70px !important; }
	.fcc-print-clone .fcc-macro-detail { margin-top: 1rem !important; }
	.fcc-print-clone .fcc-macro-detail__grid { break-inside: avoid; }

	/* Omega-3 cards */
	.fcc-print-clone .fcc-omega3-section { break-inside: avoid; }
	.fcc-print-clone .fcc-omega3-cards { break-inside: avoid; }

	/* ── Branded print header ── */
	/* ── Branded print header ── */
	.fcc-print-header {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		padding: 14px 18px;
		margin-bottom: 2px;
		background: linear-gradient(135deg, #159A4C, #148B43) !important;
		color: #fff;
		border-radius: 10px;
	}
	.fcc-print-header__brand {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.fcc-print-header__brand strong { font-size: 13pt; line-height: 1.2; }
	.fcc-print-header__brand a { font-size: 7pt; opacity: 0.7; }
	.fcc-print-header__info {
		text-align: right;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
	}
	.fcc-print-header__food { font-size: 12pt; font-weight: 700; line-height: 1.2; }
	.fcc-print-header__kcal {
		font-size: 8pt;
		opacity: 0.85;
		background: rgba(255,255,255,.15);
		padding: 2px 8px;
		border-radius: 10px;
		display: inline-block;
	}
	.fcc-print-header__date { font-size: 7pt; opacity: 0.6; }

	/* (SVG rings — no print overrides needed) */
	.fcc-print-clone .fcc-macro-chart-wrapper {
		padding: 8px !important;
		margin-bottom: 6px !important;
		gap: 8px !important;
		background: #fafafa !important;
		border: 1px solid #e0e0e0 !important;
		border-radius: 8px !important;
	}
	.fcc-print-clone .fcc-macro-chart-wrapper::before { display: none !important; }

	/* ── Branded print footer with CTA ── */
	.fcc-print-footer {
		display: block !important;
		margin-top: 14px;
	}
	.fcc-print-footer__line {
		text-align: center;
		font-size: 7pt;
		color: #888;
		margin-bottom: 8px;
	}
	.fcc-print-footer__cta {
		text-align: center;
		font-size: 9pt;
		color: #fff;
		padding: 10px 12px;
		background: linear-gradient(135deg, #159A4C, #148B43, #2D9A54) !important;
		border-radius: 8px;
		margin-bottom: 8px;
	}
	.fcc-print-footer__cta strong { color: #fff; }
	.fcc-print-footer__disclaimer {
		text-align: center;
		font-size: 5.5pt;
		color: #aaa;
		line-height: 1.5;
		padding-top: 6px;
		border-top: 1px solid #e0e0e0;
	}

	/* Section spacing for print */
	.fcc-print-clone .fcc-section-title { font-size: 12pt !important; margin-bottom: 6px !important; }
	.fcc-print-clone .fcc-health-highlights { padding: 8px 10px !important; margin-bottom: 10px !important; }
	.fcc-print-clone .fcc-allergen-badges { margin-bottom: 10px !important; }
	.fcc-print-clone .fcc-diet-badges { margin-bottom: 10px !important; }
	.fcc-print-clone .fcc-traffic-lights { padding: 8px 10px !important; margin-bottom: 12px !important; }
	.fcc-print-clone .fcc-tl-row { gap: 4px !important; }
	.fcc-print-clone .fcc-tl-item { padding: 3px 6px !important; font-size: 8pt !important; }
	.fcc-print-clone .fcc-nutrition-table th,
	.fcc-print-clone .fcc-nutrition-table td { padding: 4px 8px !important; font-size: 9pt !important; }
	.fcc-print-clone .fcc-nutrition-table-wrapper { margin-bottom: 6px !important; }
	.fcc-print-clone .fcc-ri-footnote { font-size: 7pt !important; margin: 2px 0 !important; }
	.fcc-print-clone .fcc-omega3-section { margin-top: 4px !important; }
	.fcc-print-clone .fcc-omega3-card { padding: 6px !important; }

	/* ── Meal print cleanup ── */
	.fcc-print-clone .fcc-meal-section {
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	.fcc-print-clone .fcc-meal-header {
		background: #148B43 !important;
		border-radius: 6px !important;
		padding: 8px 12px !important;
		margin-bottom: 6px !important;
	}
	.fcc-print-clone .fcc-meal-header__icon { width: 28px !important; height: 28px !important; }
	.fcc-print-clone .fcc-meal-header__title { font-size: 11pt !important; }
	.fcc-print-clone .fcc-meal-header__kcal-num { font-size: 14pt !important; }

	.fcc-print-clone .fcc-meal-macros {
		gap: 4px !important;
		margin-bottom: 4px !important;
	}
	.fcc-print-clone .fcc-meal-macro {
		padding: 3px 6px !important;
		font-size: 8pt !important;
		border-radius: 4px !important;
	}
	.fcc-print-clone .fcc-meal-macro__val { font-size: 10pt !important; }

	.fcc-print-clone .fcc-meal-serves {
		padding: 3px 8px !important;
		margin-bottom: 4px !important;
		font-size: 8pt !important;
		border-radius: 4px !important;
	}
	.fcc-print-clone .fcc-meal-serves__input {
		border: 1px solid #148B43 !important;
		background: #fff !important;
		width: 30px !important;
		padding: 1px !important;
		font-size: 9pt !important;
		border-radius: 3px !important;
	}
	.fcc-print-clone .fcc-meal-daily-goal { margin-bottom: 4px !important; padding: 3px 6px !important; font-size: 8pt !important; }

	.fcc-print-clone .fcc-meal-cat-header {
		padding: 3px 8px !important;
		font-size: 9pt !important;
		margin-bottom: 1px !important;
		border-radius: 3px !important;
	}

	.fcc-print-clone .fcc-meal-items { margin-bottom: 4px !important; }
	.fcc-print-clone .fcc-meal-item {
		border: none !important;
		border-bottom: 1px solid #e8f0e8 !important;
		border-radius: 0 !important;
		padding: 4px 6px !important;
		margin: 0 !important;
		background: transparent !important;
		font-size: 9pt !important;
		box-shadow: none !important;
		gap: 4px !important;
		/* .fcc-meal-item became a column layout for the on-screen
		   swap-suggestion feature (content plan #4, Piece B); the
		   print clone still wants its original single-row layout,
		   restored explicitly here. */
		flex-direction: row !important;
		align-items: center !important;
	}
	.fcc-print-clone .fcc-meal-item:nth-child(even) { background: #f8fafa !important; }
	.fcc-print-clone .fcc-meal-item__row {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		flex: 1 !important;
	}
	/* A live "swap for a cheaper option" call-to-action has no place
	   on a printed/PDF page, hidden entirely there. */
	.fcc-print-clone .fcc-meal-item__swap { display: none !important; }
	.fcc-print-clone .fcc-meal-item__controls { gap: 3px !important; width: 130px !important; flex-shrink: 0 !important; justify-content: flex-end !important; }
	.fcc-print-clone .fcc-meal-item__qty {
		width: 36px !important;
		padding: 1px 2px !important;
		font-size: 8pt !important;
		border: 1px solid #bbb !important;
		background: #fff !important;
		border-radius: 3px !important;
		font-weight: 600 !important;
		color: #333 !important;
		flex-shrink: 0 !important;
	}
	.fcc-print-clone .fcc-meal-item__unit {
		font-size: 7pt !important;
		padding: 0 3px !important;
		border-radius: 2px !important;
		background: #148B43 !important;
		flex-shrink: 0 !important;
	}
	.fcc-print-clone .fcc-meal-item__kcal {
		font-size: 8pt !important;
		padding: 1px 5px !important;
		min-width: 52px !important;
		text-align: center !important;
		border-radius: 3px !important;
		flex-shrink: 0 !important;
	}
	.fcc-print-clone .fcc-meal-item__num {
		width: 20px !important;
		min-width: 20px !important;
		height: 20px !important;
		font-size: 6pt !important;
	}
	.fcc-print-clone .fcc-meal-item__name { font-size: 9pt !important; }

	.fcc-print-clone .fcc-meal-totals {
		margin-top: 4px !important;
		break-inside: avoid;
	}
	.fcc-print-clone .fcc-meal-totals__hd { font-size: 9pt !important; margin-bottom: 2px !important; }

	@page {
		margin: 0 1cm 1.5cm 1cm;
	}
	.fcc-print-clone { padding-top: 0.6cm !important; }
	.fcc-print-clone .fcc-section-title:first-of-type { margin-top: 0 !important; }

	.fcc-print-clone .fcc-meal-totals,
	.fcc-print-clone .fcc-nutrition-table-wrapper,
	.fcc-print-clone .fcc-print-footer {
		break-inside: avoid;
	}

	/* All major sections get break-inside:avoid so they don't split mid-element,
	   and enough margin-top that if they land at page top there's breathing room */
	.fcc-print-clone .fcc-meal-section,
	.fcc-print-clone .fcc-section,
	.fcc-print-clone .fcc-meal-cat-header,
	.fcc-print-clone .fcc-meal-totals__hd {
		break-before: auto;
		margin-top: 0.3cm !important;
	}
}

/* ==========================================================================
   Compare Tab
   ========================================================================== */

/* ── Intro callout ─────────────────────────────────────────────────────── */
.fcc-compare-intro {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.125rem;
	background: linear-gradient(135deg, #EEF8F1 0%, #e8f8ef 100%);
	border: 1.5px solid #86efac;
	border-radius: 12px;
	margin-bottom: 1.25rem;
}

.fcc-compare-intro__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: var(--fcc-primary);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.fcc-compare-intro__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.875rem;
}

.fcc-compare-intro__text strong {
	font-size: 0.95rem;
	color: var(--fcc-primary);
}

.fcc-compare-intro__text span { color: var(--fcc-text-muted); }

/* ── Letter badges ─────────────────────────────────────────────────────── */
.fcc-compare-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 0.8rem;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
	letter-spacing: 0;
}

.fcc-compare-badge--a { background: var(--fcc-primary); }
.fcc-compare-badge--b { background: #059669; }

.fcc-compare-badge--sm {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	font-size: 0.7rem;
}

.fcc-compare-badge--xs {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 0.65rem;
}

/* ── Two-column grid ───────────────────────────────────────────────────── */
.fcc-compare-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0 0.75rem;
	margin-bottom: 1.25rem;
	align-items: start;
}

/* ── VS divider ────────────────────────────────────────────────────────── */
.fcc-compare-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 2.5rem;
	gap: 0.5rem;
	color: var(--fcc-text-light);
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fcc-compare-vs::before,
.fcc-compare-vs::after {
	content: '';
	width: 1px;
	height: 24px;
	background: var(--fcc-border);
}

/* ── Each column card ──────────────────────────────────────────────────── */
.fcc-compare-col {
	background: var(--fcc-surface);
	border: 1.5px solid var(--fcc-border);
	border-radius: 14px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
}

.fcc-compare-col:focus-within {
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.1);
}

.fcc-compare-col[data-slot="b"]:focus-within {
	border-color: #059669;
	box-shadow: 0 0 0 3px rgba(5,150,105,.1);
}

.fcc-compare-col__hd {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fcc-text-muted);
}

/* ── Compare search ────────────────────────────────────────────────────── */
.fcc-compare-search-wrap { position: relative; }

.fcc-compare-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #6bab88;
	pointer-events: none;
}

.fcc-compare-search {
	width: 100% !important;
	padding: 0.625rem 0.875rem 0.625rem 2.5rem !important;
	border: 1.5px solid var(--fcc-border) !important;
	border-radius: 10px !important;
	font-size: 0.875rem !important;
	background: #fff !important;
	color: var(--fcc-text) !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.fcc-compare-search:focus {
	border-color: var(--fcc-primary);
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}

[data-slot="b"] .fcc-compare-search:focus {
	border-color: #059669;
	box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}

.fcc-compare-clear {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--fcc-text-light);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--fcc-transition), color var(--fcc-transition);
	flex-shrink: 0;
	z-index: 2;
}
.fcc-compare-clear:hover { background: var(--fcc-red-bg); color: var(--fcc-red); }
.fcc-compare-clear[hidden] { display: none; }

.fcc-compare-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	min-width: 260px;
	background: #fff;
	border: 1.5px solid var(--fcc-border);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
	list-style: none;
	padding: 0.375rem;
	margin: 0;
	z-index: 9999;
	max-height: 220px;
	overflow-y: auto;
	animation: fcc-unit-dropdown-in 0.15s ease;
}

.fcc-compare-dropdown[hidden] { display: none !important; }

.fcc-compare-dropdown li {
	padding: 0.55rem 0.75rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	font-size: 0.875rem;
	transition: background var(--fcc-transition);
}

.fcc-compare-dropdown li:hover,
.fcc-compare-dropdown li[aria-selected="true"] { background: #EEF8F1; }

/* ── Selected food pill ────────────────────────────────────────────────── */
.fcc-compare-food-pill {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.875rem;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 600;
}

.fcc-compare-food-pill--a {
	background: #EEF8F1;
	border: 1px solid #86efac;
	color: var(--fcc-primary);
}

.fcc-compare-food-pill--b {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #059669;
}

.fcc-compare-food-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Qty controls inside compare col */
.fcc-compare-qty-controls { margin-top: 0.125rem; }

/* ── Results area ──────────────────────────────────────────────────────── */
.fcc-compare-results { margin-top: 1.25rem; }

/* Food vs food header */
.fcc-compare-results-hd {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #EEF8F1 0%, #f0fdf4 100%);
	border: 1.5px solid var(--fcc-border);
	border-radius: 14px;
	margin-bottom: 1.25rem;
}

.fcc-compare-results-hd__col {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
	overflow: hidden;
}

.fcc-compare-results-hd__col--b { justify-content: flex-end; text-align: right; }

.fcc-compare-results-hd__name {
	word-break: break-word;
	white-space: normal;
}

.fcc-compare-results-hd__name--a { color: var(--fcc-primary); }
.fcc-compare-results-hd__name--b { color: #059669; }

.fcc-compare-results-hd__vs {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fcc-text-light);
	white-space: nowrap;
}

/* FSA row */
.fcc-compare-fsa-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.fcc-compare-fsa-col {
	background: var(--fcc-surface);
	border: 1px solid var(--fcc-border);
	border-radius: 12px;
	padding: 0.875rem 1rem;
}

.fcc-compare-fsa-col .fcc-tl-row { flex-wrap: wrap; gap: 0.375rem; }
.fcc-compare-fsa-col .fcc-tl-item { flex: 1 1 calc(50% - 0.375rem); min-width: 0; }

/* Comparison table */
.fcc-compare-table-wrap {
	overflow-x: auto;
	border-radius: 12px;
	border: 1.5px solid var(--fcc-border);
	margin-bottom: 1rem;
}

.fcc-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.fcc-compare-table th,
.fcc-compare-table td {
	padding: 0.6rem 0.875rem;
	border-bottom: 1px solid var(--fcc-border);
	vertical-align: middle;
}

.fcc-compare-table tr:last-child th,
.fcc-compare-table tr:last-child td { border-bottom: none; }

.fcc-compare-th-nutrient {
	text-align: left;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fcc-text-muted);
	background: #f8fafc;
	white-space: nowrap;
}

.fcc-compare-th {
	text-align: right;
	white-space: nowrap;
}

.fcc-compare-th--a {
	background: linear-gradient(to bottom, #EEF8F1, #dcfce7);
	color: var(--fcc-primary);
}

.fcc-compare-th--b {
	background: linear-gradient(to bottom, #ecfdf5, #d1fae5);
	color: #059669;
}

.fcc-compare-th--a,
.fcc-compare-th--b {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: none; /* text set by JS; badge shows column identity */
}

.fcc-compare-th--a { display: table-cell; }
.fcc-compare-th--b { display: table-cell; }

.fcc-compare-th__name--a,
.fcc-compare-th__name--b {
	display: inline;
	vertical-align: middle;
	word-break: break-word;
	white-space: normal;
}

.fcc-compare-table tbody tr { transition: background var(--fcc-transition); }
.fcc-compare-table tbody tr:nth-child(even) td,
.fcc-compare-table tbody tr:nth-child(even) th { background: #f8fafc; }
.fcc-compare-table tbody tr:hover td,
.fcc-compare-table tbody tr:hover th { background: #EEF8F1; }

.fcc-compare-table td {
	text-align: right;
	font-weight: 500;
	white-space: nowrap;
}

.fcc-compare-table th[scope="row"] {
	text-align: left;
	font-weight: 600;
	color: var(--fcc-text);
	white-space: nowrap;
}

.fcc-compare-sub {
	padding-left: 1.75rem !important;
	color: var(--fcc-text-muted) !important;
	font-weight: 400 !important;
}

/* Winner cell highlights */
.fcc-compare-winner--a {
	font-weight: 700 !important;
	color: var(--fcc-primary) !important;
	background: #dcfce7 !important;
}

.fcc-compare-winner--b {
	font-weight: 700 !important;
	color: #059669 !important;
	background: #d1fae5 !important;
}

/* ── Win/loss summary bar ──────────────────────────────────────────────── */
.fcc-compare-summary { margin-bottom: 1rem; }

.fcc-compare-summary-inner {
	background: var(--fcc-surface);
	border: 1.5px solid var(--fcc-border);
	border-radius: 12px;
	padding: 0.875rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.fcc-compare-summary-labels {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
}

.fcc-compare-summary-text {
	flex: 1;
	color: var(--fcc-text);
}

.fcc-compare-summary-bar {
	display: flex;
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--fcc-border);
}

.fcc-compare-summary-bar__fill--a {
	background: var(--fcc-primary);
	transition: width 0.5s ease;
}

.fcc-compare-summary-bar__fill--b {
	background: #059669;
	transition: width 0.5s ease;
}

/* ── Compare actions ───────────────────────────────────────────────────── */
.fcc-compare-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--fcc-border);
}

.fcc-btn--copied {
	border-color: #059669 !important;
	color: #059669 !important;
	background: #ecfdf5 !important;
	pointer-events: none;
}

/* ==========================================================================
   Compare — Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.fcc-compare-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.fcc-compare-vs {
		flex-direction: row;
		padding: 0.75rem 0;
		gap: 0.75rem;
	}

	.fcc-compare-vs::before,
	.fcc-compare-vs::after {
		width: auto;
		height: 1px;
		flex: 1;
	}

	.fcc-compare-results-hd {
		grid-template-columns: 1fr;
		gap: 0.375rem;
		text-align: center;
	}

	.fcc-compare-results-hd__col--b { justify-content: flex-start; text-align: left; }

	.fcc-compare-results-hd__vs {
		padding: 0.25rem 0;
		color: var(--fcc-text-light);
	}

	.fcc-compare-fsa-row {
		grid-template-columns: 1fr;
	}

	.fcc-compare-table th,
	.fcc-compare-table td { padding: 0.5rem 0.625rem; font-size: 0.8rem; }

	.fcc-compare-th__name--a,
	.fcc-compare-th__name--b { max-width: unset; }
}

@media (max-width: 400px) {
	.fcc-compare-intro { flex-direction: column; text-align: center; }
	.fcc-compare-intro__icon { margin: 0 auto; }
	.fcc-compare-col { padding: 0.625rem; }
	.fcc-compare-col__search { padding: 0.7rem 2.25rem; font-size: 0.85rem; }
	.fcc-compare-table td,
	.fcc-compare-table th { padding: 0.35rem 0.25rem; font-size: 0.7rem; }
}

/* ==========================================================================
   Your Meal — Redesigned card
   ========================================================================== */

/* Header: icon + title + live kcal total */
.fcc-meal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: #148B43;
	border-radius: 14px 14px 0 0;
	margin: -1.25rem -1.25rem 1.25rem;
}

.fcc-meal-header__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.fcc-meal-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.18);
	border-radius: 10px;
	flex-shrink: 0;
}

.fcc-meal-header__icon svg { display: block; }

.fcc-meal-header__title {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.fcc-meal-header__kcal {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	background: rgba(255,255,255,0.15);
	border-radius: 10px;
	padding: 0.35rem 0.75rem;
}

.fcc-meal-total-kcal {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.fcc-meal-header__kcal-unit {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Macro summary pills row */
.fcc-meal-macros {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.fcc-meal-macro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.6rem 0.25rem;
	border-radius: 10px;
	background: var(--fcc-bg);
	border: 1.5px solid var(--fcc-border);
}

.fcc-meal-macro--protein { border-color: #86efac; background: #EEF8F1; }
.fcc-meal-macro--carbs   { border-color: #fde68a; background: #fffbeb; }
.fcc-meal-macro--fat     { border-color: #fca5a5; background: #fff1f2; }
.fcc-meal-macro--fibre   { border-color: #6ee7b7; background: #ecfdf5; }

.fcc-meal-macro__val {
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1;
}

.fcc-meal-macro--protein .fcc-meal-macro__val { color: var(--fcc-primary); }
.fcc-meal-macro--carbs   .fcc-meal-macro__val { color: #b45309; }
.fcc-meal-macro--fat     .fcc-meal-macro__val { color: #b91c1c; }
.fcc-meal-macro--fibre   .fcc-meal-macro__val { color: #059669; }

.fcc-meal-macro__label {
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--fcc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Food item rows */
.fcc-meal-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.375rem;
	padding: 0.625rem 0.75rem;
	background: var(--fcc-surface);
	border: 1.5px solid var(--fcc-border);
	border-radius: 10px;
	margin-bottom: 0.5rem;
	transition: border-color var(--fcc-transition), box-shadow var(--fcc-transition);
}

.fcc-meal-item:hover {
	border-color: var(--fcc-primary);
	box-shadow: 0 2px 8px rgba(20,139,67,.08);
}

/* The item's own primary row (number, name, quantity, kcal, remove).
   A real, deliberate split from .fcc-meal-item itself, added for the
   swap-suggestion feature (content plan #4, Piece B): .fcc-meal-item
   became a column so an optional .fcc-meal-item__swap row can sit
   below this one, this row keeps the original horizontal layout. */
.fcc-meal-item__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fcc-meal-item__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fcc-primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	flex-shrink: 0;
}

.fcc-meal-item__name {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--fcc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fcc-meal-item__kcal {
	font-size: 0.75rem;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
	flex-shrink: 0;
	background: #148B43;
	padding: 0.25rem 0.55rem;
	border-radius: 8px;
	min-width: 65px;
	text-align: center;
}

.fcc-meal-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: var(--fcc-text-muted);
	transition: background var(--fcc-transition), color var(--fcc-transition);
	flex-shrink: 0;
	padding: 0;
}

.fcc-meal-item__remove:hover {
	background: var(--fcc-red-bg);
	color: var(--fcc-red);
}

/* Full breakdown section header */
.fcc-meal-totals__hd {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fcc-text-muted);
	padding: 0.75rem 0 0.5rem;
	border-top: 1.5px solid var(--fcc-border);
	margin-top: 0.75rem;
}

/* Mobile adjustments */
@media (max-width: 500px) {
	.fcc-meal-macros { grid-template-columns: repeat(2, 1fr); }
	.fcc-meal-header { border-radius: 10px 10px 0 0; }
	.fcc-meal-total-kcal { font-size: 1.2rem; }
	.fcc-meal-item { padding: 0.5rem 0.625rem; gap: 0.375rem; }
	.fcc-meal-item__name { font-size: 0.8rem; }
	.fcc-meal-item__kcal { font-size: 0.75rem; }
	.fcc-meal-item__remove { width: 28px; height: 28px; }
}
@media (max-width: 380px) {
	.fcc-meal-macros { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
	.fcc-meal-macro { padding: 0.4rem 0.2rem; }
	.fcc-meal-macro__val { font-size: 0.8rem; }
	.fcc-meal-total-kcal { font-size: 1rem; }
}

/* =============================================================================
   Sponsored food listings (.fcc-result--sponsored, .fcc-sponsor-*)
   ============================================================================= */

.fcc-result--sponsored {
	border-left: 3px solid #d4ac0d;
	background: #fffdf0;
}

/* Sits inline right after the food name (see .fcc-result-name__text in
   fcc-calculator.js), not as a flex sibling of .fcc-result-kcal, so kcal
   stays flush right for every row, sponsored or not. */
.fcc-sponsored-pill {
	display: inline-block;
	margin-left: .4rem;
	vertical-align: middle;
	padding: .15rem .5rem;
	border-radius: 10px;
	background: #d4ac0d;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fcc-sponsor-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .65rem;
	/* No top margin: spacing below the food name now comes from
	   .fcc-selected-food-info's own flex gap (added 2026-08-31, once
	   the bar moved from a separate full-width row into that column),
	   a margin here would stack on top of that gap. */
	margin: 0;
	background: #fffdf0;
	border: 1px solid #f0e28a;
	border-radius: 6px;
	font-size: .8rem;
	/* Added 2026-08-30: the bar itself can now be a real <a>, whole-bar
	   clickable (not just the sponsor name). Neutralise default link
	   styling and add a subtle hover cue so it reads as one click
	   target, not a link floating inside a static box. */
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease, border-color .15s ease;
	/* Added 2026-08-31: without this, a block-level flex box like this
	   one stretches to its parent's full width regardless of how much
	   real content it holds. Wasn't visible with a wide wordmark logo
	   (its content alone filled most of that width anyway), became a
	   real, visible gap on the right once a smaller/square logo left
	   noticeably less content. Sizes the bar to its own content instead,
	   no leftover space either way, whatever the logo's real shape.  */
	width: fit-content;
}

a.fcc-sponsor-bar:hover {
	background: #fdf3c4;
	border-color: #e6d268;
}

.fcc-sponsor-logo {
	/* A fixed WIDTH+HEIGHT square (as first tried 2026-08-31) turned out
	   wrong for a wide wordmark logo: object-fit: contain would shrink it
	   down to fit the square's own narrow height-relative-to-width,
	   leaving it a barely-visible sliver. Fixed height only, width free
	   (capped at max-width so nothing gets absurdly wide) gets the actual
	   goal, a consistent bar height sponsor to sponsor, without punishing
	   a wide logo: a genuinely square source image still renders as a
	   clean square on its own (28x28), a wide one renders at a normal,
	   legible width instead of being squeezed. object-fit: contain still
	   means nothing is ever cropped or distorted either way. */
	height: 28px;
	max-width: 90px;
	object-fit: contain;
	flex-shrink: 0;
}

.fcc-sponsor-label {
	color: #888;
}

.fcc-sponsor-name {
	color: #148B43;
	font-weight: 600;
}

/* Added 2026-08-30, adjusted 2026-08-31: originally margin-left: auto
   pinned this to the bar's far right edge, which read fine next to a
   wide logo/long sponsor name but left a real, visibly odd gap once a
   smaller logo or a short name left less content in the middle. Sits
   directly after the sponsor name now instead, in normal flex flow, so
   the gap in front of it can never grow regardless of how wide the
   logo or the sponsor's own name happens to be. */
.fcc-sponsor-cta {
	/* No extra padding-left here on purpose: .fcc-sponsor-bar's own flex
	   `gap` already spaces every child evenly, adding more here would
	   double up right after the sponsor name specifically. */
	color: #148B43;
	font-weight: 600;
	font-size: .75rem;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   White Label — Powered-by footer & logo
   ========================================================================== */

.fcc-powered-by {
	text-align: center;
	padding: 0.5rem 1rem 0.25rem;
	font-size: 0.72rem;
	color: rgba(255,255,255,0.95);
	letter-spacing: 0.02em;
}

.fcc-powered-by a {
	color: #fff;
	text-decoration: none;
}

.fcc-powered-by a:hover {
	text-decoration: underline;
}

/* Hide powered-by when hidePoweredBy=1 (JS adds this class to wrapper) */
.fcc-wl-hide-powered-by .fcc-powered-by {
	display: none;
}

/* ==========================================================================
   Affiliate Buy Buttons
   ========================================================================== */

.fcc-affiliate-links {
	padding: 0.75rem 0 0.25rem;
	border-top: 1px solid var(--fcc-border, #e4eaf0);
	margin-top: 0.75rem;
}

.fcc-affiliate-links__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fcc-text-muted, #8a9aad);
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.fcc-affiliate-links__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.fcc-aff-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	text-decoration: none;
	border: 1.5px solid var(--aff-colour, #888);
	color: var(--aff-colour, #333);
	background: transparent;
	transition: background 0.15s, color 0.15s;
	line-height: 1.4;
	white-space: nowrap;
}

.fcc-aff-chip:hover {
	background: var(--aff-colour, #888);
	color: #fff;
}

.fcc-aff-chip__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	transition: color 0.15s;
}

.fcc-aff-chip:hover .fcc-aff-chip__icon {
	color: #fff !important;
}

.fcc-aff-chip__ext {
	opacity: 0.5;
	flex-shrink: 0;
}

.fcc-aff-chip:hover .fcc-aff-chip__ext {
	opacity: 0.8;
}

/* White-label brand logo above search */
.fcc-wl-logo {
	display: block;
	max-height: 48px;
	max-width: 200px;
	margin: 0 auto 0.75rem;
	object-fit: contain;
}

/* =============================================================================
   AD SLOTS (v1.12.0)
   ============================================================================= */

.fcc-ad-slot {
	width: 100%;
	margin: 0.75rem 0;
	text-align: center;
}

.fcc-ad-slot--below-calculator {
	margin-top: 1rem;
}

.fcc-ad-unit {
	display: inline-block;
	max-width: 100%;
	text-align: center;
}

.fcc-ad-label {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a9aaa;
	margin: 0 0 0.3rem;
	text-align: center;
}

/* =============================================================================
   SUPPLEMENT SUGGESTIONS (v1.13.0)
   ============================================================================= */

.fcc-supplement-suggestions {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e8edf2;
}

.fcc-supplement-suggestions__heading {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #148B43;
	margin: 0 0 0.6rem;
}

.fcc-supplement-suggestions__grid {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.fcc-supplement-suggestions__disclosure {
	font-size: 0.65rem;
	color: #9aabb8;
	margin: 0.5rem 0 0;
	font-style: italic;
}

/* ── Full card style ── */
.fcc-supp-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1.5px solid #e8edf2;
	border-radius: 10px;
	padding: 0.75rem;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	cursor: pointer;
}

.fcc-supp-card:hover {
	border-color: #148B43;
	box-shadow: 0 2px 10px rgba(20,139,67,0.12);
}

.fcc-supp-card__img {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: contain;
	flex-shrink: 0;
	background: #f0f4f8;
}

.fcc-supp-card__img-placeholder {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(135deg, #e8f5ed, #c8e6d4);
	flex-shrink: 0;
}

.fcc-supp-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.fcc-supp-card__top {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.fcc-supp-card__badge {
	font-size: 0.62rem;
	font-weight: 700;
	background: linear-gradient(135deg, #148B43, #6DBF67);
	color: #fff;
	border-radius: 99px;
	padding: 0.1rem 0.45rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fcc-supp-card__network {
	font-size: 0.67rem;
	color: #7a8d9c;
	margin-left: auto;
}

.fcc-supp-card__brand {
	font-size: 0.7rem;
	font-weight: 600;
	color: #6b8c7a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fcc-supp-card__name {
	font-size: 0.85rem;
	font-weight: 700;
	color: #1E2A1E;
	line-height: 1.25;
}

.fcc-supp-card__tagline {
	font-size: 0.74rem;
	color: #5a6d7c;
	line-height: 1.4;
}

.fcc-supp-card__footer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.fcc-supp-card__price {
	font-size: 0.85rem;
	font-weight: 700;
	color: #1E2A1E;
}

.fcc-supp-card__cta {
	font-size: 0.75rem;
	font-weight: 700;
	color: #148B43;
	margin-left: auto;
}

/* ── Compact row style ── */
.fcc-supp-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1.5px solid #e8edf2;
	border-radius: 8px;
	text-decoration: none;
	background: #fff;
	transition: border-color 0.15s;
}

.fcc-supp-row:hover { border-color: #148B43; }

.fcc-supp-row__name {
	font-size: 0.82rem;
	font-weight: 700;
	color: #1E2A1E;
}

.fcc-supp-row__brand {
	font-size: 0.72rem;
	color: #6b8c7a;
}

.fcc-supp-row__cta {
	font-size: 0.72rem;
	font-weight: 700;
	color: #148B43;
	margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT & CARD STYLE VARIANTS (Settings → Appearance)
   ─────────────────────────────────────────────────────────────── */
[data-fcc-layout="compact"] { max-width: 480px !important; }
[data-fcc-layout="wide"]    { max-width: 960px !important; }

[data-fcc-card-style="flat"] .fcc-section     { box-shadow: none !important; border: none !important; }
[data-fcc-card-style="outlined"] .fcc-section { box-shadow: none !important; border: 1px solid var(--fcc-border, #e2e8f0) !important; }

[data-fcc-animate="true"] .fcc-results-section { animation: fcc-fadeIn 0.3s ease-out; }
@keyframes fcc-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   FRONTEND ACTION BUTTONS — Copy, Favourite, Compare
   ─────────────────────────────────────────────────────────────── */

/* ── Action bar flex wrap ── */
.fcc-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0 0;
}

/* ── Copy button flash ── */
.fcc-copy-nutrition-btn.fcc-btn--copied {
	color: var(--fcc-green) !important;
	border-color: var(--fcc-green) !important;
}

/* ── Favourite button ── */
.fcc-favourite-icon { font-size: 1.1em; line-height: 1; }
.fcc-favourite-btn--saved { color: #e74c3c !important; border-color: #fca5a5 !important; }
.fcc-favourite-btn--saved .fcc-favourite-icon { color: #e74c3c; }

/* ── Favourites chip row ── */
.fcc-favourites-section { margin-bottom: 0.25rem; }
.fcc-favourite-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fcc-fav-chip { cursor: pointer; }

/* ── Add to Meal in action bar ── */
.fcc-add-to-meal--action { margin-left: auto; }


/* ═══════════════════════════════════════════════════════════════
   SOCIAL SHARE BUTTONS
   ─────────────────────────────────────────────────────────────── */
.fcc-share-group {
	display: inline-flex;
	gap: 5px;
	border: none;
	border-radius: 0;
	overflow: visible;
}
.fcc-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--fcc-border, #e2e8f0);
	border-radius: 7px;
	background: var(--fcc-surface, #fff);
	cursor: pointer;
	transition: background .15s, border-color .15s;
	padding: 0;
}
.fcc-share-icon svg { display: block; flex-shrink: 0; }
.fcc-share-icon:last-child { border-right: 1px solid var(--fcc-border, #e2e8f0); }
.fcc-share-icon:hover { background: #f0f4f0; }

.fcc-share-icon--link svg          { stroke: #148B43; fill: none; }
.fcc-share-icon--link:hover        { background: #EEF8F1; }
.fcc-share-icon--email svg         { stroke: #888; fill: none; }
.fcc-share-icon--email:hover       { background: #fef2f0; }
.fcc-share-icon--email:hover svg   { stroke: #d44638; }
.fcc-share-icon--whatsapp svg      { fill: #25D366; }
.fcc-share-icon--whatsapp:hover    { background: #e8fdf0; }
.fcc-share-icon--facebook svg      { fill: #1877F2; }
.fcc-share-icon--facebook:hover    { background: #eef4ff; }
.fcc-share-icon--x svg             { fill: #14171A; }
.fcc-share-icon--x:hover           { background: #f5f5f5; }
.fcc-share-icon--linkedin svg      { fill: #0A66C2; }
.fcc-share-icon--linkedin:hover    { background: #e8f0fe; }
.fcc-share-icon--reddit svg        { fill: #FF4500; }
.fcc-share-icon--reddit:hover      { background: #fff0eb; }

@media (max-width: 480px) {
	.fcc-share-icon { width: 30px; height: 30px; }
}


/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS v2 — structured 2-row layout
   ─────────────────────────────────────────────────────────────── */
.fcc-result-actions--v2 {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 1rem 0 0 !important;
	margin-top: 0.75rem;
	border-top: 1px solid var(--fcc-border, #e8f0e8);
}

/* ── Row 1: primary actions ── */
.fcc-actions-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Base button */
.fcc-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
	white-space: nowrap;
	line-height: 1.3;
}
.fcc-action-btn:active { transform: scale(.97); }

/* Filled CTA (Add to Meal) */
.fcc-action-btn--primary {
	background: var(--fcc-accent, #FF3F33);
	border: 1.5px solid var(--fcc-accent, #FF3F33);
	color: #fff;
	box-shadow: 0 2px 8px rgba(255,63,51,.2);
}
.fcc-action-btn--primary:hover {
	box-shadow: 0 4px 14px rgba(255,63,51,.3);
	transform: translateY(-1px);
}

/* Outlined (Print/PDF) */
.fcc-action-btn--outline {
	background: var(--fcc-surface, #fff);
	border: 1.5px solid var(--fcc-border, #d4e8da);
	color: var(--fcc-text, #1E2A1E);
}
.fcc-action-btn--outline:hover {
	border-color: var(--fcc-primary, #148B43);
	color: var(--fcc-primary, #148B43);
	background: rgba(20,139,67,.04);
}

/* Ghost (Copy, Save, Compare — subtle) */
.fcc-action-btn--ghost {
	background: transparent;
	border: 1.5px solid transparent;
	color: var(--fcc-text-muted, #6b7c6b);
	padding: 0.5rem 0.75rem;
}
.fcc-action-btn--ghost:hover {
	background: rgba(20,139,67,.06);
	color: var(--fcc-primary, #148B43);
	border-color: rgba(20,139,67,.15);
}

/* Favourite saved state */
.fcc-action-btn.fcc-favourite-btn--saved {
	color: #e74c3c !important;
	border-color: rgba(231,76,60,.2) !important;
	background: rgba(231,76,60,.04) !important;
}

/* Copy success flash */
.fcc-action-btn.fcc-btn--copied {
	color: var(--fcc-green, #15803d) !important;
	border-color: rgba(21,128,61,.2) !important;
}

/* ── Row 2: share strip ── */
.fcc-actions-share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.fcc-actions-share__label {
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--fcc-text-light, #7aa88a);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.fcc-actions-primary {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
	}
	.fcc-action-btn { justify-content: center; padding: 0.5rem 0.5rem; font-size: 0.78rem; text-align: center; }
	.fcc-actions-primary .fcc-action-btn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.2rem); }
}
@media (max-width: 380px) {
	.fcc-action-btn { font-size: 0.72rem; padding: 0.45rem 0.5rem; gap: 0.25rem; }
	.fcc-actions-share__label { display: none; }
	.fcc-share-icon { width: 28px; height: 28px; }
}


/* ═══════════════════════════════════════════════════════════════
   COMPARE BUTTON STATES + DUPLICATE PREVENTION
   ─────────────────────────────────────────────────────────────── */

/* Waiting-for-Slot-B persistent state */
.fcc-action-btn--waiting {
	border-color: #e67e22 !important;
	color: #e67e22 !important;
	background: rgba(230,126,34,.06) !important;
}
.fcc-action-btn--waiting:hover {
	background: rgba(230,126,34,.12) !important;
}

/* Slot B pulse animation when Compare tab opens */
.fcc-compare-col--pulse .fcc-compare-search {
	animation: fcc-pulse-glow 1s ease-in-out 3;
}
@keyframes fcc-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(20,139,67,0); }
	50% { box-shadow: 0 0 0 5px rgba(20,139,67,.2); }
}

/* Disabled duplicate food in Compare dropdown */
.fcc-compare-result--disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
	background: #f9f9f9 !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMPARE TAB SLOT INDICATOR DOTS
   ─────────────────────────────────────────────────────────────── */
.fcc-compare-dots {
	display: inline-flex;
	gap: 3px;
	margin-left: 4px;
	vertical-align: middle;
}
.fcc-compare-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid var(--fcc-border, #ccc);
	background: transparent;
	transition: background .25s, border-color .25s;
}
.fcc-compare-dot--filled {
	background: var(--fcc-primary, #148B43);
	border-color: var(--fcc-primary, #148B43);
}


/* ═══════════════════════════════════════════════════════════════
   PWA INSTALL BUTTON
   ─────────────────────────────────────────────────────────────── */
.fcc-pwa-install-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .5rem 1.1rem;
	background: linear-gradient(135deg, var(--fcc-primary), #2D9A54);
	color: #fff;
	border: none;
	border-radius: 20px;
	font-size: .82rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(20,139,67,.25);
	margin: .75rem auto;
	width: fit-content;
}
.fcc-pwa-install-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(20,139,67,.35);
}
.fcc-pwa-install-btn svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   VOICE SEARCH BUTTON
   ─────────────────────────────────────────────────────────────── */
.fcc-voice-btn {
	position: absolute;
	right: 2.75rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var(--fcc-primary, #148B43);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(20,139,67,.2);
	transition: background .15s, box-shadow .15s, transform .15s;
}
.fcc-voice-icon { font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: visible; }
.fcc-voice-icon svg { display: block; flex-shrink: 0; }
.fcc-voice-btn:hover {
	background: #044547;
	box-shadow: 0 3px 10px rgba(20,139,67,.3);
	transform: scale(1.05);
}

/* Active / Listening state — red pulse */
.fcc-voice-btn--active {
	border-color: #FF3F33 !important;
	background: #fff5f4 !important;
	animation: fcc-voice-pulse 1s ease-in-out infinite;
}
.fcc-voice-btn--active { color: #fff !important; }
@keyframes fcc-voice-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,63,51,.2); }
	50% { box-shadow: 0 0 0 6px rgba(255,63,51,.1); }
}

/* Adjust clear button position to make room */
.fcc-voice-btn + .fcc-search-clear { right: 0.5rem; }

/* Mobile */
@media (max-width: 480px) {
	.fcc-voice-btn { width: 32px; height: 32px; right: 2.25rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MEAL CATEGORIES + TEMPLATES
   ─────────────────────────────────────────────────────────────── */

/* ── Category pills ── */
.fcc-meal-cat-pills {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.75rem 1rem;
	flex-wrap: wrap;
}
.fcc-meal-cat-label {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fcc-text-muted, #4a7a5a);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-right: 4px;
}
.fcc-meal-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border: 1.5px solid var(--fcc-border, #d4ddd8);
	border-radius: 20px;
	background: var(--fcc-surface, #fff);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fcc-text, #1a2e2f);
	cursor: pointer;
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.fcc-meal-cat-pill:hover {
	border-color: var(--fcc-primary, #148B43);
	box-shadow: 0 1px 4px rgba(20,139,67,.1);
}
.fcc-meal-cat-pill--active {
	background: var(--fcc-primary, #148B43);
	border-color: var(--fcc-primary, #148B43);
	color: #fff;
	box-shadow: 0 2px 6px rgba(20,139,67,.2);
}

/* ── Category group headers in meal list ── */
.fcc-meal-cat-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	margin-top: 8px;
	background: linear-gradient(to right, var(--fcc-bg, #FFE6E1), transparent);
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fcc-text, #1a2e2f);
}
.fcc-meal-cat-header:first-child { margin-top: 0; }
.fcc-meal-cat-header__emoji { font-size: 1rem; }
.fcc-meal-cat-header__label { flex: 1; }
.fcc-meal-cat-header__kcal {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fcc-primary, #148B43);
	background: rgba(20,139,67,.08);
	padding: 2px 8px;
	border-radius: 10px;
}

/* ── Servings Divider ── */
.fcc-meal-serves {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 16px;
	margin: 0.5rem 0;
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	font-size: 13px;
	color: #374151;
}
.fcc-meal-serves svg { stroke: #148B43; flex-shrink: 0; }
.fcc-meal-serves label { font-weight: 600; color: #148B43; }
.fcc-meal-serves__input {
	width: 46px;
	padding: 0.25rem 0.3rem;
	border: 2px solid transparent;
	border-radius: 10px;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 800;
	font-family: inherit;
	color: #148B43;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #148B43, #2D7A4F, #9FC87E) border-box;
	transition: box-shadow .15s;
	-moz-appearance: textfield;
	appearance: textfield;
}
.fcc-meal-serves__input::-webkit-inner-spin-button,
.fcc-meal-serves__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fcc-meal-serves__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(20,139,67,.12);
}
.fcc-meal-serves__suffix { color: #6b7280; font-size: 12px; }
.fcc-meal-serves__per-serving {
	font-weight: 700;
	color: #148B43;
	margin-left: 4px;
	font-size: 12px;
	background: #d1fae5;
	padding: 2px 8px;
	border-radius: 10px;
}

/* ── Meal totals per-serving header ── */
.fcc-meal-totals-hdr th {
	font-size: 11px;
	text-transform: uppercase;
	color: #6b7280;
	font-weight: 600;
	padding: 4px 8px;
	border-bottom: 2px solid #e5e7eb;
}
.fcc-meal-total-col {
	color: #9ca3af;
	font-size: 0.85em;
}

/* ── Daily Goal Progress Bar ── */
.fcc-meal-daily-bar {
	margin: 0.5rem 0 0.75rem;
	padding: 0 0.25rem;
}
.fcc-meal-daily-track {
	height: 10px;
	background: #e5e7eb;
	border-radius: 5px;
	overflow: hidden;
}
.fcc-meal-daily-fill {
	height: 100%;
	background: linear-gradient(90deg, #148B43, #9FC87E);
	border-radius: 5px;
	transition: width 0.4s ease;
	width: 0%;
}
.fcc-meal-daily-label {
	display: block;
	text-align: center;
	font-size: 0.72rem;
	color: #4a7a5a;
	margin-top: 4px;
	font-weight: 500;
}

/* ── Meal item inline quantity editor ── */
/* Controls group — fixed width for perfect vertical alignment */
.fcc-meal-item__controls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.fcc-meal-item__qty {
	width: 56px;
	padding: 0.3rem 0.3rem;
	border: 2px solid transparent;
	border-radius: 10px;
	font-size: 0.85rem;
	font-weight: 800;
	font-family: inherit;
	text-align: center;
	background: linear-gradient(#f0f9f9, #e8f5f5) padding-box, linear-gradient(135deg, #148B43, #2D7A4F, #9FC87E) border-box;
	color: var(--fcc-primary, #148B43);
	flex-shrink: 0;
	transition: box-shadow 0.2s, background 0.2s;
	-moz-appearance: textfield;
	appearance: textfield;
}
.fcc-meal-item__qty::-webkit-inner-spin-button,
.fcc-meal-item__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fcc-meal-item__qty:focus {
	outline: none;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #148B43, #2D7A4F, #9FC87E) border-box;
	box-shadow: 0 0 0 3px rgba(20,139,67,.15);
}
.fcc-meal-item__unit {
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #148B43, #2D7A4F);
	padding: 0.15rem 0.4rem;
	border-radius: 6px;
	line-height: 1.2;
	flex-shrink: 0;
	margin-right: 4px;
}

/* ── Meal Action Buttons ── */
.fcc-meal-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0 0;
	border-top: 1px solid var(--fcc-border, #e6eded);
	margin-top: 8px;
}
.fcc-meal-print-btn,
.fcc-meal-save-tpl__btn,
.fcc-meal-copy-btn,
.fcc-meal-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border: 1.5px solid var(--fcc-border, #d4ddd8);
	border-radius: 8px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: var(--fcc-text-muted, #4a7a5a);
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.fcc-meal-print-btn:hover,
.fcc-meal-save-tpl__btn:hover,
.fcc-meal-copy-btn:hover,
.fcc-meal-share-btn:hover {
	border-color: var(--fcc-primary, #148B43);
	color: var(--fcc-primary, #148B43);
	background: rgba(20,139,67,.05);
}

/* ── Save as Template button ── */
.fcc-meal-save-tpl {
	padding: 8px 0 0;
	border-top: 1px solid var(--fcc-border, #e6eded);
	margin-top: 8px;
	text-align: center;
}
/* .fcc-meal-save-tpl__btn shares styles with action buttons above */

/* ── Templates section ── */
.fcc-meal-templates {
	padding: 0.75rem 1rem 0;
}
.fcc-meal-templates__label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--fcc-text-muted, #4a7a5a);
	margin: 0 0 6px;
}
.fcc-meal-templates__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fcc-meal-tpl-chip {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--fcc-border, #d4ddd8);
	border-radius: 20px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.fcc-meal-tpl-chip:hover {
	border-color: var(--fcc-primary, #148B43);
	box-shadow: 0 2px 8px rgba(20,139,67,.1);
}
.fcc-meal-tpl-chip__load {
	padding: 5px 12px;
	border: none;
	background: var(--fcc-surface, #fff);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fcc-primary, #148B43);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.fcc-meal-tpl-chip__load:hover {
	background: #e8f5f5;
	color: #159A4C;
}
.fcc-meal-tpl-chip__count { color: inherit; font-weight: 400; opacity: .7; }

/* Active template chip */
.fcc-meal-tpl-chip--active {
	border-color: var(--fcc-primary, #148B43);
	background: var(--fcc-primary, #148B43);
}
.fcc-meal-tpl-chip--active .fcc-meal-tpl-chip__load {
	background: var(--fcc-primary, #148B43);
	color: #fff;
}
.fcc-meal-tpl-chip--active .fcc-meal-tpl-chip__del {
	border-left-color: rgba(255,255,255,.2);
	color: rgba(255,255,255,.6);
}
.fcc-meal-tpl-chip--active .fcc-meal-tpl-chip__del:hover {
	color: #fff;
	background: rgba(255,255,255,.1);
}
.fcc-meal-tpl-chip__del {
	padding: 5px 8px;
	border: none;
	border-left: 1px solid var(--fcc-border, #e6eded);
	background: transparent;
	color: #ccc;
	font-size: 0.85rem;
	cursor: pointer;
	transition: color .15s, background .15s;
}
.fcc-meal-tpl-chip__del:hover { color: #e74c3c; background: #fff5f5; }


/* ═══════════════════════════════════════════════════════════════
   ALLERGEN & DIETARY BADGES
   ─────────────────────────────────────────────────────────────── */
.fcc-allergen-badges,
.fcc-diet-badges {
	margin-bottom: 0.625rem;
}
.fcc-badge-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--fcc-text-light, #4a7a5a);
	margin: 0 0 0.4rem;
}
.fcc-badge-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fcc-allergen-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
}
.fcc-allergen-badge--contains {
	background: #fef3cd;
	border: 1px solid #fcd34d;
	color: #92400e;
}
.fcc-allergen-badge--free {
	background: #f0f7ea;
	border: 1px solid #c5e0a8;
	color: #3d6b1e;
}
.fcc-diet-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #EEF8F1;
	border: 1px solid #a8d5d6;
	color: #148B43;
}

/* ==========================================================================
   Individual Food Pages (/food/{slug}/)
   ========================================================================== */
.fcc-food-page {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #2d3748;
	line-height: 1.7;
}
.fcc-food-page__title {
	font-size: 1.8rem;
	font-weight: 800;
	color: #148B43;
	margin: 0 0 0.75rem;
	line-height: 1.25;
}
.fcc-food-page__intro {
	font-size: 1rem;
	color: #4a5568;
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
	border-left: 4px solid #148B43;
	border-radius: 0 10px 10px 0;
}
.fcc-food-page__facts {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fcc-food-page__facts li {
	padding: 0.6rem 1rem;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.9rem;
}

/* Nutritional Overview */
.fcc-food-page__overview {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}
.fcc-food-page__overview > h2 {
	font-size: 1.15rem;
	font-weight: 700;
	color: #148B43;
	margin: 0 0 0.75rem;
}
.fcc-food-page__overview p {
	font-size: 0.92rem;
	color: #4a5568;
	line-height: 1.7;
	margin: 0 0 0.6rem;
}
.fcc-food-page__overview p:last-child { margin-bottom: 0; }
.fcc-food-page__overview a { color: #148B43; text-decoration: underline; text-underline-offset: 2px; }
.fcc-food-page__overview a:hover { color: #159A4C; }

/* FAQ */
.fcc-food-page__faq {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid #e2e8f0;
}
.fcc-food-page__faq > h2 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #148B43;
	margin: 0 0 1rem;
}
.fcc-food-page__faq-item {
	margin-bottom: 0.75rem;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
}
.fcc-food-page__faq-item h3 {
	font-size: 0.92rem;
	font-weight: 600;
	color: #1a202c;
	margin: 0;
	padding: 0.75rem 1rem;
	background: #f7fafc;
	border-bottom: 1px solid #e2e8f0;
}
.fcc-food-page__faq-item p {
	font-size: 0.88rem;
	color: #4a5568;
	margin: 0;
	padding: 0.75rem 1rem;
	line-height: 1.6;
}
.fcc-food-page__faq-item p a { color: #148B43; text-decoration: underline; text-underline-offset: 2px; }
.fcc-food-page__faq-item p a:hover { color: #159A4C; }

/* Sources & References */
.fcc-food-page__sources {
	margin-top: 2rem;
	padding: 1.25rem;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}
.fcc-food-page__sources > h2 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #148B43;
	margin: 0 0 0.75rem;
}
.fcc-food-page__sources ol {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
	font-size: 0.85rem;
	color: #4a5568;
}
.fcc-food-page__sources ol li {
	margin-bottom: 0.4rem;
}
.fcc-food-page__sources a {
	color: #148B43;
	font-weight: 600;
	text-decoration: none;
}
.fcc-food-page__sources a:hover {
	text-decoration: underline;
}
.fcc-food-page__disclaimer {
	font-size: 0.78rem;
	color: #718096;
	margin: 0;
	padding-top: 0.5rem;
	border-top: 1px solid #e2e8f0;
}

/* Lower Calorie Alternatives, plan item #2. Reuses the exact same
   card-grid shape Related Foods (below) already established for a
   food page's own "list of other foods" sections, so the two read as
   siblings, not two different visual languages, plus one small chip
   span naming the real % calorie saving. */
.fcc-food-page__alternatives {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid #e2e8f0;
}
.fcc-food-page__alternatives > h2 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #148B43;
	margin: 0 0 0.35rem;
}
.fcc-food-page__alternatives ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0.75rem 0 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0.5rem !important;
	align-items: stretch !important;
}
.fcc-food-page__alternatives li {
	display: block !important;
	list-style: none !important;
	padding: 0.6rem 1rem !important;
	margin: 0 !important;
	background: linear-gradient(135deg, #f0fdf4, #f7fafc) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	font-size: 0.88rem !important;
	box-sizing: border-box !important;
}
.fcc-food-page__alternatives a {
	color: #148B43;
	font-weight: 600;
	text-decoration: none;
	display: block;
}
.fcc-food-page__alternatives a:hover {
	text-decoration: underline;
}
.fcc-alternatives__kcal {
	display: block;
	font-weight: 400;
	color: #15803d;
	font-size: 0.78rem;
	margin-top: 0.15rem;
}

/* Related Foods */
.fcc-food-page__related {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid #e2e8f0;
}
.fcc-food-page__related > h2 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #148B43;
	margin: 0 0 0.75rem;
}
.fcc-food-page__related ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0.5rem !important;
	align-items: stretch !important;
}
.fcc-food-page__related li {
	display: block !important;
	list-style: none !important;
	padding: 0.6rem 1rem !important;
	margin: 0 !important;
	background: linear-gradient(135deg, #f0fdf4, #f7fafc) !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	font-size: 0.88rem !important;
	box-sizing: border-box !important;
}
.fcc-food-page__related a {
	color: #148B43;
	font-weight: 600;
	text-decoration: none;
}
.fcc-food-page__related a:hover {
	text-decoration: underline;
}

/* Homepage content-width match, added 2026-09 on the site owner's
   direct request, once the same fix already shipped for /tdee-calculator/
   and /bmr-calculator/ (see the calculator[data-fcc-mode] ~ * rule in
   admin/partials/frontend-calculator.php, and
   [[feedback_fcc_calculator_page_design_template]] in project memory).
   The homepage's own calculator widget is already correctly centered at
   its real 860px (.fcc-calculator, above), but the real WordPress
   homepage (page id 6749, an Elementor-built page, not part of this
   plugin's own template at all) has three genuinely wider, real content
   sections sitting below it, confirmed live via a real headless-browser
   measurement before writing this, not guessed: the "Search over 5,200
   UK foods..." intro tagline (element 7fd00cb), "How to Use the Food
   Calorie Calculator" + "What the Calculator Covers" (element eceaa3c,
   both title widgets share one Elementor container), and "Frequently
   Asked Questions" (element 7168765), all three rendering at a real
   1155px, wider than the 860px calculator above them.

   Scoped to these three sections' own real Elementor element IDs, not
   the shared .e-con-boxed class every Elementor "boxed" section on
   this page uses: the homepage has two other real .e-con-boxed
   sections that must NOT be touched, the calculator's own hosting
   section (already correctly wide, since the calculator's own CSS
   handles its own 860px centering inside it) and a footer-widget
   container, confirmed live before excluding them, not assumed safe.
   Also scoped to body.home (WordPress's own standard front-page body
   class) as a second, belt-and-braces layer, in case any of these
   three numeric IDs ever coincidentally reappears on a different page.

   NOTE: these element IDs are generated by the Elementor page editor
   itself, not this plugin. If the site owner ever rebuilds or
   recreates these specific sections in the Elementor editor (not just
   edits their existing content), the IDs can change and this rule
   would stop matching; re-measure live (a real headless-browser check,
   the class list on the section's own outer .e-con-boxed div) rather
   than assuming this selector still applies, the same way it was
   originally found here. */
body.home .elementor-element-7fd00cb.e-con-boxed,
body.home .elementor-element-eceaa3c.e-con-boxed,
body.home .elementor-element-7168765.e-con-boxed {
	max-width: 860px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Directory page (/food/) */
.fcc-directory__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 2rem;
}
.fcc-directory__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.25rem 1rem;
	background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
	border: 1px solid #d1e7dd;
	border-radius: 12px;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.fcc-directory__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.fcc-directory__card-name {
	font-size: 1rem;
	font-weight: 700;
	color: #148B43;
}
.fcc-directory__card-count {
	font-size: 0.78rem;
	color: #4a7a5a;
	margin-top: 0.25rem;
}
.fcc-directory__section {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e2e8f0;
}
.fcc-directory__section h2 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.fcc-directory__section h2 a {
	color: #148B43;
	text-decoration: none;
}
.fcc-directory__section h2 a:hover { text-decoration: underline; }
.fcc-directory__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.3rem 1rem;
}
.fcc-directory__list li { font-size: 0.88rem; }
.fcc-directory__list a { color: #148B43; text-decoration: none; }
.fcc-directory__list a:hover { text-decoration: underline; }
.fcc-directory__kcal { color: #718096; font-size: 0.78rem; }
.fcc-directory__viewall {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: #148B43;
	font-weight: 600;
	text-decoration: none;
}
.fcc-directory__viewall:hover { text-decoration: underline; }

/* Category page (/food/category/{slug}/) */
.fcc-category-page__breadcrumb {
	font-size: 0.82rem;
	color: #718096;
	margin-bottom: 0.5rem;
}
.fcc-category-page__breadcrumb a {
	color: #148B43;
	text-decoration: none;
}
.fcc-category-page__breadcrumb a:hover { text-decoration: underline; }
.fcc-category-page__table-wrap {
	overflow-x: auto;
	margin-top: 1rem;
}
.fcc-category-page__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.fcc-category-page__table th {
	text-align: left;
	padding: 0.6rem 0.75rem;
	background: #148B43;
	color: #fff;
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.fcc-category-page__table th:first-child { border-radius: 8px 0 0 0; }
.fcc-category-page__table th:last-child  { border-radius: 0 8px 0 0; }
.fcc-category-page__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid #e2e8f0;
}
.fcc-category-page__table tr:nth-child(even) { background: #f7fafc; }
.fcc-category-page__table tr:hover { background: #edf2f7; }
.fcc-category-page__table a {
	color: #148B43;
	font-weight: 600;
	text-decoration: none;
}
.fcc-category-page__table a:hover { text-decoration: underline; }

/* The one column that's the actual reason a food is on a diet &
   nutrition combo page (e.g. Sugar on a Low Sugar page), always
   present now regardless of flag, visually set apart from the two
   generic context columns beside it. */
.fcc-category-page__th-highlight {
	background: #0f6b34;
}
.fcc-category-page__td-highlight {
	font-weight: 700;
	color: #148B43;
	background: #f0faf3;
}

/* A compact Diet & Nutrition badge shown inline next to a food's own
   name on the plain category listing table, real, gated, linking
   straight to that food's own real /calories/{category}/{flag}/ combo
   page. Reuses the exact same green/blue colour pair the individual
   food page's own .fcc-health-chip already uses, sized down to fit
   comfortably inside a table row rather than the fuller standalone
   chip treatment. */
.fcc-table-health-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	margin-left: 0.4rem;
	text-decoration: none;
	white-space: nowrap;
}
.fcc-table-health-badge--positive {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}
.fcc-table-health-badge--omega3 {
	background: #e0f2fe;
	color: #0369a1;
	border: 1px solid #7dd3fc;
}
.fcc-table-health-badge:hover {
	filter: brightness(0.96);
}

/* Sort-by-metric toggle bar on the plain category listing page, plan
   item #2. A row of pill links, "Name" plus one per real Diet &
   Nutrition flag in that flag's own natural ("better") direction, e.g.
   ?sort=high-protein. Reuses the site's brand primary colour for the
   active state, the same token every other active/selected control on
   this site already uses. */
.fcc-sort-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem 0 1rem;
}
.fcc-sort-bar__label {
	font-size: 0.82rem;
	font-weight: 600;
	color: #4a5568;
	margin-right: 0.15rem;
}
.fcc-sort-pill {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #4a5568;
	text-decoration: none;
	white-space: nowrap;
}
.fcc-sort-pill:hover {
	border-color: var(--fcc-primary);
	color: var(--fcc-primary);
}
.fcc-sort-pill--active {
	background: var(--fcc-primary);
	border-color: var(--fcc-primary);
	color: #fff;
}
.fcc-sort-pill--active:hover {
	color: #fff;
}

/* Hub editorial content */
.fcc-food-page__editorial {
	margin-top: 2rem;
	padding-top: 0.5rem;
}
.fcc-food-page__editorial h2 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #1a202c;
	margin: 2rem 0 0.6rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid #148B43;
	display: inline-block;
}
.fcc-food-page__editorial h2:first-child { margin-top: 0; }
.fcc-food-page__editorial p {
	font-size: 0.95rem;
	line-height: 1.75;
	color: #4a5568;
	margin: 0 0 1rem;
}
.fcc-food-page__editorial ul {
	margin: 0.5rem 0 1rem 1.25rem;
	padding: 0;
}
.fcc-food-page__editorial ul li {
	font-size: 0.93rem;
	line-height: 1.7;
	color: #4a5568;
	margin-bottom: 0.4rem;
}
.fcc-food-page__editorial strong { color: #1a202c; }
.fcc-food-page__editorial a {
	color: #148B43;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fcc-food-page__editorial a:hover {
	color: #159A4C;
	text-decoration: underline;
}

/* Homepage internal-link CTA (category + hub pages), matching the exact
   same design tokens as .fcc-food-page__editorial p/a immediately above,
   this paragraph renders just after that div closes, not inside it,
   since some category pages have no hand-written editorial content to
   nest inside (see render_category_editorial()'s known-slug guard), but
   it should read as a visual continuation of it, not a differently-
   styled block. Added 2026-08, flagged by the site owner from a live
   screenshot comparing it against the existing green/underlined,
   ash-grey-text editorial links. */
.fcc-homepage-cta {
	font-size: 0.95rem;
	line-height: 1.75;
	color: #4a5568;
	margin: 0 0 1rem;
}
.fcc-homepage-cta a {
	color: #148B43;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fcc-homepage-cta a:hover {
	color: #159A4C;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.fcc-food-page__title { font-size: 1.4rem; }
	.fcc-food-page__related ul { grid-template-columns: 1fr; }
	.fcc-food-page__alternatives ul { grid-template-columns: 1fr; }
	.fcc-directory__grid { grid-template-columns: 1fr 1fr; }
	.fcc-directory__list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   THEME COMPATIBILITY — resets for aggressive theme CSS
   (WoodMart and similar themes that override button/input styles)
   ─────────────────────────────────────────────────────────────── */

/* Fix positioning context so voice button stays inside the search field */
.fcc-calculator .fcc-autocomplete {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	overflow: visible !important;
}

/* Force voice button to anchor inside the search field regardless of theme overrides */
.fcc-calculator .fcc-autocomplete .fcc-voice-btn {
	position: absolute !important;
	right: 2.75rem !important;
	left: auto !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
}

/* Force search icon to anchor inside the search field */
.fcc-calculator .fcc-autocomplete .fcc-search-icon {
	position: absolute !important;
	left: 0.9rem !important;
	right: auto !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}

/* Fix search input overflow caused by theme box-model overrides */
.fcc-calculator .fcc-search-input {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Reset theme button styles on popular/trending chips — high-specificity to beat WoodMart */
.fcc-calculator .fcc-popular-chips .fcc-popular-chip,
.fcc-calculator .fcc-popular-chip.fcc-popular-chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.25rem 0.65rem !important;
	font-size: 0.78rem !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	color: #148B43 !important;
	background: rgba(20,139,67,0.08) !important;
	border: 1px solid rgba(20,139,67,0.25) !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.fcc-calculator .fcc-popular-chips .fcc-popular-chip:hover,
.fcc-calculator .fcc-popular-chips .fcc-popular-chip:focus,
.fcc-calculator .fcc-popular-chip.fcc-popular-chip:hover,
.fcc-calculator .fcc-popular-chip.fcc-popular-chip:focus {
	background: rgba(20,139,67,0.15) !important;
	border-color: #148B43 !important;
	color: #159A4C !important;
}

/* Reset theme button styles on PWA install button */
.fcc-calculator .fcc-pwa-install-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	padding: 0.55rem 1.4rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: #fff !important;
	background: #148B43 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
	width: fit-content !important;
	height: auto !important;
	margin: 0.75rem auto !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(20,139,67,.25) !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
}
.fcc-calculator .fcc-pwa-install-btn:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(20,139,67,.35) !important;
	background: #148B43 !important;
	color: #fff !important;
}