/* Best-of Roundup Detail — layout pieces unique to this page (prefix br-) */

/* Hero */
.br-hero .hero__inner { min-height: clamp(340px, 30vw, 420px); padding-block: 1.25rem 1.75rem; }
.br-hero .hero__bg img { object-position: 70% 30%; }
.br-hero .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .98) 0%, rgba(250, 252, 249, .92) 40%, rgba(250, 252, 249, .25) 56%, rgba(250, 252, 249, 0) 66%); }
.br-hero .hero__script { top: auto; bottom: clamp(1.5rem, 6vw, 5rem); right: clamp(1rem, 3vw, 3rem); font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
.br-title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.1rem); color: var(--teal-900); margin-bottom: .35em; max-width: 16ch; }
.br-hero .hero__lead { font-size: 1.02rem; max-width: 32rem; }
.br-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: center; margin-top: 1rem; font-size: .82rem; }
.br-meta .author-box { gap: .65rem; }
.br-meta .author-box img { width: 48px; height: 48px; }
.br-meta .author-box__name { font-size: .88rem; }
.br-meta .author-box__name a { color: inherit; text-decoration: none; }
.br-meta .icon { color: var(--green-600); }
.br-meta__dates { margin: 0; color: var(--text); line-height: 1.5; }

/* Trust bar */
.br-trust { background: #fff; border-color: var(--line); }
.br-trust__list { list-style: none; margin: 0 auto; padding: .85rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.25rem; font-size: .82rem; color: var(--ink); }
.br-trust__list li { display: inline-flex; align-items: center; gap: .45rem; }
.br-trust__list .icon { color: var(--green-600); }
.br-trust__list .stars .icon { color: var(--gold-500); }

/* Body */
.br-body { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.br-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1.2rem + 1vw, 2rem); min-width: 0; }
.br-h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); color: var(--teal-900); margin-bottom: .4rem; }
.br-summary { display: flex; gap: 1rem; align-items: flex-start; }
.br-summary__icon { flex: none; color: var(--green-600); }
.br-summary__icon .icon { width: 40px; height: 40px; fill: var(--green-100); }
.br-summary p { font-size: .92rem; }
.br-sec-head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.br-sec-head__icon { color: var(--gold-500); }
.br-sec-head__icon .icon { width: 38px; height: 38px; }
.br-sec-head p { margin: 0; color: var(--muted); font-size: .9rem; }

.br-table { font-size: .8rem; min-width: 720px; }
.br-table th, .br-table td { padding: .55rem .6rem; vertical-align: middle; }
.br-table thead th { text-align: center; font-size: .78rem; line-height: 1.25; }
.br-table tbody th { width: auto; background: #fff; }
.br-table td:nth-child(4), .br-table td:nth-child(7), .br-table td:nth-child(8), .br-table td:first-child { text-align: center; }
.br-prod { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--teal-900); }
.br-prod img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.br-price { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.br-table .stars .icon { width: 13px; height: 13px; }
.br-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-500); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-xs); }
.br-num--sm { width: 26px; height: 26px; font-size: .8rem; background: var(--green-600); }

