/** Shopify CDN: Minification failed

Line 687:0 All "@import" rules must come first

**/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600;700&family=Public+Sans:wght@400;700&display=swap');
/* ==========================================================================
   Furbos advertorial news treatment.

   Scope: every rule below is keyed to body.furbos-adv. That class is written by
   layout/theme.liquid for exactly the 19 advertorial template suffixes and for
   nothing else, so none of this can reach the product pages, the home page or
   the trust pages.

   The store header, the countdown announcement bar, the cart icon and the main
   nav are removed at the Liquid level, not with display:none, so no form input
   is ever hidden while still in the DOM.

   Palette: #095946 deep green, #009370 bright green, #fffaf1 page ground,
   #e3ffde pale mint, #d7dedc grey-green, #f1873b orange, #3e1e1e text.

   2026-08-13 typography pass. Measured against shophealthypetz.com/pages/collagen
   at 1440 and 390. Targets recorded in ADVERTORIAL_DESIGN_BUILT.md.
   ========================================================================== */

body.furbos-adv {
  --adv-body-size: 18px;
  --adv-body-lh: 1.6;
  --adv-para-gap: 27px;
  --adv-ink: #3e1e1e;
  --adv-rule: #d7dedc;
  --adv-mint: #e3ffde;
  --adv-deep: #095946;
  --adv-bright: #009370;
  --adv-bar: #3e1e1e;
}

/* --------------------------------------------------------------------------
   1. Page ground. The article reads on white, like a publication, not on the
      store's #fffaf1 ground.
   -------------------------------------------------------------------------- */
body.furbos-adv,
body.furbos-adv #MainContent {
  background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   2. Masthead bar. One full bleed solid near-black bar, one line of text,
      nothing else. Not sticky, no shadow, NO rule beneath (theirs has none).

      Geometry target, measured off theirs:
        desktop 80.77px tall = 25 + 30.77 + 25, wordmark 25px/30.77px 700 0.78px
        mobile   42.00px tall = 13 + 16.00 + 13, wordmark 13px/16px 400 1px
   -------------------------------------------------------------------------- */
body.furbos-adv .shopify-section-group-adv-header-group {
  position: relative;
  z-index: auto;
  box-shadow: none;
  border-top: 0;
}

body.furbos-adv .shopify-section-group-adv-header-group .rich-text {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  background-color: var(--adv-bar) !important;
  --color-background: 62, 30, 30;
  --gradient-background: #3e1e1e;
}

body.furbos-adv .shopify-section-group-adv-header-group .rich-text__wrapper,
body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* the wordmark sits flush with the left edge of the article column below it,
   so the masthead and the story share one optical margin. Theirs floats at an
   arbitrary inset that lines up with nothing. */
body.furbos-adv .shopify-section-group-adv-header-group .page-width {
  max-width: var(--adv-bar-width, 82rem);
}

body.furbos-adv .shopify-section-group-adv-header-group .rich-text__wrapper {
  justify-content: flex-start;
}

body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks {
  text-align: left;
  width: 100%;
}

body.furbos-adv .shopify-section-group-adv-header-group .caption-with-letter-spacing,
body.furbos-adv .shopify-section-group-adv-header-group .subtitle {
  margin: 25px 0 !important;
  padding: 0;
  font-size: 25px;
  line-height: 30.77px;
  font-weight: 700;
  letter-spacing: 0.78px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
  white-space: nowrap;
  opacity: 1;
}

/* the masthead is inert text. Nothing in it should ever look clickable. */
body.furbos-adv .shopify-section-group-adv-header-group a {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   3. The article measure.

      Theirs runs 1080px wide at 18px, which is 106 characters per line. That is
      a genuine flaw, not a thing to copy: the readable band is 60 to 75. Ours
      holds a 700px column, which at 18px is about 75 characters on a full line
      and about 45 averaged across all lines, which is exactly where theirs
      averages. So the column stays where it is and the type grows into it.

      The H1 block and the article body were 3px out of alignment. Locked to one
      edge here.
   -------------------------------------------------------------------------- */
body.furbos-adv .page-width--narrow {
  max-width: var(--adv-narrow-width, 82rem);
  padding-left: 5rem;
  padding-right: 5rem;
}

body.furbos-adv .page-width--narrow > .rte,
body.furbos-adv .page-width--narrow > h1.main-page-title {
  max-width: 700px;
}

@media screen and (max-width: 749px) {
  body.furbos-adv .page-width--narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* the rich-text advertorials run their article inside .rich-text__blocks, which
   was 780px wide and flush to the page gutter. Pulled onto the same 700px
   measure and the same left edge as every other advertorial, so all nineteen
   read as one publication. */
body.furbos-adv #MainContent .page-width:has(> .rich-text) {
  max-width: 82rem;
}

body.furbos-adv #MainContent .rich-text__blocks {
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
}

