/* Boba Bhai — site styles. Palette & type from the Moshi Moshi stylescape (Oct 2026). */
:root{
  --p:#872087; --pd:#5c145e; --lilac:#ce94d0; --y:#ffce00; --r:#ec2224; --g:#47b984; --b:#09a7d5;
  --ch:#3a3a3b; --ink:#141414; --paper:#f7f1e6; --white:#ffffff;
  --disp:'Truculenta','Arial Narrow',Impact,sans-serif;
  --kr:'Black Han Sans','Truculenta',sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
}
.bb{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
/* The rule above sets overflow-x:hidden on .bb to stop sideways scrolling. The
   page header also carries class="bb", and there the guard is harmful: a box
   with overflow-x:hidden computes overflow-y to auto, which makes the header a
   clipping box. The Order Now dropdown is positioned just below the header, so
   506 of its 542 pixels were being cut off — the button looked dead. The header
   is never the thing that scrolls sideways, so the guard is lifted here.
   Verified: lifting it introduces 0px of horizontal overflow at 390 and 1366. */
header.bb{overflow:visible}
.bb *{box-sizing:border-box}
.bb img{display:block;max-width:100%;width:auto;height:auto}
/* width/height attributes exist to reserve the box (they set aspect-ratio and
   stop the page jumping as images land). width:auto/height:auto keeps them from
   also acting as presentational sizing hints: several images are positioned with
   only a CSS height, and without this the attribute width would override the
   ratio-derived one and squash them. */
.bb a{color:inherit}
.bb :focus-visible{outline:3px solid var(--y);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(20px,5vw,64px)}
.sec{padding-block:clamp(72px,9vw,136px)}
.disp{font-family:var(--disp);font-weight:900;line-height:.92;letter-spacing:-.005em;margin:0}
.kr{font-family:var(--kr);font-weight:400}
.h1{font-size:clamp(60px,9.2vw,148px)}
.h2{font-size:clamp(44px,6vw,92px)}
.h3{font-size:clamp(28px,3vw,40px)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.65;margin:0}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.muted{opacity:.78}

/* boxed label — the stylescape's signature move */
.tag{display:inline-block;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:1;padding:.14em .38em .1em;border:3px solid var(--ink);background:var(--y);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:2px solid currentColor;border-radius:999px;line-height:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:3px solid var(--ink);font-family:var(--body);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn-y{background:var(--y);color:var(--ink)}
.btn-p{background:var(--p);color:#fff}
.btn-k{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--y)}
.btn-k:hover{box-shadow:6px 6px 0 var(--y)}
.btn-w{background:#fff;color:var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:12px}
.link-arrow{font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:4px}
.link-arrow:hover{opacity:.75}

/* logo as mask so it can take any brand colour */
.mark{display:block;background:currentColor;-webkit-mask:url(/a/35012444a0ba7c90f4f93d3db73517d8.webp) center/contain no-repeat;mask:url(/a/35012444a0ba7c90f4f93d3db73517d8.webp) center/contain no-repeat;aspect-ratio:600/560}
.lockup{display:block;background:currentColor;-webkit-mask:url(/a/ccbab40f6bc59ad0a4b81341e5cf2d05.webp) center/contain no-repeat;mask:url(/a/ccbab40f6bc59ad0a4b81341e5cf2d05.webp) center/contain no-repeat;aspect-ratio:600/611}

/* brand patterns */
.checker{background-color:var(--p);background-image:conic-gradient(var(--lilac) 25%,transparent 0 50%,var(--lilac) 0 75%,transparent 0);background-size:56px 56px}
.checker-c{background-color:#fff;background-image:conic-gradient(var(--b) 25%,transparent 0 50%,var(--p) 0 75%,transparent 0);background-size:56px 56px}
.checker-y{background-color:var(--y);background-image:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);background-size:28px 28px}
.strip{height:28px;border-block:3px solid var(--ink)}

/* nav */
.ann{background:var(--y);color:var(--ink);font-weight:700;font-size:13px;text-align:center;padding:9px 16px;border-bottom:3px solid var(--ink)}
.ann a{font-weight:800}
.nav{position:sticky;top:0;z-index:50;background:var(--p);color:#fff;border-bottom:3px solid var(--ink)}
.nav-row{display:flex;align-items:center;gap:28px;min-height:84px}
.nav-links{display:flex;align-items:center;gap:24px;flex:1;justify-content:center}
.nav-links a{font-weight:700;font-size:14px;text-decoration:none;color:#fff;padding:10px 0;border-bottom:3px solid transparent;transition:border-color .15s}
.nav-links a:hover{border-color:var(--y)}
.nav-links a.on{border-color:var(--y);color:var(--y)}
.nav-cta{display:flex;align-items:center;gap:12px;position:relative}
.nav-burger{display:none;background:transparent;border:3px solid #fff;color:#fff;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
.order-pop{position:absolute;right:0;top:calc(100% + 14px);width:300px;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);z-index:60}
.order-pop a{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;text-decoration:none;font-weight:700;border-top:2px solid #eee}
.order-pop a:hover{background:var(--y)}
.mnav{display:flex;flex-direction:column;padding:8px 0 24px}
.mnav a{color:#fff;text-decoration:none;font-family:var(--disp);font-weight:900;font-size:34px;padding:8px 0;border-bottom:2px solid rgba(255,255,255,.15)}
@media (max-width:1180px){.nav-links{display:none}.nav-burger{display:inline-flex}.nav-row{justify-content:space-between}.hide-md{display:none}}

/* marquee */
.marq{overflow:hidden;white-space:nowrap;border-block:3px solid var(--ink)}
.marq-track{display:inline-flex;align-items:center;gap:40px;padding-block:22px;padding-right:40px}
.motion .marq-track{animation:marq 38s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.motion .float{animation:float 6s ease-in-out infinite}
.motion .float-2{animation:float 7s ease-in-out -2s infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.motion .spin{animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.motion .zap{animation:zap 2.4s steps(1) infinite}
@keyframes zap{0%,100%{opacity:1}92%{opacity:.2}96%{opacity:1}}

/* layout helpers */
.row{display:flex;flex-wrap:wrap}
.half{flex:1 1 440px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.box{border:3px solid var(--ink)}
.shadow{box-shadow:8px 8px 0 var(--ink)}
.lift{transition:transform .2s ease,box-shadow .2s ease}
.lift:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--ink)}
.photo{width:100%;height:100%;object-fit:cover}
/* `.bb img` above is (0,1,1); a bare `.photo` is (0,1,0), so `.bb img`'s
   width:auto/height:auto was winning and every .photo rendered at its intrinsic
   ratio inside a taller box — the white gap under the photos Marketing reported
   on Home, Our Food, Packaged, Our Story and Team. `.bb img.photo` is (0,2,1)
   and wins. Do NOT "fix" this by deleting width:auto/height:auto from `.bb img`:
   that is what stops the width/height attributes added by the 7 Nov image pass
   from acting as sizing hints, and build/test-images.js asserts it. All 19
   .photo elements in source/pages are <img> inside .bb, so the narrower
   selector loses nothing; the bare rule is kept as a floor. Kapil 2026-11-09. */
.bb img.photo{width:100%;height:100%;object-fit:cover}
.rule{border:0;border-top:3px solid currentColor;margin:0}

/* stat */
.stat-n{font-family:var(--disp);font-weight:900;font-size:clamp(64px,7vw,112px);line-height:.9;margin:0}

/* page hero (inner pages) */
.phero{position:relative;border-bottom:3px solid var(--ink);overflow:hidden}
.phero-bg-kr{position:absolute;right:-2%;bottom:-6%;font-family:var(--kr);font-size:clamp(160px,24vw,360px);line-height:1;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.16;pointer-events:none;white-space:nowrap}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.inp{font:inherit;font-size:16px;min-height:52px;padding:12px 14px;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;width:100%}
.inp:focus{outline:3px solid var(--y);outline-offset:0;box-shadow:4px 4px 0 var(--ink)}
textarea.inp{min-height:140px;resize:vertical}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{font:inherit;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;min-height:46px;padding:0 18px;border:3px solid var(--ink);cursor:pointer;transition:transform .15s}
.tab:hover{transform:translateY(-2px)}

/* footer */
.foot a{text-decoration:none;color:#fff;opacity:.82;font-size:15px}
.foot a:hover{opacity:1;color:var(--y)}
.foot h3{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin:0 0 18px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

@media (prefers-reduced-motion:reduce){.bb *{animation:none!important;transition:none!important}}
@media (max-width:640px){.btn{min-height:48px;padding:0 18px}.shadow{box-shadow:5px 5px 0 var(--ink)}}

/* button text colours must beat `.bb a{color:inherit}` */
.bb a.btn-y,.bb a.btn-w,.bb button.btn-y,.bb button.btn-w{color:var(--ink)}
.bb a.btn-p,.bb a.btn-k,.bb button.btn-p,.bb button.btn-k{color:#fff}
.bb .tag{color:inherit}
@media (max-width:640px){
.m-2col{grid-template-columns:1fr 1fr!important;gap:14px!important}
.m-2col article>div:last-child{padding:12px 12px 14px!important}
.m-init{font-size:56px!important}
.m-name{font-size:19px!important}
.m-strip{flex:1 1 45%!important;height:200px!important}
.m-tile{flex:1 1 40%!important;min-height:72px!important;padding:12px 8px!important}
.m-tile .disp{font-size:22px!important}
.m-banner{height:240px!important}
.h2 .kr{white-space:nowrap}
}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.legal-toc{position:sticky;top:110px}
.legal-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.legal-toc a{color:#141414;text-decoration:none}
.legal-toc a:hover{color:#872087;text-decoration:underline}
.legal-short{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:600;line-height:1.5}
.legal-body{display:flex;flex-direction:column;gap:34px}
.legal-sec{scroll-margin-top:110px}
.legal-sec p,.legal-sec li{font-size:16px;line-height:1.7;margin:0 0 10px}
.legal-sec ul{margin:0 0 10px;padding-left:22px}
.legal-sec a,.legal-short a{color:#872087;font-weight:700}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}}
.store-bento{display:grid;grid-template-columns:1.9fr 1fr;grid-template-rows:440px;grid-template-areas:"a b";gap:18px}
@media (max-width:900px){.store-bento{grid-template-columns:1fr;grid-template-rows:240px 360px;grid-template-areas:"a" "b"}}

/* ---- mobile usability floors (max-width:640px) ----
   The design was drawn at 1366 desktop and scales down cleanly, but a few
   values are below the usual phone minimums. These rules apply ONLY inside the
   query, so desktop rendering is untouched. */
@media (max-width:640px){
  /* .chip is 12px by default; the export overrides several to 9px and 10px
     with inline styles, which nothing but !important inside the query reaches. */
  .bb .chip{font-size:12px!important}
  /* Footer link lists render 19px tall — too small to hit. Pad to ~43px and
     drop the list gap so the footer does not grow by the full added height. */
  .bb .foot ul{gap:0}
  .bb .foot li>a{display:inline-block;padding:13px 0}
  .bb .foot .row>a{display:inline-block;padding:12px 0}
  /* Announcement bar link sits at 36px. */
  .bb .ann a{display:inline-block;padding:4px 0}
}

/* ---- desktop layout fixes (9 Nov 2026) ----
   Scoped to min-width:1181px, the nav's existing desktop breakpoint, so the
   phone and tablet layouts are untouched. Both declarations being overridden
   are inline on the element, so !important is the only thing that reaches
   them — the same reason the 640px block above needs it. */
@media (min-width:1181px){
  /* Locations hero stat tiles. auto-fit with a 130px floor fits only three in
     the ~540px hero column (4x130 + 3x12 gap = 556px), so "24h" sat alone on a
     second row. Four explicit columns always fit. */
  .bb .loc-stats{grid-template-columns:repeat(4,1fr)!important}
  /* Contact desk cards. auto-fit with a 280px floor fits exactly four in the
     1192px wrap, so the fifth card ("Press & media") dropped to its own row. */
  .bb .contact-desks{grid-template-columns:repeat(5,1fr)!important}
}