/* ============================================================
   b360-nav — Shaker Pro header / takeover menu / floating pill,
   replicated for Barsys 360. Loaded after page CSS; overrides #lnav.
   Spec (measured on shakerpro.barsys.com): 72px fixed header,
   blur(16px) @ .78 bg, hairline bottom; Space Mono 10px/ls3 caps links;
   Bebas Neue full-screen takeover; #E8490F pill 18/18 radius 999.
   ============================================================ */

/* ---------- header ---------- */
#lnav{
  position:sticky;top:0;z-index:1000;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);
  background:rgba(4,4,6,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(242,240,236,.14);
}
#lnav .links{display:flex;gap:clamp(1.2rem,2.6vw,2.6rem)}
#lnav .links a{
  font-family:'Space Mono',ui-monospace,Menlo,monospace !important;
  font-size:10px !important;font-weight:400 !important;
  letter-spacing:3px !important;text-transform:uppercase !important;
  color:#9092a6 !important;transition:color .25s;
}
#lnav .links a:hover{color:#f5f5f7 !important}
#lnav .links a.sp-order{color:#ff6a33 !important}
#lnav .links a.sp-order:hover{color:#ff8a5c !important}
@media(max-width:860px){#lnav .links{display:none}}

/* scroll progress — accent line riding the header's bottom edge */
#spProg{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:#e8490f;z-index:1001;transition:width .1s linear}

/* ---------- full-screen takeover menu ---------- */
#navMenu{
  position:fixed !important;inset:0 !important;z-index:2000 !important;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.4rem,1.6vh,1rem);
  background:#050507 !important;border:none !important;border-radius:0 !important;
  padding:0 !important;margin:0 !important;width:auto !important;height:auto !important;
  transform:none !important;opacity:1 !important;visibility:visible !important;
  overflow-y:auto;text-align:center;
}
#navMenu.sp-open{display:flex}
#navMenu .sp-kick{
  font-family:'Space Mono',ui-monospace,monospace;font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:#e8490f;margin-bottom:clamp(.8rem,3vh,2rem);
}
#navMenu a.sp-item{
  font-family:'Bebas Neue','Anton',Impact,sans-serif !important;
  font-size:clamp(2.6rem,7.2vh,4.6rem) !important;line-height:1.12 !important;
  letter-spacing:.04em !important;text-transform:uppercase !important;
  color:#f2f0ec !important;text-decoration:none !important;
  transition:color .2s,letter-spacing .3s;display:block;
}
#navMenu a.sp-item:hover{color:#fff !important;letter-spacing:.06em !important}
#navMenu a.sp-item em{font-style:normal;color:#e8490f}
#navMenu .sp-x{
  position:absolute;top:20px;right:24px;font-size:1.9rem;line-height:1;
  color:#f2f0ec;background:none;border:0;cursor:pointer;
  min-width:44px;min-height:44px;
}
#navMenu .sp-x:hover{color:#e8490f}
body.sp-menu-open{overflow:hidden}