/* the offer sections keep the width they were built at */
body.furbos-adv [id*="__offer"] .page-width,
body.furbos-adv [id*="__packages"] .page-width,
body.furbos-adv [id*="__pricing"] .page-width,
body.furbos-adv [id*="__stock"] .page-width {
  max-width: 140rem;
}

body.furbos-adv [id*="__offer"] .rich-text__blocks,
body.furbos-adv [id*="__packages"] .rich-text__blocks,
body.furbos-adv [id*="__pricing"] .rich-text__blocks,
body.furbos-adv [id*="__stock"] .rich-text__blocks {
  max-width: none;
  margin-left: auto;
}

@media screen and (max-width: 749px) {
  body.furbos-adv #MainContent .rich-text__blocks {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   4. Body copy. 17px/25.5px to 18px/28.8px, colour lifted from 90% brown to
      solid ink, paragraph gap 17px to 27px so every block breathes.
   -------------------------------------------------------------------------- */
body.furbos-adv .rich-text-block.rte p,
body.furbos-adv .page-width--narrow > .rte p,
body.furbos-adv .rich-text-block.rte li,
body.furbos-adv .page-width--narrow > .rte li {
  font-size: var(--adv-body-size);
  line-height: var(--adv-body-lh);
  color: var(--adv-ink);
  font-weight: 400;
}

body.furbos-adv .rich-text-block.rte p,
body.furbos-adv .page-width--narrow > .rte p {
  margin-top: 0;
  margin-bottom: var(--adv-para-gap);
}

body.furbos-adv .rich-text-block.rte p:last-child,
body.furbos-adv .page-width--narrow > .rte p:last-child {
  margin-bottom: 0;
}

/* strong is the scan layer. Theirs bolds a phrase in most blocks. Give it a
   little more weight than the surrounding 400 so it actually reads. */
body.furbos-adv .rich-text-block.rte strong,
body.furbos-adv .page-width--narrow > .rte strong {
  font-weight: 700;
  color: var(--adv-ink);
}

body.furbos-adv .rich-text-block.rte a,
body.furbos-adv .page-width--narrow > .rte a {
  color: var(--adv-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* any list that survives the prose pass reads as prose, not as a spec sheet */
body.furbos-adv .rich-text-block.rte ul,
body.furbos-adv .rich-text-block.rte ol,
body.furbos-adv .page-width--narrow > .rte ul,
body.furbos-adv .page-width--narrow > .rte ol {
  margin: 0 0 var(--adv-para-gap);
  padding-left: 22px;
}

body.furbos-adv .rich-text-block.rte li,
body.furbos-adv .page-width--narrow > .rte li {
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   5. The headline. Centred 42.5px was the loudest brochure tell on the page.
      Left, 34px, 700, tracked 0.78px, exactly theirs.
   -------------------------------------------------------------------------- */
body.furbos-adv h1.main-page-title,
body.furbos-adv h1.page-title {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.78px;
  text-align: left;
  color: var(--adv-ink);
  margin-top: 0;
  margin-bottom: 18px;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Subheads. They break the read about once every 130 words already, which is
      right. What was wrong was the spacing: 27px above and 9px below crowded
      every subhead onto the paragraph under it. A subhead belongs to what
      follows it, so the space above must be much larger than the space below.
   -------------------------------------------------------------------------- */
body.furbos-adv .rich-text__blocks h2.heading,
body.furbos-adv .rich-text__blocks h3.heading,
body.furbos-adv .content-wrapper h2.heading,
body.furbos-adv .content-wrapper h3.heading,
body.furbos-adv .page-width--narrow > .rte h2,
body.furbos-adv .page-width--narrow > .rte h3 {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--adv-ink);
  text-align: left;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
  text-wrap: balance;
}

/* the eyebrow above the headline, and the section kicker mastheads */
body.furbos-adv [id$="__masthead"] .caption-with-letter-spacing,
body.furbos-adv [id$="__kicker"] .caption-with-letter-spacing,
body.furbos-adv [id$="__hero"] .caption-with-letter-spacing {
  font-size: 13px !important;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--adv-bright);
  text-align: left;
  margin: 0 0 12px !important;
}

body.furbos-adv [id$="__masthead"] .rich-text__wrapper,
body.furbos-adv [id$="__kicker"] .rich-text__wrapper,
body.furbos-adv [id$="__hero"] .rich-text__wrapper {
  justify-content: flex-start;
}

body.furbos-adv [id$="__masthead"] .rich-text__blocks,
body.furbos-adv [id$="__kicker"] .rich-text__blocks,
body.furbos-adv [id$="__hero"] .rich-text__blocks {
  text-align: left;
  width: 100%;
}

body.furbos-adv [id$="__masthead"] .rich-text__blocks h1,
body.furbos-adv [id$="__masthead"] .rich-text__blocks h2.heading,
body.furbos-adv [id$="__kicker"] .rich-text__blocks h1,
body.furbos-adv [id$="__kicker"] .rich-text__blocks h2.heading {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.78px;
  text-align: left;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* --------------------------------------------------------------------------
   7. Article furniture: deck, byline, pull quote, figure caption, rules.

      .adv-deck / .adv-byline / .adv-skip / .adv-figure already exist in the
      seven advertorials whose body is page HTML. The same class names are used
      by the custom-liquid furniture blocks on the twelve whose body is section
      JSON, so there is one system across all nineteen.
   -------------------------------------------------------------------------- */

/* the byline row: hairline above and below, small caps-ish tracking */
body.furbos-adv .adv-meta,
body.furbos-adv p.adv-byline {
  display: block;
  margin: 0 0 26px;
  padding: 12px 0;
  border-top: 1px solid var(--adv-rule);
  border-bottom: 1px solid var(--adv-rule);
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.4px;
  color: rgba(62, 30, 30, 0.72) !important;
  background: none;
  text-align: left;
}

body.furbos-adv .adv-meta strong,
body.furbos-adv p.adv-byline strong {
  color: var(--adv-ink);
  font-weight: 700;
}

/* the deck, the one-sentence standfirst under the headline */
body.furbos-adv p.adv-deck,
body.furbos-adv .adv-deck {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  font-size: 21px !important;
  line-height: 1.5 !important;
  font-weight: 400;
  color: var(--adv-ink) !important;
  text-align: left;
}

body.furbos-adv p.adv-deck strong,
body.furbos-adv .adv-deck strong {
  font-weight: 400;
}

/* the skip-ahead line */
body.furbos-adv p.adv-skip,
body.furbos-adv .adv-skip {
  margin: 0 0 26px;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(62, 30, 30, 0.78) !important;
}

/* the pull quote. Their tinted card is the single most "edited publication"
   element on their page. Ported to our mint, with the deep green rule. */
body.furbos-adv .adv-pullquote {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--adv-mint);
  border-left: 4px solid var(--adv-deep);
  border-radius: 0 6px 6px 0;
}

body.furbos-adv .adv-pullquote p,
body.furbos-adv .adv-pullquote .adv-pullquote__q {
  margin: 0;
  font-size: 22px;
  line-height: 1.65;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2px;
  color: var(--adv-deep);
}

body.furbos-adv .adv-pullquote .adv-pullquote__by {
  display: block;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(9, 89, 70, 0.75);
}

/* figure captions */
body.furbos-adv .adv-figcaption,
body.furbos-adv figcaption {
  display: block;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: rgba(62, 30, 30, 0.62);
  text-align: left;
}

body.furbos-adv .adv-figcaption strong {
  color: rgba(62, 30, 30, 0.85);
  font-weight: 700;
}

/* section rules */
body.furbos-adv .adv-rule,
body.furbos-adv .page-width--narrow > .rte hr {
  height: 1px;
  border: 0;
  background: var(--adv-rule);
  margin: 44px 0;
}

body.furbos-adv .adv-rule--heavy {
  height: 3px;
  background: var(--adv-deep);
  width: 64px;
  margin: 40px 0 32px;
}

/* --------------------------------------------------------------------------
   8. Images. Radius 20px on desktop and 10px on mobile, the way theirs steps
      down. Captions sit tight under the frame, not floating.
   -------------------------------------------------------------------------- */
body.furbos-adv .product-info__image-block {
  --border-radius: 2.0rem;
}

body.furbos-adv .page-width--narrow > .rte img,
body.furbos-adv .adv-figure img {
  border-radius: 20px;
  width: 100%;
  height: auto;
  display: block;
}

body.furbos-adv .adv-figure {
  margin: 34px 0;
}

/* --------------------------------------------------------------------------
   9. The as-seen-on strip. Full bleed inside the column, near-black, our own
      mastheads. Rebuilt rather than reusing their five third-party logos.
   -------------------------------------------------------------------------- */
body.furbos-adv .adv-press {
  margin: 8px 0 34px;
  background: var(--adv-bar);
  border-radius: 0 0 20px 20px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
}

body.furbos-adv .adv-press__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

body.furbos-adv .adv-press__item {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   10. Do-not-touch resets. Offer blocks, tier cards, prices, subscription
       widgets and buy boxes belong to another workstream. Anything the article
       type scale would otherwise reach inside those containers is put back.
   -------------------------------------------------------------------------- */
body.furbos-adv .featured-product .rich-text-block.rte p,
body.furbos-adv .pricing-table .rich-text-block.rte p,
body.furbos-adv .product-info .rich-text-block.rte p,
body.furbos-adv .price .rich-text-block.rte p {
  font-size: 1.7rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

body.furbos-adv .featured-product h2.heading,
body.furbos-adv .pricing-table h2.heading,
body.furbos-adv .product-info h2.heading {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
  font-size: 2.6rem;
}

/* --------------------------------------------------------------------------
   11. Mobile, 390px.

       Theirs runs 16px/24px with a 70px median block gap. Ours ran 17px/27.5px
       with a 19px gap: looser per line, four times tighter per block. The fix
       at mobile is block spacing, not leading.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  body.furbos-adv {
    --adv-body-size: 17px;
    --adv-body-lh: 1.6;
    --adv-para-gap: 22px;
  }

  body.furbos-adv .shopify-section-group-adv-header-group .rich-text {
    border-bottom-width: 0;
  }

  body.furbos-adv .shopify-section-group-adv-header-group .caption-with-letter-spacing,
  body.furbos-adv .shopify-section-group-adv-header-group .subtitle {
    margin: 13px 0 !important;
    font-size: 13px !important;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 1px;
  }

  body.furbos-adv h1.main-page-title,
  body.furbos-adv h1.page-title,
  body.furbos-adv [id$="__masthead"] .rich-text__blocks h1,
  body.furbos-adv [id$="__masthead"] .rich-text__blocks h2.heading,
  body.furbos-adv [id$="__kicker"] .rich-text__blocks h1,
  body.furbos-adv [id$="__kicker"] .rich-text__blocks h2.heading {
    font-size: 26px;
    line-height: 1.22;
    margin-bottom: 14px !important;
  }

  body.furbos-adv .rich-text__blocks h2.heading,
  body.furbos-adv .rich-text__blocks h3.heading,
  body.furbos-adv .content-wrapper h2.heading,
  body.furbos-adv .content-wrapper h3.heading,
  body.furbos-adv .page-width--narrow > .rte h2,
  body.furbos-adv .page-width--narrow > .rte h3 {
    font-size: 22px;
    line-height: 1.28;
    margin-top: 38px !important;
    margin-bottom: 13px !important;
  }

  body.furbos-adv p.adv-deck,
  body.furbos-adv .adv-deck {
    font-size: 18px !important;
  }

  body.furbos-adv .adv-meta,
  body.furbos-adv p.adv-byline {
    font-size: 13px !important;
  }

  body.furbos-adv .adv-pullquote {
    margin: 30px 0;
    padding: 18px 20px;
  }

  body.furbos-adv .adv-pullquote p,
  body.furbos-adv .adv-pullquote .adv-pullquote__q {
    font-size: 19px;
    line-height: 1.6;
  }

  body.furbos-adv .product-info__image-block {
    --border-radius: 1.0rem;
  }

  body.furbos-adv .page-width--narrow > .rte img,
  body.furbos-adv .adv-figure img {
    border-radius: 10px;
  }

  body.furbos-adv .adv-press {
    gap: 8px 16px;
    padding: 13px 14px;
    border-radius: 0 0 10px 10px;
  }

  body.furbos-adv .adv-press__label {
    width: 100%;
    text-align: center;
    font-size: 10px;
  }

  body.furbos-adv .adv-press__item {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  body.furbos-adv .adv-rule,
  body.furbos-adv .page-width--narrow > .rte hr {
    margin: 34px 0;
  }
}

/* very narrow phones: let the wordmark shrink rather than push the page wide */
@media screen and (max-width: 359px) {
  body.furbos-adv .shopify-section-group-adv-header-group .caption-with-letter-spacing,
  body.furbos-adv .shopify-section-group-adv-header-group .subtitle {
    font-size: 12px !important;
    letter-spacing: 0.6px;
  }
}

/* --------------------------------------------------------------------------
   12. Store chrome that survived inside the templates.

   Two of the nineteen open with a scrolling promo ticker as their first
   section, "LIMITED TIME OFFER 50% OFF" on the 5things page and a shipping and
   guarantee reel on pl-adv. Sitting directly under the masthead they read as an
   announcement bar and undo the whole treatment, so they are suppressed on
   advertorials only.

   Checked before hiding: both of those sections contain zero inputs, zero
   forms, zero buttons and zero links, so nothing on the page depends on
   anything inside them. A ticker further down a page is untouched, the rule
   only matches the first section in the article.
   -------------------------------------------------------------------------- */
body.furbos-adv #MainContent > .shopify-section:first-child .horizontal-ticker,
body.furbos-adv #MainContent > .shopify-section:first-child .vertical-ticker {
  display: none;
}

/* Mobile overflow fix. /pages/dog-allergies-truth reported scrollWidth 567 on a 390 viewport,
   a 177px overflow caused by a blockquote rendering at 472px. Constrain every article child
   so no element can ever exceed the column, on any advertorial. */
body.furbos-adv .page-width,
body.furbos-adv .rte,
body.furbos-adv .rte * {
  max-width: 100%;
  box-sizing: border-box;
}
body.furbos-adv blockquote {
  max-width: 100%;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  overflow-wrap: break-word;
}
body.furbos-adv img,
body.furbos-adv table,
body.furbos-adv pre { max-width: 100%; height: auto; }
body.furbos-adv table { display: block; overflow-x: auto; }


/* ==========================================================================
   MATCH-THEIRS PASS  (2026-08-18, requested by Ariel: "match it one to one")
   Measured live against shophealthypetz.com/pages/ear-infections.
   This block intentionally OVERRIDES the earlier editorial-typography
   decisions above (700px measure, 34px headline, brown ink). Ariel's call:
   theirs reads as a real article, ours read as a branded landing page.
   Their measured values:
     body      18px / lh 27px / Open Sans / #000
     column    856px
     h1        46px / 600 / Poppins
     masthead  #000
   Delete this block to revert to the previous house style.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600;700&display=swap');

body.furbos-adv {
  --adv-ink: #000000;
  --adv-bar: #000000;
  --adv-body-size: 18px;
  --adv-body-lh: 1.5;
  --adv-para-gap: 27px;
}

/* article measure: 700px -> 856px to match theirs */
body.furbos-adv .page-width--narrow > .rte,
body.furbos-adv .page-width--narrow > h1.main-page-title,
body.furbos-adv #MainContent .rich-text__blocks {
  max-width: 856px !important;
}

/* body copy: plain workhorse face + pure black. This is the single biggest
   reason theirs reads as editorial and ours read as brand. */
body.furbos-adv .rte,
body.furbos-adv .rte p,
body.furbos-adv .rich-text__blocks p,
body.furbos-adv #MainContent p {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  color: #000000 !important;
}

/* headline: 34px -> 46px, weight 600, same left alignment */
body.furbos-adv h1.main-page-title,
body.furbos-adv h1.page-title,
body.furbos-adv [id$="__masthead"] .rich-text__blocks h1,
body.furbos-adv [id$="__masthead"] .rich-text__blocks h2.heading {
  font-family: "Poppins", "Open Sans", Helvetica, Arial, sans-serif !important;
  font-size: 46px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

/* section subheads read as article H2s, not brand headings */
body.furbos-adv .rte h2,
body.furbos-adv .rich-text__blocks h2 {
  font-family: "Poppins", "Open Sans", Helvetica, Arial, sans-serif !important;
  color: #000000 !important;
}

/* masthead bar: maroon -> pure black */
body.furbos-adv .shopify-section-group-adv-header-group .rich-text {
  background-color: #000000 !important;
}

/* ==========================================================================
   STRUCTURE-MATCH PASS  (2026-08-18)
   Appended AFTER the MATCH-THEIRS typography pass. Nothing above is modified.
   Closes the three structural gaps vs shophealthypetz.com/pages/ear-infections:
     1. hero image moved up (done in the page body, not here)
     2. hint + byline wrapped in their pale mint block  rgb(224,255,248)
     3. skip link restyled as a solid grey bar under the hero
   No font-family / font-size / line-height is set here on purpose.
   ========================================================================== */

/* 2. the mint standfirst block. Theirs = .pf-19_ : #e0fff8 fill, 4px #e8fffd
      ring, width fit-content. Wraps the hint line and the byline as one card. */
body.furbos-adv.tpl-adv-ear-infections .adv-standfirst {
  background: rgb(224, 255, 248);
  border: 4px solid #e8fffd;
  width: fit-content;
  max-width: 100%;
  padding: 14px 20px;
  margin: 0 0 26px;
}

body.furbos-adv.tpl-adv-ear-infections .adv-standfirst p.adv-deck {
  margin: 0 0 10px;
}

/* the two hairlines that used to fence the byline are what made ours read as
   plain text between rules. Inside the mint card they must go. */
body.furbos-adv.tpl-adv-ear-infections .adv-standfirst p.adv-byline {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  margin: 0;
  background: none;
}

/* 3. the skip bar. Theirs = .pf-24_ : solid grey fill, white centred text,
      full column width, sitting directly under the hero. The whole bar is the
      anchor, so the whole bar is clickable. */
body.furbos-adv.tpl-adv-ear-infections p.adv-skip {
  margin: 20px 0 30px;
}

body.furbos-adv.tpl-adv-ear-infections p.adv-skip a {
  /* !important is required: furbos-v3.css `.furbos-lander .rte p > a:only-child`
     forces inline-block, and the link rule earlier in THIS file forces an
     underline. Both outrank this selector on specificity. */
  display: block !important;
  background: #919da9;
  color: #ffffff !important;
  text-align: center;
  text-decoration: none !important;
  padding: 14px 20px;
  border-radius: 4px;
}

body.furbos-adv.tpl-adv-ear-infections p.adv-skip a:hover,
body.furbos-adv.tpl-adv-ear-infections p.adv-skip a:focus {
  background: #7f8b97;
  color: #ffffff !important;
  text-decoration: none !important;
}

@media screen and (max-width: 749px) {
  body.furbos-adv.tpl-adv-ear-infections .adv-standfirst {
    width: auto;
    padding: 12px 14px;
  }

  body.furbos-adv.tpl-adv-ear-infections p.adv-skip a {
    padding: 12px 14px;
  }
}


/* ==========================================================================
   ONE-TO-ONE PASS  -  /pages/ear-infections only   (2026-08-18)
   Ariel: "match 1 to 1 on almost everything ... their story 1 to 1 with the
   exact spacing and everything".
   Measured against shophealthypetz.com/pages/ear-infections.
   Everything here is scoped to .tpl-adv-ear-infections so no other advertorial
   moves. APPENDED - nothing in the MATCH-THEIRS or STRUCTURE-MATCH blocks above
   is modified.
   ========================================================================== */

/* body paragraphs. Theirs: margin 0 0 16px. Scoped to :not([class]) so the
   furniture below (deck, skip, quote cards, CTA, sign-off) keeps its own
   spacing instead of being flattened by this rule. */
body.furbos-adv.tpl-adv-ear-infections .rte > p:not([class]) {
  margin: 0 0 16px !important;
}

/* subheads. Theirs: Public Sans 700 / 34px / lh 1.2em / margin-top 1px.
   The first two run a 12px bottom gap, the rest 32px, and two of them drop to
   32px type. Ours were h2 at 28px with a 48px top margin, which is what made
   the page read as a designed lander rather than an article. */
body.furbos-adv.tpl-adv-ear-infections .rte h3 {
  font-family: "Public Sans", "Open Sans", Helvetica, Arial, sans-serif !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #000000 !important;
  margin-top: 1px !important;
  margin-bottom: 32px !important;
  text-wrap: wrap;
}

body.furbos-adv.tpl-adv-ear-infections .rte h3.adv-h3--tight {
  margin-bottom: 12px !important;
}

body.furbos-adv.tpl-adv-ear-infections .rte h3.adv-h3--32 {
  font-size: 32px !important;
}

/* the standfirst is one <p> in theirs, so nothing trails it inside the card */
body.furbos-adv.tpl-adv-ear-infections .adv-standfirst p.adv-deck:last-child {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Figures. Theirs run two treatments, and the difference is deliberate:
     flush  - radius 0, no bottom gap   (hero, img2, img4)
     round  - radius 20px, 20px gap     (img3, img5, img6, img7, img8)
   Two of them are also narrower than the 856px column and left-aligned with
   the right margin eaten. That asymmetry is a large part of why their page
   reads as unstyled rather than art-directed, so it is reproduced rather than
   tidied up.
   -------------------------------------------------------------------------- */
body.furbos-adv.tpl-adv-ear-infections .adv-figure {
  margin: 0;
}

body.furbos-adv.tpl-adv-ear-infections .adv-figure img {
  border-radius: 20px;
  margin-bottom: 20px;
}

body.furbos-adv.tpl-adv-ear-infections .adv-figure--flush img {
  border-radius: 0;
  margin-bottom: 0;
}

/* theirs force-crops these two to a square inside the full column width */
body.furbos-adv.tpl-adv-ear-infections .adv-figure--sq img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

body.furbos-adv.tpl-adv-ear-infections .adv-figure--w533 img {
  width: 533px;
  max-width: 100%;
  margin-right: auto;
}

body.furbos-adv.tpl-adv-ear-infections .adv-figure--w790 img {
  width: 790px;
  max-width: 100%;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Testimonials. Theirs are plain <p> grey cards in the article flow, not a
   blockquote and not a testimonial section. Cairo 18px / lh 22px, #f1f1f1
   fill, 1px #bdbdbd hairline, 10px radius.
   -------------------------------------------------------------------------- */
body.furbos-adv.tpl-adv-ear-infections p.adv-quotecard {
  background: #f1f1f1;
  border: 1px solid #bdbdbd;
  border-radius: 10px;
  padding: 25px 20px 25px 30px;
  margin: 0 0 20px !important;
  line-height: 22px !important;
}

body.furbos-adv.tpl-adv-ear-infections p.adv-quotecard:first-of-type {
  margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Final CTA. Theirs is a full-column flat green bar, square corners, 22px.
   !important is required for the same reason the skip bar needs it: the
   furbos-v3 rule `.furbos-lander .rte p > a:only-child` forces inline-block
   and the link rule earlier in this file forces an underline.
   -------------------------------------------------------------------------- */
body.furbos-adv.tpl-adv-ear-infections p.adv-cta {
  margin: 20px 0 !important;
}

body.furbos-adv.tpl-adv-ear-infections p.adv-cta a {
  display: block !important;
  background: #7ed321;
  color: #ffffff !important;
  text-align: center;
  text-decoration: none !important;
  font-size: 22px !important;
  line-height: 1.3;
  padding: 20px;
  border-radius: 0;
}

body.furbos-adv.tpl-adv-ear-infections p.adv-cta a:hover,
body.furbos-adv.tpl-adv-ear-infections p.adv-cta a:focus {
  background: #71bd1e;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* sign-off: centred, tight leading, generous tail */
body.furbos-adv.tpl-adv-ear-infections p.adv-signoff {
  text-align: center;
  line-height: 20px !important;
  margin: 20px 0 43px !important;
}

/* --------------------------------------------------------------------------
   Mobile. Theirs: h3 drops to 22px with no bottom gap, the skip bar goes
   full-width navy, and the radius steps down to 10px.
   Not copied: PageFly also swaps their whole page to Noto Serif Georgian below
   767px, which is a builder accident rather than a design decision, so our
   sans stack is held.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  body.furbos-adv.tpl-adv-ear-infections .rte h3,
  body.furbos-adv.tpl-adv-ear-infections .rte h3.adv-h3--32 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  body.furbos-adv.tpl-adv-ear-infections p.adv-skip a {
    background: #3d5a80;
    border-radius: 0;
  }

  body.furbos-adv.tpl-adv-ear-infections p.adv-skip a:hover,
  body.furbos-adv.tpl-adv-ear-infections p.adv-skip a:focus {
    background: #33496a;
  }

  body.furbos-adv.tpl-adv-ear-infections p.adv-cta a {
    font-size: 18px !important;
    padding: 16px;
  }

  body.furbos-adv.tpl-adv-ear-infections .adv-figure img {
    border-radius: 10px;
  }

  body.furbos-adv.tpl-adv-ear-infections .adv-figure--flush img {
    border-radius: 0;
  }

  body.furbos-adv.tpl-adv-ear-infections .adv-figure--w533 img,
  body.furbos-adv.tpl-adv-ear-infections .adv-figure--w790 img {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   MASTHEAD REPAIR  (2026-08-18, same pass)

   The masthead was rendering BLACK ON BLACK, i.e. invisible. Cause: the caption
   block is a <p class="caption-with-letter-spacing"> inside .rich-text__blocks,
   so the MATCH-THEIRS rule

       body.furbos-adv .rich-text__blocks p { font-size:18px !important;
                                              color:#000 !important; ... }

   captured it and beat section 2's masthead rule, which carries no !important.
   Section 2 above is left untouched; this restores its intended values with
   enough specificity to win, and puts the wordmark back on their measured
   geometry: Poppins 700, 25px / 30.77px, 0.78px tracking, white, bar 80.77px.

   Also re-aligns the wordmark to the left edge of the article column. The
   masthead wrapper was capped at 820px and centred, landing the text at x=240
   while the story column starts at x=50. Theirs share one optical margin.
   -------------------------------------------------------------------------- */
body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks p.caption-with-letter-spacing,
body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks p.subtitle,
body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks .caption-with-letter-spacing,
body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks .subtitle {
  font-family: "Poppins", "Open Sans", Helvetica, Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 30.77px !important;
  font-weight: 700 !important;
  letter-spacing: 0.78px !important;
  text-transform: uppercase;
  color: #ffffff !important;
  text-align: left;
  margin: 25px 0 !important;
}

body.furbos-adv .shopify-section-group-adv-header-group .rich-text__wrapper.page-width {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media screen and (max-width: 767px) {
  body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks p.caption-with-letter-spacing,
  body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks p.subtitle,
  body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks .caption-with-letter-spacing,
  body.furbos-adv .shopify-section-group-adv-header-group .rich-text__blocks .subtitle {
    font-size: 13px !important;
    line-height: 16px !important;
    letter-spacing: 1px !important;
    margin: 13px 0 !important;
  }
}


/* --------------------------------------------------------------------------
   CTA + DISCLAIMER ALIGNMENT  (2026-08-18, same pass)

   1. The CTA label was rendering BLACK on the green bar. Theirs is white.
      Cause: section 7's `.page-width--narrow > .rte strong { color: var(--adv-ink) }`
      reaches the <strong> inside the anchor and beats the colour set on the
      anchor itself, which only colours the link box. Their pf-87_ is white on
      #7ed321, so the label is put back to white.

   2. The compliance disclaimer sat at x=240 while the article column starts at
      x=50. The inset is not on .rich-text__wrapper as with the masthead, it is
      on the outer .content-for-grouping.page-width, which is capped at 820px
      and centred. Purely ours (theirs carries no disclaimer), but an indented
      block under a left-aligned article reads as a broken layout.
   -------------------------------------------------------------------------- */
body.furbos-adv.tpl-adv-ear-infections p.adv-cta a strong,
body.furbos-adv.tpl-adv-ear-infections p.adv-cta a * {
  color: #ffffff !important;
}

body.furbos-adv.tpl-adv-ear-infections [id$="__disclaimer"] .content-for-grouping.page-width {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* --------------------------------------------------------------------------
   MOBILE TYPE SCALE  (2026-08-18, same pass)

   The MATCH-THEIRS pass set h1 46px / body 18px with !important and no mobile
   override, so the headline ate the entire first screen on a phone and the
   deck never stepped down. Theirs measured at <=767px:
       h1 25px   standfirst 14px   body 16px   h3 22px   skip bar navy
   h3 and the skip bar are already handled in the ONE-TO-ONE block above.

   NOTE ON SPECIFICITY: the rule being overridden is
       body.furbos-adv #MainContent p { font-size:18px !important }
   which contains an ID, so it scores (1,1,2). A class-only selector cannot
   beat it no matter how many classes are stacked. Every selector below
   therefore carries #MainContent as well.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  body.furbos-adv.tpl-adv-ear-infections #MainContent h1.main-page-title,
  body.furbos-adv.tpl-adv-ear-infections #MainContent h1.page-title,
  body.furbos-adv.tpl-adv-ear-infections #MainContent h1 {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  body.furbos-adv.tpl-adv-ear-infections #MainContent .adv-standfirst p.adv-deck {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  body.furbos-adv.tpl-adv-ear-infections #MainContent .rte > p:not([class]),
  body.furbos-adv.tpl-adv-ear-infections #MainContent p.adv-quotecard,
  body.furbos-adv.tpl-adv-ear-infections #MainContent p.adv-signoff {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}


/* --------------------------------------------------------------------------
   SKIP BAR TYPE  (2026-08-18, same pass)
   Theirs is Poppins 400 / 16px. Ours was inheriting 18px from
   `body.furbos-adv #MainContent p`, which carries an ID and so outranked
   section 7's `body.furbos-adv p.adv-skip { font-size:16px !important }`.
   Same specificity trap as the mobile block, same remedy.
   -------------------------------------------------------------------------- */
body.furbos-adv.tpl-adv-ear-infections #MainContent p.adv-skip,
body.furbos-adv.tpl-adv-ear-infections #MainContent p.adv-skip a {
  font-family: "Poppins", "Open Sans", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}