/* ==========================================================================
   THEME TOKENS  — mirrors the competitor's Shopify theme settings 1:1
   Change these 6 lines to rebrand the whole funnel.
   ========================================================================== */
:root{
  /* Three roles, one job each. Mixing them is what made the buy box read as
     assembled rather than designed:
       navy      = structure, selection and primary action (headings, the chosen
                   tier, tickers, the add-to-cart button)
       sky       = support only (icon chips, focus rings, tints, links). It is
                   never a background for white text: at 2.4:1 it fails contrast.
       teal      = proof and affirmation (verified ticks, the "after" tag,
                   timeline labels, claim ticks). Small doses, never structure.  */
  --accent-1:#47b5e9;              /* sky: icon chips, focus, links, tints    */
  --accent-2:#0C8480;              /* action teal: buttons only               */
  /* Darkened from #13b6b5. That gave white button text a 2.6:1 contrast ratio,
     which fails WCAG AA (4.5:1) and even the large-text floor (3:1) — on the
     single most important control on the page. #0C8480 is 4.5:1 and still
     unmistakably teal. Do not brighten it back without re-checking contrast. */
  --accent-2-dark:#0A6C69;         /* teal hover/pressed                      */
  --bg-1:#ffffff;
  --bg-2:#d5f7ff;                  /* pale blue section background            */
  --heading:#16305C;               /* navy: headings, structure, selection    */
  --text:#1F2733;                  /* near-black with a blue cast - body copy  */
  --text-90:var(--text);
  --text-60:#5B6169;               /* secondary text                          */
  --star:#FFCC00;

  /* Surfaces and lines are all tinted toward the navy. A neutral grey sitting
     next to a blue is the fastest way to make a palette look accidental, so
     there are no pure greys left in the buy box. */
  --surface-quiet:#F6F9FC;         /* unselected card ground                  */
  --surface-quiet-2:#E9F1F8;       /* unselected perk bar, quiet strips       */
  --tint-chip:#E4F1FB;             /* icon chip ground                        */
  --line:rgba(22,48,92,.15);       /* hairline                                */
  --line-strong:rgba(22,48,92,.28);
  --ink-muted:#5A7391;             /* blue-grey body on quiet surfaces        */
  --ink-faint:#8CA3BC;             /* blue-grey icons/strikethrough           */
  --on-navy-70:rgba(255,255,255,.74);

  /* ---- type ---------------------------------------------------------------
     Figtree is variable, so 400/500/600/700/800 cost one file.
     Tracking rule: negative ONLY on display sizes, positive on uppercase
     buttons/labels, zero on body copy.                                       */
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-heading:var(--font-body);
  --fw-body:400; --fw-bold:700; --fw-heading:600;

  --fs-h1:34px;   --ls-h1:-0.025em;   /* 52px on desktop */
  --fs-h2:26px;   --ls-h2:-0.015em;   /* 34px on desktop */
  --fs-h3:20px;   --ls-h3:-0.005em;   /* 24px on desktop */
  --fs-body:17px;                     /* 18px on desktop */
  --fs-small:14px;                    /* 15px on desktop */
  --fs-label:16px; --ls-label:0.02em; /* buttons + uppercase labels */
  --measure:65ch;                     /* max line length for reading copy */

  --buttons-radius:12px;
  --buttons-border-width:2px;
  --media-radius:12px;
  --text-boxes-radius:24px;
  --bar-radius:8px;                /* bundle bars */
  --inputs-radius:6px;
  --pill-radius:40px;

  --page-width:1400px;
  --gutter-mobile:20px;
  --gutter-desktop:40px;

  --dur:.2s; --dur-long:.5s;
}

/* ========================= RESET ========================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-1);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);
  line-height:1.6;letter-spacing:normal;-webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* clip, not hidden: hidden would make body a scroll container and can break position:sticky */
}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--heading);margin:0 0 .5em}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:var(--ls-h1);line-height:1.12}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--ls-h2);line-height:1.18}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.3}
h4{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.3}
small,.text-small{font-size:var(--fs-small)}
/* numerals line up in prices, quantities and tables */
.price,.qty,table td,.bundle__price,.bundle__compare,.bundle__gift-price,[data-total]{font-variant-numeric:tabular-nums}
/* cap reading copy at a comfortable measure */
.feature__text p,.accordion__content p,.accordion__content li,.section__sub,.guarantee p,.review__body,.benefit-card p,.timeline__item p,.ingredient p,.icon-bar__item p,.footer__block p{max-width:var(--measure)}
.section__sub,.section__head p{margin-left:auto;margin-right:auto}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent-1);outline-offset:2px}