/* ---------- floating order pill ---------- */
#spPill{
  position:fixed;right:18px;bottom:18px;z-index:1500;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#e8490f;color:#fff;border:0;border-radius:999px;
  padding:.95rem 1.6rem;font-family:inherit;font-size:.92rem;font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.28);cursor:pointer;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,background .25s;
}
#spPill.on{opacity:1;transform:none;pointer-events:auto}
#spPill:hover{background:#ff5c22}
@media(max-width:920px){#spPill{display:none}} /* mobile has the buy bar */

/* retire the old fab in favour of the SP pill */
#fab{display:none !important}

/* clip fix: old menu used max-height transition */
#navMenu{max-height:none !important;min-height:100dvh !important;width:100vw !important}

/* SP-cue cleanup */
/* the pill IS the mobile CTA (Shaker Pro pattern) — retire the buy bar */
@media (max-width:920px){
  #spPill{display:inline-flex !important;bottom:calc(14px + env(safe-area-inset-bottom))}
  #buybar{display:none !important}
  #cookies{bottom:calc(14px + env(safe-area-inset-bottom)) !important;right:calc(30px + 11rem) !important}
}
/* header: logo pure white, burger only (no search / no cart — SP has neither) */
#lnav .name img{filter:brightness(0) invert(1) !important;opacity:1 !important}
#lnav .right .nvic{display:none !important}
#lnav #navBurger{display:inline-flex !important}

/* v4: rail arrows + craft video modal */
.hl{position:relative}
.railBtn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#f5f5f7;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s}
.railBtn:hover{background:#e8490f;border-color:#e8490f}
.railBtn.prev{left:14px}.railBtn.next{right:14px}
@media(max-width:860px){.railBtn{display:none}} /* touch swipes natively */
#craftVid{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4vh 4vw}
#craftVid video{max-width:min(92vw,860px);max-height:74vh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#craftVid p{color:#a1a1a6;font-size:.85rem}
#craftVid .cx{position:absolute;top:18px;right:22px;font-size:2rem;color:#f5f5f7;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px}
#craftVid .cx:hover{color:#e8490f}

/* day theme support */
[data-theme=day] #lnav{background:rgba(245,245,247,.85);border-bottom-color:rgba(20,20,22,.12);color:#1d1d1f}
[data-theme=day] #lnav .links a{color:#6e6e73 !important}
[data-theme=day] #lnav .links a:hover{color:#1d1d1f !important}
[data-theme=day] #lnav .links a.sp-order{color:#e8490f !important}
[data-theme=day] #lnav .name img{filter:brightness(0) !important}
[data-theme=day] #drawer{--white:#f5f5f7;--grey:#a1a1a6;--grey2:#86868b;--grey3:#a1a1a6;background:#18181b !important;color:#f5f5f7}
[data-theme=dusk] #drawer{--white:#f5f5f7;--grey:#a1a1a6;background:#18181b !important;color:#f5f5f7}

/* pill v2 — big icon, expanding messages (SP behavior) */
#spPill{padding:.65rem .8rem;gap:0}
#spPill img{margin:0 .1rem}
#spPill .txt{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s ease,margin .5s ease;
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0}
#spPill.exp .txt{max-width:300px;margin:0 .55rem 0 .6rem}
#spPill .txt b{font-weight:700}
/* card form (drawer) */
#cardform .frow{display:flex;gap:10px}
#cardform .frow .field{flex:1}
#cardform .field{margin-bottom:.85rem}
#cardform label{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#86868b;margin:0 0 .38rem}
#cardform input{width:100%;height:46px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#f5f5f7;font-family:inherit;font-size:14px;padding:0 14px;outline:none;border-radius:12px;box-sizing:border-box}
#cardform input:focus{border-color:rgba(255,122,60,.6)}
.cfbox{height:46px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden}
#payCard{width:100%;min-height:52px;background:#e8490f;color:#fff;border:0;border-radius:12px;font-weight:700;
  font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-top:.2rem;transition:background .25s}
#payCard:hover{background:#ff5c22}
#payCard[disabled]{opacity:.6;cursor:wait}

/* google pay slot */
#googlepay-slot{border-radius:8px;overflow:hidden}
#googlepay-slot > div{width:100% !important}

/* ============ refine v1 ============ */