/* Pick cards */
.br-picks { display: grid; gap: 1.25rem; }
.br-pick { display: grid; gap: 1rem; padding: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.br-pick:hover { transform: none; }
@media (min-width: 640px) { .br-pick { grid-template-columns: 150px minmax(0, 1fr); } .br-pick__pc { grid-column: 1 / -1; } .br-pick__side { grid-column: 1 / -1; } }
@media (min-width: 820px) { .br-pick__pc { grid-column: auto; } .br-pick { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .br-pick { grid-template-columns: 140px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); } .br-pick__side { grid-column: auto; } }
.br-pick__media { position: relative; display: grid; gap: .5rem; justify-items: start; }
.br-pick__media .br-num { position: absolute; left: 0; top: 0; z-index: 1; }
.br-pick__media .badge { margin-left: 40px; margin-top: 6px; }
.br-pick__media img { width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: contain; justify-self: center; }
.br-pick__main { display: grid; gap: .4rem; align-content: start; }
.br-pick__title { font-size: 1.2rem; margin: 0; color: var(--teal-900); }
.br-pick__main .rating { margin: 0; }
.br-pick__desc { font-size: .84rem; margin: 0; }
.br-pick__feats { gap: .25rem; }
.br-pick .check-list li, .br-pick .x-list li { font-size: .8rem; gap: .45rem; }
.br-pick .check-list .icon, .br-pick .x-list .icon { width: 1.05em; height: 1.05em; }
.br-pick__pc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem .85rem; display: grid; gap: .35rem; align-content: start; }
.br-pc-label { margin: 0; font-weight: 700; font-size: .82rem; color: var(--green-700); }
.br-pc-label--cons { color: var(--red-600); margin-top: .35rem; }
.br-pick__pc .check-list, .br-pick__pc .x-list { gap: .25rem; }
.br-pick__side { display: grid; gap: .6rem; align-content: start; }
.br-specs { width: 100%; border-collapse: collapse; font-size: .76rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.br-specs th, .br-specs td { padding: .35rem .55rem; border-bottom: 1px solid var(--line); text-align: left; }
.br-specs th { font-weight: 600; color: var(--ink); width: 40%; }
.br-specs tr:last-child > * { border-bottom: 0; }
.br-note { font-size: .7rem; color: var(--muted); margin: 0; text-align: center; }

/* Info cards */
.br-info { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.br-info__card { display: flex; gap: .85rem; align-items: flex-start; }
.br-info__icon { flex: none; color: var(--green-700); }
.br-info__icon .icon { width: 34px; height: 34px; }
.br-info__card h2 { font-size: 1rem; margin-bottom: .35rem; color: var(--teal-900); }
.br-info__card p { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.br-info__card .link-arrow { font-size: .82rem; }
.br-final h2 { font-size: 1.15rem; }
.br-final > .icon { width: 28px; height: 28px; }

/* Sidebar */
.br-side { display: grid; gap: 1.25rem; min-width: 0; }
.br-side__title { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; color: var(--teal-900); margin-bottom: .75rem; }
.br-side__title .icon { color: var(--green-600); }
.br-toc a { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; font-size: .86rem; }
.br-toc a .icon { color: var(--green-600); }
.br-toppick { text-align: center; display: grid; justify-items: center; gap: .35rem; }
.br-toppick .br-side__title { justify-self: start; }
.br-toppick img { width: 170px; height: 170px; object-fit: contain; }
.br-toppick__name { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--teal-900); margin: 0; }
.br-toppick__label { margin: 0; font-weight: 600; color: var(--green-700); font-size: .9rem; }
.br-toppick__rating { margin: 0 0 .5rem; }
.br-toppick__rating .stars .icon { width: 20px; height: 20px; }
.br-trustbox .check-list li { font-size: .86rem; }

/* Newsletter */
.br-newsletter { background: linear-gradient(100deg, #eef6ea, #f7fbf5 60%, #eef6ea); }
@media (min-width: 1100px) { .br-newsletter { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; } }
.br-newsletter__script { font-size: 1.5rem; margin: 0; color: var(--teal-800); }
@media (max-width: 1099px) { .br-newsletter__script { display: none; } }
@media (max-width: 999px) { .br-body .layout-sidebar { grid-template-columns: minmax(0, 1fr); } }
#top-picks .table-wrap { position: relative; }   /* keeps visually-hidden button text inside the scroll box */

/* Placeholder values: wrap between words, never mid-token */
#main .rating { flex-wrap: wrap; }
#main .rating .ph, #main td.ph, #main .price .ph { overflow-wrap: normal; word-break: normal; }
.br-table .ph { overflow-wrap: normal; word-break: normal; }
.br-table { min-width: 640px; }
.br-table th, .br-table td { padding: .5rem .45rem; }
.br-prod .ph, .br-table td:nth-child(5).ph { overflow-wrap: anywhere; }
.br-table .btn { padding-inline: .8rem; }

/* ---- Review fixes 2026-10-04 ---- */
/* Hero: two-line title like the design, script note top-right */
.br-title { max-width: 21ch; }
.br-hero .hero__copy { max-width: 640px; }
.br-hero .hero__script { top: clamp(1.5rem, 4vw, 3rem); bottom: auto; right: clamp(1rem, 6vw, 7rem); }
.br-trust__list a { color: inherit; text-decoration: none; }
.br-trust__list a:hover { text-decoration: underline; }

/* Affiliate + medical note before the first affiliate content */
.br-disclosure { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .78rem; line-height: 1.5; color: var(--muted); background: var(--bg-soft, #f6f8f5); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; }
.br-disclosure .icon { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--teal-800); }
.br-disclosure a { color: var(--green-700); font-weight: 600; }

/* Comparison table: product names never split letter-by-letter */
.br-table { min-width: 780px; }
.br-prod .ph { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.br-table tbody th { min-width: 175px; }
.br-table td:last-child { padding-right: .7rem; }

/* Pick badges as pills (design) */
.br-pick__media .badge { white-space: nowrap; }

/* Info cards span the full container under the picks + sidebar (design) */
.br-body { padding-bottom: 1.5rem; }
.br-after { display: grid; gap: clamp(1.5rem, 1.2rem + 1vw, 2rem); padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
@media (min-width: 900px) { .br-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .br-after { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .br-after > .br-info { grid-column: 1 / -1; }
}
.br-nl-wrap { padding-top: 0; }

/* ---- Push to 95 (2026-10-05) ---- */
/* Hero: design proportions (shorter band, smaller title and lead) */
.br-hero .hero__inner { min-height: clamp(300px, 24vw, 330px); padding-block: 1rem 1.25rem; }
.br-hero .breadcrumb { margin-bottom: .6rem; font-size: .78rem; }
.br-title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.08; margin-bottom: .4em; }
.br-hero .hero__lead { font-size: .95rem; line-height: 1.5; max-width: 30rem; margin-bottom: 0; }
.br-meta { margin-top: .85rem; font-size: .78rem; gap: .75rem 2.5rem; }
.br-meta .author-box img { width: 42px; height: 42px; }
.br-trust__list { padding: .6rem 0; font-size: .8rem; }

/* Body: design sidebar width */
.br-body { padding-top: 1.5rem; padding-bottom: 1.25rem; }
@media (min-width: 1000px) { .br-body .layout-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; } }
.br-main { gap: 1.1rem; }

/* Quick summary with leaf art on the right */
.br-summary { position: relative; padding: 1rem 1.25rem; overflow: hidden; }
.br-summary > div { padding-right: 0; }
.br-summary p { font-size: .86rem; line-height: 1.55; }
.br-summary__art { display: none; }
@media (min-width: 640px) {
  .br-summary > div { padding-right: 96px; }
  .br-summary__art { display: block; position: absolute; right: 6px; bottom: -10px; width: 112px; height: 112px; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
}

/* Disclosure: small print like the design's fine print, no extra box */
.br-disclosure { background: none; border: 0; padding: 0 .25rem; font-size: .72rem; line-height: 1.45; margin-top: -.35rem; }

/* Comparison table: one line per cell like the design */
.br-sec-head { margin-bottom: .65rem; }
.br-sec-head__icon .icon { width: 32px; height: 32px; }
.br-table { min-width: 760px; font-size: .78rem; }
.br-table th, .br-table td { padding: .42rem .45rem; }
.br-table td:nth-child(3), .br-table td:nth-child(6) { white-space: nowrap; }
.br-table tbody th { min-width: 0; }
.br-table .rating { flex-wrap: nowrap; white-space: nowrap; gap: .3rem; }
.br-table .btn { padding: .35rem .95rem; min-height: 0; }
.br-prod img { width: 30px; height: 30px; }

/* Pick cards: denser, design column proportions, badge never covers the name */
.br-picks { gap: .9rem; }
.br-pick { padding: .85rem; gap: .85rem; }
@media (min-width: 640px) { .br-pick { grid-template-columns: 150px minmax(0, 1fr); } }
@media (min-width: 820px) { .br-pick { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .br-pick { grid-template-columns: 150px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.br-pick__media { gap: .35rem; }
.br-pick__media .br-num { width: 28px; height: 28px; font-size: .9rem; }
.br-pick__media .badge { margin-left: 32px; margin-top: 3px; font-size: .66rem; padding: .22rem .55rem; white-space: normal; max-width: 118px; line-height: 1.2; }
.br-pick__media img { max-width: 150px; }
.br-pick__main { gap: .3rem; }
.br-pick__title { font-size: 1.08rem; }
.br-pick__main .rating { flex-wrap: wrap; font-size: .76rem; }
.br-pick__desc { font-size: .8rem; line-height: 1.45; }
.br-pick__feats { gap: .15rem; }
.br-pick .check-list li, .br-pick .x-list li { font-size: .76rem; line-height: 1.35; }
.br-pick__pc { padding: .6rem .7rem; gap: .25rem; }
.br-pick__pc .check-list, .br-pick__pc .x-list { gap: .15rem; }
.br-pc-label { font-size: .78rem; }
.br-pc-label--cons { margin-top: .2rem; }
.br-pick__side { gap: .45rem; }
.br-specs { font-size: .72rem; }
.br-specs th, .br-specs td { padding: .26rem .5rem; }
.br-pick__side .btn { min-height: 0; padding-block: .55rem; font-size: .9rem; }
.br-note { font-size: .64rem; line-height: 1.35; }
@media (max-width: 639px) {
  .br-pick__media { grid-template-columns: auto 1fr; align-items: center; }
  .br-pick__media img { grid-column: 1 / -1; max-width: 130px; }
}

/* Sidebar: compact panels; FAQ + Final Thoughts live here (no extra band under the cards) */
.br-side { gap: 1rem; }
.br-side .panel { padding: 1rem 1.1rem; }
.br-side__title { font-size: 1rem; margin-bottom: .55rem; }
.br-toc a { padding: .26rem .4rem; font-size: .8rem; }
.br-toppick img { width: 150px; height: 150px; }
.br-toppick__name { font-size: 1rem; }
.br-toppick__label { font-size: .84rem; }
.br-trustbox .check-list { gap: .4rem; }
.br-trustbox .check-list li { font-size: .8rem; }
.br-faqs .accordion { gap: .4rem; }
.br-faqs .accordion summary { padding: .55rem .75rem; font-size: .8rem; gap: .5rem; }
.br-faqs .accordion summary::after { font-size: 1.1rem; }
.br-faqs .accordion .accordion__body { padding: .6rem .75rem .75rem; font-size: .8rem; }
.br-final p { font-size: .8rem; line-height: 1.55; margin: 0; }
.br-final .br-side__title .icon { width: 22px; height: 22px; }

/* Info cards: compact, single-line headings, solid icons like the design */
.br-after { padding-bottom: 1rem; }
.br-info { gap: .9rem; }
.br-info__card { padding: .85rem 1rem; gap: .75rem; }
.br-info__icon .icon { width: 32px; height: 32px; }
.br-info__card:first-child .br-info__icon { color: var(--green-600); }
.br-info__card:first-child .br-info__icon path { fill: currentColor; stroke: currentColor; }
.br-info__card:first-child .br-info__icon circle { fill: #fff; stroke: #fff; }
.br-info__card:nth-child(2) .br-info__icon { color: var(--teal-800); }
.br-info__card:nth-child(2) .br-info__icon .icon { stroke-width: 2.8; }
.br-info__icon--solid { color: var(--green-600); }
.br-info__card h2 { font-size: .92rem; margin-bottom: .25rem; }
.br-info__card p { font-size: .76rem; line-height: 1.45; margin-bottom: .35rem; }
.br-info__card .link-arrow { font-size: .76rem; }

/* Newsletter: one compact row with script note + plant art (design) */
.br-nl-wrap { padding-bottom: 1.5rem; }
.br-newsletter { padding: .9rem 1.25rem; gap: 1rem; }
.br-newsletter .newsletter__icon { width: 52px; height: 52px; }
.br-newsletter .newsletter__icon .icon { width: 26px; height: 26px; }
.br-newsletter h2 { font-size: 1.12rem; }
.br-newsletter p { font-size: .82rem; }
.br-newsletter .inline-form input[type="email"], .br-newsletter .inline-form .btn { height: 42px; }
.br-newsletter .newsletter__note { font-size: .7rem; margin-top: .3rem; }
.br-nl-art { display: none; }
@media (min-width: 1100px) {
  .br-newsletter { grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr) 220px; }
  .br-nl-art { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; margin: -.9rem -1.25rem -.9rem 0; align-self: stretch; }
  .br-nl-art img { width: 120px; height: 100%; max-height: 120px; object-fit: cover; object-position: 50% 70%; mix-blend-mode: multiply; }
  .br-newsletter__script { font-size: 1.3rem; line-height: 1.05; }
}
/* round 2 */
#main .br-table .rating { flex-wrap: nowrap; }
#main .br-table .stars .icon { width: 11px; height: 11px; }
.br-sec-head__icon .icon { fill: var(--gold-500); stroke: #b7791f; stroke-width: 1.4; }
@media (min-width: 1100px) { .br-pick { grid-template-columns: 150px minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); } }
#main .br-pick__main .rating { flex-wrap: nowrap; white-space: nowrap; font-size: .72rem; gap: .3rem; }
.br-pick__main .stars .icon { width: 13px; height: 13px; }
.br-pick__desc { font-size: .78rem; }
.br-newsletter .br-newsletter__script { font-size: 1.35rem; line-height: 1.05; color: var(--teal-800); }
@media (min-width: 1100px) {
  .br-newsletter { grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr) 250px; }
  .br-nl-art img { width: 135px; max-height: 130px; height: 130px; object-fit: cover; object-position: 55% 75%; }
}
.br-table { font-size: .74rem; }
.br-table th, .br-table td { padding: .4rem .34rem; }
.br-table .br-price { font-size: .78rem; }
.br-table .btn { padding: .3rem .8rem; font-size: .78rem; }
.br-table .rating { gap: .25rem; font-size: .74rem; }
.br-prod { gap: .4rem; }
.br-table th, .br-table td { padding: .4rem .3rem; }
.br-specs th, .br-specs td { padding: .2rem .5rem; line-height: 1.35; }
.br-pick__side .btn { padding-block: .45rem; }
.br-pick__side { gap: .4rem; }
.br-h2 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); }
.br-summary__icon .icon { width: 34px; height: 34px; }
.br-info__icon .icon { width: 36px; height: 36px; }
@media (max-width: 639px) { .br-trust__list { flex-direction: column; align-items: flex-start; gap: .45rem; } }
/* round 3: section heights toward the design */
.br-hero .hero__inner { min-height: clamp(260px, 21vw, 290px); padding-block: .85rem 1rem; }
.br-summary { padding: .8rem 1.1rem; }
.br-summary .br-h2 { margin-bottom: .2rem; }
.br-summary p { font-size: .84rem; line-height: 1.5; }
.br-table th, .br-table td { padding-block: .3rem; }
.br-table thead th { padding-block: .4rem; }
.br-table .btn { padding-block: .25rem; }
.br-info__card { padding: .7rem .9rem; gap: .7rem; }
.br-info__card h2 { margin-bottom: .15rem; }
.br-info__card p { font-size: .74rem; line-height: 1.4; margin-bottom: .25rem; }
.br-newsletter { padding: .65rem 1.25rem; }
.br-newsletter p:not(.br-newsletter__script) { font-size: .8rem; line-height: 1.45; }
.br-newsletter .newsletter__note { margin-top: .2rem; }
@media (min-width: 1100px) {
  .br-nl-art { margin: -.65rem -1.25rem -.65rem 0; }
  .br-nl-art img { height: 92px; max-height: 92px; width: 110px; }
  .br-newsletter .br-newsletter__script { font-size: 1.2rem; }
}
/* round 4: TOC icon treatment like the design (filled title badge, filled icons for the last four links) */
.br-toc .br-side__title .icon { width: 22px; height: 22px; padding: 3px; border-radius: 5px; background: var(--green-600); color: #fff; }
.br-toc li:nth-child(n+7) a .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green-600); color: #fff; stroke-width: 2.4; }