/* Just Fitness Health. Its own stylesheet; no class name here appears on any
   other storefront. The idea is SUPPLY OVER TIME, so the page is ruled like a
   schedule rather than boxed like a catalogue: hairlines, no cards, no shadows,
   and one piece of colour doing real work. */

:root{
  --deep:#1f584c;      /* the ground: hero, subscribe band, footer */
  --teal:#2b7a6a;      /* the active accent: links, buttons, marks */
  --amber:#d98b3f;     /* RESERVED for the days you have run out, nowhere else */
  --yellow:#ffc93c;    /* the two calls to action: the hero button and Auto Ship */
  --paper:#f9fbfb;
  --white:#ffffff;
  --ink:#102723;
  --mute:#7c8886;
  --line:#e1ecea;
  --onDeep:#dfece8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.6 "Work Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}
h1,h2,h3,.jfh-num{font-family:"Saira Condensed","Work Sans",system-ui,sans-serif;font-weight:700;letter-spacing:.005em}
h1,h2,h3{margin:0 0 .4em;line-height:1.04}
p{margin:0 0 1em}
a{color:var(--teal)}
img{max-width:100%;height:auto;display:block}

/* ZONE WIDTHS. Each band sets its own measure, because a single column on
   every zone is what makes two different pages read as one template. */
.jfh-w-bar{max-width:1400px;margin:0 auto;padding:0 28px}
.jfh-w-hero{max-width:1180px;margin:0 auto;padding:0 28px}
.jfh-w-facts{max-width:960px;margin:0 auto;padding:0 28px}
.jfh-w-range{max-width:1320px;margin:0 auto;padding:0 28px}
.jfh-w-sub{max-width:900px;margin:0 auto;padding:0 28px}
.jfh-w-ask{max-width:820px;margin:0 auto;padding:0 28px}
.jfh-w-doc{max-width:760px;margin:0 auto;padding:0 28px}

/* ------------------------------------------------- utility bar + masthead */
/* THE STRIP RIDES WITH THE PAGE, NOT THE WHOLE MASTHEAD. A shop whose basket
   scrolls away asks the customer to remember it is there. Sticking only the
   strip keeps the basket on screen at 38px of height, where sticking the
   masthead and nav would eat a quarter of a phone screen on every page. */
.jfh-util{background:var(--deep);color:var(--onDeep);font-size:13.5px;
          position:sticky;top:0;z-index:30}
.jfh-util .jfh-w-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.jfh-util a{color:#fff;text-decoration:none;font-weight:500}
.jfh-util a:hover{text-decoration:underline}

.jfh-bask{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:6px 8px 6px 15px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5);
  font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;line-height:1;
  transition:background .15s,border-color .15s,color .15s;
}
.jfh-util a.jfh-bask:hover{text-decoration:none;background:rgba(255,255,255,.15)}
.jfh-bask__n{
  display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:999px;background:rgba(255,255,255,.22);font-size:14px;line-height:1;
}
/* IT ONLY GOES SOLID WHEN THERE IS SOMETHING IN IT, so the state carries
   information rather than decoration. White rather than yellow on purpose:
   yellow is spoken for by the hero button and Auto Ship, and a third yellow
   on screen would leave the page with no single loudest thing. */
.jfh-bask.is-full{background:#fff;border-color:#fff;color:var(--deep)}
.jfh-util a.jfh-bask.is-full:hover{background:#f2f7f5;border-color:#f2f7f5}
.jfh-bask.is-full .jfh-bask__n{background:var(--deep);color:#fff}

.jfh-head{background:var(--white);border-bottom:1px solid var(--line)}
.jfh-head__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 14px}
.jfh-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.jfh-mark img{width:30px;height:30px}
.jfh-mark span{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:25px;letter-spacing:.01em}
/* THE NAV SITS ON ITS OWN LINE under a hairline, which is a different masthead
   anatomy from brand-left-nav-right. */
.jfh-nav{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:0 30px;padding:11px 0}
.jfh-nav a{
  text-decoration:none;color:var(--ink);font-family:"Saira Condensed",sans-serif;
  font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.jfh-nav a:hover{border-bottom-color:var(--teal)}
.jfh-nav a[aria-current]{border-bottom-color:var(--teal);color:var(--teal)}

/* ------------------------------------------------------------------ hero */
.jfh-hero{background:var(--deep);color:#fff;padding:62px 0 54px}
.jfh-hero h1{font-size:clamp(34px,5.1vw,62px);max-width:19ch;font-weight:800}
.jfh-hero__kick{color:#8fc3b5;font-size:16px;margin:0 0 14px;font-weight:500}
.jfh-hero__say{color:var(--onDeep);font-size:19px;max-width:54ch;margin-top:18px}
.jfh-hero__do{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:26px}
.jfh-hero__note{color:#8fc3b5;font-size:14.5px;margin:0}

.jfh-go{
  display:inline-block;background:var(--white);color:var(--deep);
  font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border:0;border-radius:3px;cursor:pointer;
}
.jfh-go:hover{background:#eef6f4}
.jfh-go--teal{background:var(--teal);color:#fff}
.jfh-go--teal:hover{background:#246557}
.jfh-go--line{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.jfh-go--line:hover{background:var(--teal);color:#fff}

/* THE GAUGE. The one bold element on the site, and it carries information
   rather than decoration: thirty servings is thirty days, the reorder lands on
   day 25, and the amber days are the ones you spend with nothing in the house.
   It is why the first subscription charge is on day 25 and not day 30. */
.jfh-gauge{margin-top:44px;border-top:1px solid rgba(255,255,255,.22);padding-top:26px}
.jfh-gauge__days{display:flex;gap:3px;align-items:flex-end;height:58px}
.jfh-gauge__d{flex:1;background:#2f7868;border-radius:1px;height:28px}
.jfh-gauge__d--mark{background:#fff;height:58px;position:relative}
.jfh-gauge__d--out{background:var(--amber);height:40px}
.jfh-gauge__key{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;font-size:14.5px;color:var(--onDeep)}
.jfh-gauge__key b{font-weight:500;color:#fff}
.jfh-gauge__key i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:baseline}
.jfh-gauge__cap{margin:14px 0 0;color:#8fc3b5;font-size:14.5px;max-width:70ch}

/* ----------------------------------------------------------------- bands */
.jfh-band{padding:58px 0}
.jfh-band--line{border-top:1px solid var(--line)}
.jfh-h2{font-size:clamp(26px,3.1vw,38px);margin-bottom:8px}
.jfh-h2__sub{color:var(--mute);margin:0 0 30px;font-size:17px;max-width:62ch}
/* the ladder and the packages each get a heading, because the two sets of
   prices mean different things and an unlabelled pair reads as one list */

/* three facts, numbered because they ARE a sequence of days */
.jfh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;list-style:none;margin:0;padding:0}
.jfh-facts h3{font-size:22px;margin-bottom:4px}
.jfh-facts p{color:var(--mute);margin:0;font-size:16px}
.jfh-facts li{border-top:3px solid var(--teal);padding-top:14px}

/* the range: a ruled list, not a card grid */
.jfh-range{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.jfh-item{display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;
          padding:20px 0;border-bottom:1px solid var(--line)}
.jfh-item__pic{width:96px;height:96px;border:1px solid var(--line);background:var(--white);
               display:flex;align-items:center;justify-content:center;overflow:hidden}
.jfh-item__pic img{width:88px;height:88px;object-fit:contain}
.jfh-item__pic--pdf{font-family:"Saira Condensed",sans-serif;font-weight:700;color:var(--mute);
                    letter-spacing:.08em;font-size:17px}
.jfh-item__nm{font-size:23px;margin:0 0 2px}
.jfh-item__sz{color:var(--mute);font-size:14.5px;margin:0 0 4px}
.jfh-item__sa{color:var(--ink);font-size:15.5px;margin:0;max-width:62ch}
.jfh-item__amt{text-align:right;white-space:nowrap}
.jfh-item__amt b{font-family:"Saira Condensed",sans-serif;font-size:25px;font-weight:700;display:block}
.jfh-item__amt span{color:var(--mute);font-size:13.5px;display:block;margin-bottom:8px}

/* the packaged hero product */

/* The package total is a PRICE in its own column, with the per-bottle rate
   beneath it. It used to live inside the Add button, where it read as a
   button label rather than as the price of the box. */

/* subscribe band, the answer to the gauge */
.jfh-sub{background:var(--teal);color:#fff;padding:56px 0}
.jfh-sub h2{font-size:clamp(26px,3.3vw,40px);margin-bottom:10px}
.jfh-sub p{color:#dcefe9}
.jfh-sub__box{border:1px solid rgba(255,255,255,.34);padding:24px 26px;margin-top:24px}
.jfh-sub__l{list-style:none;margin:0 0 18px;padding:0}
.jfh-sub__l li{display:flex;justify-content:space-between;gap:20px;padding:8px 0;
               border-bottom:1px solid rgba(255,255,255,.22);font-size:17px}
.jfh-sub__l li:last-child{border-bottom:0}
.jfh-sub__amt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
              font-family:"Saira Condensed",sans-serif;font-size:30px;font-weight:700;margin-top:4px}
.jfh-sub__amt small{font-family:"Work Sans",sans-serif;font-size:15px;font-weight:400;color:#dcefe9}
.jfh-sub__fine{font-size:14.5px;color:#cde7e0;margin:16px 0 0}

/* questions */
.jfh-ask{margin:0}
.jfh-ask > div{border-top:1px solid var(--line);padding:18px 0}
.jfh-ask dt{font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:21px;margin-bottom:4px}
.jfh-ask dd{margin:0;color:var(--mute)}

/* a photograph used as a full-bleed rule between bands */
.jfh-shot{position:relative;height:300px;overflow:hidden;background:var(--deep)}
.jfh-shot img{width:100%;height:100%;object-fit:cover;opacity:.9}
.jfh-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 28px;color:#fff;font-size:15px;
  background:linear-gradient(to top,rgba(16,39,35,.84),rgba(16,39,35,0));
}

/* --------------------------------------------------------- documents etc */
.jfh-doc{padding:48px 0 60px}
.jfh-doc h1{font-size:clamp(30px,4vw,44px);margin-bottom:6px}
.jfh-doc h2{font-size:22px;margin:30px 0 8px}
.jfh-doc h3{font-size:19px;margin:22px 0 6px}
.jfh-doc p,.jfh-doc li{font-size:16px}
.jfh-doc ul,.jfh-doc ol{padding-left:22px}
.jfh-doc table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15.5px}
.jfh-doc th,.jfh-doc td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.jfh-doc th{background:var(--accentSoft,#eaf2f0);font-family:"Saira Condensed",sans-serif;font-weight:700}
.jfh-doc td.jfh-r{text-align:right;white-space:nowrap}
.jfh-lede{font-size:19px;color:var(--mute);max-width:60ch}

/* supplement facts, on the range page */
.jfh-facts-panel{border:1px solid var(--ink);padding:12px 14px;margin:12px 0 0;max-width:420px}
.jfh-facts-panel h4{font-family:"Saira Condensed",sans-serif;font-size:18px;margin:0 0 6px;
                    border-bottom:4px solid var(--ink);padding-bottom:4px}
.jfh-facts-panel table{width:100%;border-collapse:collapse;font-size:14px}
.jfh-facts-panel td{padding:3px 0;border-bottom:1px solid var(--line)}
.jfh-facts-panel td:last-child{text-align:right;white-space:nowrap}
.jfh-facts-panel p{font-size:13px;color:var(--mute);margin:8px 0 0}

/* product entries on the range page */
.jfh-entry{border-top:1px solid var(--line);padding:30px 0;display:grid;
           grid-template-columns:260px 1fr;gap:34px;align-items:start}
.jfh-entry__pic{border:1px solid var(--line);background:var(--white);padding:10px}
.jfh-entry h2{font-size:28px;margin-bottom:2px}
.jfh-entry__sz{color:var(--mute);margin:0 0 10px}
.jfh-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.jfh-buy label{font-size:14.5px;color:var(--mute)}

/* THE VOLUME RATES, PRINTED BESIDE THE CONTROL THAT REACHES THEM. A rate that
   only appears once the quantity is already up is a discount found by
   accident; printed, it is the reason to raise it. */
/* A GRID RATHER THAN A WRAPPING ROW, so three rungs sit on one line instead of
   breaking two-then-one. auto-fit rather than a fixed three, because a product
   with a different number of rungs must still lay out sensibly. */
.jfh-tiers{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;
           grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.jfh-tiers li{display:flex;flex-direction:column;gap:2px;padding:9px 15px;
              border:1px solid var(--line);border-radius:9px;background:var(--white)}
.jfh-tiers b{font-family:"Saira Condensed",sans-serif;font-size:16.5px;letter-spacing:.02em}
.jfh-tiers span{color:var(--mute);font-size:13.5px}

/* A STEPPER RATHER THAN A BARE NUMBER FIELD. The native spinner arrows are a
   few pixels tall and are the control a buyer is meant to use to reach the
   cheaper rate, so they are replaced rather than decorated. */
.jfh-qty{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);
         border-radius:9px;overflow:hidden;background:var(--white)}
.jfh-qty__b{width:40px;border:0;background:var(--paper);color:var(--ink);
            font-size:21px;line-height:1;cursor:pointer;font-family:inherit;
            transition:background .12s}
.jfh-qty__b:hover:not(:disabled){background:var(--line)}
.jfh-qty__b:disabled{opacity:.3;cursor:default}
.jfh-qty__b:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.jfh-qty input{width:56px;border:0;text-align:center;font:inherit;font-size:17px;
               padding:10px 0;-moz-appearance:textfield;background:transparent}
.jfh-qty input::-webkit-outer-spin-button,
.jfh-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jfh-qty input:focus{outline:2px solid var(--teal);outline-offset:-2px}

/* cart */
.jfh-cart__row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
               border-bottom:1px solid var(--line);padding:16px 0}
.jfh-cart__row b{font-family:"Saira Condensed",sans-serif;font-size:21px;font-weight:700}
.jfh-cart__row span{color:var(--mute);font-size:14.5px}
.jfh-cart__tot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
               padding:18px 0;font-family:"Saira Condensed",sans-serif;font-size:28px;font-weight:700}
.jfh-drop{background:none;border:0;color:var(--teal);font:inherit;font-size:14.5px;
          text-decoration:underline;cursor:pointer;padding:0 0 0 10px}
.jfh-note{background:var(--accentSoft,#eaf2f0);border-left:3px solid var(--teal);
          padding:14px 18px;margin:18px 0;font-size:15.5px}

/* ---------------------------------------------------------------- footer */
.jfh-foot{background:var(--ink);color:#cfd9d6;padding:46px 0 30px;margin-top:0}
.jfh-foot a{color:#fff}
.jfh-foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.jfh-foot h3{font-family:"Saira Condensed",sans-serif;font-size:19px;color:#fff;margin-bottom:8px;
             letter-spacing:.05em;text-transform:uppercase}
.jfh-foot p{font-size:15px;margin:0 0 6px}
.jfh-foot__n{display:flex;flex-direction:column;gap:6px}
.jfh-foot__n a{font-size:15px}
.jfh-foot__d{border-top:1px solid #27403b;margin-top:30px;padding-top:18px;font-size:13.5px;color:#9aaba7}

@media (max-width:760px){
  .jfh-item{grid-template-columns:70px 1fr;gap:16px}
  .jfh-item__pic{width:70px;height:70px}
  .jfh-item__pic img{width:62px;height:62px}
  .jfh-item__amt{grid-column:2;text-align:left}
  .jfh-item__amt span{margin-bottom:4px}
  .jfh-entry{grid-template-columns:1fr}
  .jfh-entry > *{min-width:0}
  
  
  .jfh-gauge__days{height:46px}
  .jfh-gauge__d--mark{height:46px}
  .jfh-shot{height:210px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* the hero is two columns above the gauge, so the right half is the product
   rather than dead ground. The gauge sits OUTSIDE the grid and runs the full
   measure beneath both, which is what makes the short headline read as a
   deliberate measure rather than as a layout that stopped early. */
.jfh-hero__in{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.jfh-hero__pic{margin:0}
.jfh-hero__pic img{width:100%;height:auto;border:1px solid rgba(255,255,255,.3)}
.jfh-hero__pic figcaption{color:#8fc3b5;font-size:14px;margin-top:10px}
@media (max-width:860px){
  .jfh-hero__in{grid-template-columns:1fr;gap:28px}
  .jfh-hero__pic{max-width:300px}
}

/* the second clause of the utility bar drops on a phone, where the full
   sentence wraps to two lines and takes the basket link with it */
@media (max-width:620px){ .jfh-util__more{display:none} }

/* California opt-out: the confirmation line only appears once a choice
   has been recorded, so the page never claims a state it has not reached. */
.jfh-dns-state{background:var(--white);border-left:4px solid var(--teal);
  padding:12px 16px;font-size:16px;color:var(--ink);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* The table scrolls, the document does not. */
.jfh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){ .jfh-scroll table{min-width:560px} }

/* Auto Ship sits under the basket total, never between a price and its
   button, and the tick gates nothing: the sentence beside it says the
   enrolment is optional, so a box that blocked the order would argue
   with its own words. */
.jfh-ship{border:1px solid var(--line);background:var(--white);
  padding:16px 18px;margin:18px 0 0}
.jfh-ship--on{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}

.jfh-ship__fine{color:var(--mute);font-size:14.5px;margin:10px 0 0}

/* THE SUBSCRIPTION-ONLY ADD-ONS. Quieter than the Auto Ship panel above it:
   that one states terms the buyer is committing to, this one is an offer they
   can ignore, and the two should not compete for the same attention. */
/* WHAT IS IN THE PACKAGE, DRAWN FROM EACH PRODUCT'S OWN PHOTOGRAPH. One
   generated group shot cannot be trusted to contain the right bottles, so the
   tile shows the real shots with the quantity on each. It cannot misstate the
   contents, because the contents are what it is built from. */
.jfh-packpic{align-self:start}
.jfh-packpic ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
                grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
.jfh-packpic li{border:1px solid var(--line);border-radius:10px;background:var(--white);
                padding:8px 8px 10px;text-align:center;position:relative}
.jfh-packpic img{width:100%;height:auto;display:block;border-radius:6px}
.jfh-packpic b{position:absolute;top:4px;left:4px;min-width:26px;padding:3px 7px;
               border-radius:999px;background:var(--deep);color:#fff;
               font-family:"Saira Condensed",sans-serif;font-size:14px;line-height:1.3}
.jfh-packpic span{display:block;margin-top:6px;color:var(--mute);font-size:12.5px;
                  line-height:1.25}

.jfh-adds{border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:18px 0 0}
.jfh-adds__h{font-family:"Saira Condensed",sans-serif;font-size:20px;
             letter-spacing:.02em;margin:0}
.jfh-adds__p{color:var(--mute);font-size:14.5px;margin:6px 0 14px}
.jfh-add{display:flex;justify-content:space-between;gap:16px;align-items:center;
         border-top:1px solid var(--line);padding:14px 0 0;margin-top:14px}
.jfh-add:first-of-type{border-top:0;padding-top:0;margin-top:0}
.jfh-add b{font-family:"Saira Condensed",sans-serif;font-size:18px}
.jfh-add span{color:var(--mute);font-size:14px}
.jfh-add__amt{display:flex;align-items:center;gap:14px;white-space:nowrap;
              font-family:"Saira Condensed",sans-serif;font-size:21px;font-weight:700}
.jfh-add__b{padding:8px 18px;font-size:15px}
.jfh-sub__go{margin:18px 0 0}
.jfh-go--yellow{background:var(--yellow);color:var(--ink);border:1px solid var(--yellow)}
.jfh-go--yellow:hover{background:#f0b728;border-color:#f0b728}

/* --------------------------------------------------------- basket drawer --
   Seth-direct 2026-10-24: the basket was a number in the top bar and nothing
   else, so a customer who added something saw no confirmation that an order
   existed. This slides in from the right on an add and on the basket link.
   It is the only fixed-position element on the site, and it is the only place
   a shadow is used, because a panel over the page is the one thing that is
   genuinely floating above it. */
.jfh-dim{
  position:fixed;inset:0;background:rgba(16,39,35,.45);z-index:40;
  opacity:0;transition:opacity .22s ease;
}
.jfh-dim.is-open{opacity:1}

.jfh-draw{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:41;
  background:var(--white);display:flex;flex-direction:column;
  box-shadow:-18px 0 44px rgba(16,39,35,.22);
  transform:translateX(100%);transition:transform .26s ease;
}
.jfh-draw.is-open{transform:translateX(0)}

.jfh-draw__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:2px solid var(--ink);flex:0 0 auto;
}
.jfh-draw__h{
  font-family:"Saira Condensed",sans-serif;font-size:24px;letter-spacing:.02em;
  text-transform:uppercase;margin:0;
}
.jfh-draw__x{
  background:none;border:0;font-size:30px;line-height:1;color:var(--ink);
  cursor:pointer;padding:0 4px;
}
.jfh-draw__x:hover{color:var(--teal)}

.jfh-draw__body{flex:1 1 auto;overflow-y:auto;padding:6px 22px 18px}
.jfh-draw__row{
  display:flex;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.jfh-draw__row b{display:block;font-size:17px}
.jfh-draw__row span{color:var(--mute);font-size:14.5px}
.jfh-draw__amt{text-align:right;white-space:nowrap}
.jfh-draw__empty{color:var(--mute);padding:28px 0}

.jfh-draw__foot{
  flex:0 0 auto;padding:18px 22px 22px;border-top:2px solid var(--ink);
  background:var(--paper);
}
.jfh-draw__sum{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Saira Condensed",sans-serif;text-transform:uppercase;
  font-size:21px;margin-bottom:14px;
}
.jfh-draw__sum b{font-size:26px}
.jfh-draw__go{display:block;text-align:center;width:100%}
.jfh-draw__note{color:var(--mute);font-size:14px;margin:12px 0 0}

/* THE HANDLE ON THE RIGHT EDGE. Fixed, so the basket is one click away at any
   scroll position on every page except the basket itself. It sits UNDER the
   backdrop's z-index rather than over it, so even if the script failed to hide
   it the open panel would still cover it. */
.jfh-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:32;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 11px;border:0;border-radius:12px 0 0 12px;
  background:var(--deep);color:#fff;cursor:pointer;
  font-family:"Saira Condensed",sans-serif;font-weight:700;
  box-shadow:0 8px 28px rgba(16,39,35,.3);
  transition:background .15s,padding-right .15s;
}
.jfh-tab:hover{background:var(--teal);padding-right:16px}
.jfh-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.jfh-tab__n{
  display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  border-radius:999px;background:rgba(255,255,255,.24);font-size:15px;line-height:1;
}
.jfh-tab.is-full .jfh-tab__n{background:var(--yellow);color:var(--ink)}
.jfh-tab__w{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.jfh-tab[hidden]{display:none}

/* On a phone the sticky strip already carries the basket a thumb's reach away,
   so the handle shrinks to the count alone rather than competing with it. */
@media (max-width:640px){
  .jfh-tab{padding:11px 8px;border-radius:10px 0 0 10px}
  .jfh-tab__w{display:none}
}

/* a panel that slides is movement for its own sake to anyone who has asked
   for less of it; it still appears, it just stops travelling */
@media (prefers-reduced-motion:reduce){
  .jfh-draw,.jfh-dim,.jfh-tab{transition:none}
}

/* ------------------------------------------------------------ consent --
   TWO REQUIRED TICKS ABOVE THE ORDER ROUTE. The box is drawn large on
   purpose: it is the one control on the page a customer must deliberately
   operate, and a 13px checkbox on a phone is a control you miss rather
   than one you refuse. 20px with a 44px-tall row clears the touch target
   every mobile guideline asks for. */
.jfh-consent{border:1px solid var(--line);border-left:3px solid var(--yellow);
             background:var(--white);padding:6px 18px;margin:18px 0}
.jfh-consent__row{display:flex;align-items:flex-start;gap:12px;
                  padding:14px 0;min-height:44px;cursor:pointer}
.jfh-consent__row + .jfh-consent__row{border-top:1px solid var(--line)}
.jfh-consent__box{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;
                  accent-color:var(--teal);cursor:pointer}
.jfh-consent__text{font-size:15.5px;line-height:1.5;color:var(--ink)}
.jfh-consent__text a{color:var(--teal);text-decoration:underline}
.jfh-consent__row:hover .jfh-consent__text{color:var(--deep)}


/* ---- checkout form, revealed under the consent ticks on the basket page ---- */
.jfh-form{margin-top:18px;border:1px solid var(--line);padding:20px 22px 22px;background:#fff}
.jfh-form h2{font-size:22px;margin:4px 0 12px}
.jfh-form h2 + .jfh-form__row,.jfh-form h2 + .jfh-form__f{margin-top:0}
.jfh-form__row{display:flex;gap:14px;flex-wrap:wrap}
.jfh-form__row > .jfh-form__f{flex:1 1 200px}
.jfh-form__row > .jfh-form__f--s{flex:1 1 120px}
.jfh-form__f{display:block;margin:0 0 14px;min-width:0}
.jfh-form__f span{display:block;font-size:14px;color:var(--mute);margin-bottom:5px}
.jfh-form__f input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink)}
.jfh-form__f input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.jfh-form__err{color:#a3271f;background:#fbeeec;border-left:3px solid #a3271f;padding:10px 12px;margin:4px 0 14px;font-size:15.5px}
.jfh-form__btn{width:100%;justify-content:center;margin-top:4px}
.jfh-form__btn[disabled]{opacity:.6;cursor:wait}
.jfh-form__fine{font-size:14px;color:var(--mute);margin-top:10px}