/* A) BANNERS — readable in every theme (day theme was white-on-peach) */
.jstrip{font-size:1rem;padding:1rem 5vw}
[data-theme=day] .jstrip,[data-theme=dusk] .jstrip{
  background:linear-gradient(96deg,rgba(232,73,15,.16),rgba(255,157,69,.20)) !important;
  border-bottom:1px solid rgba(232,73,15,.32) !important;color:#1d1d1f !important}
[data-theme=day] .jstrip b,[data-theme=dusk] .jstrip b{color:#b8380a !important}
[data-theme=day] .jstrip span,[data-theme=dusk] .jstrip span{color:#1d1d1f !important}
[data-theme=day] #announce,[data-theme=dusk] #announce{background:#141416;color:#f5f5f7}
[data-theme=day] #announce b{color:#ffb58a}

/* B) THINNER TYPE — h1 and the hero/buy sub keep their weight */
body{font-weight:300}
p,li,label,small,figcaption,td,th,dd,dt,blockquote,
.lede,.cap,.fine,.kick,.byline,.paymo,.whisper,.dek2,.tag,.s,.t,.n,.k,
.specbar .it i,.specbar .it b,.rit p,.feat p,.stat p,.cal b,.cr b{font-weight:300 !important}
h2,h3,h4,h5,h6,.sec h2,.hl h2,.premise h2,.finale h2,.scene .cap h3,.lib .big{
  font-weight:400 !important;letter-spacing:-.012em}
b,strong,.prose b,.prose strong{font-weight:500 !important}
/* keep CTAs and money legible */
.pill,#payCard,#spPill,#buybar .p,.pricerow .p,#drawer .row b,.total,.jstrip a{font-weight:600 !important}
h1,.hero h1,.buyhero h1,.hero .sub,.buyhero .dek{font-weight:inherit}
.hero .sub,.buyhero .dek{font-weight:400 !important}

/* C) BIG SCREENS — scale with the display instead of stranding margins */
@media (min-width:1600px){
  html{font-size:17.5px}
  .wrap{max-width:1400px}
  .wide{max-width:1760px}
  .sec .intro{max-width:980px}
  .lede{max-width:70ch}
  .specbar .it{padding:1.5rem .6rem}
  .specbar .it b{font-size:1.05rem}
  .specbar .it i{font-size:.65rem}
}
@media (min-width:2000px){
  html{font-size:18.5px}
  .wide{max-width:1920px}
  .wrap{max-width:1500px}
  .hero h1{font-size:clamp(6rem,12.5vw,17rem)}
  .lib .big{font-size:clamp(6rem,13vw,16rem)}
  .rail{padding-left:6vw;padding-right:6vw}
}
@media (min-width:2500px){
  html{font-size:20px}
  .wide{max-width:2200px}
  .wrap{max-width:1680px}
}

/* ============ instrument v1 - CTA surfaces rebuilt on brand tokens ============ */
.jstrip{
  position:relative;background:#0b0b0d !important;border-bottom:none !important;
  padding:1.05rem 5vw !important;gap:1.4rem !important;
  font-family:var(--sans);font-size:.95rem !important;color:#a1a1a6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.jstrip::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(96deg,#ff9d45 0%,#ff5c22 42%,#e8490f 100%);opacity:.9}
.jstrip::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 180% at 8% 50%,rgba(232,73,15,.16),transparent 60%)}
.jstrip span{position:relative;z-index:2;font-weight:300 !important;letter-spacing:.005em}
.jstrip b{position:relative;z-index:2;color:#ffb58a !important;font-weight:500 !important}
.jstrip a{
  position:relative;z-index:2;background:transparent !important;color:#ffb58a !important;
  border:1px solid rgba(255,92,34,.55) !important;border-radius:980px !important;
  padding:0 1.5rem !important;min-height:44px;
  font-family:'Space Mono',ui-monospace,monospace !important;
  font-size:10.5px !important;font-weight:400 !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;text-decoration:none !important;
  transition:background .3s var(--ease,ease),color .3s,border-color .3s,box-shadow .3s;
}
.jstrip a:hover{background:linear-gradient(96deg,#ff9d45,#ff5c22 42%,#e8490f) !important;
  color:#0b0b0d !important;border-color:transparent !important;
  box-shadow:0 10px 30px rgba(232,73,15,.35) !important}
[data-theme=day] .jstrip,[data-theme=dusk] .jstrip{
  background:#f5f5f7 !important;color:#3a3a3c !important;
  box-shadow:inset 0 1px 0 rgba(20,20,22,.06)}
[data-theme=day] .jstrip::after,[data-theme=dusk] .jstrip::after{
  background:radial-gradient(120% 180% at 8% 50%,rgba(232,73,15,.10),transparent 60%)}
[data-theme=day] .jstrip b,[data-theme=dusk] .jstrip b{color:#b8380a !important}
[data-theme=day] .jstrip span,[data-theme=dusk] .jstrip span{color:#1d1d1f !important}
[data-theme=day] .jstrip a,[data-theme=dusk] .jstrip a{color:#b8380a !important;
  border-color:rgba(232,73,15,.5) !important}
[data-theme=day] .jstrip a:hover,[data-theme=dusk] .jstrip a:hover{color:#fff !important}

/* ---------- the pill: a machined object in glass, ring first ---------- */
#spPill{
  right:22px !important;bottom:22px !important;
  padding:.6rem .7rem !important;gap:0 !important;
  background:rgba(16,16,18,.80) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,92,34,.45) !important;border-radius:980px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.03) inset !important;
  transition:border-color .35s,box-shadow .35s,transform .35s var(--ease,ease),opacity .35s !important;
}
#spPill:hover{
  background:rgba(16,16,18,.88) !important;border-color:rgba(255,157,69,.85) !important;
  box-shadow:0 22px 60px rgba(232,73,15,.30),0 0 0 1px rgba(255,157,69,.25) inset !important;
  transform:translateY(-2px) !important;
}
#spPill img{
  width:44px !important;height:44px !important;flex:0 0 auto;margin:0 !important;opacity:1 !important;
  filter:brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(-18deg)
         drop-shadow(0 0 10px rgba(255,122,60,.55)) !important;
}
#spPill .txt{
  font-family:'Space Mono',ui-monospace,monospace !important;
  font-size:10.5px !important;letter-spacing:.2em !important;text-transform:uppercase !important;
  color:#f5f5f7 !important;font-weight:400 !important;white-space:nowrap;
}
#spPill.exp .txt{margin:0 .85rem 0 .75rem !important;max-width:330px !important}
#spPill .txt b{color:#ffb58a !important;font-weight:700 !important;letter-spacing:.12em}
#spPill .txt i{font-style:normal;opacity:.45;margin:0 .45rem}
[data-theme=day] #spPill,[data-theme=dusk] #spPill{
  background:rgba(255,255,255,.86) !important;border-color:rgba(232,73,15,.4) !important;
  box-shadow:0 18px 44px rgba(20,20,22,.16) !important}
