/* ============================================================
   Standalone advertorial. No theme CSS, no framework.
   style.css is: this reset -> fonts -> advertorial -> ranked review.
   Every rule below is prefixed .hgag- (article) or .hgl- (review),
   so the two components can be edited without colliding.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
/* The Shopify theme shipped a Tailwind-style preflight (`* { margin: 0 }`) and the
   section CSS was written on top of it: `.hgl` never zeroes paragraph margins
   itself, it just adds spacing back where it wants it (`.hgl-prose p`, `.hgl-row__text`).
   Without this the browser default `1em` on <p> reappears and blows the criteria
   rows apart. Restores parity with the store. */
*, *::before, *::after { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchor targets stop with a little air above them rather than flush to the
   viewport edge. */
:target { scroll-margin-top: 24px; }
/* Honour the OS "reduce motion" setting: jump instead of animating. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; background: #ffffff; color: #1a1a1a;
       font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* The Shopify theme defined these two custom properties and the section CSS
   leans on them to control weight. Declared here so the sections behave the
   same standalone as they did on the store. */
:root { --font-weight-regular: 400; --font-weight-bold: 700;
        --font-heading-family: 'Inter', sans-serif;
        --font-heading-family-override: 'Inter', sans-serif;
        --font-body-family: 'Inter', sans-serif; }

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2-variations'),
       url('fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable-italic.woff2') format('woff2-variations'),
       url('fonts/inter-variable-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}


/* ==================== ARTICLE (.hgag-) ==================== */

/* =========================================================================
   HG Advertorial Good. Metrics and palette ported from the source lander's
   stylesheet. All sizes px (theme root font-size is 10px). Bold text scopes
   --font-weight-regular because the theme forces it on bare p/div with
   !important; see the file header.
   ========================================================================= */

.hgag:not(:has(.hgag-sticky)) { padding-bottom: 0; }
.hgag {
  --hgag-ink: #1a1a1a;
  --hgag-deep: #1a1a1a;
  --hgag-accent: #ffc107;     /* brand amber, used as a HIGHLIGHT background */
  --hgag-light: #ffe9b0;      /* pale amber: text on dark */
  --hgag-bright: #ffc107;     /* brand amber: CTA backgrounds */
  --hgag-onaccent: #1a1a1a;   /* text ON --hgag-accent, the highlighter background */
  /* Label ON a CTA (--hgag-bright). Split out of --hgag-onaccent because the two
     backgrounds diverge once a page leaves the brand palette: an amber CTA needs
     a dark label, a blue one needs white, while the highlighter always wants ink.
     Defaults to --hgag-onaccent, so any page that does not set color_on_cta
     renders exactly as it did before this token existed. */
  --hgag-oncta: var(--hgag-onaccent);
  /* Corner treatment for CTAs only (not the decorative 99px rules and bars).
     Pill is the brand default; the de-branded editorial pages set 0 so the
     sticky matches the square review buttons in the listicle tail below it. */
  --hgag-cta-radius: 99px;
  --hgag-alert: #fe4643;
  --hgag-soft: #fbfbf7;
  --hgag-line: #d1d5db;
  --hgag-rail-bg: #1a1a1a;

  background: #ffffff;
  color: var(--hgag-deep);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  position: relative;
  padding-bottom: 84px;
}
.hgag *, .hgag *::before, .hgag *::after { box-sizing: border-box; }
.hgag img { max-width: 100%; display: block; }
.hgag p { margin: 0; }
.hgag button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

/* The theme sets font-family on bare p/div/a/span; restate on our elements. */
.hgag p, .hgag div, .hgag a, .hgag span, .hgag h1, .hgag button, .hgag strong, .hgag em {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- announcement bar ---------- */
.hgag-ann { background: var(--hgag-ink); }
.hgag-ann__inner {
  display: flex; justify-content: center; align-items: center; height: 38px;
}
.hgag-ann__text {
  --font-weight-regular: 500;
  color: #ffffff; font-size: 14px; font-weight: 500; text-transform: uppercase;
}
.hgag a.hgag-ann__link { --font-weight-regular: 700; color: #ffffff; font-weight: 700; text-decoration: none; }
.hgag-ann__timer {
  --font-weight-regular: 700;
  display: none; padding: 5px; margin-left: 6px; border-radius: 3px;
  background: var(--hgag-light); color: var(--hgag-ink);
  font-size: 14px; font-weight: 700; line-height: 1.4; text-transform: uppercase;
}
.hgag-ann__timer.is-on { display: block; }

/* ---------- header ---------- */
.hgag-head { border-bottom: 0; background: var(--hgag-ink); position: relative; z-index: 1; }
.hgag-head__inner {
  height: 55px; padding: 11px 15px;
  display: flex; justify-content: space-between; align-items: center;
}
.hgag a.hgag-head__logo { display: flex; align-items: center; max-width: 172px; text-decoration: none; }
.hgag-head__logo img { width: auto; height: auto; max-width: 100%; max-height: 34px; }
.hgag-head__word { --font-weight-regular: 700; font-size: 20px; font-weight: 700; color: #ffffff; }
.hgag a.hgag-head__cta {
  --font-weight-regular: 700;
  display: block; border-radius: var(--hgag-cta-radius); background: var(--hgag-bright);
  width: 160px; padding: 13px 0; text-align: center; text-decoration: none;
  color: var(--hgag-oncta); font-size: 14px; font-weight: 700; line-height: 1.4;
  text-transform: uppercase;
}
.hgag a.hgag-head__cta:hover { opacity: .9; }

/* ---------- shell ---------- */
.hgag-wrap { width: 100%; }
.hgag-main { width: 100%; }

/* ---------- trustpilot / title / meta ---------- */
/* ---------- breadcrumb ----------
   Reads as a news article's position trail. Kept to the article column and
   left-aligned at every width, since a centred breadcrumb reads as decoration
   rather than navigation. */
.hgag-crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin: 26px 14px 18px; padding: 0;
  font-size: 15px; line-height: 1.3;
}
/* qualified with `a.` so it beats the section's own `.hgag a { color: inherit }` */
.hgag a.hgag-crumbs__item { color: #4a4a4a; text-decoration: none; }
.hgag a.hgag-crumbs__item:hover { color: var(--hgag-ink); text-decoration: underline; }
.hgag .hgag-crumbs__item { color: #4a4a4a; }
.hgag .hgag-crumbs__item--here { --font-weight-regular: 700; color: var(--hgag-ink); font-weight: 700; }
.hgag-crumbs__sep { display: inline-flex; color: #b9b9b9; }
.hgag-crumbs__sep svg { width: 13px; height: 13px; display: block; }

.hgag-tp { margin: 30px auto 8px; padding: 5px 16px; text-align: center; }
.hgag-tp img { width: auto; height: 18px; margin: 0 auto; aspect-ratio: 899 / 56; }

.hgag .hgag-headline {
  --font-weight-regular: 700; --font-weight-bold: 700;
  --font-heading-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading-family-override: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0 14px 14px; text-align: left;
  font-size: clamp(30px, 8.2vw, 40px); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.015em; text-wrap: balance;
}
/* The colour lives on the span: the theme forces a literal colour on bare h1
   with !important, and a nested span is outside that selector's reach. */
.hgag .hgag-headline__t { display: block; color: var(--hgag-deep); font: inherit; }
.hgag-meta {
  margin: 0 14px 26px; color: #8a8a8a; text-align: left;
  font-size: 17px; font-weight: 400; line-height: 1.4;
}

/* Sub-heading: sits between the big `subtitle` statements and body copy, so a
   long section can be broken into scannable parts without every heading
   shouting at the same volume. */
.hgag .hgag-h3 {
  --font-weight-regular: 700; --font-weight-bold: 700;
  margin: 34px 14px 12px; color: var(--hgag-deep);
  font-size: 21px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; text-wrap: balance;
}
/* Footnote: study references and small print under a claim. Scoped under .hgag
   because a bare class loses to the theme's paragraph reset, which zeroed the
   margin and pulled it flush to the column edge. */
.hgag .hgag-note {
  margin: 6px 14px 24px; color: #6f6f6f;
  font-size: 13px; line-height: 1.5;
}

/* ---------- byline ---------- */
.hgag-byline {
  display: flex; align-items: center; gap: 11px;
  margin: 0 14px 26px; padding: 0;
}
.hgag-byline__ph {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  background: #f0f0f0;
}
.hgag-byline__txt { display: flex; flex-direction: column; min-width: 0; }
.hgag-byline__name {
  --font-weight-regular: 700;
  color: var(--hgag-ink); font-size: 15px; font-weight: 700; line-height: 1.3;
}
.hgag-byline__pre { --font-weight-regular: 400; color: #6f6f6f; font-weight: 400; }
.hgag-byline__role { color: #6f6f6f; font-size: 13.5px; line-height: 1.35; }

/* ---------- images ---------- */
/* aspect-ratio reserves the box BEFORE the image arrives. Without it these
   rendered 402x0 and popped in on load, which reads as scroll lag. */
.hgag-img {
  margin: 26px 14px; border-radius: 5px; overflow: hidden; transform: translateZ(0);
  aspect-ratio: var(--hgag-ar, 16 / 9); background: #f0f0f0;
}
.hgag-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hgag-img--ph {
  display: flex; align-items: center; justify-content: center; min-height: 200px;
  background: #f0f0f0; border: 2px dashed #c4c4c4;
  --font-weight-regular: 700; font-size: 12px; font-weight: 700; color: #8a8a8a;
}

/* ---------- body text ----------
   Sized for the 50+ reader this page targets: 18px is the comfortable floor on
   a phone (15px was below it), with line-height opened to 1.6 so long
   paragraphs stay easy to track. */
.hgag-text p {
  margin: 22px 14px; color: var(--hgag-deep);
  font-size: 18px; font-weight: 400; line-height: 1.6;
}
.hgag-text p strong { --font-weight-regular: 700; color: var(--hgag-deep); font-weight: 700; }
/* Two emphasis levels in body copy, so bold keeps its meaning:
     <strong>            = bold, the load-bearing claim in a paragraph
     <strong><em>        = amber highlight, reserved for the turn of the argument
   Richtext settings strip class attributes, so the second level has to be
   expressed with nested tags the editor allows. */
.hgag-text p strong em,
.hgag-text p em strong {
  --font-weight-regular: 700;
  font-style: normal; font-weight: 700;
  background: var(--hgag-accent); color: var(--hgag-onaccent);
  padding: 0 5px; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Lists inside body copy. Two flavours: a plain timeline (`hgag-steps`) and a
   benefit checklist (`hgag-checks`). The check is drawn in CSS rather than the
   source's emoji: emoji render differently per platform and are banned from
   customer UI here. */
.hgag-list { margin: 20px 14px; padding: 0; list-style: none; }
.hgag-list li {
  position: relative; margin: 0 0 12px; padding-left: 30px;
  color: var(--hgag-deep); font-size: 18px; font-weight: 400; line-height: 1.55;
}
.hgag-list li:last-child { margin-bottom: 0; }
.hgag-list li strong { --font-weight-regular: 700; font-weight: 700; color: var(--hgag-deep); }

/* timeline: small amber dot */
.hgag-list--steps li::before {
  content: ''; position: absolute; left: 8px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hgag-accent);
}
/* checklist: amber disc with a drawn tick, in place of the source's emoji */
.hgag-list--checks li { padding-left: 32px; }
.hgag-list--checks li::before {
  content: ''; position: absolute; left: 0; top: .26em;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--hgag-accent);
}
.hgag-list--checks li::after {
  content: ''; position: absolute; left: 6.5px; top: .5em;
  width: 4px; height: 8px;
  border-right: 2px solid var(--hgag-onaccent);
  border-bottom: 2px solid var(--hgag-onaccent);
  transform: rotate(42deg);
}
.hgag .hgag-text a { color: var(--hgag-deep); text-decoration: underline; }

/* ---------- quote ---------- */
.hgag-quote {
  margin: 21px 14px; border-radius: 5px; background: var(--hgag-deep);
  padding: 15px; display: flex; box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);
}
.hgag-quote::before {
  content: ''; display: block; margin-right: 12px;
  width: 4px; min-width: 4px; border-radius: 99px; background: var(--hgag-light);
}
.hgag-quote__body p {
  --font-weight-regular: 500;
  margin: 0; color: #ffffff; font-size: 19px; font-style: italic;
  font-weight: 500; line-height: 115%;
}
.hgag-quote__body p strong { --font-weight-regular: 700; color: var(--hgag-light); font-weight: 700; }

/* ---------- subtitle ---------- */
.hgag-sub { margin: 35px 14px 0; }
.hgag-sub p {
  --font-weight-regular: 700;
  margin: 0; color: var(--hgag-deep); font-size: 24px; font-weight: 700; line-height: 100%;
}
.hgag-sub p strong {
  --font-weight-regular: 700; font-weight: 700;
  background: var(--hgag-accent); color: var(--hgag-onaccent);
  padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- text over image ---------- */
/* Text-over-image. The copy used to be absolutely positioned inside a fixed
   350px box, so on a phone it ran down over the dark product jar and the green
   type became unreadable. Now the box grows with its own text (min-height keeps
   the photo present), the image sits behind it anchored low so the jar stays
   clear of the copy, and a white scrim guarantees contrast whatever the photo
   crops to. */
.hgag-toi {
  margin: 26px 14px; min-height: 430px; position: relative;
  border-radius: 5px; overflow: hidden; transform: translateZ(0);
  background: #f4f4f2;
}
.hgag-toi img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
/* Solid band behind the copy, fading out below it, so the product never sits
   under the type no matter how the photo crops. */
.hgag-toi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 78%;
  background: linear-gradient(180deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.97) 52%,
    rgba(255,255,255,.72) 70%,
    rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 1;
}
.hgag-toi__text { position: relative; z-index: 2; margin: 30px 22px 26px; }
/* This is the pivot of the whole page: the objection, then the answer. It reads
   as one statement, so the two parts sit close and the answer carries the
   accent rather than being another line of the same weight. */
.hgag-toi__main { margin-bottom: 14px; }
.hgag-toi__main p {
  --font-weight-regular: 700;
  margin: 0; color: var(--hgag-ink); text-align: center;
  font-size: clamp(21px, 5.6vw, 27px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance;
}
.hgag-toi__main p strong {
  --font-weight-regular: 700; font-weight: 700;
  background: var(--hgag-accent); color: var(--hgag-onaccent);
  padding: 0 5px; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* the answer: amber underline rather than a second block of bold caps, so it
   reads as the resolution instead of competing with the question above it */
.hgag-toi__small {
  --font-weight-regular: 700;
  display: block; width: fit-content; margin: 0 auto;
  color: var(--hgag-ink); text-align: center;
  font-size: clamp(14px, 3.7vw, 17px); font-weight: 700;
  line-height: 1.3; letter-spacing: .01em; text-transform: uppercase;
  text-wrap: balance;
  border-bottom: 3px solid var(--hgag-accent); padding-bottom: 3px;
}

/* ---------- usp list ---------- */
.hgag-usp { margin: 24px 14px; }
.hgag-usp__hd {
  --font-weight-regular: 700;
  margin-bottom: 24px; color: var(--hgag-deep); font-size: 24px; font-weight: 700; line-height: 1.2;
}
.hgag-usp__item { margin-bottom: 21px; padding-bottom: 18px; border-bottom: 1px solid var(--hgag-line); }
.hgag-usp__head { display: flex; align-items: center; margin-bottom: 12px; }
.hgag-usp__head img { width: 35px; min-width: 35px; height: 35px; margin-right: 13px; }
.hgag-usp__head p {
  --font-weight-regular: 700;
  color: var(--hgag-deep); font-size: 18px; font-weight: 700; line-height: 1.4;
}
.hgag-usp__body { color: var(--hgag-deep); font-size: 18px; font-weight: 400; line-height: 1.55; }
.hgag-rail__ann p { font-size: 18px; line-height: 1.4; }

/* ---------- warning ---------- */
.hgag-warn {
  margin: 24px 14px; border-radius: 5px; background: var(--hgag-deep);
  padding: 18px 17px; display: flex;
}
.hgag-warn::before {
  content: ''; display: block; margin-right: 12px;
  width: 4px; min-width: 4px; border-radius: 99px; background: var(--hgag-alert);
}
.hgag-warn__hd {
  --font-weight-regular: 700;
  color: var(--hgag-alert); font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 8px;
}
.hgag-warn__text p { margin: 0 0 16px; color: #ffffff; font-size: 18px; font-weight: 400; line-height: 1.55; }
.hgag-warn__text p:last-child { margin-bottom: 0; }

/* ---------- upsell (usp) ---------- */
.hgag-uu { margin: 40px 14px; }
.hgag-uu__sub {
  --font-weight-regular: 700;
  color: var(--hgag-deep); text-align: center; font-size: 21px; font-weight: 700;
  line-height: 1.2; margin-bottom: 12px;
}
.hgag-uu__hd {
  --font-weight-regular: 700;
  color: var(--hgag-deep); text-align: center; font-size: 26px; font-weight: 700;
  line-height: 1.2; margin-bottom: 21px;
}
.hgag-uu__img { width: 100%; border-radius: 5px; height: 350px; object-fit: cover; margin-bottom: 20px; }
.hgag-uu__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 6px; margin-bottom: 21px; }
.hgag-uu__item { display: flex; align-items: center; }
.hgag-uu__item svg { width: 19px; min-width: 19px; height: 19px; margin-right: 7px; color: var(--hgag-ink); }
.hgag-uu__item p {
  --font-weight-regular: 500;
  color: #000000; font-size: 14px; font-weight: 500; line-height: 1.4;
}

/* ---------- stock bar ---------- */
.hgag-stock { margin: 0 0 15px; }
.hgag-stock__bar {
  position: relative; width: 100%; height: 6px; border-radius: 99px;
  border: 1px solid var(--hgag-deep); margin-bottom: 8px; display: block;
}
.hgag-stock__bar span {
  display: block; position: absolute; top: -1px; left: -1px; height: 6px;
  border-radius: 99px; background: var(--hgag-alert);
}
.hgag-stock__text {
  --font-weight-regular: 500;
  color: #000000; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.4;
}
.hgag-stock__text span { --font-weight-regular: 700; color: var(--hgag-alert); font-weight: 700; }

/* ---------- animated-border CTA ---------- */
@keyframes hgagSpin { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
.hgag-glow {
  margin-bottom: 8px; width: 100%; height: 55px; border-radius: 30px;
  background: var(--hgag-bright); position: relative; overflow: hidden;
  padding: 5px; transform: translateZ(0);
}
.hgag-glow::before {
  content: ''; display: block;
  background: conic-gradient(var(--hgag-bright), var(--hgag-bright), var(--hgag-bright), var(--hgag-bright), #fff8e6, #fff);
  width: 110%; padding-bottom: 216%; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); border-radius: 100%; z-index: 2;
  animation: hgagSpin 2.5s linear infinite;
}
.hgag a.hgag-glow__btn {
  --font-weight-regular: 700;
  position: absolute; width: calc(100% - 10px); height: 45px; border-radius: var(--hgag-cta-radius);
  background: var(--hgag-bright); display: flex; align-items: center; justify-content: center;
  z-index: 3; color: var(--hgag-oncta); text-align: center; text-decoration: none;
  font-size: clamp(17px, 5vw, 23px); font-weight: 700; line-height: 1.2;
}
.hgag a.hgag-glow__btn:hover { opacity: .92; }
@media (prefers-reduced-motion: reduce) { .hgag-glow::before { animation: none; } }

/* ---------- atc strip + payment icons ---------- */
.hgag-atc { display: flex; margin: 0 auto 15px; width: fit-content; flex-wrap: wrap; justify-content: center; }
.hgag-atc__item {
  --font-weight-regular: 500;
  color: var(--hgag-deep); font-size: 13px; font-weight: 500; line-height: 18px;
  padding: 0 12px; border-right: 1px solid var(--hgag-deep);
}
.hgag-atc__item:first-child { padding-left: 0; }
.hgag-atc__item:last-child { padding-right: 0; border-right: none; }

.hgag-pay { display: flex; margin: 0 auto; width: fit-content; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hgag-pay__item { display: block; width: 36px; height: 24px; border-radius: 2px; }
.hgag-pay__item img { width: 100%; height: 100%; }

/* ---------- review band ---------- */
.hgag-rev { padding: 38px 14px; background: var(--hgag-soft); }
.hgag-rev__hd {
  --font-weight-regular: 700;
  margin: 0 auto; padding: 0 20px; color: var(--hgag-deep); text-align: center;
  font-size: 24px; font-weight: 700; line-height: 1.2;
}

/* ---------- upsell (medium) ---------- */
.hgag-um { padding: 40px 14px; }
.hgag-um__sub {
  --font-weight-regular: 700;
  color: var(--hgag-deep); font-size: 21px; font-weight: 700; line-height: 1.2; margin-bottom: 12px;
}
.hgag-um__hd {
  --font-weight-regular: 700;
  color: var(--hgag-deep); font-size: 26px; font-weight: 700; line-height: 1.2; margin-bottom: 21px;
}
.hgag-um__desc { color: #000000; font-size: 18px; font-weight: 400; line-height: 24px; text-align: center; margin-bottom: 12px; }
.hgag-um__panel { border-radius: 5px; background: var(--hgag-ink); padding: 21px 15px; }
.hgag-um__desktop { display: none; }
.hgag-um__img { width: 100%; margin-bottom: 16px; }
.hgag-um__panel .hgag-stock__bar { border-color: #ffffff; }
.hgag-um__panel .hgag-stock__text { color: #ffffff; }
.hgag-um__panel .hgag-atc__item { color: #ffffff; border-right-color: #ffffff; }
.hgag a.hgag-um__btn {
  --font-weight-regular: 700;
  display: block; width: 100%; max-width: 500px; background: var(--hgag-bright);
  border-radius: var(--hgag-cta-radius); padding: 18px 0; text-decoration: none; color: var(--hgag-oncta);
  text-align: center; font-size: 19px; font-weight: 700; line-height: 1.4;
  margin: 0 auto 8px;
}
.hgag a.hgag-um__btn:hover { opacity: .9; }
.hgag-um__trust { max-width: 412px; width: 100%; margin: 0 auto 12px; }
.hgag-um__benefit {
  --font-weight-regular: 700;
  max-width: 412px; width: 100%; margin: 0 auto 15px; color: #ffffff;
  text-align: center; font-size: 28px; font-weight: 700; line-height: 1.2;
}

/* ---------- faq ---------- */
.hgag-faq { margin: 40px 14px; }
.hgag-faq__hd {
  --font-weight-regular: 500;
  color: var(--hgag-ink); font-size: 26px; font-weight: 500; line-height: 1.2; margin-bottom: 21px;
}
.hgag-faq__items { margin-bottom: 21px; }
.hgag-faq__item { border-bottom: 1px solid #e8e8e8; margin-bottom: 17px; }
.hgag-faq__item--hidden { display: none; }
.hgag-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 9px; padding: 0; text-align: left;
  color: var(--hgag-ink); font-size: 14px; font-weight: 400; line-height: 1.4;
}
.hgag-faq__btn {
  flex: 0 0 auto; background: #e8e8e8; width: 24px; height: 24px; border-radius: 24px;
  display: flex; justify-content: center; align-items: center;
}
.hgag-faq__btn svg { width: 12px; height: 12px; display: block; }
.hgag-faq__minus { display: none; }
.hgag-faq__item.is-open .hgag-faq__plus { display: none; }
.hgag-faq__item.is-open .hgag-faq__minus { display: block; }
.hgag-faq__a {
  display: none; color: var(--hgag-ink); font-size: 14px; font-weight: 400;
  line-height: 140%; margin-bottom: 9px;
}
.hgag-faq__item.is-open .hgag-faq__a { display: block; }
.hgag-faq__more {
  --font-weight-regular: 700;
  text-decoration: underline; color: #000000; font-size: 14px; font-weight: 700; line-height: 1.4; padding: 0;
}

/* ---------- right rail (desktop only) ---------- */
.hgag-rail { display: none; }

/* ---------- footer ---------- */
.hgag-foot { background: var(--hgag-ink); }
.hgag-foot__top { padding: 35px 9px 24px 12px; border-bottom: 1px solid #3d4d45; }
.hgag-foot__logo { margin: 0 auto 15px; width: 202px; height: auto; }
.hgag-foot__word {
  --font-weight-regular: 700;
  color: #ffffff; text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 15px;
}
.hgag-foot__links { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 24px; flex-wrap: wrap; }
.hgag a.hgag-foot__link { color: #ffffff; font-size: 13px; font-weight: 400; text-decoration: none; }
.hgag a.hgag-foot__link:hover { text-decoration: underline; }
.hgag-foot__dot { display: block; width: 5px; height: 5px; border-radius: 5px; background: #ffffff; }
.hgag-foot .hgag-pay { margin-bottom: 12px; }
.hgag-foot .hgag-pay__item { width: 30px; height: 19px; }
.hgag-foot__copy {
  color: #ffffff; text-align: center; font-size: 12px; font-weight: 400;
  line-height: 1.4; text-transform: uppercase;
}
.hgag-foot__disc {
  padding: 24px 9px 23px 12px; color: #87928c; font-size: 11px; font-weight: 300; line-height: 15px;
}

/* ---------- sticky mobile CTA ---------- */
.hgag-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  flex-direction: column; align-items: center; gap: 11px;
  padding: 12px 5px 14px; justify-content: center;
  /* Keep the fine print clear of the iPhone home indicator. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #ffffff; box-shadow: 0 -15px 24px 0 rgba(1,41,0,.5); z-index: 5;
}
/* The sticky is a CTA, so it reads from the CTA tokens like every other button
   on the page rather than from --hgag-deep. On a page that never sets
   color_bright/color_on_cta this is the same dark pill it always was. */
.hgag a.hgag-sticky__btn {
  --font-weight-regular: 700;
  width: 100%; padding: 18px 0; color: var(--hgag-oncta); text-align: center;
  font-size: clamp(16px, 5.2vw, 19px); font-weight: 700; line-height: 1.4;
  border-radius: var(--hgag-cta-radius);
  background: var(--hgag-bright); text-decoration: none;
  /* Caps set ~15% wider than lowercase. Measured: the label runs 303px at 19px,
     against a 325px inner width at the 335px floor CLAUDE.md requires, so the
     clamp tops out at 19px and only steps down below ~365px. */
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
/* Fine print under the CTA. Muted so it reads as a footnote, not a second CTA.
   The button/note spacing lives on the flex parent as `gap`, NOT as a margin
   here: this section's own `.hgag p { margin: 0 }` is (0,1,1) and would beat a
   single class, and gate 4 bans winning that with !important. */
.hgag-sticky__note {
  --font-weight-regular: 400;
  padding: 0 8px;
  color: #6b6b6b; font-size: 12.5px; font-weight: 400; line-height: 1.35; text-align: center;
}

/* =========================== >= 800px =========================== */
@media screen and (min-width: 800px) {
  .hgag { padding-bottom: 84px; }
  .hgag-head__inner { height: 90px; padding: 0 30px; max-width: 1520px; margin: auto; }
  .hgag a.hgag-head__logo { max-width: 233px; }
  .hgag-head__logo img { max-height: 52px; }
  .hgag a.hgag-head__cta { width: 286px; padding: 22px 0; font-size: 21px; font-weight: 500; line-height: 1.2; --font-weight-regular: 500; }
  .hgag-ann__inner { height: 45px; }
  .hgag-ann__text { font-size: 17px; }
  .hgag-ann__timer { margin-left: 9px; font-size: 17px; line-height: 1.4; }

  .hgag-wrap { padding: 0 30px; max-width: 800px; width: 100%; margin: 0 auto; }

  .hgag-crumbs { margin: 34px 0 24px; gap: 8px; font-size: 17px; }
  .hgag-crumbs__sep svg { width: 15px; height: 15px; }
  .hgag-tp { margin: 0 auto 16px 0; padding: 6px 0; text-align: left; }
  .hgag-tp img { height: 25px; margin: 0; }
  .hgag .hgag-headline { margin: 0 0 28px; font-size: 52px; line-height: 1.08; }
  .hgag-meta { margin: 0 0 20px; font-size: 24px; line-height: 1.2; }
  .hgag .hgag-h3 { margin: 46px 0 16px; font-size: 30px; }
  .hgag .hgag-note { margin: 8px 0 30px; font-size: 15px; }
  .hgag-byline { margin: 0 0 38px; gap: 14px; }
  .hgag-byline__ph { width: 54px; height: 54px; }
  .hgag-byline__name { font-size: 19px; }
  .hgag-byline__role { font-size: 17px; }
  .hgag-img { margin: 24px 0; border-radius: 10px; }
  .hgag-text p { margin: 24px 0 32px; font-size: 22px; line-height: 1.5; }
  .hgag-list { margin: 24px 0 32px; }
  .hgag-list li { font-size: 22px; padding-left: 38px; margin-bottom: 16px; }
  .hgag-list--checks li { padding-left: 42px; }
  .hgag-list--checks li::before { width: 24px; height: 24px; }
  .hgag-list--checks li::after { left: 8px; width: 5px; height: 10px; }
  .hgag-quote { margin: 32px 0; padding: 24px 34px; }
  .hgag-quote::before { margin-right: 15px; width: 8px; min-width: 8px; }
  .hgag-quote__body p { font-size: 28px; line-height: 110%; }
  .hgag-sub { margin: 60px 0 0; }
  .hgag-sub p { font-size: 42px; line-height: 115%; }
  .hgag-toi { margin: 32px 0; min-height: 620px; border-radius: 10px; }
  .hgag-toi__text { margin: 46px 48px 40px; }
  .hgag-toi__main { margin-bottom: 21px; }
  .hgag-toi__main p { font-size: 38px; line-height: 1.14; }
  .hgag-toi__small { font-size: 21px; line-height: 1.2; }
  .hgag-usp { margin: 60px 0 0; }
  .hgag-usp__hd { margin-bottom: 32px; font-size: 42px; line-height: 1.2; }
  .hgag-usp__item { margin-bottom: 24px; padding-bottom: 24px; }
  .hgag-usp__head { margin-bottom: 16px; }
  .hgag-usp__head img { width: 60px; min-width: 60px; height: 60px; margin-right: 16px; }
  .hgag-usp__head p { font-size: 28px; line-height: 1.2; }
  .hgag-usp__body { font-size: 22px; line-height: 125%; }
  .hgag-warn { margin: 38px 0; padding: 24px 34px; }
  .hgag-warn::before { margin-right: 24px; width: 8px; min-width: 8px; }
  .hgag-warn__hd { font-size: 28px; line-height: 1.2; margin-bottom: 13px; }
  .hgag-warn__text p { margin: 0 0 21px; font-size: 19px; line-height: 110%; }
  .hgag-uu { margin: 60px 0 75px; }
  .hgag-uu__sub { font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
  .hgag-uu__hd { font-size: 42px; line-height: 1.2; margin-bottom: 24px; }
  .hgag-uu__img { border-radius: 10px; margin-bottom: 24px; height: 550px; }
  .hgag-uu__items { grid-template-columns: repeat(4, 1fr); gap: 0 20px; margin-bottom: 32px; }
  .hgag-uu__item { flex-direction: column; }
  .hgag-uu__item svg { width: 32px; min-width: 32px; height: 32px; margin-right: 0; margin-bottom: 12px; }
  .hgag-uu__item p { font-size: 21px; line-height: 1.2; text-align: center; }
  .hgag-stock { margin: 0 0 24px; }
  .hgag-stock__bar, .hgag-stock__bar span { height: 8px; }
  .hgag-stock__bar { margin-bottom: 15px; }
  .hgag-stock__text { font-size: 24px; line-height: 1.2; }
  .hgag-glow { margin-bottom: 12px; height: 70px; border-radius: 35px; padding: 10px; }
  .hgag a.hgag-glow__btn { width: calc(100% - 20px); height: 50px; border-radius: 35px; font-size: 32px; line-height: 1.2; }
  .hgag-atc { margin: 0 auto 21px; }
  .hgag-atc__item { font-size: 22px; line-height: 1.2; padding: 0 15px; }
  .hgag-pay__item { width: 52px; height: 35px; }
  .hgag-rev { padding: 45px 28px; }
  .hgag-rev__hd { max-width: 600px; font-size: 42px; line-height: 1.2; padding: 0 3px; }
  .hgag-um { padding: 60px 0; }
  .hgag-um__sub { text-align: center; font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
  .hgag-um__hd { text-align: center; font-size: 42px; line-height: 1.2; margin-bottom: 32px; }
  .hgag-um__desc { font-size: 22px; line-height: 28px; }
  .hgag-um__panel { border-radius: 10px; padding: 32px 26px; }
  .hgag-um__mobile { display: none; }
  .hgag-um__desktop { display: flex; }
  .hgag-um__left { width: 257px; min-width: 257px; align-self: stretch; margin-right: 24px; object-fit: cover; }
  .hgag-um__right { width: calc(100% - 281px); }
  .hgag-um__panel .hgag-stock__bar, .hgag-um__panel .hgag-stock__bar span { height: 9px; }
  .hgag-um__panel .hgag-stock__bar { margin-bottom: 16px; }
  .hgag-um__panel .hgag-stock__text { font-size: 17px; line-height: 1.4; }
  .hgag a.hgag-um__btn { max-width: unset; padding: 21px 0; font-size: 24px; line-height: 1.2; margin: 0 auto 12px; }
  .hgag-um__panel .hgag-atc { margin: 0 auto 16px; }
  .hgag-um__panel .hgag-atc__item { font-size: 18px; line-height: 1.4; }
  .hgag-faq { margin: 60px 0; }
  .hgag-faq__hd { font-size: 42px; line-height: 1.2; margin-bottom: 32px; }
  .hgag-faq__items { margin-bottom: 32px; }
  .hgag-faq__item { margin-bottom: 21px; }
  .hgag-faq__q { margin-bottom: 16px; font-size: 22px; line-height: 1.2; }
  .hgag-faq__btn { width: 38px; height: 38px; border-radius: 38px; }
  .hgag-faq__btn svg { width: 19px; height: 19px; }
  .hgag-faq__a { font-size: 22px; line-height: 140%; margin-bottom: 16px; }
  .hgag-faq__more { font-size: 24px; line-height: 1.2; }
  .hgag-foot__top { padding: 50px 0; }
  .hgag-foot__logo { margin: 0 auto 17px; width: 274px; }
  .hgag-foot__links { gap: 32px; }
  .hgag a.hgag-foot__link { font-size: 18px; }
  .hgag-foot__dot { width: 8px; height: 8px; border-radius: 8px; }
  .hgag-foot .hgag-pay { margin-bottom: 15px; }
  .hgag-foot .hgag-pay__item { width: 45px; height: 28px; }
  .hgag-foot__copy { font-size: 15px; line-height: 1.4; }
  .hgag-foot__disc { padding: 28px 30px; margin: auto; text-align: center; font-size: 16px; line-height: 1.4; max-width: 1263px; }
}

/* =========================== >= 992px =========================== */
@media screen and (min-width: 992px) {
  .hgag-sticky { display: none; }
  .hgag { padding-bottom: 0; }
}

/* =========================== >= 1430px =========================== */
@media screen and (min-width: 1430px) {
  .hgag-wrap {
    max-width: 1520px; padding: 56px 30px; margin: 0 auto;
    display: flex; align-items: flex-start; position: relative;
  }
  .hgag-main { width: 100%; max-width: 100%; margin-right: 130px; }
  /* Rail styling comes from the page's EXTERNAL stylesheet (advertorial-lp-1.css),
     which overrides the section's own inline <style>. These are those values. */
  .hgag-rail {
    display: block; width: 40%; border-radius: 20px; background: var(--hgag-rail-bg);
    height: fit-content; position: sticky; top: 24px; overflow: hidden;
  }
  .hgag-rail__ann { padding: 12px; background: var(--hgag-rail-ann); width: 100%; text-align: center; }
  .hgag-rail__ann p {
    --font-weight-regular: 400;
    font-size: 22px; color: var(--hgag-oncta); margin: 0; line-height: 1em;
  }
  .hgag-rail__inner { padding: 12px; }
  .hgag-rail__head {
    --font-weight-regular: 700;
    font-size: 20px; line-height: 1.4em; margin: 4px auto 0; max-width: 300px;
    color: #ffffff; text-align: center; font-weight: 700;
  }
  .hgag-rail__figure { margin: 0 auto 16px; padding: 16px; position: relative; }
  .hgag-rail__figinner { width: 100%; }
  .hgag-rail__figure img { width: 100%; height: auto; }
  .hgag a.hgag-rail__cta {
    --font-weight-regular: 700;
    font-size: 22px; letter-spacing: .5px; font-weight: 700; color: #ffffff;
    text-decoration: none; background: var(--hgag-rail-cta); border-radius: 40px;
    padding: 16px; display: block; line-height: 1em; text-transform: uppercase; text-align: center;
  }
  .hgag a.hgag-rail__cta:hover { opacity: .92; }
  .hgag-rail .hgag-pay { padding: 0 16px; width: 100%; margin: 12px auto 24px; }
  .hgag-rail__badge {
    position: absolute; width: 135px; height: 135px; border-radius: 135px;
    background: #ffffff; box-shadow: 0 0 50px 0 var(--hgag-accent);
    top: -7px; right: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .hgag-rail__pct {
    --font-weight-regular: 700;
    color: var(--hgag-alert); text-align: center; font-size: 50px; font-weight: 700;
    line-height: 1.2; margin-bottom: 6px;
  }
  .hgag-rail__off {
    --font-weight-regular: 700;
    color: var(--hgag-alert); text-align: center; font-size: 32px; font-weight: 700; line-height: 1.2;
  }
}

/* ---------- sticky CTA ----------
   No overrides. This page deliberately inherits the shared .offer-sticky-cta
   exactly as /pages/offer-pdp renders it (105px bar, 63px button, centred trust
   line), because that is the sizing the brand already signed off on.

   Earlier passes shrank it here and every variant read worse: 72px made the
   button look slim, spreading the trust row left gaps around the separators.
   If it ever needs resizing again, change it in offer.css / offer-claude.css so
   both pages move together, rather than re-adding a per-template override. */

/* ---------- readability layer: one 18px reading size, page-wide ----------
   This page is read by 50+ buyers, so every block of reading text sits at 18px
   with open leading, the same as the article copy above. Nothing a reader
   actually reads drops below that on the way down the page.

   SCOPED to this template's remapped attribute. These are shared sections, so
   editing them at source would resize /pages/offer-pdp too, which is a separate
   live page and a separate decision. Verified after every change that offer-pdp
   is untouched.

   Micro-labels (badges, pills, per-day price) keep their size on purpose: they
   are glanced at, not read, and enlarging them breaks the buybox grid. The one
   exception is .offer-header__fact, which rendered at 7.1px and is real copy. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header__fact {
  font-size: clamp(9px, 2.5vw, 12px);
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header__reviews {
  flex-wrap: wrap;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-prob__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-prob__lede,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-prob__item-text,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .tl-item p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .versus__intro p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__newsletter p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__nl-body,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__acc-body p {
  font-size: 18px;
  line-height: 1.55;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-specialists__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .specialist-modal__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pr-card p {
  font-size: 18px !important;
  line-height: 1.55 !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pr-card h4 {
  font-size: 18.5px !important;
  line-height: 1.4 !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__disclaimer p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__nl-disclaimer p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .section-tag,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-specialist__title,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .bb-vs__label {
  font-size: 15px;
  line-height: 1.5;
}

body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-guar__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .specialist-modal__quote,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .section-lede,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-guar__body p {
  font-size: 18px !important;
  line-height: 1.55 !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-footer__disclaimer p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-footer__disclaimer p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pr-name,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .reviews-link,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .pr-name,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .reviews-link {
  font-size: clamp(12px, 3.2vw, 15px) !important;
  line-height: 1.45 !important;
}

body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .stars-row .reviews-link,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .title-block .stars-row .reviews-link {
  font-size: clamp(12px, 3.2vw, 15px) !important;
  line-height: 1.45 !important;
  white-space: nowrap;
}

/* Ingredient rows are a title + supporting copy pair in a narrow column beside
   a thumbnail. 18px body read larger than its own 16px title, so this one block
   sits at 16px; weight, not size, carries the hierarchy. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .bb-ing__name {
  font-size: 18px !important;
  line-height: 1.35 !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .bb-ing__desc {
  font-size: 16px;
  line-height: 1.55;
}

/* Header intro: a short standfirst under the product title, not a block of
   reading text. 16px keeps it subordinate to the 18px article body. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-header__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .title-block .product-sub,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .title-block .product-sub,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pdp-bullets__text,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .pdp-bullets__text {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Guarantee stat is a footnote under the guarantee claim, so it stays small. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-guar__stat {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Accordion FAQ: question and answer both at 16px. Scanned first, then read
   one at a time inside a narrow panel, so they sit a step below the article's
   18px reading size. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-faq__q,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-faq__a p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .pdp-faq .body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .pdp-faq .body li,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-faq__q,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-faq__a p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pdp-faq .body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .pdp-faq .body li {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .bb-doclinks__link,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .bb-doclinks__link {
  font-size: 16px !important;
}

/* Offer header. It read cramped for three separate reasons: the heading ran at
   line-height 1.1 across three lines, the standfirst sat at 1.55 over six
   centred lines, and the whole block had only 8px of air beneath it before the
   next section. Scoped here so /pages/offer-pdp keeps its own spacing. */
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header {
  padding-bottom: 30px !important;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header__title {
  line-height: 1.15 !important;
  letter-spacing: -0.015em;
  margin-bottom: 22px !important;
  text-wrap: balance;
}
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .wgl-shell .offer-header__body p,
body[data-original-template='page.offer-pdp-advertorial'][data-template='page.offer'] .offer-header__body p {
  line-height: 1.7 !important;
  text-wrap: pretty;
}

/* Advertorial owns the viewport: the theme's own header/footer groups are
   hidden so only this lander's chrome shows.

   Driven by `:has()` on the wrapper's data attribute rather than a JS-added
   body class. The section script is in a DEFERRED bundle, so on a slow load
   the theme header flashed (or stayed) visible before the class landed. CSS
   has no such race, and it still respects the `hide_theme_chrome` toggle.
   The body-class rule is kept as a fallback for engines without :has(). */
body:has(.hgag[data-hide-chrome='true']) .shopify-section-group-header-group,
body:has(.hgag[data-hide-chrome='true']) .shopify-section-group-footer-group,
body.hgag-chrome-off .shopify-section-group-header-group,
body.hgag-chrome-off .shopify-section-group-footer-group { display: none; }

/* ================ RANKED REVIEW (.hgl-) =================== */

/* =========================================================================
   HG Listicle. Palette and treatment follow the reference advertorial:
   white page, blue primary (#0a5af8), grey secondary badges, square corners
   (the reference sets no border-radius anywhere), shadows instead of borders,
   500-weight headings, Arial/Helvetica body.

   Every selector is prefixed `.hgl` and every size is px (this theme's root
   font-size is 10px, so rem would render at 62.5%).
   ========================================================================= */

.hgl {
  --hgl-primary: #0a5af8;
  --hgl-secondary: #b9b9b9;
  --hgl-text: #000000;
  --hgl-nav: #333333;
  --hgl-muted: #6f6f6f;
  --hgl-soft: #f8f8f8;
  --hgl-author-bg: rgba(41, 119, 142, .10);
  --hgl-star: #f5a623;
  --hgl-yes: #1f7a4d;
  --hgl-no: #c0392b;
  --hgl-yes-bg: #f1f9f2;      /* pale tint behind the pros panel */
  --hgl-no-bg: #fdf3f0;       /* pale tint behind the cons panel */
  /* Corner radius for the criteria and pros/cons panels. The ported review
     layout is square throughout (entry panels, buttons), so this is the one
     knob that decides whether the new panels match that or soften. */
  --hgl-panel-radius: 16px;
  --hgl-line: #e3e3e3;

  background: #ffffff;
  color: var(--hgl-text);
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hgl *, .hgl *::before, .hgl *::after { box-sizing: border-box; }
.hgl img { max-width: 100%; height: auto; display: block; }

/* The theme sets font-family on bare `p, li, a, span, div`, which beats
   inheritance from `.hgl`. Restate the reference stack on the elements
   themselves so the page reads Arial/Helvetica, not the theme's Inter. */
.hgl p, .hgl li, .hgl a, .hgl span, .hgl div,
.hgl h1, .hgl h2, .hgl h3, .hgl strong, .hgl em {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* Headings: the theme forces `font-weight: var(--font-weight-bold) !important`
   on bare h1/h2. Rather than add a counter-!important (banned, CLAUDE.md §5),
   scope the theme's OWN token on these elements so its rule resolves to the
   reference weight of 500. */
.hgl .hgl-h1, .hgl .hgl-h2, .hgl .hgl-entry__title { --font-weight-bold: 500; }

/* Same technique for the heading FACE: `selective-heading-fonts.css` sets
   `font-family: var(--font-heading-family) !important` on bare h1/h2, so scope
   that token here instead of adding a competing !important. */
.hgl .hgl-h1, .hgl .hgl-h2, .hgl .hgl-entry__title, .hgl .hgl-pc__title {
  --font-heading-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-heading-family-override: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  /* h3 resolves --font-body-family, not the heading token, in that same file. */
  --font-body-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.hgl-wrap { width: 100%; max-width: 940px; margin-inline: auto; padding-inline: 20px; }

/* ---------- embedded tail (layout_mode: tail) ----------
   No masthead above it, so the fragment carries its own top rule and a
   larger top pad; the first thing it prints is the method H2. */
.hgl--tail { border-top: 1px solid var(--hgl-line); }
.hgl--tail .hgl-main { padding-block: 44px 40px; }
@media (max-width: 800px) {
  .hgl--tail .hgl-main { padding-block: 32px 32px; }
}

/* Deliberately NO brand-colour override on the tail CTAs. These pages are meant
   to read as an independent write-up, so the host advertorial is re-skinned to
   the review palette via its own colour settings instead, and the tail keeps its
   native --hgl-primary. One palette, and it is not the brand's. */

/* ---------- disclosure ---------- */
.hgl-disclosure { background: var(--hgl-soft); }
.hgl-disclosure__text {
  margin: 0; padding-block: 8px;
  font-size: 12px; line-height: 1.35; color: var(--hgl-muted); text-align: center;
}
.hgl a.hgl-disclosure__link { color: var(--hgl-muted); text-decoration: none; }
.hgl a.hgl-disclosure__link:hover { text-decoration: underline; }

/* ---------- masthead ---------- */
.hgl-header { background: #ffffff; }
.hgl-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 19px; flex-wrap: wrap;
}
.hgl a.hgl-logo { text-decoration: none; display: inline-flex; align-items: center; }
.hgl-logo__img { max-width: 250px; width: auto; max-height: 44px; }
.hgl-logo__text {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--hgl-text);
}
.hgl-nav { display: flex; align-items: center; gap: 28px; }
.hgl a.hgl-nav__link {
  color: var(--hgl-nav); text-decoration: none; font-size: 15px; font-weight: 400;
}
.hgl a.hgl-nav__link:hover { text-decoration: underline; }

/* ---------- author ---------- */
.hgl-author { padding-block: 8px 22px; }
.hgl-author__inner {
  display: flex; align-items: center; gap: 24px;
  background: var(--hgl-author-bg); border-radius: 8px; padding: 26px;
}
.hgl-author--foot { padding-block: 34px 8px; }
.hgl-author__text { flex: 1 1 auto; min-width: 0; }
.hgl-author__name { margin: 0 0 6px; font-size: 17px; }
.hgl-author__bio p { margin: 0; font-size: 16px; line-height: 1.6; color: #262626; }
.hgl-author__avatar { flex: 0 0 auto; width: 120px; }
.hgl-author__img { border-radius: 999px; width: 120px; height: 120px; object-fit: cover; }
.hgl-author__ph {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 999px;
  background: #e6e6e6; border: 2px dashed #b5b5b5;
  font-size: 11px; font-weight: 700; color: var(--hgl-muted); text-align: center; padding: 8px;
}

/* ---------- article head ---------- */
.hgl-main { padding-block: 8px 40px; }
.hgl-head { margin-bottom: 18px; }
.hgl-h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.22; font-weight: 500; color: var(--hgl-text); }
.hgl-updated { margin: 0; font-size: 15px; color: var(--hgl-muted); }

.hgl-intro p, .hgl-prose p { margin: 0 0 16px; font-size: 19px; line-height: 1.6; color: var(--hgl-text); }
.hgl-intro p:last-child, .hgl-prose p:last-child { margin-bottom: 0; }
.hgl .hgl-prose a, .hgl .hgl-intro a { color: var(--hgl-primary); text-decoration: underline; }

/* ---------- ranked tile grid ---------- */
.hgl-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin: 44px 0;
}
.hgl a.hgl-tile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #ffffff; border-radius: 0; box-shadow: 0 2px 5px rgba(0,0,0,.20);
  transition: box-shadow .18s ease, transform .18s ease;
}
.hgl a.hgl-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,.26); transform: translateY(-2px); }
.hgl-tile__badge {
  display: block; text-align: center; padding: 12px 8px;
  font-size: 15px; color: #ffffff; background: var(--hgl-secondary);
}
.hgl-tile__badge--win { background: var(--hgl-primary); }
.hgl-tile__figure {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: 14px; background: #ffffff; overflow: hidden;
}
.hgl-tile__figure--ph {
  background: #f0f0f0; border-bottom: 1px dashed #c4c4c4;
  font-size: 11px; font-weight: 700; color: var(--hgl-muted); text-align: center;
}
.hgl-tile__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hgl-tile__body {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 14px 26px; text-align: center; margin-top: auto;
}
.hgl-tile__name {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; font-size: 19px; font-weight: 500;
  color: var(--hgl-text); line-height: 1.25;
}
.hgl-tile__score { font-size: 14px; color: var(--hgl-muted); }
.hgl-tile__cta { margin-top: 6px; font-size: 16px; color: var(--hgl-primary); text-decoration: underline; }

/* ---------- stars ---------- */
.hgl-stars {
  position: relative; display: inline-block; line-height: 1;
  font-size: 19px; letter-spacing: 2px; white-space: nowrap;
}
.hgl-stars--lg { font-size: 25px; }
.hgl-stars__bg { color: #d5d5d5; }
.hgl-stars__fg {
  position: absolute; inset: 0; overflow: hidden;
  width: var(--hgl-fill, 0%); color: var(--hgl-star);
}

/* ---------- prose blocks ---------- */
.hgl-block { margin: 40px 0; }
.hgl-h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.4; font-weight: 500; color: var(--hgl-text); }
.hgl-list { margin: 18px 0; padding-left: 22px; }
.hgl-list__item { margin-bottom: 16px; font-size: 19px; line-height: 1.6; color: var(--hgl-text); }

/* ---------- criteria panel (method block) ----------
   Spacing is `gap` throughout, never margins on p/li, because `.hgl p` (0,1,1)
   outranks a single class and gate 4 bans winning that back with !important. */
.hgl--tail .hgl-crit {
  background: var(--hgl-soft); border: 1px solid var(--hgl-line);
  border-radius: var(--hgl-panel-radius);
  padding: 32px; margin: 40px 0;
}
/* Accent rule sits on the heading, not the panel, so it tracks the text height. */
.hgl--tail .hgl-crit__h {
  border-left: 5px solid var(--hgl-primary);
  padding-left: 18px; margin-bottom: 20px;
}
.hgl--tail .hgl-crit__list {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px;
}
.hgl--tail .hgl-crit__item { display: flex; align-items: flex-start; gap: 16px; }
/* Fixed basis so the numbers form a column and the copy edges stay flush. */
.hgl--tail .hgl-crit__num {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: #ffffff; border: 1px solid var(--hgl-line);
  color: var(--hgl-primary); font-size: 19px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hgl--tail .hgl-crit__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hgl--tail .hgl-crit__title { font-size: 19px; line-height: 1.4; color: var(--hgl-text); }
.hgl--tail .hgl-crit__title strong { --font-weight-regular: 700; font-weight: 700; }
.hgl--tail .hgl-crit__text { font-size: 18px; line-height: 1.6; color: var(--hgl-text); }

@media (max-width: 800px) {
  .hgl--tail .hgl-crit { padding: 22px 18px; }
  .hgl--tail .hgl-crit__h { padding-left: 14px; border-left-width: 4px; }
  .hgl--tail .hgl-crit__list { gap: 22px; }
  .hgl--tail .hgl-crit__item { gap: 13px; }
  .hgl--tail .hgl-crit__num { width: 38px; height: 38px; font-size: 17px; }
  .hgl--tail .hgl-crit__title { font-size: 17px; }
  .hgl--tail .hgl-crit__text { font-size: 16px; }
}

/* ---------- product entries ---------- */
.hgl-entry { margin: 48px 0; }
.hgl-entry__panel { background: #ffffff; border-radius: 0; box-shadow: 0 2px 17px rgba(0,0,0,.30); padding: 48px; }
.hgl-entry__head { text-align: center; margin-bottom: 24px; }
.hgl-entry__title { margin-bottom: 12px; font-size: 21px; font-weight: 500; }
.hgl-entry__rank { display: block; font-size: 21px; font-weight: 500; color: var(--hgl-text); }
.hgl-entry__score { display: block; margin-top: 8px; font-size: 14px; color: var(--hgl-muted); }
.hgl-entry__figure { margin: 0 auto 24px; max-width: 620px; }
.hgl-entry__figure--ph {
  display: flex; align-items: center; justify-content: center; min-height: 240px;
  background: #f0f0f0; border: 2px dashed #c4c4c4;
  font-size: 13px; font-weight: 700; color: var(--hgl-muted); text-align: center; padding: 16px;
}
.hgl-entry__img { width: 100%; }
.hgl-entry__sale { margin: 0 0 16px; text-align: center; font-size: 19px; color: var(--hgl-text); }

.hgl a.hgl-btn {
  display: block; width: 100%; margin: 0 auto 24px;
  padding: 19px 16px; border: 0; border-radius: 0;
  background: var(--hgl-primary); color: #ffffff;
  font-size: clamp(17px, 4vw, 24px); font-weight: 500; text-align: center;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 13px rgba(0,0,0,.50);
  transition: opacity .15s ease, transform .15s ease;
}
.hgl a.hgl-btn--win { background: var(--hgl-primary); color: #ffffff; }
.hgl a.hgl-btn:hover { opacity: .92; transform: translateY(-1px); }
.hgl a.hgl-btn--lg { max-width: 620px; }

/* ---------- pros / cons panels ----------
   Pros and cons each get their own tinted panel with a thumb icon, a hairline
   under the label, and coloured row markers. The tint carries the verdict at a
   glance; the icon repeats it so the meaning does not rest on colour alone. */
.hgl-pc { margin-top: 32px; }
.hgl--tail .hgl-pc { display: flex; flex-direction: column; gap: 20px; }
.hgl--tail .hgl-pc__panel { padding: 26px 24px; border-radius: var(--hgl-panel-radius); }
.hgl--tail .hgl-pc__panel--yes { background: var(--hgl-yes-bg); }
.hgl--tail .hgl-pc__panel--no { background: var(--hgl-no-bg); }
/* <h3>, not <p>: an inline theme rule forces font-weight on bare p/div with
   !important, so a paragraph here can never render bold. */
.hgl-pc__title {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 21px; font-weight: 700; line-height: 1.3;
}
.hgl--tail .hgl-pc__panel--yes .hgl-pc__title { color: var(--hgl-yes); }
.hgl--tail .hgl-pc__panel--no .hgl-pc__title { color: var(--hgl-no); }
.hgl--tail .hgl-pc__ico { flex: 0 0 auto; width: 26px; height: 26px; display: block; }
/* Rows carry their own spacing via gap; the last row must not add trailing space
   inside the panel, hence margin-bottom 0 on .hgl-row here. */
.hgl--tail .hgl-pc__rows { display: flex; flex-direction: column; gap: 16px; }
.hgl--tail .hgl-pc__rows .hgl-row { margin-bottom: 0; }

@media (max-width: 800px) {
  .hgl--tail .hgl-pc__panel { padding: 20px 16px; }
  .hgl-pc__title { font-size: 18px; margin-bottom: 14px; padding-bottom: 13px; }
  .hgl--tail .hgl-pc__ico { width: 22px; height: 22px; }
}

.hgl-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.hgl-row__ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 999px; margin-top: 2px;
}
.hgl-row__ico svg { width: 15px; height: 15px; display: block; }
.hgl-row__ico--yes { background: #e2f3ea; color: var(--hgl-yes); }
.hgl-row__ico--no { background: #fbe7e4; color: var(--hgl-no); }
.hgl-row__text { margin: 0; font-size: 19px; line-height: 1.55; color: var(--hgl-text); }

.hgl-verdict { margin-top: 32px; }
.hgl-verdict__label { margin: 0 0 8px; font-size: 19px; color: var(--hgl-text); }

.hgl-final { margin: 40px 0 8px; }
.hgl-final__cta { margin: 24px 0 0; }

/* ---------- winner card (tail only) ----------
   Closing verdict: banner strip, product shot, recap copy, CTA. Green rather
   than the page's blue because it is an endorsement, and it ties back to the
   pros panel; the CTA stays blue so the action still reads as the action.
   `overflow: hidden` lets the square banner sit flush inside rounded corners. */
.hgl--tail .hgl-win {
  margin: 44px 0 8px;
  border: 2px solid var(--hgl-yes);
  border-radius: var(--hgl-panel-radius);
  overflow: hidden;
  background: var(--hgl-yes-bg);
}
.hgl--tail .hgl-win__banner {
  margin: 0; padding: 15px 18px;
  background: var(--hgl-yes); color: #ffffff;
  font-size: clamp(15px, 4vw, 18px); font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; text-align: center; text-transform: uppercase;
}
.hgl--tail .hgl-win__body {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px 28px 34px;
}
/* Product shot is supporting evidence, not the hero: capped well below the card
   width so the verdict copy stays the thing you read first. */
.hgl--tail .hgl-win__figure { margin: 4px auto 2px; width: 100%; max-width: 230px; }
.hgl--tail .hgl-win__img { width: 100%; height: auto; }
.hgl--tail .hgl-win__h { margin: 0; }
/* .hgl-btn carries margin-bottom 24px for the standalone layout; inside the
   card the flex gap already spaces it, so zero it out to keep the padding even. */
.hgl--tail a.hgl-win__cta { margin: 6px 0 0; }

@media (max-width: 800px) {
  .hgl--tail .hgl-win__body { padding: 22px 16px 24px; gap: 15px; }
  .hgl--tail .hgl-win__banner { padding: 13px 14px; }
  .hgl--tail .hgl-win__figure { max-width: 180px; }
}

/* ---------- tail corner treatment ----------
   The ported layout is square throughout. In tail mode the whole thing softens
   to match the panels, so the page reads as one system. Scoped to --tail, so
   /pages/lists keeps its original square entries and buttons. */
.hgl--tail .hgl-entry__panel { border-radius: var(--hgl-panel-radius); }
.hgl--tail a.hgl-btn { border-radius: var(--hgl-panel-radius); }
/* The author card ships at 8px; align it rather than leave an 8/16 near-miss. */
.hgl--tail .hgl-author { border-radius: var(--hgl-panel-radius); }

/* ---------- footer ---------- */
.hgl-footer { background: #ffffff; border-top: 1px solid var(--hgl-line); padding-block: 22px; }
.hgl-footer__nav { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.hgl a.hgl-footer__link { color: var(--hgl-nav); text-decoration: none; font-size: 15px; }
.hgl a.hgl-footer__link:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .hgl-entry__panel { padding: 48px 28px; }
  .hgl-h1 { font-size: 32px; }
  .hgl-h2 { font-size: 26px; }
}

@media (max-width: 767px) {
  .hgl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hgl-intro p, .hgl-prose p, .hgl-list__item, .hgl-row__text { font-size: 16px; }
  .hgl-tile__name { font-size: 17px; }
  .hgl-entry__sale, .hgl-verdict__label, .hgl-pc__title { font-size: 16px; }
}

@media (max-width: 599px) {
  .hgl-wrap { padding-inline: 16px; }
  .hgl-h1 { font-size: 29px; }
  .hgl-h2 { font-size: 23px; }
  .hgl-author__inner { flex-direction: column-reverse; text-align: center; gap: 14px; padding: 18px 22px; }
  .hgl-author__avatar, .hgl-author__img, .hgl-author__ph { width: 96px; height: 96px; }
  .hgl-entry__panel { padding: 32px 16px 16px; }
  .hgl-nav { gap: 16px; }
  .hgl-header__inner { padding-block: 14px; }
  .hgl-logo__img { max-width: 175px; }
  .hgl-row { margin-bottom: 18px; }
}

@media (max-width: 379px) {
  .hgl-grid { gap: 10px; }
  .hgl-tile__name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hgl a.hgl-tile, .hgl a.hgl-btn { transition: none; }
  .hgl a.hgl-tile:hover, .hgl a.hgl-btn:hover { transform: none; }
}

/* Listicle owns the viewport on its own template. */
body.hgl-chrome-off .shopify-section-group-header-group,
body.hgl-chrome-off .shopify-section-group-footer-group { display: none; }

/* ================ #1 FEATURED ENTRY (.hgl-entry--feature) ================
   The winner gets a full product write-up: banner, grade, sectioned body,
   benefits, pros/cons, verdict, price CTA. Everything is scoped to
   --feature so the two losing entries keep the compact treatment. */

.hgl-entry--feature { margin: 48px 0; }
.hgl-entry--feature .hgl-entry__panel {
  border: 2px solid var(--hgl-yes);
  border-radius: var(--hgl-panel-radius);
  padding: 0 0 30px;
  overflow: hidden;
  background: #ffffff;
}
/* Banner sits on the wrapper, above the panel, and is pulled flush by the
   panel's own rounded corners. */
.hgl-entry--feature { position: relative; }
.hgl-entry__banner {
  margin: 0; padding: 15px 18px;
  background: var(--hgl-yes); color: #ffffff;
  border-radius: var(--hgl-panel-radius) var(--hgl-panel-radius) 0 0;
  font-size: clamp(14px, 3.7vw, 17px); font-weight: 700; line-height: 1.3;
  letter-spacing: .04em; text-align: center; text-transform: uppercase;
}
.hgl-entry--feature .hgl-entry__banner + .hgl-entry__panel {
  border-top: 0; border-radius: 0 0 var(--hgl-panel-radius) var(--hgl-panel-radius);
}
.hgl-entry--feature .hgl-entry__head { text-align: left; margin: 0; padding: 30px 28px 0; }
.hgl-entry--feature .hgl-entry__title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.hgl-entry--feature .hgl-entry__rank {
  display: inline-block; color: var(--hgl-yes); font-size: 26px; font-weight: 700;
}
.hgl-entry__tag {
  margin: 0 0 14px; font-size: 17px; line-height: 1.45; color: var(--hgl-muted);
}
.hgl-entry__grade {
  margin: 0; display: inline-block;
  padding: 6px 14px; border: 1px solid var(--hgl-yes); border-radius: 999px;
  background: var(--hgl-yes-bg); color: var(--hgl-yes);
  font-size: 16px; line-height: 1.2;
}
.hgl-entry__grade strong { --font-weight-regular: 700; font-weight: 700; font-size: 18px; }

.hgl-entry--feature .hgl-entry__figure { margin: 24px auto; max-width: 230px; padding: 0 28px; }
.hgl-entry--feature .hgl-entry__figure img { width: 100%; height: auto; }

/* Body copy inside the featured entry */
.hgl-feat__h {
  margin: 30px 28px 10px; font-size: 21px; line-height: 1.35;
  --font-weight-bold: 700; font-weight: 700; color: var(--hgl-text);
  --font-heading-family: inherit; --font-heading-family-override: inherit;
}
.hgl-feat__p { margin: 0 28px 14px; font-size: 18px; line-height: 1.65; color: var(--hgl-text); }
.hgl-feat__p sup { font-size: 12px; vertical-align: super; line-height: 0; color: var(--hgl-muted); }
/* Unfilled placeholder left in the copy. Deliberately loud so it can't ship
   unnoticed; delete the <mark> and this rule disappears with it. */
.hgl-todo { background: #ffe9a8; color: #6b4b00; padding: 1px 6px; border-radius: 3px; font-size: 15px; }

.hgl-ben { margin: 0 28px 8px; padding-left: 20px; list-style: disc; }
.hgl-ben__item { margin-bottom: 8px; font-size: 18px; line-height: 1.55; color: var(--hgl-text); }

.hgl-entry--feature .hgl-pc { margin: 26px 28px 0; }
.hgl-entry--feature .hgl-verdict { margin: 26px 28px 0; }
.hgl-verdict__quote {
  margin: 0; padding: 0 0 0 18px; border-left: 4px solid var(--hgl-yes);
}
.hgl-verdict__quote .hgl-feat__p { margin-left: 0; margin-right: 0; }
.hgl-entry--feature a.hgl-btn { margin: 26px 28px 0; width: auto; }

@media (max-width: 800px) {
  .hgl-entry--feature .hgl-entry__head { padding: 22px 16px 0; }
  .hgl-entry--feature .hgl-entry__rank { font-size: 22px; }
  .hgl-entry__tag { font-size: 15px; }
  .hgl-entry--feature .hgl-entry__figure { padding: 0 16px; max-width: 190px; margin: 18px auto; }
  .hgl-feat__h { margin: 24px 16px 8px; font-size: 18px; }
  .hgl-feat__p { margin: 0 16px 12px; font-size: 16px; }
  .hgl-ben { margin: 0 16px 8px; }
  .hgl-ben__item { font-size: 16px; }
  .hgl-entry--feature .hgl-pc,
  .hgl-entry--feature .hgl-verdict { margin: 22px 16px 0; }
  .hgl-entry--feature a.hgl-btn { margin: 22px 16px 0; }
}

/* ---------- FAQ inside the closing winner card ----------
   Native <details>, so it works with no JS and is keyboard/screen-reader
   accessible out of the box. The marker is replaced by a drawn chevron
   because the default triangle differs across browsers. */
.hgl--tail .hgl-faq { margin-top: 6px; border-top: 1px solid rgba(31,122,77,.22); padding-top: 22px; }
.hgl--tail .hgl-faq__h {
  margin: 0 0 6px; font-size: 21px; line-height: 1.3;
  --font-weight-bold: 700; font-weight: 700; color: var(--hgl-text);
  --font-heading-family: inherit; --font-heading-family-override: inherit;
}
.hgl--tail .hgl-faq__item { border-bottom: 1px solid rgba(31,122,77,.18); }
.hgl--tail .hgl-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 0; font-size: 17px; line-height: 1.45;
  --font-weight-regular: 600; font-weight: 600; color: var(--hgl-text);
}
.hgl--tail .hgl-faq__q::-webkit-details-marker { display: none; }
.hgl--tail .hgl-faq__q::after {
  content: ''; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px;
  border-right: 2px solid var(--hgl-yes); border-bottom: 2px solid var(--hgl-yes);
  transform: rotate(45deg); transition: transform .18s ease;
}
.hgl--tail .hgl-faq__item[open] .hgl-faq__q::after { transform: rotate(-135deg); margin-top: 10px; }
.hgl--tail .hgl-faq__q:focus-visible { outline: 2px solid var(--hgl-yes); outline-offset: 3px; }
.hgl--tail .hgl-faq__a { padding: 0 0 16px; }
.hgl--tail .hgl-faq__a p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--hgl-text); }
.hgl--tail .hgl-faq__sign {
  margin: 16px 0 0; font-size: 15px; font-style: italic; color: var(--hgl-muted);
}
@media (prefers-reduced-motion: reduce) {
  .hgl--tail .hgl-faq__q::after { transition: none; }
}
@media (max-width: 800px) {
  .hgl--tail .hgl-faq__h { font-size: 18px; }
  .hgl--tail .hgl-faq__q { font-size: 16px; padding: 13px 0; }
  .hgl--tail .hgl-faq__a p { font-size: 16px; }
}

/* ============ 7-SECTION PAGE: new components ============ */

/* ---- four cases per product (sommeil / carburant / absorption / livraison) ----
   Fixed order everywhere so the reader can compare down the column. */
.hgl--tail .hgl-cases__wrap { margin: 20px 28px 24px; }
.hgl--tail .hgl-cases__count {
  margin: 0 0 10px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  --font-weight-regular: 700; font-weight: 700; color: var(--hgl-muted);
}
.hgl--tail .hgl-cases {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.hgl--tail .hgl-cases__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 10px; text-align: center;
  font-size: 13px; line-height: 1.25;
}
.hgl--tail .hgl-cases__item--yes { background: var(--hgl-yes-bg); color: var(--hgl-yes); }
.hgl--tail .hgl-cases__item--no  { background: var(--hgl-no-bg);  color: var(--hgl-no); }
.hgl--tail .hgl-cases__ico { font-size: 18px; line-height: 1; --font-weight-regular: 700; font-weight: 700; }
.hgl--tail .hgl-cases__label { --font-weight-regular: 600; font-weight: 600; }

/* ---- section 3 checklist ---- */
.hgl--tail .hgl-check { margin: 44px 0; }
.hgl--tail .hgl-check__h { margin-bottom: 20px; }
.hgl--tail .hgl-check .hgl-pc { margin-top: 0; }

/* ---- section 4 transition ---- */
.hgl--tail .hgl-lead { margin: 44px 0; }
.hgl--tail .hgl-lead__p {
  margin: 0; padding: 24px 26px;
  background: var(--hgl-soft); border-left: 5px solid var(--hgl-primary);
  border-radius: 0 var(--hgl-panel-radius) var(--hgl-panel-radius) 0;
  font-size: 19px; line-height: 1.55;
  --font-weight-regular: 600; font-weight: 600; color: var(--hgl-text);
}

/* ---- runner-up entries (#2 to #5) ---- */
.hgl--tail .hgl-entry--runner { margin: 40px 0; }
.hgl--tail .hgl-entry--runner .hgl-entry__panel {
  border: 1px solid var(--hgl-line); box-shadow: none;
  border-radius: var(--hgl-panel-radius); padding: 0 0 28px; background: #ffffff;
}
.hgl--tail .hgl-entry--runner .hgl-entry__head { text-align: left; margin: 0; padding: 28px 28px 0; }
.hgl--tail .hgl-entry--runner .hgl-entry__title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.hgl--tail .hgl-entry--runner .hgl-entry__rank { color: var(--hgl-muted); font-size: 24px; --font-weight-regular: 700; font-weight: 700; }
.hgl--tail .hgl-entry__kind {
  margin: 0 0 8px; font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--hgl-muted); --font-weight-regular: 600; font-weight: 600;
}
.hgl--tail .hgl-entry--runner .hgl-entry__grade { border-color: var(--hgl-line); background: var(--hgl-soft); color: var(--hgl-muted); }
.hgl--tail .hgl-entry--runner .hgl-pc,
.hgl--tail .hgl-entry--runner .hgl-verdict { margin: 24px 28px 0; }

/* ---- section 6 FAQ as a standalone page section ---- */
.hgl--tail .hgl-faq--page {
  margin: 48px 0; padding: 30px 28px;
  background: var(--hgl-soft); border: 1px solid var(--hgl-line);
  border-radius: var(--hgl-panel-radius); border-top: 0;
}
.hgl--tail .hgl-faq--page { border-top: 1px solid var(--hgl-line); padding-top: 30px; }
.hgl--tail .hgl-faq__h2 { margin: 0 0 8px; }
.hgl--tail .hgl-faq--page .hgl-faq__item { border-bottom-color: var(--hgl-line); }
.hgl--tail .hgl-faq--page .hgl-faq__q::after { border-color: var(--hgl-primary); }

/* ---- section 7 closing points ---- */
.hgl--tail .hgl-win__points { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 800px) {
  .hgl--tail .hgl-cases__wrap { margin: 16px 16px 20px; }
  .hgl--tail .hgl-cases { grid-template-columns: repeat(2, 1fr); }
  .hgl--tail .hgl-cases__item { font-size: 12.5px; padding: 10px 6px; }
  .hgl--tail .hgl-lead__p { padding: 18px 16px; font-size: 17px; }
  .hgl--tail .hgl-entry--runner .hgl-entry__head { padding: 20px 16px 0; }
  .hgl--tail .hgl-entry--runner .hgl-entry__rank { font-size: 20px; }
  .hgl--tail .hgl-entry--runner .hgl-pc,
  .hgl--tail .hgl-entry--runner .hgl-verdict { margin: 20px 16px 0; }
  .hgl--tail .hgl-faq--page { padding: 22px 16px; }
}

/* ---- runner-up product shots ---- */
.hgl--tail .hgl-entry__figure--runner {
  margin: 20px auto 4px; max-width: 190px; padding: 0 28px; background: none; border: 0; min-height: 0;
}
.hgl--tail .hgl-entry__figure--runner img { width: 100%; height: auto; }
@media (max-width: 800px) {
  .hgl--tail .hgl-entry__figure--runner { max-width: 150px; padding: 0 16px; margin: 16px auto 2px; }
}

/* The supplied competitor shots carry their own light-grey backdrop. Rounding
   the tile makes that read as a deliberate product thumbnail rather than a
   hard rectangle floating on the white panel. */
.hgl--tail .hgl-entry__figure--runner img { border-radius: 12px; }

/* Cut-out product shots: no backdrop left to hide, so the rounded tile goes and
   the frame grows. The images are alpha-trimmed to the pack itself, so the
   product now fills this width instead of floating in a padded grey box. */
.hgl--tail .hgl-entry__figure--runner { max-width: 230px; padding: 0 28px; margin: 24px auto 6px; }
.hgl--tail .hgl-entry__figure--runner img { border-radius: 0; }
@media (max-width: 800px) {
  .hgl--tail .hgl-entry__figure--runner { max-width: 190px; padding: 0 16px; margin: 20px auto 4px; }
}

/* ---- headline size ---- */
.hgag .hgag-headline { font-size: 26px; line-height: 1.2; }
@media (min-width: 800px) { .hgag .hgag-headline { font-size: 26px; line-height: 1.2; } }

/* ---- seam between the article and the review ----
   The ported section reserved 84px at the foot of .hgag so the fixed sticky bar
   could not cover the end of the article. On this page the article is no longer
   the end of the page, so that reserve became a hole mid-scroll. Move it to the
   real page bottom, where the sticky genuinely does overlap the footer (measured
   116px). The sticky only exists below 800px, so the reserve does too. */
.hgag { padding-bottom: 0; }
.hgl--tail { padding-bottom: 128px; }
.hgl--tail .hgl-main { padding-top: 0; }
@media (min-width: 800px) {
  .hgag { padding-bottom: 0; }
  .hgl--tail { padding-bottom: 0; }
}

/* Square opening image. It is the LCP element, so it loads eager with a
   reserved 1:1 box rather than lazily. */
.hgag-img--hero { aspect-ratio: 1 / 1; }
.hgag-img--hero img { width: 100%; height: 100%; object-fit: cover; }

/* Fine print under the sticky CTA. */
.hgag-sticky__note { font-size: 14px; }

/* Runner-up CTA. Same button as the winner's, but visually secondary: these
   entries are not what the page recommends, they all point at Honey Gummies. */
.hgl--tail .hgl-entry--runner a.hgl-entry__cta { margin: 26px 28px 0; width: auto; }
@media (max-width: 800px) {
  .hgl--tail .hgl-entry--runner a.hgl-entry__cta { margin: 22px 16px 0; }
}

/* Sticky bar removed. The bottom reserve existed only to keep it off the
   footer, so it goes with it. */
.hgl--tail { padding-bottom: 0; }

/* Runner-up CTA: rendered as a <span>, so it needs the anchor's box explicitly
   (`.hgl a.hgl-btn` does not match a span). Spacing matches the winner's button
   exactly; it is inert by design, so no pointer, no hover lift. */
.hgl--tail .hgl-entry--runner .hgl-entry__cta {
  display: block; box-sizing: border-box;
  margin: 26px 28px 0; padding: 19px 16px; max-width: 620px;
  border: 0; border-radius: var(--hgl-panel-radius);
  background: var(--hgl-primary); color: #ffffff;
  font-size: clamp(17px, 4vw, 24px); font-weight: 500; text-align: center;
  text-decoration: none; cursor: default; user-select: none;
  box-shadow: 0 2px 13px rgba(0,0,0,.50);
}
.hgl--tail .hgl-entry--runner .hgl-entry__cta:hover { opacity: 1; transform: none; }
/* Match the winner panel's bottom padding so the button sits identically. */
.hgl--tail .hgl-entry--runner .hgl-entry__panel { padding-bottom: 30px; }
@media (max-width: 800px) {
  .hgl--tail .hgl-entry--runner .hgl-entry__cta { margin: 22px 16px 0; }
}