/* Best Products Hub — page layer on top of site.css */
/* ---- Hub building blocks (hub-*): hero extras, section heads, card variants, promos, newsletter card ---- */
.hub-hero .hero__inner { min-height: clamp(360px, 31vw, 470px); }
.hub-hero .hero__copy { max-width: 590px; }
.hub-hero .breadcrumb { margin-bottom: 1rem; }
.hub-hero .hero__title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem); line-height: 1.05; }
.hub-hero .hero__title .accent--inline { display: inline; }
.hub-script { max-width: 17rem; text-align: center; line-height: 1.05; padding: 2.25rem 1.25rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0) 100%); }
.hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .97) 0%, rgba(250, 252, 249, .92) 40%, rgba(250, 252, 249, .4) 56%, rgba(250, 252, 249, 0) 70%); }
@media (max-width: 899px) { .hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(180deg, rgba(250, 252, 249, 0) 55%, rgba(250, 252, 249, 1) 100%); } }
.hub-feats { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; }
.hub-feats li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.3; max-width: 10.5rem; }
.hub-feats .icon { width: 34px; height: 34px; color: var(--green-700); }

.hub-h2 { margin: 0; }
.hub-h2--line { display: flex; align-items: center; gap: 1rem; }
.hub-h2--line::after { content: ""; flex: none; width: 46px; height: 3px; border-radius: 2px; background: var(--green-600); }
.hub-h2--under::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--green-600); margin-top: .55rem; }
.hub-head-icon { display: flex; align-items: center; gap: .9rem; }
.hub-head-icon__icon { width: 44px; height: 44px; color: var(--green-700); }
.hub-list { list-style: none; padding: 0; margin: 0; }

/* Category card: picture on top, centred copy, soft "Explore" chip */
.hub-cat .card__media { aspect-ratio: 4 / 3; }
.hub-cat .card__body { align-items: center; text-align: center; gap: .35rem; }
.hub-cat .card__title { font-size: 1rem; }
.hub-cat .card__text { font-size: .82rem; }
.hub-chip-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding: .4rem 1.1rem; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-800); font-weight: 600; font-size: .85rem; position: relative; z-index: 2; }
.hub-chip-link .icon { width: 1em; height: 1em; }
.hub-cat .hub-chip-link { margin-top: .5rem; }

/* Product cards */
.hub-products .product-card .card__media img { padding: .75rem; }
.hub-products .product-card .card__media .badge { border-radius: var(--radius-pill); text-transform: none; letter-spacing: 0; font-size: .74rem; }
.hub-products--center .card__body { align-items: center; text-align: center; }
.hub-products .card__text { font-size: .85rem; }

/* Comparison + buying-guide promo panels */
.hub-promos { display: grid; gap: 1.25rem; }
@media (min-width: 980px) { .hub-promos { grid-template-columns: 1fr 1fr; } }
.hub-promo { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, .8rem + 1vw, 1.35rem); border-radius: var(--radius-lg); background: #eef6fb; border: 1px solid #dbe9f3; }
.hub-promo__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .85rem; align-items: start; }
.hub-promo__head > .icon { width: 40px; height: 40px; color: #1f6fb8; grid-column: 1; grid-row: 1 / span 3; }
.hub-promo__head h2 { grid-column: 2; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin: 0; }
.hub-promo__head p { grid-column: 2; margin: 0; font-size: .85rem; color: var(--muted); }
.hub-promo__head .link-arrow { grid-column: 2; grid-row: 3; font-size: .82rem; color: #1f6fb8; }
@media (min-width: 560px) {
  .hub-promo__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hub-promo__head > .icon { grid-row: 1 / span 2; }
  .hub-promo__head .link-arrow { grid-column: 3; grid-row: 1; padding-top: .3rem; }
  .hub-promo__head p { grid-column: 2 / span 2; grid-row: 2; }
}
.hub-promo__body { position: relative; display: grid; gap: 1rem; padding: .85rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-xs); }
@media (min-width: 560px) { .hub-promo__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } }
.hub-promo__media { border-radius: var(--radius-sm); overflow: hidden; min-height: 200px; background: var(--mint-50); }
.hub-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.hub-kicker { margin: 0; font-size: .76rem; font-weight: 600; color: var(--green-700); }
.hub-promo__body h3 { font-size: 1.15rem; margin: .1rem 0 .6rem; }
.hub-promo__body h3 a { color: inherit; text-decoration: none; }
.hub-promo__body .check-list { gap: .3rem; margin-bottom: .9rem; }
.hub-promo__body .check-list li { font-size: .86rem; }