[data-theme=day] #spPill .txt,[data-theme=dusk] #spPill .txt{color:#1d1d1f !important}
[data-theme=day] #spPill .txt b,[data-theme=dusk] #spPill .txt b{color:#b8380a !important}
[data-theme=day] #spPill img,[data-theme=dusk] #spPill img{
  filter:brightness(0) saturate(1) drop-shadow(0 0 8px rgba(232,73,15,.28)) !important}
@media(max-width:520px){#spPill .txt{font-size:10px !important}#spPill img{width:38px !important;height:38px !important}}

/* ============ instrument v2 - the ring is the brand gradient itself ============ */
#spPill .ring{
  width:46px;height:46px;flex:0 0 auto;margin:0;display:block;
  background:linear-gradient(96deg,#ffb066 0%,#ff5c22 45%,#e8490f 100%);
  -webkit-mask:url("icons/360.svg") center/contain no-repeat;
          mask:url("icons/360.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(255,122,60,.45));
  transition:transform 1.2s cubic-bezier(.28,.11,.32,1),filter .35s;
}
#spPill:hover .ring{transform:rotate(360deg);filter:drop-shadow(0 0 16px rgba(255,157,69,.7))}
[data-theme=day] #spPill .ring,[data-theme=dusk] #spPill .ring{
  filter:drop-shadow(0 0 8px rgba(232,73,15,.3))}
@media(max-width:520px){#spPill .ring{width:40px;height:40px}}
/* tighten the bloom so the seam stays black and the light stays local */
.jstrip::after{background:radial-gradient(70% 150% at 3% 50%,rgba(232,73,15,.15),transparent 62%) !important}
[data-theme=day] .jstrip::after,[data-theme=dusk] .jstrip::after{
  background:radial-gradient(70% 150% at 3% 50%,rgba(232,73,15,.10),transparent 62%) !important}

/* ============ instrument v3 - the seam on small screens ============ */
@media (max-width:760px){
  .jstrip{flex-direction:column !important;align-items:stretch !important;
    text-align:center;gap:.85rem !important;padding:1rem 1.15rem !important;
    font-size:.9rem !important;line-height:1.45}
  .jstrip span{display:block}
  .jstrip a{display:flex;align-items:center;justify-content:center;
    width:100%;box-sizing:border-box;padding:0 1rem !important;min-height:48px}
}
@media (max-width:420px){
  .jstrip{font-size:.85rem !important}
  .jstrip a{font-size:9.5px !important;letter-spacing:.16em !important}
}
/* keep the pill clear of the iOS home indicator */
#spPill{bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
        right:calc(18px + env(safe-area-inset-right,0px)) !important;
        max-width:calc(100vw - 36px)}
#spPill .txt{overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){
  #spPill,#spPill .ring,.jstrip a{transition:none !important}
  #spPill:hover .ring{transform:none !important}
}

