/* Product Reviews 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; }

/* Featured reviews: wide picture area, left-aligned copy */
.pr-featured .card__media { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f6f9f5, #fff); }
.pr-featured .card__title { font-size: 1.05rem; }

/* ---- Review-round fixes (design fidelity) ---- */
/* Hero trust features: solid green icon discs as in the design */
.pr-feat-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--green-700); color: #fff; box-shadow: 0 0 0 4px var(--green-100); }
.hub-feats .pr-feat-icon .icon { width: 24px; height: 24px; color: #fff; }
/* "View all" links are plain blue text links in the design */
.pr-more { color: #1f6fb8; font-size: .92rem; }
.pr-more:hover { color: var(--teal-800); }
/* Section headings sit a little smaller than the global h2 in the design */
.hub-h2--line { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem); }
/* Affiliate / medical note under featured reviews */
.pr-disclosure { margin: 1.1rem 0 0; font-size: .84rem; align-items: flex-start; }
.pr-disclosure .icon { flex: none; }
/* Promo heads: keep each title on one line on desktop */
.hub-promo__head h2 { font-size: clamp(1.1rem, .9rem + .4vw, 1.22rem); letter-spacing: -.015em; }
/* Latest articles head: icon + compact title, "View All" link on the same row */
#articles-title { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); }
.hub-split .section-head { flex-wrap: nowrap; align-items: flex-start; }
.hub-split .section-head p { font-size: .88rem; }
.hub-split .hub-head-icon__icon { width: 40px; height: 40px; color: #1f6fb8; }
@media (max-width: 640px) { .hub-split .section-head { flex-wrap: wrap; } }
/* Newsletter: input and button on one row */
.hub-news .inline-form .input-wrap { flex: 1 1 170px; min-width: 0; }
.hub-news .inline-form .btn { flex: none; }
.hub-news .inline-form .form-status { flex-basis: 100%; margin: 0; }
.hub-news .inline-form .form-status:empty { display: none; }

/* ---- Push to 95: design density and type scale ---- */
/* Section rhythm: the design packs sections tightly */
#main > .section--tight { padding-block: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
#main > .section--tight + .section--tight { padding-top: .25rem; }
#main .section-head { margin-bottom: .8rem; }
.hub-h2--line { font-size: clamp(1.45rem, 1.15rem + .95vw, 1.9rem); }

/* Hero: shorter band, larger dark lead, heavier title */
.hub-hero .hero__inner { min-height: clamp(330px, 30vw, 390px); padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.5rem, 1rem + 1.2vw, 2rem); }
.hub-hero .breadcrumb { margin-bottom: .75rem; }
.hub-hero .hero__title { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.55rem); font-weight: 800; margin-bottom: .3em; }
.hub-hero .hero__lead { max-width: 30rem; font-size: clamp(1.02rem, .9rem + .45vw, 1.24rem); line-height: 1.3; color: #22343b; margin-bottom: 0; }
.hub-hero .hero__actions { margin-top: 1.1rem; }
.hub-feats { margin-top: 1.15rem; }
.hub-feats li { font-size: .92rem; max-width: 9.5rem; }
.hub-script { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem); }