/* Latest articles + newsletter card */
.hub-split { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .hub-split { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; } }
.hub-articles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.hub-article .card__media { aspect-ratio: 16 / 10; }
.hub-article .card__body { padding: .75rem .85rem .9rem; gap: .35rem; }
.hub-article .card__title { font-size: .9rem; }
.hub-meta { flex-direction: column; gap: .15rem; }
.hub-meta .icon { width: 1em; height: 1em; }
.card__meta .icon { width: 1em; height: 1em; }

.hub-news { position: relative; overflow: hidden; display: grid; gap: 1rem; padding: clamp(1.1rem, .9rem + 1vw, 1.5rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--mint-50), #fff 70%); border: 1px solid var(--mint-100); }
.hub-news__head { display: flex; gap: .85rem; align-items: flex-start; position: relative; z-index: 1; }
.hub-news__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green-700); color: #fff; }
.hub-news__icon .icon { width: 24px; height: 24px; }
.hub-news h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); margin: 0 0 .35rem; padding-right: 2.5rem; }
.hub-news p { margin: 0; font-size: .86rem; color: var(--muted); }
.hub-news .inline-form { position: relative; z-index: 1; }
.hub-news__leaf { position: absolute; right: -24px; top: -12px; width: 96px; opacity: .8; transform: scaleX(-1); pointer-events: none; }
.hub-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--ink); }
.hub-checks li { display: inline-flex; align-items: center; gap: .35rem; }
.hub-checks .icon { color: var(--green-600); width: 1.05em; height: 1.05em; }

/* Small circle arrow and row variants */
.hub-circle { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); }
.hub-circle .icon { width: 15px; height: 15px; }

/* Process steps with arrows between them */
.hub-steps { margin-top: 1rem; }
.hub-steps .step__icon { background: var(--green-700); color: #fff; box-shadow: 0 0 0 6px var(--green-100); }
@media (min-width: 1000px) {
  .hub-steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; }
  .hub-steps .step { position: relative; }
  .hub-steps .step:not(:last-child)::after { content: ""; position: absolute; right: -1.45rem; top: 24px; width: 10px; height: 10px; border-top: 2px solid var(--teal-800); border-right: 2px solid var(--teal-800); transform: rotate(45deg); }
}

/* Placeholder values in narrow cards: break at spaces, keep stars on their own line */
#main .rating { flex-wrap: wrap; row-gap: .1rem; }
#main .rating .ph, #main .card__title .ph, #main .price .ph, #main .card__meta .ph { word-break: normal; overflow-wrap: anywhere; }
#main .card__title .ph { font-size: .82em; }
.hub-products--center .rating { flex-direction: column; }
#main > .section--tight + .section--tight { padding-top: .5rem; }




/* Review fixes (2026-10-04) */
/* Category cards: "Explore" chips line up at the bottom of every card, like the design */
.hub-cat .hub-chip-link { margin-top: auto; padding: .45rem 1.6rem; }
.hub-cat .card__text { margin-bottom: .6rem; }
/* Promo panel titles stay on one line next to their link at desktop widths */
@media (min-width: 980px) { .hub-promo__head h2 { font-size: clamp(1.1rem, .8rem + .5vw, 1.3rem); } }
/* Latest articles: "View all" link sits on the right of the heading row, as in the design */
@media (min-width: 1000px) {
  .hub-split .section-head { flex-wrap: nowrap; align-items: center; }
  .hub-split .section-head .link-pill { flex: none; }
}
/* Affiliate / medical note under the top-rated products */
.hub-disclosure { margin: 1.1rem 0 0; font-size: .84rem; align-items: flex-start; }
.hub-disclosure .icon { flex: none; }

/* ---- Push to 95 (2026-10-05): design density, navy headings, plain blue links ---- */
#main { --bp-ink: #0b2d52; --bp-blue: #1667c8; }
#main h1, #main h2, #main h3 { color: var(--bp-ink); }
#main > .section--tight { padding-block: 1.1rem; }
#main > .section--tight + .section--tight { padding-top: .6rem; }
#main .section-head { margin-bottom: .85rem; align-items: center; }
#main .section-head p { margin-top: .1rem; font-size: .95rem; color: #3f5163; }
.hub-more { color: var(--bp-blue); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.hub-more:hover { color: var(--green-700); }

/* Hero: design height (~390 px at 1280), larger lead, filled trust icons */
.hub-hero .hero__inner { min-height: 0; padding-block: 1.1rem 1.6rem; }
.hub-hero.hero--bleed .hero__bg img { object-position: 50% 92%; }
.hub-hero .hero__title { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem); margin-bottom: .3em; }
.hub-hero .hero__lead { font-size: clamp(1.02rem, .9rem + .45vw, 1.3rem); line-height: 1.38; color: #24425a; max-width: 34rem; }
.hub-hero .hero__actions .btn--lg { min-height: 54px; padding-inline: 1.6rem; font-size: 1.1rem; }
.hub-feats { margin-top: 1.5rem; gap: .9rem 2rem; }
.hub-feats li { font-size: .95rem; color: #24425a; }
.hub-feats .icon { width: 42px; height: 42px; stroke-width: 2.4; }
.hub-feats li:last-child .icon { fill: currentColor; }
.hub-feats__leaf .icon { padding: 8px; border-radius: 50%; background: var(--green-700); color: #fff; }
.hub-script { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); padding: 1.6rem 1.2rem; }
@media (min-width: 900px) { .hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .97) 0%, rgba(250, 252, 249, .9) 36%, rgba(250, 252, 249, .25) 48%, rgba(250, 252, 249, 0) 58%); } }