/* ============ checkout v1 - one field system, one button system ============ */
#drawer{--fh:52px;--fr:12px}

/* --- EXPRESS WALLETS: vendor art we cannot restyle, so equalise the footprint --- */
#paypal-buttons{display:flex;flex-direction:column;gap:10px;margin:0}
#paypal-buttons .paypal-buttons{margin:0 !important;height:var(--fh) !important;
  min-height:var(--fh) !important;max-height:var(--fh) !important;border-radius:var(--fr) !important;overflow:hidden}
#paypal-buttons .paypal-buttons iframe{border-radius:var(--fr) !important}
#googlepay-slot{margin:10px 0 0;height:var(--fh);min-height:var(--fh) !important;
  border-radius:var(--fr);overflow:hidden}
#googlepay-slot>div,#googlepay-slot button,#googlepay-slot iframe{
  width:100% !important;height:var(--fh) !important;min-height:var(--fh) !important;border-radius:var(--fr) !important}

/* --- OUR FIELDS: identical box for typed inputs and for the PayPal card iframes --- */
#cardform .field{margin-bottom:.9rem}
#cardform label{display:block;font-family:'Space Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#86868b;
  margin:0 0 .45rem;font-weight:400}
#cardform input,#cardform .cfbox{
  box-sizing:border-box;width:100%;height:var(--fh);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--fr);color:#f5f5f7;font-family:inherit;font-size:15px;
  transition:border-color .22s,box-shadow .22s,background .22s}
#cardform input{padding:0 14px;outline:none}
#cardform input::placeholder{color:#6e6e73}
#cardform input:focus,#cardform .cfbox.focus{
  background:rgba(255,255,255,.07);border-color:rgba(255,122,60,.75) !important;
  box-shadow:0 0 0 3px rgba(255,92,34,.13)}
#cardform .cfbox{padding:0 8px;display:flex;align-items:center;overflow:hidden}
#cardform .cfbox iframe{width:100% !important;height:100% !important;display:block;min-height:0 !important}

/* --- ONE PRIMARY BUTTON: the brand gradient, same language as the journey CTA --- */
#payCard{width:100%;min-height:56px;border:0;border-radius:var(--fr);cursor:pointer;
  background:linear-gradient(96deg,#ff9d45 0%,#ff5c22 42%,#e8490f 100%);
  color:#0b0b0d;font-family:'Space Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-top:.4rem;transition:box-shadow .25s,transform .25s,filter .25s}
#payCard:hover{box-shadow:0 12px 34px rgba(232,73,15,.34);transform:translateY(-1px)}
#payCard:active{transform:translateY(0)}
#payCard[disabled]{filter:saturate(.5) brightness(.8);cursor:wait;transform:none;box-shadow:none}

/* --- divider + fine print, same tracked-caps voice --- */
#drawer .divid{font-family:'Space Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6e6e73}
#drawer a.cardlink{font-family:'Space Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#86868b;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px}
#drawer a.cardlink:hover{color:#ffb58a;border-bottom-color:rgba(255,122,60,.6)}

/* --- ring: a touch bigger again --- */
#spPill .ring{width:52px !important;height:52px !important}
@media(max-width:520px){#spPill .ring{width:44px !important;height:44px !important}}
@media(max-width:420px){
  #cardform .frow{gap:8px}
  #payCard{font-size:10.5px;letter-spacing:.14em}
}


/* ============ checkout v4 - Shaker Pro field spec, theme aware ============ */
/* ---- DARK (default) ---- */
#cardform{background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;margin:0 !important;box-shadow:none !important}
#cardform::before{content:none !important;display:none !important}
#drawer label,#cardform label{font-family:'Space Mono',ui-monospace,monospace !important;
  font-size:10px !important;letter-spacing:.3em !important;text-transform:uppercase !important;
  color:#9092a6 !important;font-weight:400 !important;margin:0 0 .45rem !important}
#drawer input,#cardform input,#cardform .cfbox{
  background:transparent !important;border:1px solid rgba(245,245,247,.14) !important;
  border-radius:0 !important;color:#f5f5f7 !important;height:52px !important;
  box-shadow:none !important;font-family:'Space Mono',ui-monospace,monospace !important;
  font-size:13.5px !important;letter-spacing:.05em !important}
#drawer input{padding:0 14px !important}
#cardform .cfbox{padding:0 !important}
#drawer input::placeholder{color:#8a8a90 !important}
#drawer input:focus,#cardform .cfbox.focus{
  border-color:rgba(255,92,34,.8) !important;background:rgba(255,92,34,.05) !important;
  box-shadow:none !important}
