﻿/* ==========================================================================
   Food Calorie Calculator â€” Frontend Styles v2
   Brand palette â€” Option 1 "Fresh & Healthy":
     Primary  Forest Green  #075B5E
     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 #075B5E
     --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:       #075B5E;
	--fcc-accent:        #FF3F33;
	--fcc-bg:            #FFE6E1;
	--fcc-radius:        8px;
	--fcc-surface:       #ffffff;
	--fcc-border:        #d4ddd8;
	--fcc-text:          #1a2e2f;
	--fcc-text-muted:    #4a6365;
	--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, #043e40 0%, var(--fcc-primary) 55%, #0a7a7e 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;
	outline-offset: -2px;
}

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

.fcc-calculator .fcc-tab-btn:hover,
.fcc-calculator .fcc-tab-btn:focus {
	background: #f0f7f7 !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%, #f0f7f7 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 #86c9a1 !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(20,90,50,.08) !important;
	line-height: 1.5 !important;
}

.fcc-search-input:focus {
	border-color: var(--fcc-primary) !important;
	box-shadow: 0 0 0 3px rgba(7,91,94,.15), 0 2px 8px rgba(20,90,50,.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: #4a8c6a;
	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: #4a8c6a;
	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: #075B5E;
	background: rgba(45, 122, 79, 0.08);
	border: 1px solid rgba(45, 122, 79, 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(45, 122, 79, 0.15);
	border-color: #075B5E;
	color: #1a5c37;
	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: #075B5E;
	background: none;
	border: 1px solid rgba(45, 122, 79, 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(45, 122, 79, 0.08);
	border-color: #075B5E;
}

/* ---- Food request panel ---- */
.fcc-request-panel {
	margin-top: 0.75rem;
	background: #f0f9f4;
	border: 1px solid rgba(45, 122, 79, 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: #075B5E;
}

.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: #4a8c6a;
}

.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: #075B5E;
	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: #075B5E;
	box-shadow: 0 0 0 3px rgba(45, 122, 79, 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;
	background: #075B5E;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
}

.fcc-req-submit:hover { background: #245f3f; }
.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: #075B5E;
	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: #f0f7f7;
}

.fcc-result-name { font-weight: 500; color: var(--fcc-text); }

.fcc-result-kcal {
	font-weight: 700;
	color: var(--fcc-primary);
	font-size: 0.8rem;
	white-space: nowrap;
	background: #f0f7f7;
	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, #f0f7f7 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);
}

.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(7,91,94,.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;
}

