/* ============================================================================
   JIFU shop2 rebuild — site chrome + commerce styles
   Layered ON TOP of jifu.css (which supplies tokens, fonts, type + components).
   Only pieces jifu.css does not cover: the sticky header + mega-menu, mobile
   drawer, the AI chat launcher, the footer, and the shop funnel (PDP/cart/
   checkout/forms). Everything here reads jifu.css custom properties.
   ========================================================================== */

:root{ --site-header-h:72px; }

/* F-CSS: this is a duplicate of the reset jifu.css already ships. jifu.css is
   loaded first and CONFINES its reset to the .cine wrapper so existing pages
   are not restyled; site-extra.css must not re-broaden it back to the whole
   document. So the box-sizing/body/a/img reset is scoped to .cine here too,
   and the global `html{ scroll-behavior:smooth }` is dropped - a document-wide
   behaviour change is out of scope for an additive foundation and the redesign
   can reintroduce it scoped when its pages land. */
/* Scoped with :where(.cine) (T8) so these keep (0,0,1) and never outrank a
   component class - a bare .cine a at (0,1,1) made every jifu-btn--primary-inverse
   paint parchment-on-parchment. */
:where(.cine), :where(.cine) *{ box-sizing:border-box; }
/* .cine's ground is declared ONCE, further down this file, and it is DARK.
   The light pair that used to sit here was dead - the later rule overrode it -
   and having both made the sheets contradict each other (T3's item c). */
:where(.cine) a{ color:inherit; }
:where(.cine) img{ max-width:100%; display:block; }

/* ---------------------------------------------------------------- header --- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--site-header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--jifu-rule,rgba(25,25,25,.16));
}
.site-header__inner{
  width:100%; max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px;
}
.site-header__logo{ display:flex; align-items:center; height:28px; }
.site-header__logo img{ height:26px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.site-nav__item{ position:relative; }
.site-nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; font:600 14.5px/1 "Montserrat",sans-serif;
  text-decoration:none; color:var(--jifu-ink); border-radius:8px; white-space:nowrap;
}
.site-nav__link:hover{ background:var(--jifu-accent-ghost,rgba(139,109,85,.14)); }
.site-header__spacer{ flex:1; }
.site-header__actions{ display:flex; align-items:center; gap:10px; }

/* mega-menu dropdown (desktop) */
.mega{
  position:absolute; top:calc(100% + 10px); left:0; min-width:240px;
  background:#fff; border:1px solid var(--jifu-rule); border-radius:14px;
  box-shadow:0 24px 60px rgba(15,15,15,.14); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.site-nav__item:hover .mega, .site-nav__item:focus-within .mega{ opacity:1; visibility:visible; transform:none; }
.mega a{
  display:block; padding:9px 12px; border-radius:8px; text-decoration:none;
  font:600 14px/1.2 "Montserrat",sans-serif; color:var(--jifu-ink);
}
.mega a:hover{ background:var(--jifu-ground-raised,rgb(244,241,234)); }
.mega__col-title{ font:700 11px/1 "Montserrat"; letter-spacing:.14em; text-transform:uppercase;
  color:var(--jifu-ink-muted,rgba(25,25,25,.66)); padding:8px 12px 4px; }

/* header pill / login / lang / cart / chat */
.site-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  background:var(--jifu-ink); color:var(--jifu-parchment,rgb(244,241,234));
  border-radius:999px; text-decoration:none; font:700 13.5px/1 "Montserrat"; border:0; cursor:pointer;
}
.site-pill:hover{ background:var(--jifu-midnight-deep,rgb(15,15,15)); }
.site-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:999px; border:1px solid var(--jifu-rule); background:#fff; cursor:pointer; color:var(--jifu-ink);
  position:relative; text-decoration:none;
}
.site-iconbtn:hover{ background:var(--jifu-ground-raised); }
.site-cart__count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--jifu-gold,rgb(139,109,85)); color:#fff; border-radius:999px;
  font:700 11px/18px "Montserrat"; text-align:center;
}
.site-lang{ position:relative; }
.site-lang__menu{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--jifu-rule);
  border-radius:12px; box-shadow:0 24px 60px rgba(15,15,15,.14); padding:8px; max-height:340px;
  overflow:auto; min-width:210px; display:none; z-index:70;
}
.site-lang__menu.open{ display:block; }
.site-lang__menu a{ display:block; padding:8px 12px; border-radius:8px; text-decoration:none; font:600 13.5px/1.2 "Montserrat"; }
.site-lang__menu a:hover{ background:var(--jifu-ground-raised); }