#payCard{border-radius:0 !important}
#paypal-buttons .paypal-buttons,#venmo-slot .paypal-buttons,#applepay-slot .paypal-buttons,
#paypal-buttons,#venmo-slot,#applepay-slot,#googlepay-slot,
#paypal-buttons .paypal-buttons iframe,#googlepay-slot>div,#googlepay-slot button{
  border-radius:0 !important}

/* ---- DAY + DUSK: the whole drawer goes light ---- */
[data-theme=day] #drawer,[data-theme=dusk] #drawer{
  background:#f5f5f7 !important;color:#1d1d1f !important}
[data-theme=day] #drawer h2,[data-theme=day] #drawer h3,[data-theme=day] #drawer h4,
[data-theme=day] #drawer p,[data-theme=day] #drawer span,[data-theme=day] #drawer li,
[data-theme=day] #drawer small,[data-theme=day] #drawer div,[data-theme=day] #drawer button.qb,
[data-theme=dusk] #drawer h2,[data-theme=dusk] #drawer h3,[data-theme=dusk] #drawer p,[data-theme=dusk] #drawer span,[data-theme=dusk] #drawer small,[data-theme=dusk] #drawer div,[data-theme=dusk] #drawer button.qb{
  color:#1d1d1f}
[data-theme=day] #drawer b,[data-theme=day] #drawer strong,[data-theme=day] #drawer .total,
[data-theme=dusk] #drawer b,[data-theme=dusk] #drawer strong,[data-theme=dusk] #drawer .total{
  color:#101012}
[data-theme=day] #drawer .divid,[data-theme=day] #drawer .fine,[data-theme=day] #drawer .paymo,
[data-theme=dusk] #drawer .divid,[data-theme=dusk] #drawer .fine,[data-theme=dusk] #drawer .paymo{
  color:#6e6e73 !important}
[data-theme=day] #drawer label,[data-theme=dusk] #drawer label{color:#6e6e73 !important}
[data-theme=day] #drawer input,[data-theme=day] #cardform .cfbox,
[data-theme=dusk] #drawer input,[data-theme=dusk] #cardform .cfbox{
  border-color:rgba(20,20,22,.18) !important;color:#1d1d1f !important;background:#ffffff !important}
[data-theme=day] #drawer input::placeholder,[data-theme=dusk] #drawer input::placeholder{
  color:#86868b !important}
[data-theme=day] #drawer input:focus,[data-theme=day] #cardform .cfbox.focus,
[data-theme=dusk] #drawer input:focus,[data-theme=dusk] #cardform .cfbox.focus{
  border-color:#ff5c22 !important;background:#fff !important}
[data-theme=day] #drawer a.cardlink,[data-theme=dusk] #drawer a.cardlink{
  color:#6e6e73 !important;border-bottom-color:rgba(20,20,22,.2) !important}
[data-theme=day] #drawer hr,[data-theme=dusk] #drawer hr{border-color:rgba(20,20,22,.12) !important}