/* 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: #f0f7f7;
	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(7,91,94,.3);
}

.fcc-btn--primary:hover {
	background: #236940;
	box-shadow: 0 4px 12px rgba(7,91,94,.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: 12px;
	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: #f0f7f7;
}

/* --------------------------------------------------------------------------
   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%, #f0f7f7 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(7,91,94,.1);
	padding: 2px;
	background: linear-gradient(135deg, #043e40 0%, #075B5E 50%, #9FC87E 100%);
}

.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;
	text-align: left;
}

.fcc-nutrition-table thead th {
	background: linear-gradient(135deg, #043e40 0%, #075B5E 50%, #0a7a7e 100%);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #fff;
	border-bottom: none;
	padding: 0.8rem 1rem;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
}

.fcc-nutrition-table tbody { background: #fff; }
.fcc-nutrition-table tbody tr {
	transition: background .15s;
}
.fcc-nutrition-table tbody tr:nth-child(even) {
	background: linear-gradient(to right, #f5fafa 0%, #fafcfc 100%);
}
.fcc-nutrition-table tbody tr:hover {
	background: linear-gradient(to right, #e0f2f2 0%, #edf8f8 100%);
}

/* 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, #075B5E);
	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, #4a6365); 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, #075B5E);
}

.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(7,91,94,.15);
}

/* Sub-rows: indented, muted */
.fcc-row--sub td:first-child,
.fcc-row--sub th {
	padding-left: 2rem;
	color: var(--fcc-text-muted, #4a6365);
	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.625rem 0 0;
	padding: 0 0.5rem 0.25rem;
}

/* ── 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: linear-gradient(135deg, #f7fafa 0%, var(--fcc-bg, #FFE6E1) 50%, #f7fafa 100%);
	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: linear-gradient(135deg, #043e40, #075B5E, #9FC87E);
	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, #4a6365);
}

/* 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, #4a6365);
	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 rgba(255,255,255,.8);
	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: linear-gradient(135deg, #e65100, #ff8f00); }
.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: linear-gradient(135deg, #1b5e20, #43a047); }
.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: linear-gradient(135deg, #0d47a1, #1e88e5); }
.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: linear-gradient(135deg, #b71c1c, #e53935); }
.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, #f0f7f7 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, #075B5E);
}
.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: #f0f7f7;
	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, #043e40 0%, var(--fcc-primary) 55%, #0a7a7e 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(7,91,94,.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(7,91,94,.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: #f0f7f7 !important;
	color: #1a5c35 !important;
}

.fcc-bmr-sex-btn--active {
	border-color: var(--fcc-primary) !important;
	background: #f0f7f7 !important;
	color: #1a5c35 !important;
	box-shadow: 0 0 0 3px rgba(7,91,94,.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: #f0f7f7;
}

.fcc-bmr-act-card--active {
	border-color: var(--fcc-primary);
	background: #f0f7f7;
	box-shadow: 0 0 0 3px rgba(7,91,94,.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 {
	display: flex;
	gap: 0.5rem;
}

.fcc-bmr-goal-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);
}

.fcc-bmr-goal-pill--lose:hover,
.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.fcc-bmr-goal-pill--active {
	border-color: var(--fcc-primary);
	background: #f0f7f7;
	box-shadow: 0 0 0 3px rgba(7,91,94,.12);
}

.fcc-bmr-goal-pill--gain:hover,
.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 {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--fcc-text);
}

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

/* 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, #043e40 0%, var(--fcc-primary) 55%, #0a7a7e 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: #f0f7f7;
}

.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: #f0f7f7;
	text-align: center;
}

/* --------------------------------------------------------------------------
   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;
	}
	.fcc-food-header__info { 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 { gap: 0.35rem; }
	.fcc-bmr-goal-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 { font-size: 0.8rem; }
	.fcc-bmr-goal-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: none; }
	.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 { 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: #075B5E !important;
		border-bottom: 2px solid #075B5E !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: #f0f7f7 !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 #075B5E !important;
	}
	.fcc-print-clone .fcc-nutrition-table thead th {
		border: none !important;
		padding: 8px 10px !important;
		font-size: 8pt !important;
		background: linear-gradient(135deg, #043e40, #075B5E) !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: #f0f7f7 !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__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, #043e40, #075B5E) !important;
		color: #fff;
		border-radius: 10px;
	}
	.fcc-print-header__brand {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex-shrink: 0;
		padding-top: 2px;
	}
	.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, #043e40, #075B5E, #0a7a7e) !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: linear-gradient(135deg, #043e40, #075B5E) !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 #075B5E !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-print-clone .fcc-meal-item:nth-child(even) { background: #f8fafa !important; }
	.fcc-print-clone .fcc-meal-item__controls { gap: 3px !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;
	}
	.fcc-print-clone .fcc-meal-item__unit {
		font-size: 7pt !important;
		padding: 0 3px !important;
		border-radius: 2px !important;
		background: #075B5E !important;
	}
	.fcc-print-clone .fcc-meal-item__kcal {
		font-size: 8pt !important;
		padding: 1px 5px !important;
		min-width: auto !important;
		border-radius: 3px !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, #f0f7f7 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(7,91,94,.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(7,91,94,.12);
}

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

.fcc-compare-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	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: #f0f7f7; }

/* â”€â”€ 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: #f0f7f7;
	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, #f0f7f7 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, #f0f7f7, #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: #f0f7f7; }

.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: 640px) {
	.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: linear-gradient(135deg, var(--fcc-primary) 0%, #6DBF67 100%);
	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: #f0f7f7; }
.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;
	align-items: center;
	gap: 0.5rem;
	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(7,91,94,.08);
}

.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: linear-gradient(135deg, #075B5E, #2D7A4F);
	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;
}

.fcc-sponsored-pill {
	display: inline-block;
	margin-left: auto;
	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;
	flex-shrink: 0;
}

.fcc-sponsor-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .65rem;
	margin: .35rem 0 0;
	background: #fffdf0;
	border: 1px solid #f0e28a;
	border-radius: 6px;
	font-size: .8rem;
}

.fcc-sponsor-logo {
	max-height: 28px;
	max-width: 90px;
	object-fit: contain;
	flex-shrink: 0;
}

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

.fcc-sponsor-label a {
	color: #075B5E;
	text-decoration: none;
	font-weight: 600;
}

.fcc-sponsor-label a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   White Label â€” Powered-by footer & logo
   ========================================================================== */

.fcc-powered-by {
	text-align: center;
	padding: 0.5rem 1rem 0.25rem;
	font-size: 0.72rem;
	color: #888;
	letter-spacing: 0.02em;
}

.fcc-powered-by a {
	color: var(--fcc-primary, #075B5E);
	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: #075B5E;
	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: #075B5E;
	box-shadow: 0 2px 10px rgba(7,91,94,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, #075B5E, #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: #075B5E;
	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: #075B5E; }

.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: #075B5E;
	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: 0;
	border: 1px solid var(--fcc-border, #e2e8f0);
	border-radius: 8px;
	overflow: hidden;
}
.fcc-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-right: 1px solid var(--fcc-border, #e2e8f0);
	background: var(--fcc-surface, #fff);
	cursor: pointer;
	transition: background .15s;
	padding: 0;
}
.fcc-share-icon svg { display: block; flex-shrink: 0; }
.fcc-share-icon:last-child { border-right: none; }
.fcc-share-icon:hover { background: #f0f4f0; }

.fcc-share-icon--link svg          { stroke: #075B5E; fill: none; }
.fcc-share-icon--link:hover        { background: #e6f3f3; }
.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, #075B5E);
	color: var(--fcc-primary, #075B5E);
	background: rgba(7,91,94,.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(7,91,94,.06);
	color: var(--fcc-primary, #075B5E);
	border-color: rgba(7,91,94,.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; }
}
@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(7,91,94,0); }
	50% { box-shadow: 0 0 0 5px rgba(7,91,94,.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, #075B5E);
	border-color: var(--fcc-primary, #075B5E);
}


/* ═══════════════════════════════════════════════════════════════
   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), #0a7a7e);
	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(7,91,94,.25);
	margin: .75rem auto;
	width: fit-content;
}
.fcc-pwa-install-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(7,91,94,.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, #075B5E);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(7,91,94,.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(7,91,94,.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, #4a6365);
	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, #075B5E);
	box-shadow: 0 1px 4px rgba(7,91,94,.1);
}
.fcc-meal-cat-pill--active {
	background: var(--fcc-primary, #075B5E);
	border-color: var(--fcc-primary, #075B5E);
	color: #fff;
	box-shadow: 0 2px 6px rgba(7,91,94,.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, #075B5E);
	background: rgba(7,91,94,.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: #075B5E; flex-shrink: 0; }
.fcc-meal-serves label { font-weight: 600; color: #075B5E; }
.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: #075B5E;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #075B5E, #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(7,91,94,.12);
}
.fcc-meal-serves__suffix { color: #6b7280; font-size: 12px; }
.fcc-meal-serves__per-serving {
	font-weight: 700;
	color: #075B5E;
	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, #075B5E, #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: #4a6365;
	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, #075B5E, #2D7A4F, #9FC87E) border-box;
	color: var(--fcc-primary, #075B5E);
	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, #075B5E, #2D7A4F, #9FC87E) border-box;
	box-shadow: 0 0 0 3px rgba(7,91,94,.15);
}
.fcc-meal-item__unit {
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #075B5E, #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, #4a6365);
	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, #075B5E);
	color: var(--fcc-primary, #075B5E);
	background: rgba(7,91,94,.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, #4a6365);
	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, #075B5E);
	box-shadow: 0 2px 8px rgba(7,91,94,.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, #075B5E);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.fcc-meal-tpl-chip__load:hover {
	background: #e8f5f5;
	color: #043e40;
}
.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, #075B5E);
	background: var(--fcc-primary, #075B5E);
}
.fcc-meal-tpl-chip--active .fcc-meal-tpl-chip__load {
	background: var(--fcc-primary, #075B5E);
	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, #4a6365);
	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: #e6f3f3;
	border: 1px solid #a8d5d6;
	color: #075B5E;
}

/* ==========================================================================
   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: #075B5E;
	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 #075B5E;
	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: #075B5E;
	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: #075B5E; text-decoration: underline; text-underline-offset: 2px; }
.fcc-food-page__overview a:hover { color: #043e40; }

/* 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: #075B5E;
	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: #075B5E; text-decoration: underline; text-underline-offset: 2px; }
.fcc-food-page__faq-item p a:hover { color: #043e40; }

/* 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: #075B5E;
	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: #075B5E;
	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;
}

/* Related Foods */
.fcc-food-page__related {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid #e2e8f0;
}
.fcc-food-page__related > h2 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #075B5E;
	margin: 0 0 0.75rem;
}
.fcc-food-page__related ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.fcc-food-page__related li {
	padding: 0.6rem 1rem;
	background: linear-gradient(135deg, #f0fdf4, #f7fafc);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.88rem;
}
.fcc-food-page__related a {
	color: #075B5E;
	font-weight: 600;
	text-decoration: none;
}
.fcc-food-page__related a:hover {
	text-decoration: underline;
}
/* 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: #075B5E;
}
.fcc-directory__card-count {
	font-size: 0.78rem;
	color: #4a6365;
	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: #075B5E;
	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: #075B5E; 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: #075B5E;
	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: #075B5E;
	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: #075B5E;
	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: #075B5E;
	font-weight: 600;
	text-decoration: none;
}
.fcc-category-page__table a:hover { text-decoration: underline; }

/* 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 #075B5E;
	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: #075B5E;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fcc-food-page__editorial a:hover {
	color: #043e40;
	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-directory__grid { grid-template-columns: 1fr 1fr; }
	.fcc-directory__list { grid-template-columns: 1fr; }
}