/* burger + mobile drawer */
.site-burger{ display:none; }
.site-drawer{ display:none; }
@media (max-width:1023px){
  .site-nav{ display:none; }
  .site-header__actions .site-pill{ display:none; }   /* Shop Now lives inside drawer on mobile */
  .site-burger{ display:inline-flex; }
  .site-drawer{
    display:block; position:fixed; inset:var(--site-header-h) 0 0 auto; width:min(88vw,360px);
    background:#fff; border-left:1px solid var(--jifu-rule); z-index:55; padding:16px;
    transform:translateX(100%); transition:transform .22s ease; overflow:auto;
  }
  .site-drawer.open{ transform:none; box-shadow:-30px 0 80px rgba(15,15,15,.18); }
  .site-drawer__scrim{ position:fixed; inset:var(--site-header-h) 0 0 0; background:rgba(15,15,15,.4);
    z-index:54; opacity:0; visibility:hidden; transition:.2s; }
  .site-drawer__scrim.open{ opacity:1; visibility:visible; }
}
.drawer-group{ border-bottom:1px solid var(--jifu-rule-soft,rgba(25,25,25,.1)); }
.drawer-group>summary{
  list-style:none; cursor:pointer; padding:14px 6px; font:700 16px/1 "Montserrat";
  display:flex; justify-content:space-between; align-items:center;
}
.drawer-group>summary::-webkit-details-marker{ display:none; }
.drawer-group[open]>summary .chev{ transform:rotate(180deg); }
.drawer-group a{ display:block; padding:10px 14px; text-decoration:none; font:600 14.5px/1.2 "Montserrat"; color:var(--jifu-ink-muted); }
.drawer-cta{ margin:16px 6px 6px; }

/* ------------------------------------------------------- AI chat launcher --- */
/* Moved OFF the bottom-right (was covering Buy Now) to the header, by the cart,
   and made minimizable — per Clark 2026-09-21. */
.jifu-chat{ position:fixed; right:20px; bottom:20px; z-index:80; width:min(380px,92vw); display:none; }
.jifu-chat.open{ display:block; }
.jifu-chat__panel{
  background:#fff; border:1px solid var(--jifu-rule); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px rgba(15,15,15,.22); display:flex; flex-direction:column; height:min(560px,72vh);
}
.jifu-chat__head{ background:var(--jifu-ink); color:var(--jifu-parchment); padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; font:700 15px/1 "Montserrat"; }
.jifu-chat__head button{ background:transparent; border:0; color:inherit; cursor:pointer; font-size:18px; }
.jifu-chat__body{ flex:1; padding:16px; overflow:auto; background:var(--jifu-ground-raised); }
.jifu-chat__msg{ background:#fff; border:1px solid var(--jifu-rule-soft); border-radius:12px; padding:10px 12px;
  font:500 14px/1.45 "Montserrat"; margin-bottom:10px; max-width:88%; }
.jifu-chat__input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--jifu-rule); }
.jifu-chat__input input{ flex:1; border:1px solid var(--jifu-rule); border-radius:999px; padding:10px 14px; font:500 14px "Montserrat"; }