/* ============ checkout v5 - readability repairs ============ */
/* the SMS consent line is legal copy, not a field label */
#drawer label.smsopt{
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,Inter,Helvetica,Arial,sans-serif) !important;
  font-size:.72rem !important;letter-spacing:.005em !important;text-transform:none !important;
  line-height:1.5 !important;color:#86868b !important;margin:0 !important}
[data-theme=day] #drawer label.smsopt,[data-theme=dusk] #drawer label.smsopt{color:#6e6e73 !important}
/* qty steppers + close must flip with the theme */
[data-theme=day] #drawer button:not(#payCard):not([id*=gpay]):not([class*=gpay]),
[data-theme=dusk] #drawer button:not(#payCard):not([id*=gpay]):not([class*=gpay]){
  color:#1d1d1f !important;border-color:rgba(20,20,22,.22) !important;background:transparent !important}
[data-theme=day] #drawer .x,[data-theme=dusk] #drawer .x{
  color:#6e6e73 !important;border-color:transparent !important}

/* ============ ios drawer scroll fix (P0) ============ */
/* dvh matches the VISUAL viewport on iOS so the Pay button is never under Safari chrome */
#drawer{
  height:100dvh !important;max-height:100dvh !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  overflow-y:auto !important;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)) !important;
  box-sizing:border-box;
}
/* page must not steal the pan while the drawer is open */
body.b360-locked{
  position:fixed !important;left:0 !important;right:0 !important;width:100% !important;
  overflow:hidden !important;
}
/* every express slot on the same rhythm, incl. apple pay + venmo */
#applepay-slot:not(:empty),#venmo-slot:not(:empty),#googlepay-slot:not(:empty){
  margin:10px 0 0 !important}
#paypal-buttons{margin:0 !important}
/* google pay was the only bordered one */
#googlepay-slot button,#googlepay-slot .gpay-card-info-container{
  border:0 !important;box-shadow:none !important}
@media (max-width:760px){
  #drawer{width:100% !important;max-width:100% !important;right:0 !important;left:0 !important}
}