/* Category cards: 3:2 pictures, compact centred copy */
.grid--6.hub-list { gap: .95rem; }
.hub-cat .card__media { aspect-ratio: 3 / 2; }
.hub-cat .card__body { padding: .6rem .45rem .75rem; gap: .15rem; }
.hub-cat .card__title { font-size: .98rem; line-height: 1.22; }
.hub-cat .card__text { font-size: .8rem; line-height: 1.35; color: #3d4a50; }
.hub-cat .hub-chip-link { margin-top: .45rem; padding: .3rem 1.05rem; border-radius: 5px; }

/* Featured reviews: product fills a wide white picture area, compact copy */
.pr-featured { gap: 1rem; }
.pr-featured .card__media { aspect-ratio: 7 / 4; background: #fff; }
.hub-products .product-card .card__media img { object-fit: contain; padding: .35rem .5rem 0; }
.pr-featured .card__body { padding: .55rem .9rem .85rem; gap: .25rem; }
.pr-featured .card__title { font-size: 1.02rem; line-height: 1.25; }
#main .pr-featured .card__title .ph { font-size: 1em; }
.pr-featured .rating { flex-wrap: nowrap; gap: .4rem; font-size: .88rem; color: var(--text); }
.pr-featured .stars .icon { width: 17px; height: 17px; }
.pr-featured .card__text { font-size: .88rem; line-height: 1.38; color: #3d4a50; }
.pr-featured .card__foot { padding-top: .35rem; }
#main .hub-products .btn, .hub-promo__body .btn { border-radius: 6px; min-height: 36px; }

/* Affiliate / medical note as compact small print */
.pr-disclosure { display: flex; gap: .45rem; align-items: flex-start; margin: .75rem 0 0; padding: 0; background: none; border: 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.pr-disclosure .icon { flex: none; width: 14px; height: 14px; margin-top: .12rem; color: var(--teal-800); }
.pr-disclosure a { color: inherit; }

/* Comparison + guide panels: tighter, picture fills its half, solid check discs */
.hub-promo { gap: .6rem; padding: .8rem 1rem 1rem; }
.hub-promo__body { padding: .5rem; gap: .9rem; }
@media (min-width: 560px) { .hub-promo__body { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; } }
.hub-promo__media { min-height: 190px; }
.hub-promo__body > div:last-child { align-self: center; padding-block: .2rem; }
.hub-promo__body h3 { font-size: 1.12rem; line-height: 1.2; margin: .05rem 0 .4rem; }
.hub-promo__body .check-list { gap: .08rem; margin-bottom: .6rem; }
.hub-promo__body .check-list li { font-size: .88rem; line-height: 1.3; gap: .45rem; }
.hub-promo__body .check-list .icon { width: 15px; height: 15px; margin-top: .1rem; }
.hub-promo__body .check-list .icon circle { fill: var(--green-600); stroke: var(--green-600); }
.hub-promo__body .check-list .icon path { stroke: #fff; stroke-width: 2.6; }

/* Latest articles: wide short pictures, compact text */
.hub-split { gap: 1.25rem; }
.hub-articles { gap: .8rem; }
.hub-article .card__media { aspect-ratio: 12 / 5; }
.hub-article .card__body { padding: .5rem .6rem .65rem; gap: .25rem; }
.hub-article .card__title { font-size: .84rem; line-height: 1.3; }
.hub-meta { font-size: .74rem; gap: .05rem; }
#articles-title { font-size: clamp(1.2rem, 1rem + .6vw, 1.38rem); }
.hub-split .section-head p { font-size: .85rem; margin-top: .1rem; }
.hub-split .hub-head-icon { gap: .7rem; }

/* Newsletter card: compact, checks on one row */
.hub-news { gap: .75rem; padding: 1rem 1.15rem; }
.hub-news__icon { width: 46px; height: 46px; }
.hub-news h2 { font-size: clamp(1.05rem, .95rem + .4vw, 1.18rem); line-height: 1.2; margin-bottom: .3rem; }
.hub-news p { font-size: .84rem; line-height: 1.4; }
.hub-news .inline-form .btn, .hub-news .inline-form input[type="email"] { height: 44px; }
.hub-checks { gap: .35rem .8rem; font-size: .78rem; }

/* ---- Push to 95, pass 2 ---- */
/* Design headings and card titles are navy; blurbs near-black */
#main h1, #main h2, #main h3 { color: #0d3358; }
.hub-hero .hero__lead, .pr-featured .card__text { color: #1d2a30; }
/* Hero: show the whole product group, lighter wash, script fits its disc */
.hub-hero.hero--bleed .hero__bg img { object-position: 70% 88%; }
@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) 33%, rgba(250, 252, 249, .35) 44%, rgba(250, 252, 249, 0) 52%); } }
.hub-script { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.35rem); max-width: 16rem; padding: 1.6rem .9rem; right: clamp(.5rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%) rotate(-6deg); }
/* Product pictures: light grey panel edge to edge, product larger */
.pr-featured .card__media { background: #f4f5f3; }
.hub-products .product-card .card__media img { mix-blend-mode: multiply; transform: scale(1.18); }
.hub-products .product-card:hover .card__media img { transform: scale(1.22); }
/* Promo panels: a little tighter */
.hub-promo { gap: .45rem; padding: .7rem .9rem .75rem; }
.hub-promo__media { min-height: 175px; }
.hub-promo__body .check-list li { font-size: .86rem; line-height: 1.25; }
.hub-promo__body h3 { margin-bottom: .3rem; }
/* Hero picture: fit the band height and sit on the right, so the whole product group shows at design scale */
@media (min-width: 900px) {
  .hub-hero.hero--bleed .hero__bg img { position: absolute; right: 0; top: 0; width: auto; height: 100%; max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .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, 0) 50%); }
  .hub-script { width: 11rem; max-width: none; padding: 1.4rem .6rem; right: clamp(.75rem, 1.6vw, 1.75rem); font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem); }
}
/* Phones: the card is wide enough; no zoom (keeps the picture inside the viewport) */
@media (max-width: 640px) {
  .hub-products .product-card .card__media img, .hub-products .product-card:hover .card__media img { transform: none; }
  .pr-featured .card__media { aspect-ratio: 16 / 10; }
}
/* Category chips line up along the card bottoms; newsletter checks are solid discs like the design */
.hub-cat .hub-chip-link { margin-top: auto; }
.hub-cat .card__text { margin-bottom: .45rem; }
.hub-checks .icon circle { fill: var(--green-600); stroke: var(--green-600); }
.hub-checks .icon path { stroke: #fff; stroke-width: 2.6; }
/* ---- Push to 95, pass 3: last implementable gaps ---- */
.hub-cat .card__title { font-size: 1rem; }
.hub-cat .card__text { font-size: .8rem; line-height: 1.32; }
.hub-promo { gap: .35rem; padding: .65rem .85rem .7rem; }
.hub-promo__head p { font-size: .84rem; }
.hub-promo__media { min-height: 160px; }
.hub-promo__body .check-list li { line-height: 1.2; }
.hub-promo__body .check-list { margin-bottom: .5rem; }
.hub-promo__body .btn { min-height: 34px; padding-block: .4rem; }