.page-width{max-width:var(--page-width);margin:0 auto;padding:0 var(--gutter-mobile)}
.narrow{max-width:760px;margin:0 auto}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ========================= MARQUEE / TICKERS ========================= */
.marquee{overflow:hidden;position:relative;width:100%}
.marquee__track{display:flex;width:max-content;animation:marquee var(--speed,26s) linear infinite}
.marquee__group{display:flex;align-items:center;flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* Top announcement ticker and mid-page strip ticker are one component with two
   mount points — same height, type, spacing and speed. Declared together so a
   change to one cannot silently leave the other behind. */
.announcement-ticker,
/* Navy, not sky. Sky (#47b5e9) behind white text is 2.4:1, which fails WCAG AA,
   and a saturated pale-blue band above a white header made the page open on its
   weakest colour. Navy reads as the brand and passes comfortably. */
.strip-ticker{background:var(--heading);color:#fff;height:40px;display:flex;align-items:center}
.announcement-ticker .marquee__item,
.strip-ticker .marquee__item{
  display:inline-flex;align-items:center;gap:10px;padding:0 20px;white-space:nowrap;
  font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);
}
.announcement-ticker .sep{display:none}

/* Sale bar. Sits where the announcement ticker sat, same navy ground, so the
   88px of chrome above the fold is unchanged. Navy rather than a red: red is
   not in this palette, and a red urgency band is the exact furniture the page
   spends twenty screens distancing itself from. Navy makes it read as the
   brand running a sale, not as a template running a tactic. */
.salebar{background:var(--heading);color:#fff}
.salebar__inner{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,4vw,34px);padding:6px clamp(14px,4vw,28px);
}
.salebar__label{display:flex;flex-direction:column;line-height:1.12}
.salebar__label strong{font-size:15px;font-weight:700;letter-spacing:.02em}
.salebar__label span{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.salebar__clock{display:flex;align-items:flex-start;gap:5px;font-variant-numeric:tabular-nums}
/* The days unit is toggled with the hidden attribute, and display:flex below beat it,
   so a zero-days clock rendered as "0 days : 03 hours". Attribute wins now. */
.salebar__unit[hidden],.salebar__sep[hidden]{display:none}
/* FIXED width, not min-width. The units were sizing to their own labels, so "hours"
   made a wider column than "secs" and the four numbers sat at uneven intervals. */
.salebar__unit{display:flex;flex-direction:column;align-items:center;width:44px}
.salebar__unit b{font-size:22px;font-weight:700;line-height:1}
.salebar__unit span{font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:1px}
.salebar__sep{font-size:20px;font-weight:700;line-height:1;opacity:.45;margin-top:1px}
@media (min-width:750px){
  .salebar__label strong{font-size:17px}
  .salebar__unit b{font-size:25px}
  .salebar__unit{width:50px}
}

/* trust bar under it */
.trust-bar{background:var(--bg-2);color:var(--text);min-height:72px;display:flex;align-items:center}
.trust-bar .marquee__item{
  display:inline-flex;align-items:center;gap:10px;
  padding:0 22px;white-space:nowrap;font-size:var(--fs-small);font-weight:600;line-height:1.2;
}
.trust-bar .stars{color:var(--star);letter-spacing:-1px;font-size:15px}
.trust-bar .divider{width:1px;height:26px;background:rgba(18,18,18,.15)}
.trust-bar .ico{width:20px;height:20px;flex:0 0 20px;color:var(--accent-1)}
.trust-bar .two-line{display:flex;flex-direction:column;text-align:center}



/* ========================= HEADER ========================= */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--bg-1);
  height:56px;display:flex;align-items:center;
  border-bottom:1px solid rgba(18,18,18,.07);
}
.site-header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:100%;max-width:var(--page-width);margin:0 auto;padding:0 var(--gutter-mobile);
}
.header__icons{display:flex;align-items:center;gap:2px;justify-self:end;margin-right:-7px}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;transition:background var(--dur)}
.icon-btn:hover{background:rgba(71,181,233,.1)}
.icon-btn svg{width:20px;height:20px}
/* Caps at open tracking, not bold-and-tight. Figtree 800 at negative tracking is
   the stock look every Shopify theme ships with; the letterspaced caps read as a
   deliberate mark and sit correctly beside the medical cross. */
.site-logo{font-size:17px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--heading);display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.site-logo__mark{width:20px;height:20px;flex:0 0 auto;color:var(--accent-1);margin-top:-1px}
.header__burger{margin-left:-7px}
.header__nav{display:none}
@media (min-width:990px){
  .page-width{padding:0 var(--gutter-desktop)}
  .site-header__inner{padding:0 var(--gutter-desktop)}
  .header__nav{display:flex;gap:26px;font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-label)}
  .header__nav a:hover{color:var(--accent-1)}
  .header__burger{display:none}
  :root{--fs-h1:52px;--fs-h2:34px;--fs-h3:24px;--fs-body:18px;--fs-small:15px}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.drawer[open],.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--dur)}
.drawer.is-open .drawer__overlay{opacity:1}
.drawer__panel{
  position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);background:#fff;
  transform:translateX(-100%);transition:transform var(--dur-long) cubic-bezier(.25,.8,.3,1);
  padding:24px 22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
.drawer--right .drawer__panel{left:auto;right:0;transform:translateX(100%)}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.drawer__link{padding:14px 0;border-bottom:1px solid rgba(18,18,18,.08);font-size:var(--fs-h3);font-weight:600;color:var(--heading)}