/* --------------------------------------------------------------- footer --- */
.site-footer{ background:var(--jifu-midnight-deep,rgb(15,15,15)); color:var(--jifu-parchment,rgb(244,241,234)); }
.site-footer__inner{ max-width:1280px; margin:0 auto; padding:64px 24px 40px; }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.site-footer h4{ font:700 12px/1 "Montserrat"; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,241,234,.56); margin:0 0 16px; }
.site-footer a{ display:block; color:rgba(244,241,234,.82); text-decoration:none; padding:6px 0; font:600 14px/1.3 "Montserrat"; }
.site-footer a:hover{ color:var(--jifu-parchment); }
.site-footer__socials{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.site-footer__socials a{
  width:40px; height:40px; border-radius:999px; border:1px solid rgba(244,241,234,.16);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.site-footer__socials a:hover{ background:rgba(244,241,234,.1); }
.site-footer__legal{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(244,241,234,.14);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font:500 12.5px/1.6 "Montserrat"; color:rgba(244,241,234,.56); }
@media (max-width:809px){ .site-footer__grid{ grid-template-columns:1fr 1fr; gap:28px; } }

/* --------------------------------------------------- shop funnel pieces --- */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.pdp__media{ background:var(--jifu-ground-raised); border-radius:20px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; padding:8%; }
.pdp__media img{ max-height:100%; width:auto; object-fit:contain; }   /* contain: never crop the packshot */
.pdp__price{ font:700 26px/1 "Montserrat"; }
.qty{ display:inline-flex; align-items:center; gap:16px; border:1px solid var(--jifu-ink-ghost,rgba(25,25,25,.18));
  border-radius:999px; padding:8px 16px; }
.qty button{ background:none; border:0; font-size:18px; cursor:pointer; line-height:1; }
@media (max-width:809px){ .pdp{ grid-template-columns:1fr; gap:28px; } }

.cart-row{ display:grid; grid-template-columns:88px 1fr auto auto; gap:16px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--jifu-rule-soft); }
.cart-row__media{ width:88px; height:88px; background:var(--jifu-white,rgb(255,255,255)); border:1px solid var(--jifu-rule-soft,rgba(25,25,25,.1)); border-radius:14px;
  display:flex; align-items:center; justify-content:center; padding:8px; }
/* ASANA:1219413299038519: white panel with a hairline on the white commerce ground (was ground-raised parchment). */
.cart-summary{ background:var(--jifu-white,rgb(255,255,255)); border:1px solid var(--jifu-rule-soft,rgba(25,25,25,.1)); border-radius:18px; padding:24px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font:700 12px/1 "Montserrat"; letter-spacing:.06em; text-transform:uppercase; color:var(--jifu-ink-muted); }
.field input,.field select,.field textarea{
  border:1px solid var(--jifu-rule); border-radius:12px; padding:12px 14px; font:500 15px "Montserrat"; background:#fff; }
/* ASANA:1218831776129105 (Weston): base.html's show/hide-password script wraps
   each password input in a div.relative and pins the eye to that wrapper's
   right edge. In a .field column the wrapper stretched to full width but the
   input inside kept its intrinsic width, so the password box was shorter than
   the username box and the eye sat OUTSIDE it (and .field input's padding beat
   the script's pr-11, so text would run under the eye). The wrapped input now
   fills the wrapper and keeps room for the 44px eye. */
.field > .relative{ width:100%; }
.field > .relative > input{ width:100%; box-sizing:border-box; padding-right:44px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:809px){ .form-grid{ grid-template-columns:1fr; } .cart-row{ grid-template-columns:64px 1fr auto; } }

.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ============================================================================
   Cinematic product/pillar treatment (matches the UNREEL/Framer pages):
   full-bleed hero film, dark grounds, glowing product stage, big claims.
   Per Clark 2026-09-21: the site needs the moving film to capture demand.
   ========================================================================== */
.cine{ background:var(--jifu-midnight-well,rgb(8,8,8)); color:var(--jifu-parchment,rgb(244,241,234)); }
/* The .cine wrapper is now full-bleed (100vw) in jifu.css, so the hero simply
   fills it - no per-element bleed needed. */
.film-hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; background:#000; width:100%; }
.film-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Mobile review 2026-09-25: a film-hero photo whose subject stands LEFT of
   centre. On a phone the hero crops a wide photo to a narrow window, and the
   centred default dropped the Our Leadership speaker (at ~24% of the source)
   out of frame entirely - an empty auditorium. 14% keeps him about 40% across
   the phone frame; on wide viewports the box is wider than the photo, so only
   top/bottom crop and this x value changes nothing. */
.film-hero__video--subject-left{ object-position:14% 50%; }
/* ASANA:1219413299038511 (Weston, 2026-10-12): Our Leadership desktop hero.
   From 810px up the <picture> serves a delivery crop whose photo sits in the
   top of a black-padded 3:2 frame (stage speaker in the upper-middle); anchor
   it at the top so a wide box trims only the black pad, and 42% across keeps
   the speaker centred when a squarer box crops the sides. Phones keep the
   default centred framing (tests/browser/test_mobile_image_framing.py). */
@media (min-width:810px){
  .film-hero__video--stage-lift{ object-position:42% 0%; }
}
.film-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,.15) 0%, rgba(8,8,8,.35) 55%, rgba(8,8,8,.95) 100%); }

