/* Best picks articles: "Best dog food for X" at /articles/best-... (engine/api/best_pages.py
   renders them from the articles written in the admin, with live scores from the catalogue). */
.bo-page .article-main h2 { scroll-margin-top: 5rem; }
.bo-trust { border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: .6rem; padding: .8rem 1rem; margin: 2.4rem 0 1.2rem; }
.bo-trust-title { font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.4rem; margin: 0 0 .3rem !important; color: #b45309; }
.bo-trust ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.bo-trust li { margin: .15rem 0; }
.bo-disclosure { font-size: 1rem !important; color: #6b7280 !important; margin: 0 0 1.4rem !important; }
.r1 { color: #c2410c; } .r2 { color: #a16207; } .r3 { color: #4d7c0f; } .r4 { color: #15803d; }
.bo-pick { margin: 2.6rem 0 3rem; scroll-margin-top: 5rem; }
.bo-pick + .bo-pick { padding-top: 3rem; border-top: 2px dashed #fcd34d; }
.bo-best { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem !important; font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.7rem; line-height: 1.1; color: #1f2937; }
.bo-ico { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: .55rem; background: #f59e0b; color: #fff; }
.bo-ico svg { width: 1.55rem; height: 1.55rem; }
.bo-key { color: #c2410c; text-decoration: underline; text-decoration-color: #f59e0b; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.bo-card { border: 4px solid #c2410c; border-radius: .9rem; background: #fff; padding: 1rem 1.15rem 1.15rem; }
.bo-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bo-card-title { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bo-brand { font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: #7c2d12; }
.bo-name { margin: 0 !important; font-family: "Jersey 10", "Jersey 25", cursive !important; font-size: 1.6rem !important; font-weight: 400 !important; line-height: 1.1 !important; }
.bo-name a, .bo-name a:visited { color: #1f2937 !important; text-decoration: none !important; border: 0 !important; background: none !important; }
.bo-name a:hover { color: #b45309; text-decoration: underline; }
.bo-proteins { display: flex; gap: .3rem; margin-top: .2rem; }
.bo-proteins .protein-icon { width: 1.9rem; height: 1.9rem; padding: .2rem; border-radius: .4rem; background: #fff7ed; border: 1px solid #fed7aa; image-rendering: pixelated; }
.bo-score { flex: none; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 6.5rem; }
.bo-bones { display: inline-flex; align-items: center; height: 1.6rem; padding: 0 .2rem; }
.bo-bones img { width: 1.6rem; height: .8rem; margin: 0 -.2rem; transform: rotate(-60deg); image-rendering: pixelated; filter: drop-shadow(1px 0 0 #7c2d12) drop-shadow(-1px 0 0 #7c2d12) drop-shadow(0 1px 0 #7c2d12) drop-shadow(0 -1px 0 #7c2d12); }
.bo-bones img.off { opacity: .35; }
.bo-tier { font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.15rem; }
.bo-num-big { font-family: "Jersey 10", "Jersey 25", cursive; font-size: 3rem; line-height: .85; }
.bo-score-label { font-size: .7rem; color: #6b7280; letter-spacing: .04em; text-transform: uppercase; }
.bo-verdict { margin: 1.8rem .2rem 0 !important; }
.bo-procon { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; margin: 1.8rem .2rem 0; }
.bo-procon h4 { margin: 0 0 .3rem !important; font-family: "Jersey 10", "Jersey 25", cursive !important; font-weight: 400 !important; font-size: 1.2rem !important; }
.bo-procon ul { list-style: none; margin: 0; padding: 0; }
.bo-procon li { position: relative; padding-left: 1.4rem; margin: .25rem 0; font-size: .95rem; line-height: 1.5; }
.bo-like li::before { content: "✓"; position: absolute; left: 0; color: #15803d; font-weight: 700; }
.bo-know li::before { content: "!"; position: absolute; left: .3rem; color: #b45309; font-weight: 700; }
.bo-like h4 { color: #15803d; } .bo-know h4 { color: #b45309; }
.bo-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; margin: .9rem 0 1.1rem; padding: .3rem .9rem; border: 1px solid #fde68a; border-radius: .6rem; background: #fffdf7; }
.bo-specs > div { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid #fef3c7; font-size: .92rem; }
.bo-specs dt { color: #4b5563; } .bo-specs dd { margin: 0; text-align: right; font-weight: 600; }
.bo-actions { display: flex; flex-direction: column; gap: .6rem; }
.bo-actions { padding: 3px; }
.bo-actions .bo-btn { width: 100%; }
.bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem 1.4rem; border-radius: .45rem; border: 2px solid #f59e0b; font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.25rem; text-decoration: none !important; }
/* The header's Find My Dog's Food button: amber, a thin white border inside a dark amber outline */
.bo-btn-main { background: #f59e0b; color: #fff !important; border: 1px solid #fff; outline: 3px solid #b45309; border-radius: .25rem; transition: transform .15s ease-out, background-color .15s ease-out; }
.bo-btn-main:hover { background: #b45309; transform: scale(1.02); }
.bo-btn-amazon { background: #fff; color: #1f2937 !important; border-color: #d1d5db; }
.bo-btn-amazon:hover { border-color: #f59e0b; background: #fffbeb; }
.bo-btn-amazon img { width: 1.4rem; height: 1.4rem; }
.bo-cta { margin: 2.4rem 0; padding: 1.2rem 1.3rem; border-radius: .9rem; background: linear-gradient(135deg, #fffbeb, #fff7ed); border: 2px solid #fcd34d; text-align: center; }
.bo-cta-title { font-family: "Jersey 10", "Jersey 25", cursive; font-size: 1.9rem; margin: 0 0 .3rem !important; color: #1f2937; }
.bo-cta-btn { margin-top: .4rem; font-size: 1.4rem; }
.bo-faq { border: 1px solid #e5e7eb; border-radius: .6rem; margin: 0 0 .6rem; background: #fff; }
.bo-faq summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; }
.bo-faq[open] summary { border-bottom: 1px solid #f3f4f6; }
.bo-faq p { margin: .6rem 1rem .8rem !important; }
.bo-more { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.bo-more a { display: block; padding: .6rem .8rem; border: 1px solid #fcd34d; border-radius: .6rem; background: #fff; color: #1f2937; text-decoration: none; }
.bo-more a:hover { background: #fffbeb; }
.bo-updated { color: #6b7280; font-size: .9rem; }
/* The article layout styles headings, lists and links for long reads; inside a pick they
   give way to the card's own. */
.article-main h3.bo-name { border: 0 !important; text-decoration: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.article-main .bo-procon h4 { font-size: 1.35rem !important; }
.article-main .bo-btn { font-size: 1.4rem !important; }
.article-main .bo-actions .bo-btn-main { font-size: 2rem !important; min-height: 3.7rem; padding: .3rem 1.4rem; line-height: 1; }
.article-main .bo-trust ul { list-style: disc; }
.article-main .bo-trust a, .article-main .bo-cta p a { color: #b45309; text-decoration: underline; text-underline-offset: 2px; }
.article-main .bo-tier { font-size: 1.3rem; }
.article-main .bo-brand { font-size: 1.15rem; }
/* The site's Jersey fonts in the article body only: the header (title, banner, author,
   breadcrumbs, tags) stays as on every article. Jersey 10 for headings, labels, buttons and
   numbers, Jersey 15 for running text, larger since Jersey's letters run small. */
.bo-page .article-main, .bo-page .article-main * { font-family: "Jersey 10", "Jersey 25", cursive !important; font-weight: 400 !important; }
.bo-page .article-main p:not(.bo-best):not(.bo-trust-title):not(.bo-cta-title), .bo-page .article-main li, .bo-page .bo-specs dt, .bo-page .bo-specs dd,
.bo-page .bo-faq p, .bo-page .bo-score-label { font-family: "Jersey 15", "Jersey 10", cursive !important; }
.bo-page .article-main p:not(.bo-best):not(.bo-trust-title):not(.bo-cta-title), .bo-page .article-main li { font-size: 1.25rem !important; line-height: 1.5 !important; color: #374151; }
.bo-page .article-main strong, .bo-page .bo-specs dd { font-family: "Jersey 10", "Jersey 25", cursive !important; color: #1f2937; }
.bo-page .article-main h2 { font-size: 2.2rem !important; line-height: 1.1 !important; }
.bo-page .bo-procon li { font-size: 1.15rem !important; }
.bo-page .bo-specs > div { font-size: 1.1rem; }
.bo-page .bo-faq summary { font-size: 1.35rem; }
.bo-page .bo-more a { font-size: 1.25rem; }
.bo-page .bo-score-label { font-size: .85rem; }
.bo-page .bo-updated { font-size: 1.05rem !important; }
.bo-page .article-main .bo-disclosure a { color: #b45309; text-decoration: underline; text-underline-offset: 2px; }
.bo-page .bo-trust-title { font-size: 1.7rem !important; }
@media (max-width: 560px) {
  .bo-card-top { flex-direction: column-reverse; align-items: stretch; }
  .bo-score { flex-direction: row; justify-content: flex-start; gap: .6rem; }
  .bo-num-big { font-size: 2.4rem; }
  .bo-procon, .bo-specs { grid-template-columns: 1fr; }
  .bo-cta-btn { width: 100%; }
  .bo-best { font-size: 1.45rem; }
}

/* The admin's preview of a page that is not live yet. */
.bo-preview-ribbon { position: fixed; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%); padding: .4rem 1rem; border-radius: 999px; background: #1f2937; color: #fff; font: 600 .85rem system-ui, sans-serif; letter-spacing: .03em; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }
.bo-preview-warn { margin: 1rem auto; max-width: 60rem; padding: .7rem 1rem; border: 2px solid #dc2626; border-radius: .6rem; background: #fef2f2; color: #991b1b; font: 500 .95rem system-ui, sans-serif; }