/* odf-theme CSS bundle - SOURCE OF TRUTH since 29 Jul 2026: edit this file directly.
   Produced by the one-time split of the retired main.css. Conventions + how to add
   components or page types: docs/CSS_ARCHITECTURE.md. Gate: scripts/css-coverage.py. */
/* Two-column body: main + 340px sidebar (scorecard row 1, sticky rail row 2). */
.odf-player { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--odf-sp-5); align-items: start; padding-block: var(--odf-sp-5) var(--odf-sp-6); }
.odf-player__main { grid-column: 1; grid-row: 1; min-width: 0; }
.odf-player__rail { grid-column: 2; grid-row: 1; min-width: 0; position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--odf-sp-4); }
@media (max-width: 900px) {
	/* Founder review 3 (kept): on mobile the rail (quick facts, where to buy,
	   brand card) stays ABOVE the long main content - the score itself now
	   lives in the hero. Flex + order reorders visually; source order stays
	   semantic. */
	.odf-player { display: flex; flex-direction: column; padding-top: var(--odf-sp-5); }
	.odf-player__rail { order: 1; position: static; margin-top: 0; }
	.odf-player__main { order: 2; margin-top: var(--odf-sp-6); }}

/* Quick-facts card (sidebar card 2): label/value rows, honest gaps skipped. */
.odf-facts { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-lg); box-shadow: var(--odf-shadow-xs); padding: var(--odf-sp-4) var(--odf-sp-5); }
.odf-facts__h { font-size: var(--odf-fs-xs); font-weight: 700; letter-spacing: var(--odf-tracking-wide); text-transform: uppercase; color: var(--odf-ink-3); margin: 0 0 var(--odf-sp-2); }
.odf-facts dl { margin: 0; }
.odf-facts__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--odf-sp-3); padding: 9px 0; border-top: 1px solid var(--odf-line); font-size: var(--odf-fs-sm); }
.odf-facts__row:first-of-type { border-top: 0; }
.odf-facts__row dt { color: var(--odf-ink-3); margin: 0; flex: none; }
.odf-facts__row dd { color: var(--odf-ink); font-weight: 600; margin: 0; text-align: right; min-width: 0; }
.odf-facts__row dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--odf-line); }
.odf-facts__row dd a:hover { color: var(--odf-green); border-bottom-color: var(--odf-green); }

/* Brand range: complete foods vs treats/toppers as SEPARATE blocks - each its own
   card, a plain heading above it (no card chrome on the title), a clear gap
   between, and jump links up top. Keeps a brand's food quality visually apart
   from its snacks. */