/* ========================= BUTTONS ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:14px 24px;border-radius:var(--buttons-radius);
  font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-align:center;
  transition:transform var(--dur),filter var(--dur);width:100%;
}
.btn:active{transform:scale(.985)}
.btn--atc{background:var(--heading);color:#fff;text-transform:uppercase}
.btn--atc:hover{filter:brightness(1.06)}
.btn--outline{background:transparent;color:var(--accent-1);border:var(--buttons-border-width) solid var(--accent-1)}

/* pulse on the main ATC — same attention pattern as the original */
/* Set by the cart module while a request is in flight. Styled rather than
   text-swapped, because the button contains the live price node. */
.btn.is-busy{opacity:.62;cursor:progress;pointer-events:none}
.btn.is-busy.btn--pulse{animation:none}
.btn--pulse{animation:atcPulse 2.6s ease-in-out infinite}
@keyframes atcPulse{0%,100%{box-shadow:0 0 0 0 rgba(19,182,181,.45)}50%{box-shadow:0 0 0 12px rgba(19,182,181,0)}}
@media (prefers-reduced-motion:reduce){.btn--pulse{animation:none}}

/* -------- cart drawer: branded cover (12 Sep 2026) --------
   The panel carries 24px/22px of padding, so the cover cancels it with negative
   margins to run full bleed. Change one and change the other. */
/* Built to the reference layout the brand supplied: logo, one pill, one row of trust
   marks, tight. Vertical rhythm is deliberately small (8px) because this sits above
   the cart contents and every pixel here pushes the line items and the checkout button
   further down the panel. */
.cartcover{
  margin:-24px -22px 14px;padding:18px 20px 14px;
  background:var(--surface-quiet);border-bottom:1px solid var(--line);
  display:grid;justify-items:center;gap:8px;text-align:center;
}
/* The cover carries the HEADER lockup, not a second one. It used to set its own
   weight 800 / -1.5% tracking / sentence case, which is a different wordmark from the
   600 / +13% / uppercase in the header, on the same screen. `.site-logo` does the work
   now and this only scales it up. */
.cartcover__logo{font-size:18px;gap:9px}
.cartcover__logo .site-logo__mark{width:23px;height:23px;flex:0 0 23px}

/* Avatar pill. The white ring is what makes three overlapping circles read as three
   separate faces rather than one smear, which is the whole reason the reference layout
   works. Same construction as the checkout banner's pill, drawn there with Path2D.
   THE AVATARS ARE PETS AND THE LABEL IS A PROPERTY, NOT A COUNT - see the markup. */
.cartcover__pets{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:4px 13px 4px 5px;
  background:var(--tint-chip);border-radius:var(--pill-radius);
}
.cartcover__avatars{display:inline-flex;align-items:center}
.cartcover__avatars img{
  width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;display:block;
}
.cartcover__avatars img+img{margin-left:-8px}
.cartcover__petstxt{
  font-size:12px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--heading);
}

/* The chip states a property of the product, not a count of customers. */
.cartcover__chip{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--text-60);
  border-radius:var(--pill-radius);padding:0;
  font-size:12px;font-weight:600;letter-spacing:.01em;
}
.cartcover__chip .ico{width:14px;height:14px;color:var(--accent-2);flex:0 0 14px}

/* One row, icon beside label, hairline chips - the reference puts all three on a single
   line and that is what makes it read as a strip rather than three stacked features.
   Labels are two words each so they hold one line down to 330px. */
.cartcover__trust{
  display:flex;justify-content:center;flex-wrap:nowrap;gap:12px;
  font-size:11px;font-weight:600;color:var(--text-60);line-height:1;
}
.cartcover__trust li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Hairline between the three, instead of a box around each: three bordered chips need
   357px against the 316px of panel a 390px phone gives, so they wrapped 2+1. Borderless
   with a divider is the same strip at 301px, and it reads tighter, which is the ask. */
.cartcover__trust li+li{border-left:1px solid var(--line);padding-left:12px}
.cartcover__trust .ico{width:14px;height:14px;color:var(--heading);flex:0 0 14px}
.cart__heading{font-size:18px;font-weight:700;color:var(--heading);margin:0 0 2px}
.cart__empty{padding:10px 0 2px;font-size:14px;color:var(--text-60);display:grid;gap:7px}
.cart__empty p:first-child{font-weight:700;color:var(--text)}
/* ⚠ MUST come after .cart__empty. The UA sheet's [hidden]{display:none} loses to any
   author rule that sets display, and .cart__empty sets display:grid — so without this
   the empty state stayed visible ABOVE the line items the moment the cart filled.
   Any future `display` on an element toggled via .hidden needs the same guard. */
.cart__empty[hidden]{display:none}

/* Mouse-drag on the horizontal rails (funnel.js module 13). Touch is untouched: a finger
   already swipes these natively, and this only exists because a cursor drag does nothing
   to a scroll-snap container, which made the strips look frozen on desktop and in the
   _tools/mobile.html device preview. */
.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.is-dragging img{pointer-events:none}