/* 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. */ /* --- Reviews (styles the plugin's [odf_reviews] markup + brand reviews) --- */ .odf-reviews__summary { display: grid; grid-template-columns: 250px 1fr; gap: var(--odf-sp-4); align-items: start; margin-bottom: var(--odf-sp-4); } @media (max-width: 700px) { .odf-reviews__summary { grid-template-columns: 1fr; }} .odf-reviews__score { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-4); text-align: center; } .odf-reviews__avg { display: block; font-family: var(--odf-font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--odf-ink); } .odf-reviews__bars { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-4); } .odf-reviews__bar { display: flex; align-items: center; gap: 8px; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); margin-top: 6px; } .odf-reviews__bar:first-child { margin-top: 0; } .odf-reviews__barlabel { flex: none; min-width: 24px; } .odf-reviews__bartrack { flex: 1; height: 6px; background: var(--odf-tint); border-radius: var(--odf-radius-pill); overflow: hidden; } .odf-reviews__barfill { display: block; height: 100%; background: var(--odf-gold); } .odf-reviews__barn { min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; } .odf-reviews__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--odf-sp-3); font-size: var(--odf-fs-sm); color: var(--odf-ink-3); margin-bottom: var(--odf-sp-3); flex-wrap: wrap; } .odf-reviews__sort select { border: 1px solid var(--odf-line); border-radius: var(--odf-radius-sm); background: var(--odf-card); padding: 6px 10px; font-size: var(--odf-fs-sm); color: var(--odf-ink); } .odf-reviews__list { list-style: none; margin: 0; padding: 0; } .odf-review { background: var(--odf-card); border: 1px solid var(--odf-line); border-radius: var(--odf-radius); padding: var(--odf-sp-4) var(--odf-sp-5); margin-bottom: var(--odf-sp-3); } .odf-review__head { display: flex; align-items: center; gap: 10px; } .odf-review__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--odf-radius-pill); display: grid; place-items: center; background: var(--odf-green-soft); color: var(--odf-green-deep); font-weight: 800; } .odf-review__author { font-weight: 700; color: var(--odf-ink); display: inline-flex; align-items: center; gap: 8px; } .odf-review__verified { font-size: var(--odf-fs-xs); font-weight: 700; color: var(--odf-band-verygood); background: color-mix(in srgb, var(--odf-band-verygood) 10%, #fff); border-radius: var(--odf-radius-pill); padding: 2px 9px; } .odf-review__meta { display: flex; align-items: center; gap: 8px; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); } .odf-review__tags { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--odf-sp-2) 0; } .odf-review__chip, .odf-dogchip { font-size: var(--odf-fs-xs); background: var(--odf-tint); color: var(--odf-ink-2); border-radius: var(--odf-radius-pill); padding: 3px 10px; font-weight: 600; } .odf-review__title { font-weight: 700; color: var(--odf-ink); margin: var(--odf-sp-2) 0 0; } .odf-review__body { font-size: var(--odf-fs-md); color: var(--odf-ink-2); max-width: 70ch; margin: var(--odf-sp-2) 0 0; } /* wpautop wraps a multi-paragraph review in its own

tags now; space them and drop the stray margins on the first/last so the block sits flush. */ .odf-review__body p { margin: 0 0 var(--odf-sp-3); line-height: var(--odf-lh-relaxed, 1.6); } .odf-review__body p:last-child { margin-bottom: 0; } /* Reviewer photos. Fixed-height thumbs keep a row of mixed portrait/landscape phone shots tidy; object-fit crops rather than distorting the dog. */ .odf-review__photos { display: flex; gap: var(--odf-sp-2); flex-wrap: wrap; margin: var(--odf-sp-3) 0 0; } .odf-review__photo { display: block; border-radius: var(--odf-radius-sm); overflow: hidden; line-height: 0; background: var(--odf-tint); } .odf-review__photo img { width: 96px; height: 96px; object-fit: cover; display: block; transition: transform .18s ease; } a.odf-review__photo:hover img, a.odf-review__photo:focus-visible img { transform: scale(1.04); } a.odf-review__photo:focus-visible { outline: 2px solid var(--odf-green); outline-offset: 2px; } .odf-reviewform__photo small { display: block; margin-top: 4px; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); line-height: 1.4; } /* Brand page, section 2: reviews of the brand's individual foods. Visually a sub-block of the reviews section, not a peer - the brand's own reviews lead. */ .odf-brandrevs { margin-top: var(--odf-sp-7); padding-top: var(--odf-sp-6); border-top: 1px solid var(--odf-line); } .odf-brandrevs__h { font-family: var(--odf-font-display); font-size: var(--odf-fs-lg); font-weight: 700; color: var(--odf-ink); margin: 0 0 var(--odf-sp-4); } /* "on " - the label that keeps a food review from reading as a comment about the company. */ .odf-review__on { margin: var(--odf-sp-2) 0 0; font-size: var(--odf-fs-sm); color: var(--odf-ink-3); } .odf-review__on a { color: var(--odf-green); font-weight: 600; } /* Owner reply: the Trustpilot-style branded card (founder ask 28 Jul 2026) - logo avatar + brand name + "Brand owner" chip + date, on a tinted card with a green accent rail so the company's words are visually THEIRS, never ours. */ .odf-review__reply { background: var(--odf-tint); border-left: 3px solid var(--odf-green); border-radius: var(--odf-radius-sm); padding: var(--odf-sp-3) var(--odf-sp-4); margin-top: var(--odf-sp-3); font-size: var(--odf-fs-sm); color: var(--odf-ink-2); } .odf-review__replyhead { font-weight: 700; color: var(--odf-ink); font-size: var(--odf-fs-sm); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .odf-review__replyhead time { font-weight: 500; color: var(--odf-ink-3); font-size: var(--odf-fs-xs); margin-left: auto; } .odf-review__replylogo { width: 26px; height: 26px; flex: none; border-radius: 7px; object-fit: contain; background: var(--odf-card); border: 1px solid var(--odf-line); padding: 2px; } .odf-review__replylogo--initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--odf-fs-sm); color: var(--odf-green-deep); background: var(--odf-green-soft); border-color: transparent; padding: 0; } .odf-ownerchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--odf-radius-pill); font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--odf-green); } .odf-review__replybody { margin: 0; color: var(--odf-ink-2); } /* Inline "Reply as the brand" (managers only; the form posts to the one gated endpoint). */ .odf-review__replyform { margin-top: var(--odf-sp-3); font-size: var(--odf-fs-sm); } .odf-review__replyform summary { cursor: pointer; font-weight: 700; color: var(--odf-green-deep); } .odf-review__replyform textarea { width: 100%; margin: var(--odf-sp-2) 0; border: 1.5px solid var(--odf-line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: var(--odf-fs-sm); background: var(--odf-card); resize: vertical; } .odf-review__replyform textarea:focus { outline: 2px solid var(--odf-green); outline-offset: 1px; border-color: var(--odf-green); } .odf-review__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--odf-sp-2) var(--odf-sp-4); margin-top: var(--odf-sp-3); } .odf-review__inline button { background: transparent; border: 0; cursor: pointer; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); padding: 0; font-weight: 600; } .odf-review__inline button:hover { color: var(--odf-ink); text-decoration: underline; } /* Write-a-review flow (plugin form). */ .odf-reviews__form-wrap { margin: var(--odf-sp-4) 0; border: 1px solid var(--odf-line); border-radius: var(--odf-radius); background: var(--odf-card); padding: var(--odf-sp-3) var(--odf-sp-5); } .odf-reviews__form-wrap summary { font-weight: 700; color: var(--odf-green); cursor: pointer; } .odf-reviews__form-wrap[open] summary { margin-bottom: var(--odf-sp-3); } /* Inline sign-up inside the review form. Visually SUBORDINATE to the review fields - it is optional, and the review is the thing we actually want. */ .odf-reviews__signup { margin: var(--odf-sp-3) 0; padding: var(--odf-sp-3) var(--odf-sp-4); border: 1px dashed var(--odf-line); border-radius: var(--odf-radius); background: var(--odf-tint); } .odf-reviews__signup summary { font-weight: 600; color: var(--odf-ink-2); cursor: pointer; font-size: var(--odf-fs-sm); line-height: 1.4; } .odf-reviews__signup[open] summary { margin-bottom: var(--odf-sp-2); } .odf-reviews__signupnote { margin: 0 0 var(--odf-sp-3); font-size: var(--odf-fs-sm); color: var(--odf-ink-3); line-height: 1.5; max-width: 60ch; } .odf-reviews__signupcheck { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--odf-sp-3); font-size: var(--odf-fs-sm); } /* Live password feedback. Empty until there is something to say, so it does not nag before the visitor has typed anything. */ .odf-reviews__pwnote { margin: var(--odf-sp-2) 0 0; font-size: var(--odf-fs-sm); line-height: 1.4; min-height: 1.2em; } .odf-reviews__pwnote.is-bad { color: var(--odf-danger, #b3261e); } .odf-reviews__pwnote.is-ok { color: var(--odf-success, #1b7f4b); } /* 20px box + 10px gap keeps the tap target above the 44px minimum once the label text is included - a 13px checkbox on a phone is a miss-tap generator. */ .odf-reviews__signupcheck input, .odf-reviews__anon input, .odf-reviews__consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; } /* Base row layout. MUST stay above the phone block below: these two rules used to sit AFTER it, and at equal specificity the later rule wins - so on a phone the row got `flex-direction: column` from the media query but `flex: 1 1 180px` from here. In a column, flex-basis is HEIGHT, so every field became 180px tall and the form rendered as a stack of huge empty gaps. */ .odf-reviewform__row { display: flex; gap: var(--odf-sp-3); flex-wrap: wrap; } .odf-reviewform__row .odf-fld { flex: 1 1 180px; } @media (max-width: 640px) { /* One field per row on a phone. flex:1 1 180px would otherwise squeeze the two password fields side by side at ~150px each, which is unusable. */ .odf-reviewform__row { flex-direction: column; gap: var(--odf-sp-3); } .odf-reviewform__row .odf-fld { flex: 0 0 auto; width: 100%; } /* 16px minimum on inputs - anything smaller makes iOS Safari zoom the page on focus, which throws the reader out of the form mid-review. */ .odf-reviewform input, .odf-reviewform textarea, .odf-reviewform select { font-size: 16px; } .odf-reviews__form-wrap { padding: var(--odf-sp-3); } .odf-reviews__signup { padding: var(--odf-sp-3); } /* Full-width submit: a centred pill on a 390px screen reads as secondary. */ .odf-reviewform .odf-btn { width: 100%; justify-content: center; }} .odf-reviews__anon, .odf-reviews__consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--odf-fs-sm); color: var(--odf-ink-2); margin: var(--odf-sp-2) 0; } .odf-reviews__smallnote { font-size: var(--odf-fs-xs); color: var(--odf-ink-3); margin: var(--odf-sp-2) 0 0; } .odf-reviews__verifiednote { font-size: var(--odf-fs-sm); color: var(--odf-band-verygood); font-weight: 600; } /* Optional-rating field: stars + Clear + hint (rating is no longer required). */ .odf-starfield { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--odf-sp-3); } .odf-starinput__clear { appearance: none; background: none; border: 0; padding: 2px 4px; font: inherit; font-size: var(--odf-fs-sm); color: var(--odf-ink-3); text-decoration: underline; cursor: pointer; } .odf-starinput__clear:hover { color: var(--odf-ink); } .odf-starinput__hint { flex-basis: 100%; font-size: var(--odf-fs-xs); color: var(--odf-ink-3); } .odf-starinput { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 0; } .odf-starinput input { position: absolute; opacity: 0; width: 1px; height: 1px; } .odf-starinput label { cursor: pointer; color: var(--odf-line); } .odf-starinput label .odf-star { width: 26px; height: 26px; } .odf-starinput label:hover, .odf-starinput label:hover ~ label, .odf-starinput input:checked ~ label { color: var(--odf-gold); } .odf-starinput input:focus-visible + label { outline: 2px solid var(--odf-gold); border-radius: 4px; } /* Notices after review/newsletter submits (shared with app surfaces). */ .odf-notice { display: flex; gap: 8px; align-items: flex-start; padding: var(--odf-sp-3) var(--odf-sp-4); border-radius: var(--odf-radius); border: 1px solid var(--odf-line); background: var(--odf-tint); font-size: var(--odf-fs-sm); color: var(--odf-ink-2); margin: 0 0 var(--odf-sp-4); line-height: 1.5; } .odf-notice--ok { border-color: var(--odf-band-verygood); background: color-mix(in srgb, var(--odf-band-verygood) 7%, #fff); color: var(--odf-band-exceptional); } .odf-notice--err { border-color: var(--odf-band-avoid); background: color-mix(in srgb, var(--odf-band-avoid) 7%, #fff); color: var(--odf-band-avoid); } /* --- Brand page: OUR editorial write-up ----------------------------------- Visually distinct from .odf-brandowner (the brand's own blurb) so a reader can always tell whose words they are reading. */ /* --- Our take: an article, not a wall ------------------------------------ This is the longest prose on the page and it rendered as undifferentiated 14px grey directly on the band - nothing to enter on, no rhythm, no reason to start reading. It now sits on its own card, opens on a larger lead paragraph, and lets bolded lines carry a soft green highlight so the sharp sentences ("no dog eats an average") actually catch the eye. NOTE the .odf-prose override. The body carries .odf-prose, which caps max-width at the 68ch measure. That is right for bare text but wrong for a card: the cap applied to the CARD, so padding ate into the measure and the whole thing rendered as a ~460px box floating in a 1100px column. The card now fills its column and the measure moves to the paragraphs, where it belongs. */ /* Reviews with nothing in them yet render no heading, so the block is just the folded "Write a review" line - it should sit quietly, not hold section spacing. */ .odf-reviews--empty { padding-block: 0; margin-top: var(--odf-sp-5); } /* ========================================================================= THEMED SELECTS - custom chevron (founder 2026-07-19: the native arrow sat hard against the right border and read as cramped). MUST live at the END of the file: several of these selectors (.odf-dirsort, .odf-reviews__sort, .odf-fc__field) set the `background` SHORTHAND further up, which would wipe our background-image if we declared it earlier. We restate background-color here for the same reason. ========================================================================= */ .odf-fld select, .odf-dirsort select, .odf-reviews__sort select, .odf-fc__field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--odf-card); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 40px; } /* --- threads ------------------------------------------------------------- */ .odf-thread { margin-top: var(--odf-sp-3); } .odf-thread__count { margin: 0 0 var(--odf-sp-2); font-size: var(--odf-fs-xs); font-weight: 700; color: var(--odf-ink-3); text-transform: uppercase; letter-spacing: .04em; } .odf-thread__list { list-style: none; margin: 0 0 var(--odf-sp-3); padding: 0; } .odf-reply { padding: var(--odf-sp-3) 0 var(--odf-sp-3) var(--odf-sp-3); border-left: 2px solid var(--odf-line); } .odf-reply + .odf-reply { border-top: 0; } /* A reply gets the same face as a review. A thread where the review has a picture and every answer is anonymous grey reads as a person talking to a system, which is the opposite of what a discussion is for. */ .odf-reply__head { display: flex; align-items: flex-start; gap: 10px; } .odf-reply__byline { flex: 1 1 auto; min-width: 0; } .odf-reply__av { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; overflow: hidden; background: var(--odf-tint); color: var(--odf-ink-3); display: grid; place-items: center; font-size: var(--odf-fs-xs); font-weight: 800; } .odf-reply__av img { width: 100%; height: 100%; object-fit: cover; display: block; } .odf-reply__meta { margin: 0 0 4px; font-size: var(--odf-fs-sm); } .odf-reply__when { color: var(--odf-ink-3); font-size: var(--odf-fs-xs); margin-left: 6px; } .odf-reply__body { margin: 0; font-size: var(--odf-fs-sm); line-height: 1.55; color: var(--odf-ink-2); } .odf-reply__actions { display: flex; align-items: center; gap: var(--odf-sp-3); margin-top: 4px; } /* Indentation steps, then STOPS. Every reply still renders at its true place in the tree; beyond the cap it simply stops stepping right, because another indent on a phone leaves a column two words wide. */ .odf-reply--i0 { margin-left: 0; } .odf-reply--i1 { margin-left: var(--odf-sp-4); } .odf-reply--i2 { margin-left: calc(var(--odf-sp-4) * 2); } .odf-reply--i3 { margin-left: calc(var(--odf-sp-4) * 3); } .odf-reply--i4 { margin-left: calc(var(--odf-sp-4) * 4); } .odf-reply--i5 { margin-left: calc(var(--odf-sp-4) * 5); } .odf-review__replylink { display: inline-flex; align-items: center; gap: 5px; font-size: var(--odf-fs-sm); font-weight: 600; color: var(--odf-ink-3); text-decoration: none; } .odf-review__replylink:hover { color: var(--odf-green-deep); } /* The reply box is revealed by its own anchor being the :target - i.e. by the Reply link that points at it. This replaced a

, which needed a second click on a second control: the Reply link scrolled to a box that was still closed, so "Reply" appeared to do nothing. :focus-within keeps it open while being typed in, because navigating to another anchor (or the browser dropping the fragment on submit) would otherwise collapse a half-written reply. */ /* scroll-margin-top keeps the ":target" jump from slamming the form under the sticky header AND from over-scrolling to the very bottom when the reply link sits far down a thread (founder, 30 Jul 2026). Shown state gets a light card frame so it reads as a proper reply composer, not a bare textarea. */ .odf-replyform { display: none; margin-top: var(--odf-sp-3); scroll-margin-top: 96px; } .odf-replyform:target, .odf-replyform:focus-within { display: block; background: var(--odf-tint); border: 1px solid var(--odf-line); border-radius: var(--odf-radius-lg); padding: var(--odf-sp-4); } .odf-replyform__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--odf-sp-3); } /* The composer is a column flex with align-items:flex-start (so the Post reply button keeps its natural width). That also shrinks the textarea's wrapping