.odf-range-jump { display: flex; flex-wrap: wrap; gap: var(--odf-sp-2); margin: 0 0 var(--odf-sp-5); }
.odf-range-jump a { font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-green); background: var(--odf-green-soft); padding: 6px 15px; border-radius: var(--odf-radius-pill); text-decoration: none; transition: background var(--odf-dur) var(--odf-ease), color var(--odf-dur) var(--odf-ease); }
.odf-range-jump a:hover { background: var(--odf-green); color: #fff; }
.odf-range-group { margin-bottom: var(--odf-sp-7); scroll-margin-top: var(--odf-sp-6); }
.odf-range-group:last-child { margin-bottom: 0; }
.odf-range-group__h { font-family: var(--odf-font-display); font-size: var(--odf-fs-lg); color: var(--odf-ink); margin: 0 0 var(--odf-sp-3); display: flex; align-items: baseline; gap: var(--odf-sp-3); flex-wrap: wrap; }
.odf-range-group__meta { font-family: var(--odf-font-sans); font-size: var(--odf-fs-sm); font-weight: 600; color: var(--odf-ink-3); }

/* Compact newsletter (sidebar card 4): the shortcode's --compact variant
   gets a border here so it reads as a card in the rail. */
.odf-player__rail .odf-subscribe--compact { border: 1px solid var(--odf-line); box-shadow: var(--odf-shadow-xs); max-width: none; }

/* Main-column section rhythm (sections are cards-on-cream, no washes here).
   DENSITY pass rule 1: 40px between sections, not 48-96. */
.odf-player__main > section { margin: 0 0 var(--odf-sp-7); }
.odf-player__main > section:last-of-type { margin-bottom: 0; }
.odf-player__main .odf-verdict { margin: 0 0 var(--odf-sp-7); }
/* The 6-column price table keeps its shape and scrolls inside its card. */
.odf-player__main .odf-table { min-width: 560px; }
/* Phones/small tablets: the 5-column range table's 560px min-width forced the
   whole page to scroll sideways (everything below it overflowed right). Drop the
   floor so the table fits the viewport, and hide the low-value Life stage column
   - the 4th cell in every row (thead <th> and tbody <td> both count, so
   nth-child(4) targets it consistently). overflow-x:auto on .odf-table-wrap stays
   as a safety net for any residual width. */
@media (max-width: 640px) {
	/* The real overflow culprit: .odf-player__main is a flex item in the phone
	   column-flip of .odf-player, and min-width:0 alone did NOT stop it growing to
	   the table's content width in the cross axis - so the wrap never scrolled and
	   the whole page shifted right. max-width:100% caps it to the viewport; the
	   table then scrolls inside .odf-table-wrap as intended. */
	.odf-player__main { max-width: 100%; }}
.odf-buy { display: inline-flex; align-items: center; gap: 6px; background: var(--odf-gold); color: #fff; font-weight: 700; font-size: var(--odf-fs-sm); border: 0; border-radius: var(--odf-radius-sm); padding: 8px 16px; white-space: nowrap; }
.odf-buy:hover { background: var(--odf-gold-deep); color: #fff; }
.odf-buy svg { width: 14px; height: 14px; }

/* --- Feeding & cost block --- */
.odf-player__main .odf-packtable { min-width: 0; }

/* --- About the brand --- */
/* .odf-aboutbrand__logo retired (dead) - odf_logo_box() is the one logo box. */

/* --- Alternatives: the food name is a real link now --- */

/* ---- Rail: compact where-to-buy card (founder review 3) ---- */
/* Live-browse item 4: identical card treatment to .odf-facts (border +
   radius + shadow + uppercase header) - the empty state never renders as a
   floating heading + sentence. */
.odf-buycard{background:var(--odf-card);border:1px solid var(--odf-line);border-top:3px solid var(--odf-gold);border-radius:var(--odf-radius-lg);box-shadow:var(--odf-shadow-soft);padding:var(--odf-sp-4) var(--odf-sp-5);display:flex;flex-direction:column;gap:var(--odf-sp-2)}
.odf-buycard__h{display:flex;align-items:center;gap:6px;font-size:var(--odf-fs-xs);font-weight:800;letter-spacing:var(--odf-tracking-wide);text-transform:uppercase;color:var(--odf-ink-2);margin:0}
.odf-buycard__h svg{width:15px;height:15px;color:var(--odf-gold);flex:none}
.odf-buycard__row{display:flex;align-items:center;justify-content:space-between;gap:var(--odf-sp-2);padding:var(--odf-sp-2) 0;border-top:1px solid var(--odf-line)}
.odf-buycard__row--best{background:var(--odf-gold-soft);margin:0 calc(-1 * var(--odf-sp-2));padding-left:var(--odf-sp-2);padding-right:var(--odf-sp-2);border-radius:8px;border-top-color:transparent}
.odf-buycard__meta{display:flex;flex-direction:column;gap:2px;font-size:var(--odf-fs-sm);min-width:0}
.odf-buycard__meta b{font-weight:600}
.odf-buycard__pack{color:var(--odf-ink-3);font-size:var(--odf-fs-xs)}
.odf-buycard__pack em{font-style:normal;color:var(--odf-band-average)}
.odf-buycard__checked{color:var(--odf-ink-3);font-size:var(--odf-fs-xs);opacity:.85}
.odf-buycard__act{display:flex;align-items:center;gap:var(--odf-sp-2);white-space:nowrap;font-weight:700}
.odf-buy--sm{padding:6px 12px;font-size:var(--odf-fs-xs);border-radius:8px}
/* Ghost buy button = the search-fallback "Search" action (secondary to a real Buy). */
.odf-buy--ghost{background:var(--odf-card);color:var(--odf-gold-deep);border:1.5px solid var(--odf-gold)}
.odf-buy--ghost:hover{background:var(--odf-gold);color:#fff;border-color:var(--odf-gold)}
.odf-buycard__note{color:var(--odf-ink-3);font-size:var(--odf-fs-xs);margin:0}
.odf-buycard__fineprint{display:flex;align-items:flex-start;gap:5px;margin:2px 0 0;padding-top:var(--odf-sp-2);border-top:1px solid var(--odf-line);color:var(--odf-ink-3);font-size:10.5px;line-height:1.45;opacity:.9}
.odf-buycard__fineprint svg{width:11px;height:11px;flex:none;margin-top:2px;opacity:.7}

/* --- Where to buy: retailer cards ----------------------------------------- */
.odf-buygrid { margin-top: var(--odf-sp-2); }
/* Renamed .odf-buycard -> .odf-retailercard (Phase 1b duplicate-class fix:
   the bare name also styles the product page's where-to-buy card). */
.odf-retailercard { display: flex; flex-direction: column; gap: 4px; }
.odf-retailercard__name { margin: 0; font-weight: 800; font-size: var(--odf-fs-base); color: var(--odf-ink); }
.odf-retailercard__name a { color: inherit; }
.odf-retailercard__name a:hover { color: var(--odf-green); }
.odf-retailercard__count { margin: 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-3); }
.odf-retailercard__from { margin: var(--odf-sp-1) 0 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-retailercard__from a { font-weight: 700; color: var(--odf-green); }
.odf-retailercard__from a:hover { color: var(--odf-ink); }
.odf-retailercard__from .odf-price { font-weight: 700; color: var(--odf-ink); }

/* --- Offers & discount codes ---------------------------------------------- */
.odf-offergrid { margin-top: var(--odf-sp-2); }
.odf-offercard { display: flex; flex-direction: column; gap: var(--odf-sp-2); border-left: 3px solid var(--odf-gold); }
.odf-offercard__label { margin: 0; font-weight: 800; font-size: var(--odf-fs-base); color: var(--odf-ink); }
.odf-offercard__coderow { display: flex; align-items: center; gap: var(--odf-sp-2); flex-wrap: wrap; }
.odf-offercard__code {
	font-family: var(--odf-font-sans); font-weight: 800; font-size: var(--odf-fs-md);
	letter-spacing: .06em; color: var(--odf-gold-deep); background: var(--odf-gold-soft);
	border: 1px dashed color-mix(in srgb, var(--odf-gold) 55%, #fff); border-radius: var(--odf-radius-sm);
	padding: 5px 12px;
}
.odf-copycode {
	font: inherit; font-size: var(--odf-fs-sm); font-weight: 700; cursor: pointer;
	color: var(--odf-ink-2); background: var(--odf-card); border: 1.5px solid var(--odf-line);
	border-radius: var(--odf-radius-pill); padding: 5px 14px;
	transition: color var(--odf-dur) var(--odf-ease), border-color var(--odf-dur) var(--odf-ease), background var(--odf-dur) var(--odf-ease);
}
.odf-copycode:hover { color: var(--odf-green-deep); border-color: var(--odf-green); }
.odf-copycode.is-copied { color: var(--odf-green-deep); background: var(--odf-green-soft); border-color: var(--odf-green); }
.odf-offercard__note { margin: 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); }
.odf-offercard__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--odf-sp-2); flex-wrap: wrap; }
.odf-offercard__ends { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }
.odf-offercard__go { display: inline-flex; align-items: center; gap: 5px; font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-green); }
.odf-offercard__go:hover { color: var(--odf-ink); }
.odf-offers__terms { margin: var(--odf-sp-3) 0 0; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }

/* --- Ownership transparency ------------------------------------------------ */

/* --- Recalls slot (phase-2 future-wire; zero-cheek styling) ---------------- */
.odf-recalls { display: flex; flex-direction: column; gap: var(--odf-sp-3); }
.odf-recall { background: var(--odf-card); border: 1px solid var(--odf-line); border-left: 3px solid var(--odf-band-avoid); border-radius: var(--odf-radius); box-shadow: var(--odf-shadow-xs); padding: var(--odf-sp-4) var(--odf-sp-5); }
.odf-recall--resolved { border-left-color: var(--odf-line); }
.odf-recall__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.odf-recall__ico { color: var(--odf-band-avoid); flex: none; }
.odf-recall--resolved .odf-recall__ico { color: var(--odf-ink-3); }
.odf-recall__title { margin: 0; font-weight: 800; color: var(--odf-ink); flex: 1; min-width: 0; }
.odf-recall__resolved { font-size: var(--odf-fs-xs); font-weight: 700; color: var(--odf-green-deep); background: var(--odf-green-soft); border-radius: var(--odf-radius-pill); padding: 3px 10px; }
.odf-recall__meta { margin: var(--odf-sp-1) 0 0; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); }
.odf-recall__body { margin: var(--odf-sp-2) 0 0; font-size: var(--odf-fs-md); color: var(--odf-ink-2); max-width: 78ch; }
.odf-recall__src { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--odf-sp-2); font-size: var(--odf-fs-sm); font-weight: 700; color: var(--odf-green); }
.odf-recall__src:hover { color: var(--odf-ink); }
.odf-player__rail .odf-offercard { padding: var(--odf-sp-3) var(--odf-sp-3) var(--odf-sp-3) var(--odf-sp-4); }
.odf-player__rail .odf-offercard + .odf-offercard { border-top: 1px solid var(--odf-line); }
.odf-player__rail .odf-retailercard + .odf-retailercard { border-top: 1px solid var(--odf-line); padding-top: var(--odf-sp-3); margin-top: var(--odf-sp-1); }