/* Section titles at the design's scale */
.hub-h2--line { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.hub-head-icon .hub-h2 { font-size: clamp(1.4rem, 1.05rem + .9vw, 1.8rem); }
.hub-head-icon__icon { width: 46px; height: 46px; }
.hub-trophy { color: var(--green-700); }

/* Category cards: tighter, bolder titles */
.hub-list.grid--6 { gap: .95rem; }
.hub-cat .card__media { aspect-ratio: 11 / 8; }
.hub-cat .card__body { padding: .7rem .6rem .8rem; gap: .25rem; }
.hub-cat .card__title { font-size: 1.12rem; font-weight: 700; }
.hub-cat .card__text { font-size: .86rem; line-height: 1.38; color: #4f5f6e; margin-bottom: .55rem; }
.hub-cat .hub-chip-link { padding: .4rem 1.5rem; font-size: .92rem; border-radius: 6px; }

/* Top-rated product cards: white cut-out pictures, inline rating, square button */
.hub-products .product-card .card__media img { padding: .5rem; }
.hub-products .product-card .card__media .badge { left: .6rem; top: .6rem; }
.hub-products .card__body { padding: .55rem .7rem .85rem; gap: .3rem; }
.hub-products .card__title { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.hub-products--center .rating { flex-direction: row; flex-wrap: nowrap; gap: .3rem; font-size: .8rem; color: #33475b; white-space: nowrap; }
.hub-products .stars .icon { width: 13px; height: 13px; }
.hub-products .card__foot { padding-top: .25rem; justify-content: center; }
.hub-btn-rect { border-radius: 5px; min-height: 38px; font-size: .92rem; max-width: 150px; }
.hub-disclosure { margin-top: .8rem; padding: .55rem .85rem; font-size: .76rem; line-height: 1.45; gap: .55rem; }
.hub-disclosure .icon { width: 16px; height: 16px; margin-top: .1rem; }

/* Comparison / guide promos: tighter, picture fills the white panel, filled check marks */
.hub-promo { gap: .7rem; padding: .85rem 1rem 1rem; background: #edf7fe; }
.hub-promo__head h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.hub-promo__head > .icon { width: 42px; height: 42px; }
.hub-promo__head .link-arrow { color: var(--bp-blue); }
.hub-promo__head p { color: #3f5163; }
.hub-promo__body { padding: .6rem; gap: 1.1rem; align-items: stretch; }
.hub-promo__media { min-height: 220px; }
.hub-promo__body > div:last-child { align-self: center; }
.hub-promo__body h3 { font-size: 1.22rem; font-weight: 700; margin: .1rem 0 .4rem; }
.hub-promo__body .check-list { gap: .12rem; margin-bottom: .7rem; }
.hub-promo__body .check-list li { font-size: .9rem; gap: .5rem; color: #33475b; }
.hub-promo__body .check-list .icon { width: 16px; height: 16px; margin-top: .18rem; fill: var(--green-700); stroke: #fff; color: #fff; }
.hub-promo__body .btn { border-radius: 5px; }

/* Latest articles: short pictures, compact text; newsletter: one-row form */
.hub-split { gap: 1.75rem; }
.hub-articles { gap: .8rem; }
.hub-article .card__media { aspect-ratio: 2 / 1; }
.hub-article .card__body { padding: .5rem .65rem .65rem; gap: .25rem; }
.hub-article .card__title { font-size: .86rem; font-weight: 700; line-height: 1.3; }
.hub-meta { font-size: .74rem; gap: 0; }
.hub-news { gap: .75rem; padding: 1rem 1.2rem 1.1rem; background: #f6faf5; }
.hub-news h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); margin-bottom: .25rem; }
.hub-news__icon { width: 44px; height: 44px; }
.hub-news .inline-form { flex-wrap: nowrap; gap: .5rem; }
.hub-news .inline-form .input-wrap { flex: 1 1 auto; min-width: 0; }
.hub-news .inline-form input[type="email"], .hub-news .inline-form .btn { height: 44px; }
.hub-news .inline-form .btn { flex: none; border-radius: 6px; }
.hub-news .form-status:empty { display: none; }
.hub-checks { gap: .3rem 1rem; font-size: .85rem; }
.hub-checks .icon { fill: var(--green-700); stroke: #fff; width: 1.15em; height: 1.15em; }
@media (min-width: 1000px) { .hub-split .section-head { margin-bottom: .7rem; } }
@media (max-width: 420px) { .hub-news .inline-form { flex-wrap: wrap; } .hub-news .inline-form .btn { width: 100%; } }
/* Hero picture sits in the right part of the band, like the design's product group */
@media (min-width: 900px) {
  .hub-hero.hero--bleed { background: linear-gradient(90deg, #fafcf9 0%, #f4f7f3 100%); }
  .hub-hero.hero--bleed .hero__bg { left: 30%; }
  .hub-hero.hero--bleed .hero__bg img { object-position: 100% 100%; }
  .hub-hero.hero--bleed .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, 1) 0%, rgba(250, 252, 249, .75) 12%, rgba(250, 252, 249, 0) 30%); }
  .hub-hero .hero__lead { max-width: 40rem; }
}
.hub-hero .hero__inner { padding-block: 1.3rem 2.1rem; }
.hub-script { max-width: 10rem; padding: 1.4rem 1rem; }
#main .hub-products .rating { flex-wrap: nowrap; flex-direction: row; justify-content: center; gap: .25rem; font-size: .76rem; }
#main .hub-products .rating .ph { white-space: nowrap; }
.hub-products .stars .icon { width: 12px; height: 12px; }
.hub-products .product-card .card__media { aspect-ratio: 6 / 5; }
.hub-products .card__body { padding-inline: .45rem; }
@media (min-width: 980px) { .hub-promo__head h2 { font-size: 1.28rem; white-space: nowrap; } }
.hub-promo__body { flex: 1; }
.hub-promo__body h3 { font-size: 1.15rem; line-height: 1.22; }
.hub-promo__body .check-list li { line-height: 1.35; }
.hub-promo__body .check-list { gap: .2rem; }
.hub-split .hub-head-icon .hub-h2 { font-size: clamp(1.3rem, 1rem + .7vw, 1.55rem); }
.hub-split .section-head p { font-size: .88rem; }
.hub-split .hub-head-icon__icon { color: #1f6fb8; width: 42px; height: 42px; stroke-width: 2.4; }
.hub-split .section-head { align-items: flex-end; }
.hub-article .card__media { aspect-ratio: 12 / 5; }
.hub-checks { font-size: .82rem; gap: .3rem .8rem; flex-wrap: nowrap; }
@media (max-width: 1099px) { .hub-checks { flex-wrap: wrap; } }
.hub-news p { font-size: .84rem; line-height: 1.5; }
@media (min-width: 1000px) { .hub-split .section-head { gap: 1rem; } .hub-split .section-head p { font-size: .82rem; white-space: nowrap; } .hub-split .hub-more { font-size: .85rem; } }
@media (max-width: 899px) { .hub-hero.hero--bleed .hero__bg img { object-position: 88% 92%; } }
@media (max-width: 599px) { .hub-h2--line { display: block; } .hub-h2--line::after { display: block; margin-top: .5rem; } }
.hub-script { max-width: 11.5rem; }
@media (min-width: 1000px) { .hub-split .section-head p { white-space: normal; } .hub-split .section-head .hub-more { flex: none; } }
.hub-products .product-card .card__media img { object-fit: cover; padding: 0; }
@media (min-width: 900px) { .hub-hero.hero--bleed .hero__bg { top: auto; height: 122%; } }
@media (min-width: 900px) { .hub-hero.hero--bleed .hero__bg { left: 33%; } }
/* Tighter promo text column and one-line articles intro (design density) */
.hub-promo__body .check-list li { font-size: .86rem; line-height: 1.28; }
.hub-promo__body .check-list { margin-bottom: .6rem; }
.hub-promo__body h3 { font-size: 1.1rem; }
.hub-promo__media { min-height: 200px; }
.hub-promo__head p { font-size: .82rem; }
@media (min-width: 1000px) {
  .hub-split .section-head { position: relative; display: block; }
  .hub-split .section-head .hub-more { position: absolute; right: 0; top: .55rem; }
  .hub-split .hub-head-icon .hub-h2 { padding-right: 13rem; }
  .hub-split .section-head p { white-space: nowrap; }
}
/* Mid widths: keep 6 / 3 cards per row, keep the hero picture clear of the copy, let promo titles wrap */
@media (min-width: 900px) { #main .hub-list.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899px) { #main .hub-list.grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1199px) { .hub-hero.hero--bleed .hero__bg { left: 46%; } .hub-hero .hero__copy { max-width: 520px; } }
@media (min-width: 980px) and (max-width: 1199px) { .hub-promo__head h2 { white-space: normal; } }
@media (min-width: 900px) and (max-width: 1199px) { #main .hub-products .rating { flex-wrap: wrap; row-gap: 0; } }