/* ==========================================================================
   F-CSS4 (ASANA:1218722646768048) - type over photographs.

   MEASURED, not designed: 88 text nodes over imagery across the six travel
   routes, sampled pixel by pixel under the glyphs. 70 had pixels below their
   WCAG floor, 36 had a MEDIAN below it and 14 were 100% below - punta cana's
   h1 at 2.24 against 3.0, its accent word at 1.09, the how-it-works Q and A
   kicker at 1.29.

   WHY THE HERO SCRIM ABOVE DOES NOT FIX IT, and why it is left alone:
   contrast against a given pixel is NOT monotonic in scrim alpha. Darkening a
   ground walks it through the text's own luminance, where the ratio bottoms
   out at 1.00, and only improves after. Gold's worst point is alpha 0.45 and
   that ramp runs .15 to .35 across the copy band - so on a blown highlight
   gold reads 1.1 to 1.7 WITH the scrim and 3.21 with none. Strengthening the
   ramp would also darken heroes that never failed, and the copy block's
   position moves with how much copy a page has (flex-end pins its BOTTOM), so
   a ramp tuned to one page is wrong for the next.

   SO THE VEIL IS ANCHORED TO THE COPY BLOCK, not to the hero or the band. It
   keys off the element whose readability is in question, which makes it
   copy-length invariant, and it leaves the photograph outside the type
   untouched.

   THE NUMBER. On a blown white pixel - the worst ground any photograph can
   present - every token we ship clears its own floor at alpha 0.85:
       gold accent 4.29 (3.0)    papaya 5.32 (3.0)    meridian 8.54 (3.0)
       parchment 12.20 (3.0)     parchment@.70 6.81   parchment@.66 6.24
       parchment@.56 4.94 (4.5)
   Two do not, and neither is a scrim problem:
       gold KICKER at 4.5 needs a ground of rgb(41) - near black - so over
         imagery it takes an inverse-ink token instead (see below);
       an accent rendered at NORMAL text size takes the 4.5 floor, and no
         achievable veil clears it - that is a SIZE or TOKEN decision for the
         page, not a ground decision (T6 measured it on education: the same
         colour passes at 25px and fails at 16px with nothing else changed).

   THE COST, stated rather than discovered: under the copy block the
   photograph is largely suppressed. That is the price of legible type over a
   picture and it is paid only where the type is.

   THE OPT-OUT IS A MECHANISM, NOT A GRANT, and nothing in this PR uses it.
   --jifu-copy-veil is a custom property, so a page CAN set it to 0 - but no
   page does, here or anywhere, and the only occurrence of that value in this
   file is this sentence. An earlier draft of this comment granted the opt-out
   to education on the strength of a band-level "0.0% under floor". T7 was
   right to reject it, twice over: the PR did not implement what the comment
   described, and the figure was the wrong one. T6's own measurement inside
   that same band reads 72.1 / 86.5 / 72.8 / 33.8 percent under floor on its
   four 16px accent titles - so "the band is clean" was true of its body copy
   and false of the band. A ground-based exemption would not have helped those
   four anyway: they fail on the SIZE clause, at the 4.5 floor, and no veil
   reaches that.

   So no family is exempted by this PR. If a family measures its band already
   below the target and wants the veil off, that is a change to its own page
   with its own per-node numbers, and it has to survive the size clause
   separately.
   ========================================================================== */