/* ==== theme contrast v1: accent TEXT dark on light; fills untouched ==== */
[data-theme=day] .kick,
[data-theme=day] .feat .t span,
[data-theme=day] .rit .s,
[data-theme=day] .sums .row .save,
[data-theme=day] .okring,
[data-theme=day] .oksteps .st b,
[data-theme=day] #cookies a,
[data-theme=day] .tick .it b.o,
[data-theme=day] .hero .k,
[data-theme=day] .scene .cap .k,
[data-theme=day] .hcard .cap em,
[data-theme=day] .tlink,
[data-theme=day] #drawer .save,
[data-theme=day] .claim b,
[data-theme=day] .stat .k,
[data-theme=day] #rail b,
[data-theme=day] #announce b,
[data-theme=day] .specbar .it b.o,
[data-theme=day] .pricerow .off,
[data-theme=day] .faq summary::after,
[data-theme=day] .credcard b,
[data-theme=day] .xbody i,
[data-theme=day] .whisper,
[data-theme=day] .ow .w,
[data-theme=day] .quoteband .stars,
[data-theme=day] .fincard .lim,
[data-theme=dusk] .fincard .lim{color:#B23A0B !important}
[data-theme=day] .playrow,[data-theme=dusk] .playrow{background:rgba(20,20,22,.10) !important;border-color:rgba(20,20,22,.30) !important}
[data-theme=day] .playrow,[data-theme=day] .playrow *,[data-theme=dusk] .playrow,[data-theme=dusk] .playrow *{color:#131315 !important}
#drawer .divid{color:#8a8a90 !important;font-size:10px !important}
#cardform label,#drawer label{font-size:10px !important}
[data-theme=day] #drawer .divid,[data-theme=dusk] #drawer .divid{color:#55555b !important}
#payCard{background-color:#e8490f !important}

/* ==== theme contrast v2: dusk is DARK; only day gets the dark accent ==== */
/* dusk keeps the lit amber (it sits on #131315/#2E3038 surfaces) */
[data-theme=dusk] .kick,[data-theme=dusk] .rit .s,[data-theme=dusk] .hero .k,
[data-theme=dusk] .scene .cap .k,[data-theme=dusk] .hcard .cap em,[data-theme=dusk] .tlink,
[data-theme=dusk] .claim b,[data-theme=dusk] .stat .k,[data-theme=dusk] #rail b,
[data-theme=dusk] .specbar .it b.o,[data-theme=dusk] .pricerow .off,
[data-theme=dusk] .credcard b,[data-theme=dusk] .xbody i,[data-theme=dusk] .whisper,
[data-theme=dusk] .ow .w,[data-theme=dusk] .fincard .lim,[data-theme=dusk] .tick .it b.o,
[data-theme=dusk] #announce b,[data-theme=dusk] .sums .row .save,[data-theme=dusk] #drawer .save,
[data-theme=dusk] .oksteps .st b,[data-theme=dusk] .feat .t span{color:#FFB58A !important}
[data-theme=dusk] #drawer .divid{color:#8a8a90 !important}

/* --grey3 (#8E939E) was used as TEXT on both light and dark surfaces = 2.4:1 either way */
[data-theme=day]{--grey3:#5C6270}
[data-theme=dusk],[data-theme=night]{--grey3:#A8ADB8}

/* ghost pill: 'WATCH THE FILM' was invisible in day */
[data-theme=day] .pill.ghost{color:#131315 !important;border-color:rgba(19,19,21,.38) !important;
  background:rgba(19,19,21,.05) !important}
[data-theme=dusk] .pill.ghost,[data-theme=night] .pill.ghost{color:#F2F2F2 !important;
  border-color:rgba(255,255,255,.34) !important}
/* ==== express wallets v2: one confident 56px rail ==== */
#paypal-buttons .paypal-buttons,#venmo-slot .paypal-buttons,#applepay-slot .paypal-buttons{height:56px !important;min-height:56px !important;max-height:56px !important;border-radius:0 !important}
#googlepay-slot,#googlepay-slot>div,#googlepay-slot button,#googlepay-slot iframe{height:56px !important;min-height:56px !important;border-radius:0 !important}
#applepay-slot:not(:empty),#venmo-slot:not(:empty),#googlepay-slot:not(:empty){margin:10px 0 0 !important}
#payCard{min-height:56px !important;font-size:12px !important;letter-spacing:.2em !important}
.b360-wallet-first{order:-1}

/* consent banner legibility (WCAG AA).
   Was black-on-black: 1.05 contrast on both buttons, 2.96 on the policy link.
   Cause: buttons inherit --black for text while the panel is dark, and .ok's
   gradient does not resolve in the day theme. Scoped + theme-independent so
   day/dusk/night cannot re-break it. An unreadable reject button is also a
   consent/dark-pattern risk, not just an a11y one. */
#cookies{background:#18181b !important;color:#f5f5f7 !important}
#cookies a{color:#FFB58A !important;text-decoration:underline}
#cookies .row button{
  min-height:44px !important;border-radius:0 !important;cursor:pointer;
  font-family:'Space Mono',ui-monospace,monospace !important;
  font-size:12px !important;letter-spacing:.14em !important;text-transform:uppercase !important}
#cookies .row button:not(.ok){
  background:transparent !important;color:#f5f5f7 !important;
  border:1px solid rgba(245,245,247,.45) !important}
#cookies .row button:not(.ok):hover{
  border-color:#f5f5f7 !important;background:rgba(245,245,247,.08) !important}
#cookies .row button.ok{
  background:linear-gradient(96deg,#ff9d45,#ff5c22 42%,#e8490f) !important;
  background-color:#e8490f !important;
  color:#0b0b0d !important;border:1px solid transparent !important}
#cookies .row button:focus-visible{outline:2px solid #FFB58A !important;outline-offset:2px}
/* theme-scoped rules outrank plain #cookies a on specificity, so match them. */
[data-theme=day] #cookies a,[data-theme=dusk] #cookies a,[data-theme=night] #cookies a,html #cookies a{
  color:#FFB58A !important;text-decoration:underline !important}