/**
 * flb-front.css — front blocks of flb-core (module flb_blocks).
 * Ported from hlh-core/assets/front/hlh-front.css (hlh- → flb-) + food
 * additions: .flb-kitchen-box, .flb-sticky-cta, .flb-disclaimer--food.
 *
 * Theme-independent: palette is NOT hardcoded per site — every color is
 * `var(--flb-*, fallback)`, so each of the 4 blogs (keto/paleo/veg/vegan)
 * can rebrand the blocks by defining CSS variables on :root/body/parent.
 * Available knobs: --flb-accent, --flb-accent-soft, --flb-cta, --flb-cta-hover,
 * --flb-ink, --flb-muted, --flb-line, --flb-surface, --flb-surface-alt.
 */

/* ---------- buttons ---------- */
.flb-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.14s ease-out, background-color 0.14s ease-out, box-shadow 0.14s ease-out;
}
.flb-btn--cta {
	background: var(--flb-cta, #C97B2D);
	color: #fff;
	box-shadow: 0 1px 2px rgba(34, 48, 43, .15);
}
.flb-btn--cta:hover,
.flb-btn--cta:focus-visible {
	background: var(--flb-cta-hover, #B26C24);
	transform: translateY(-1px);
}
.flb-btn--ghost {
	background: transparent;
	color: var(--flb-accent, #1E5B4F);
	border: 1.5px solid var(--flb-accent, #1E5B4F);
}
.flb-btn--ghost:hover,
.flb-btn--ghost:focus-visible { background: var(--flb-surface-alt, #EDF2EF); }
.flb-btn--sm { padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* pending-vendor CTA placeholder (product without hoplink — never a /go/ link) */
.flb-cta-pending {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--flb-muted, #5C6B64);
	background: var(--flb-surface, #F3EDE2);
}

/* ---------- stars (partial fill) ---------- */
.flb-stars { position: relative; display: inline-block; font-size: 18px; letter-spacing: 2px; }
.flb-stars-base { color: #C9CFC9; }
.flb-stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--flb-cta, #C97B2D);
}

/* ---------- product box ---------- */
.flb-product-box {
	position: relative;
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--flb-line, #E2E7E2);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(34, 48, 43, .06), 0 8px 24px rgba(34, 48, 43, .08);
	font-family: inherit;
	color: var(--flb-ink, #22302B);
}
.flb-product-box.is-pick { border-color: var(--flb-accent-soft, #7A9B76); }
.flb-pick-badge {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 3px 10px;
	background: var(--flb-accent-soft, #7A9B76);
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
}
/* Badge as a direct child of the product box must NOT occupy a grid cell:
   as a grid item it pushed media/body into wrong columns at >=768px and
   stretched full-width at 375px (HLH staging visual audit 2026-11-06). */
.flb-product-box > .flb-pick-badge {
	position: absolute;
	top: 0;
	right: 16px;
	transform: translateY(-50%);
	z-index: 1;
	margin: 0;
}
.flb-product-box__media img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.flb-product-box__title { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.flb-product-box__rating { margin: 0 0 8px; }
.flb-product-box__score { margin-inline-start: 6px; font-weight: 600; }
.flb-product-box__verdict { margin: 0 0 10px; }
.flb-product-box__pros { margin: 0 0 14px; padding-left: 18px; }
.flb-product-box__pros li { margin: 4px 0; }
.flb-product-box__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.flb-afdisc { margin: 10px 0 0; font-size: 12.5px; color: var(--flb-muted, #5C6B64); }

@media (max-width: 600px) {
	.flb-product-box { grid-template-columns: 1fr; }
	.flb-product-box__media { max-width: 220px; }
}
/* No thumbnail => don't reserve the media column (dead space at >=768). */
.flb-product-box.no-media { grid-template-columns: 1fr; }

/* ---------- comparison table ---------- */
.flb-compare {
	overflow-x: auto;
	border: 1px solid var(--flb-line, #E2E7E2);
	border-radius: 16px;
	/* scroll-shadow: fades a hint that the table scrolls horizontally */
	background:
		linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
		linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(34, 48, 43, .16), transparent) left center / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(34, 48, 43, .16), transparent) right center / 12px 100% no-repeat scroll,
		#fff;
}
.flb-compare__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.flb-compare__table th,
.flb-compare__table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--flb-surface-alt, #EDF2EF);
	font-size: 15px;
	position: relative;
}
.flb-compare__table thead th {
	background: var(--flb-surface, #F3EDE2);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--flb-accent, #1E5B4F);
}
.flb-compare__table tr:last-child td { border-bottom: 0; }
.flb-compare__table tr.is-pick { background: #F7FAF7; }
.flb-compare__name img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	margin-inline-end: 10px;
	vertical-align: middle;
}
.flb-compare__name a { font-weight: 600; color: var(--flb-ink, #22302B); text-decoration: none; }
.flb-compare__name a:hover,
.flb-compare__name a:focus-visible { color: var(--flb-accent, #1E5B4F); text-decoration: underline; }
.flb-compare__score { margin-inline-start: 6px; font-weight: 600; }

/* ---------- kitchen box (food: "Kitchen essentials for this recipe") ---------- */
.flb-kitchen-box {
	background: #fff;
	border: 1px solid var(--flb-line, #E2E7E2);
	border-radius: 16px;
	padding: 20px 24px;
	margin: 28px 0;
	font-family: inherit;
	color: var(--flb-ink, #22302B);
}
.flb-kitchen-box__title {
	margin: 0 0 6px;
	font-size: 20px;
	color: var(--flb-accent, #1E5B4F);
	display: flex;
	align-items: center;
	gap: 8px;
}
.flb-kitchen-box__title::before {
	content: "✓";
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: var(--flb-accent, #1E5B4F);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	flex: none;
}
.flb-kitchen-box__group {
	margin: 14px 0 6px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--flb-muted, #5C6B64);
}
.flb-kitchen-box__list { margin: 0; padding-left: 20px; }
.flb-kitchen-box__item { margin: 6px 0; }
.flb-kitchen-box__name { font-weight: 600; }
.flb-kitchen-box__link { color: var(--flb-accent, #1E5B4F); }
.flb-kitchen-box__note { display: block; font-size: 13.5px; color: var(--flb-muted, #5C6B64); }

/* ---------- takeaways ---------- */
.flb-takeaways {
	background: var(--flb-surface, #F3EDE2);
	border-radius: 16px;
	padding: 20px 24px;
	margin: 0 0 28px;
	font-family: inherit;
	color: var(--flb-ink, #22302B);
}
.flb-takeaways__title {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--flb-accent, #1E5B4F);
	display: flex;
	align-items: center;
	gap: 8px;
}
.flb-takeaways__title::before {
	content: "✓";
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: var(--flb-accent, #1E5B4F);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	flex: none;
}
.flb-takeaways ul { margin: 0; }

/* ---------- disclaimers (blocks + FLB_Disclaimer::inject note) ---------- */
.flb-disclaimer {
	background: var(--flb-surface, #F3EDE2);
	border: 1px solid #E4DCCC;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 28px 0 8px;
	font-size: 13.5px;
	color: #3A473F;
	font-family: inherit;
}
.flb-disclaimer__title { margin: 0 0 6px; font-size: 15px; color: var(--flb-accent, #1E5B4F); }
.flb-disclaimer-note {
	font-size: 13.5px;
	color: var(--flb-muted, #5C6B64);
	background: var(--flb-surface, #F3EDE2);
	border-radius: 8px;
	padding: 8px 12px;
}

/* ---------- related posts (rendered by FLB_Silo::related_shortcode) ---------- */
.flb-related-posts { margin: 32px 0; font-family: inherit; color: var(--flb-ink, #22302B); }
.flb-related-posts h2 { font-size: 20px; margin: 0 0 10px; }
.flb-related-posts ul { margin: 0; padding-left: 20px; }
.flb-related-posts li { margin: 6px 0; }
.flb-related-posts a { color: var(--flb-accent, #1E5B4F); }

/* ---------- sticky CTA bar (single flb_product; reveal handled in flb-front.js) ---------- */
.flb-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 960px;
	margin: 0 auto;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border: 1px solid var(--flb-line, #E2E7E2);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -6px 24px rgba(34, 48, 43, .14);
	font-family: inherit;
	color: var(--flb-ink, #22302B);
	visibility: hidden;
	pointer-events: none;
	transform: translateY(110%);
	transition: transform 0.22s ease-out, visibility 0.22s;
}
.flb-sticky-cta.is-visible { visibility: visible; pointer-events: auto; transform: none; }
.flb-sticky-cta__info { min-width: 0; }
.flb-sticky-cta__title { margin: 0; font-size: 15px; font-weight: 600; }
.flb-sticky-cta__rating { margin: 2px 0 0; }
.flb-sticky-cta__rating .flb-stars { font-size: 14px; letter-spacing: 1px; }
.flb-sticky-cta__close {
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: var(--flb-surface-alt, #EDF2EF);
	color: var(--flb-muted, #5C6B64);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.flb-sticky-cta__close:hover { background: var(--flb-surface, #F3EDE2); }

@media (max-width: 480px) {
	.flb-sticky-cta { gap: 8px; padding-inline: 12px; }
	.flb-sticky-cta__title { font-size: 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.flb-btn { transition: none; }
	.flb-btn--cta:hover { transform: none; }
	.flb-sticky-cta { transition: none; }
}