.film-hero__inner, .overlay-band__inner{ --jifu-copy-veil:.85; }
.film-hero__inner::before, .overlay-band__inner::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-56px -32px -40px;
  /* THE FADE HAPPENS IN THE BLEED, NOT IN THE BLOCK. The first version ramped
     over 26% of the block's own height, which left the kicker and the h1 - the
     lines at the TOP of the copy - sitting on a partly-faded veil. Measured:
     punta cana's kicker ground went 183 -> 134 while its body copy went
     178 -> 34, and the h1 went 179 -> 95. That is the same defect as the hero
     scrim one level down: a ramp tuned to a percentage of a box whose height
     varies with how much copy a page has.
     So the ramp is in PIXELS and it completes inside the 56px top bleed. Every
     line of actual text sits on the full veil regardless of block height. */
  background:linear-gradient(180deg,
    rgba(8,8,8,0) 0px,
    rgba(8,8,8,var(--jifu-copy-veil)) 56px,
    rgba(8,8,8,var(--jifu-copy-veil)) 100%); }
.film-hero__inner{ position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto;
  /* ASANA:1218722646768048 (F-CSS2) - the consent banner OCCLUDES the hero
     type. .film-hero is min-height:88vh with align-items:flex-end, so the
     hero's only copy sits at its bottom edge, and #cookie-consent is fixed
     to the bottom of the VIEWPORT. T6 measured it on /education/jifu-connect
     at 1440x800: banner 723-800, eyebrow 744-756, and elementFromPoint at
     the eyebrow's centre returns the banner's text node. The banner's own
     script already pads the BODY by its height, which does nothing here -
     body padding moves the end of the document, not a viewport-height hero
     at the top of it.
     --jifu-consent-h is published by that same script (0 when the banner is
     absent or dismissed), so the clearance is exactly the banner's real
     height at any wrap, and this rule costs nothing on a returning visitor. */
  /* --jifu-consent-overlap is how far THIS hero's bottom edge reaches past
     the top of the consent banner, measured per hero by the banner script
     and 0 whenever the banner is absent, dismissed, or the hero sits clear
     of it. The banner's bare HEIGHT is not enough: the hero starts below the
     sticky header, so an 88vh hero ends below the fold and a height-only
     clearance left 41px of the headline covered at 1440x800. */
  padding:0 24px calc(72px + var(--jifu-consent-overlap, 0px)); }
.film-hero__eyebrow{ font:700 12px/1 "Montserrat"; letter-spacing:.28em; text-transform:uppercase; color:rgba(244,241,234,.7); }

.stage{ position:relative; background:var(--jifu-midnight-deep,rgb(15,15,15)); color:var(--jifu-parchment);
  padding:96px 0; overflow:hidden; }
.stage__glow{ position:absolute; left:50%; top:40%; width:680px; height:680px; transform:translate(-50%,-50%);
  border-radius:50%; filter:blur(90px);
  /* F-CSS4 (T3 ruling, copy remedy): .5 tinted the stage ground green far
     enough under the copy that the faint 13.5px eyebrow read 4.08 on travel
     and 2.9 on health (the flat-disc case). .25 is the highest opacity that
     clears the 4.5 floor at the WORST GLYPH PIXEL on both families and both
     widths - measured worst 5.24 (travel mobile), 4.79+ (travel desktop),
     5.25/5.41 (health). .30 clears desktop but leaves mobile travel's margin
     unverified, so .25 is the measured-safe value with the least glow lost. */
  opacity:.25; pointer-events:none;
  background:radial-gradient(circle, var(--accent, rgb(214,79,143)) 0%, transparent 70%); }
/* F-CSS4: .cine-accent-bg is `background: var(--accent)` - the SHORTHAND - so
   on the ten health stages it RESETS the radial-gradient above and paints a
   flat accent disc instead, blurred only at its rim. The class buys nothing
   here: .stage__glow already reads var(--accent) and .cine--health already
   sets it, so the gradient was always going to be health green. Measured
   /health/gen3 desktop, the faint 13.5px eyebrow over the stage: 2.99 flat,
   and the same token over travel's untouched gradient is 4.08. One rule
   rather than ten template edits, because the defect is in the cascade. */
.cine .stage__glow.cine-accent-bg{
  background:radial-gradient(circle, var(--accent, rgb(214,79,143)) 0%, transparent 70%); }
.stage__inner{ position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.stage__media{ display:flex; align-items:center; justify-content:center; }
.stage__media img{ max-height:520px; width:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.claim-num{ font:800 44px/1 "Montserrat"; color:var(--accent, rgb(214,79,143)); }
.claim-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.claim-list li{ padding-left:20px; position:relative; color:rgba(244,241,234,.82); font:500 15px/1.5 "Montserrat"; }
.claim-list li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--accent, rgb(214,79,143)); }
@media (max-width:809px){ .stage__inner{ grid-template-columns:1fr; gap:32px; text-align:center } .stage__media img{ max-height:360px } }

/* ASANA:1218809602173990 photo-contrast fix (T2 2026-09-23, travel page only).
   On /travel-by-jifu at mobile the stage stacks single-column, so the centred
   cyan accent glow (.stage__glow, --accent rgb(0,229,199)) sits directly behind
   the "Access to the travel portal" copy. Measured with test_photo_contrast:
   its bright core is the ground under the worst glyph pixel of three claim-list
   lines (Four weeks... / Member rates... / Best Price...), reading ~1.3 - i.e.
   0.1-0.2% of each line's pixels under the 4.5 AA floor. This is the accent
   GLOW, not the photo. Reducing the glow opacity does NOT clear it (the probe
   reads the glow's declared colour, not its composited alpha - .06..25 all
   still fail), and a soft scrim leaves the left-edge bullet zone uncovered; so
   the reliable remedy (3/3 green) is to drop the glow behind the copy at
   mobile. The dark stage ground then reads behind the text and every node
   clears 4.5. Scoped to this page (data-page) and to mobile only - the glow,
   desktop, and every other page/stage are untouched. */
@media (max-width:809px){
  [data-page="travel-by-jifu"] .stage__glow{ opacity:0; }
}

/* sticky buy bar */
.buybar{ position:sticky; bottom:0; z-index:30; background:rgba(15,15,15,.92);
  backdrop-filter:blur(10px); border-top:1px solid rgba(244,241,234,.12); color:var(--jifu-parchment); }
.buybar__inner{ max-width:1120px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.buybar__price{ font:700 20px/1 "Montserrat"; margin-left:auto; }

/* benefits over imagery + botanical grid */
.overlay-band{ position:relative; min-height:520px; display:flex; align-items:center; background:#000; overflow:hidden; }
.overlay-band__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.overlay-band__inner{ position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:64px 24px; width:100%; }
/* F-CSS4: the band has no scrim of its own - background:#000 with the image at
   opacity .7 leaves a pale photo at rgb(177,173,165) under the copy. The veil
   above supplies one. */
.botanical{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.botanical figure{ margin:0; border-radius:16px; overflow:hidden; background:var(--jifu-midnight-deep); aspect-ratio:1/1 }
.botanical img{ width:100%; height:100%; object-fit:cover }
@media (max-width:809px){ .botanical{ grid-template-columns:repeat(2,1fr) } }

/* chat launcher relocated into the shop2 header (left of the cart) */
#jifuChatBtn.chat-in-header{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; padding:0; border:0; border-radius:999px;
  background:transparent; color:rgba(244,241,234,.85); cursor:pointer; flex:0 0 auto;
}
#jifuChatBtn.chat-in-header:hover{ background:rgba(244,241,234,.12); color:#fff; }

/* ===== Mobile refinements (phones, <=809px) ===================================
   Loaded after jifu.css, so these override the base F-CSS at phone width only;
   desktop is untouched. */

/* ASANA:1218798167291379 - Cinematic hero on phones. .film-hero is min-height:88vh,
   so on a 390x844 phone the first screen shows only the eyebrow + tagline (pinned
   at flex-end) and the following H1/lede/CTA section lands below the fold. Cap the
   hero to 65svh on phones - svh (small viewport height) so the iOS toolbar does not
   push it taller than the visible screen - which lifts the section after it onto
   the first screen. Desktop unchanged; the shop hero is capped further below. */
@media (max-width:809px){
  .film-hero{ min-height:65svh; }
}

/* ASANA:1218798167257402 - /shop hero on phones. The shop hero carries an inline
   min-height:60vh which still pushes the filter bar and first product row past the
   fold. Cap it to 42svh so both are reachable within one swipe; !important is
   required to beat the section's inline min-height. Phones only; desktop unchanged.
   NOTE: the grey band above the photo comes from the hero asset's baked-in white
   padding and is fixed by the Cloudinary e_trim + c_fill,g_auto delivery transform
   (the page-imagery mechanism, wired via page_image), NOT by CSS - per Clark's
   2026-09-23 image rule: keep raw originals, fit with Cloudinary transforms, never
   re-export/hand-crop/CSS-hack the asset. */
@media (max-width:809px){
  .film-hero[aria-label="Shop"]{ min-height:42svh !important; }
}

/* ASANA:1218798167353673 - Mobile tap targets + text size, phones only.
   (a) Top-bar utility links get a 44px hit area (they were ~42x16px, under the
       44x44 minimum). inline-flex + centred so only the tappable box grows.
   (b) Button labels (.jifu-btn, 10.8px) and kickers (.jifu-kicker, 10.2px at
       phone width) get a 12px floor. The letter-spaced uppercase style is kept -
       only the size is raised. site-extra.css loads after jifu.css, so these win
       by cascade order over the base and the phone typography block. Shop-card
       "Add to cart"/"Buy Now" and "Shop all"/"Join" use .jifu-btn, so this one
       shared-token change covers the shop card partial too. Desktop unchanged. */
@media (max-width:809px){
  .js-utility a{ min-height:44px; display:inline-flex; align-items:center; }
  /* ASANA:1219242793759941 - the rule above also catches the ACCOUNT
     DROPDOWN's links (the panel nests inside .js-utility) and its
     inline-flex beats their `block` class, so two short labels (Travel
     Portal + JIFU Live) share one row on phones. Dropdown entries keep
     the 44px hit area but as full-width rows, one entry per line. */
  .js-utility details > div a{ display:flex; width:100%; }
  .jifu-btn{ font-size:12px; }
  .jifu-kicker{ font-size:12px; }
}

/* Mobile review 2026-09-25: the empty cart's Featured Products was one column
   of near-square cards on a phone - four products took ~4 screens of scroll.
   Two per row below 810px, like Home's product rail. */
@media (max-width: 809.98px) {
  .cart-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}