/* =========================================================
   Boba Bhai — mobile patch
   Load AFTER site.css. Fixes photo letterboxing at every size,
   then tightens every page for phones (<= 640px).
   ========================================================= */

/* ---------- 1. ALL SIZES: photos fill their frames ---------- */
.bb img.photo{width:100%;height:100%;object-fit:cover}

/* ---------- 2. Footer buttons were clipped by the tap-target rule ---------- */
.bb .foot .row > a.btn{display:inline-flex;padding:0 18px}
.bb .foot .row > a.chip{padding:10px 14px}

/* ---------- 3. Swipe rails (shared) ---------- */
@media (max-width:640px){
  .bb .rail,
  .bb section .row:has(> a.box.lift),
  .bb section .grid-3:has(> a.lift[href^="http"]),
  .bb #stores div:has(> article.lift){
    display:flex!important;flex-wrap:nowrap!important;gap:16px!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,64px));
    padding:4px clamp(20px,5vw,64px) 18px!important;
    scroll-padding-inline:clamp(20px,5vw,64px);
  }
  .bb section .row:has(> a.box.lift)::-webkit-scrollbar,
  .bb section .grid-3:has(> a.lift[href^="http"])::-webkit-scrollbar,
  .bb #stores div:has(> article.lift)::-webkit-scrollbar{display:none}
  .bb section .row:has(> a.box.lift) > a,
  .bb section .grid-3:has(> a.lift[href^="http"]) > a,
  .bb #stores div:has(> article.lift) > article{
    flex:0 0 84%!important;min-width:0;scroll-snap-align:start;
  }
}

/* ---------- 4. PHONES ---------- */
@media (max-width:640px){

  /* rhythm + type */
  .sec{padding-block:56px}
  .h1{font-size:clamp(46px,13vw,64px)}
  .h2{font-size:clamp(36px,10.5vw,48px)}
  .lead{font-size:16px}
  .bb .row{min-width:0}
  .wrap.row,.wrap .row{row-gap:20px}
  .bb .btn{min-height:48px}
  .tag{max-width:100%}

  /* announcement bar: one line */
  .ann{font-size:12px;padding:8px 14px;line-height:1.4}

  /* button pairs sit side by side and share the width */
  .bb .row:has(> .btn + .btn){gap:10px!important}
  .bb .row:has(> .btn + .btn) > .btn{flex:1 1 0;padding:8px 10px;min-width:0;white-space:normal;text-align:center;line-height:1.2}
  .bb .row:has(> .btn + .btn + .btn) > .btn{flex:1 1 40%}

  /* ---------- HOME ---------- */
  /* hero: tighter, stats fit on one line, mascot smaller */
  .bb section:has(img.float[alt^="Mr. Boba"]) > .wrap{padding-top:36px!important;padding-bottom:28px!important;gap:20px!important}
  .bb section:has(img.float[alt^="Mr. Boba"]) > .wrap > div:first-child{gap:20px!important}
  .bb section:has(img.float[alt^="Mr. Boba"]) .disp[style*="font-size: 40px"]{font-size:30px!important}
  .bb section:has(img.float[alt^="Mr. Boba"]) .row[style*="border-top: 2px"] > div{padding-right:10px!important;padding-left:10px!important}
  .bb section:has(img.float[alt^="Mr. Boba"]) .row[style*="border-top: 2px"] > div:first-child{padding-left:0!important}
  .bb section:has(img.float[alt^="Mr. Boba"]) .row[style*="border-top: 2px"] > div span:last-child{font-size:10px!important;letter-spacing:.06em!important}
  .bb div:has(> img.float[alt^="Mr. Boba"]){min-height:340px!important}
  .bb img.float[alt^="Mr. Boba"]{width:72%!important}
  .bb div:has(> img.float[alt^="Mr. Boba"]) > svg.spin{width:96px;height:96px}
  .bb div:has(> img.float[alt^="Mr. Boba"]) > .checker-c{width:100px!important;height:100px!important}

  /* order section: phone mock-up scaled down */
  #order .half:last-child{min-height:0!important;height:500px;flex-basis:auto!important}
  #order .half:last-child > .checker{width:280px!important;height:280px!important}
  #order .half:last-child > .float{zoom:.76}
  #order #menu-qr{align-self:stretch!important}
  #order #menu-qr img{width:88px!important;height:88px!important}

  /* intro collage: keep the inset photo inside the screen */
  .bb .half > .box[style*="right: -24px"]{right:-6px!important;bottom:-22px!important;width:40%!important}

  /* numbers: 2 x 2 */
  .bb section .grid:has(.stat-n){grid-template-columns:1fr 1fr!important}
  .bb section .grid:has(.stat-n) > div{padding:20px 16px 22px!important;gap:8px!important}
  .stat-n{font-size:46px}
  .bb section .grid:has(.stat-n) > div > p:nth-child(2){font-size:12px!important}
  .bb section .grid:has(.stat-n) > div > p:last-child{font-size:13px!important;line-height:1.45!important}

  /* full-bleed photo band */
  .bb section:has(> img.photo[style*="inset: 0"]){height:360px!important}

  /* big five: swipe rail, shorter cards */
  .bb section .row:has(> a.box.lift) > a > div:first-child{height:250px!important}
  .bb section .row:has(> a.box.lift) > a > div:last-child{padding:20px 20px 22px!important;gap:16px!important}
  .bb section .row:has(> a.box.lift) h3{font-size:34px!important}
  .bb section .row:has(> a.box.lift) p{font-size:15px!important}

  /* cluck n crunch */
  .bb section div:has(> img[alt^="Cluck n Crunch burger"]){min-height:340px!important;flex-basis:100%!important}
  .bb section div:has(> img[alt^="Cluck n Crunch burger"]) svg.spin{width:104px;height:104px}

  /* chew it / pop it: image band shorter */
  .bb .grid-2 > article.box.lift > div:first-child{height:260px!important;min-height:0!important}

  /* packaged teaser collage */
  .bb section:has(img[alt^="Model with a pack of Seung Toko"]) .box{min-height:0}
  .bb section:has(img[alt^="Model with a pack of Seung Toko"]) img.float,
  .bb section:has(img[alt^="Model with a pack of Seung Toko"]) img.float-2{height:130px!important}

  /* mascot section */
  .bb img[alt^="Illustrated Mr. Boba Bhai waving"]{width:78%!important}

  /* spaces bento: 2-up grid instead of 5 stacked */
  .bb section .row:has(> figure.box){display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
  .bb section .row:has(> figure.box) > figure:first-child{grid-column:1 / -1;height:260px!important}
  .bb section .row:has(> figure.box) > div{grid-column:1 / -1;height:auto!important;flex-direction:row!important;gap:12px!important}
  .bb section .row:has(> figure.box) > div > figure{height:170px!important;flex:1 1 0!important}
  .bb section .row:has(> figure.box) > figure:not(:first-child){height:170px!important}

  /* press: swipe rail */
  .bb section .grid-3:has(> a.lift[href^="http"]) > a{padding:22px!important;gap:16px!important}

  /* careers / partners pair */
  .bb .grid-2 > a.box.lift{min-height:0!important;padding:28px!important;gap:20px!important}

  /* ---------- OUR FOOD ---------- */
  /* category chips: one swipeable line */
  .bb .phero nav.row{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(20px,5vw,64px));padding:4px clamp(20px,5vw,64px) 14px!important}
  .bb .phero nav.row::-webkit-scrollbar{display:none}
  .bb .phero nav.row > *{flex:0 0 auto!important}
  /* Korean label next to a category title needs breathing room */
  .bb h2.disp > .kr,.bb h2.disp + .kr{margin-left:.35em}
  /* menu item cards: two per row */
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]) > article{min-width:0}
  /* ramen "anatomy of a slurp": swipe instead of five stacked cards */
  .bb section[id] .row[style*="align-items: stretch"]{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px!important;padding-bottom:14px}
  .bb section[id] .row[style*="align-items: stretch"] > *{flex:0 0 78%!important;scroll-snap-align:start;min-width:0}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]) > article > div:first-child{height:170px!important;min-height:0!important}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]) > article > div:last-child{padding:12px 12px 14px!important;gap:6px!important}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]) h3{font-size:19px!important;line-height:1.05}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]) p{font-size:13px!important;line-height:1.45!important}
  /* the vertical Korean strip eats too much width on a small card */
  .bb section[id] article > div:first-child > div:has(> .kr[style*="vertical"]){width:30px!important}
  .bb section[id] article > div:first-child > div:has(> .kr[style*="vertical"]) .kr{font-size:16px!important;letter-spacing:1px!important}
  .bb section[id] article > div:first-child > .tag{font-size:13px!important;left:8px!important;top:8px!important}
  .bb section[id] article > div:first-child > svg{width:22px!important;height:36px!important;right:38px!important}

  /* ---------- LOCATIONS ---------- */
  .bb .loc-collage{aspect-ratio:1 / 1!important;margin-top:8px}
  .bb .loc-collage > .tag{right:2%!important;bottom:2%!important;font-size:16px!important}
  /* city picker: 3 across, compact */
  #stores div:has(> button[aria-pressed]){grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
  #stores button[aria-pressed]{padding:10px 10px 12px!important;border-radius:14px!important}
  #stores button[aria-pressed] .disp{font-size:28px!important}
  #stores button[aria-pressed] span:nth-child(2){font-size:13px!important}
  #stores button[aria-pressed] span:nth-child(3){font-size:10px!important}
  /* store cards: swipe rail instead of a 30-card stack */
  #stores div:has(> article.lift) > article .disp[style*="27px"]{font-size:23px!important}
  /* filters + chips */
  #stores .box.shadow .row:has(> .chip){gap:6px!important}
  #stores .box.shadow .tab{min-height:42px;padding:0 12px;font-size:12px}
  #stores .box.shadow .kr[aria-hidden]{font-size:140px!important}
  /* store photos */
  .store-bento{grid-template-rows:220px 300px}
  /* presence tiles: 3 across */
  .bb .row:has(> .m-tile){display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px!important}
  .m-tile{min-height:70px!important;padding:12px 6px!important;border-radius:12px!important}
  .m-tile .disp{font-size:20px!important}
  .m-tile span:last-child{font-size:9px!important;letter-spacing:.1em!important}
  /* three ways to bhai */
  .bb .grid-3 > .box[style*="min-height: 280px"]{min-height:0!important;padding:24px!important}

  /* ---------- CONTACT ---------- */
  .bb .wrap.grid > div.box.lift{min-height:0!important;padding:22px!important;gap:8px!important}
  .bb .wrap.grid > div.box.lift > .disp{font-size:26px!important}

  /* ---------- FOOTER ---------- */
  .foot .disp{font-size:clamp(34px,10vw,44px)}
  .bb .foot .row:has(> a.btn){gap:10px!important}
  .bb .foot .row:has(> a.btn) > a.btn{flex:1 1 auto;padding:0 14px}
}

@media (max-width:640px){
  /* ---------- PACKAGED ---------- */
  /* cans + Seung Toko chips: swipe rails */
  .bb .grid-3:has(> article.box.lift):not(:has(.kr[style*="vertical"])),
  #seung-toko .grid-3:has(> article.lift){
    display:flex!important;flex-wrap:nowrap!important;gap:16px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,64px));padding:4px clamp(20px,5vw,64px) 18px!important;scroll-padding-inline:clamp(20px,5vw,64px)}
  .bb .grid-3:has(> article.box.lift):not(:has(.kr[style*="vertical"])) > article,
  #seung-toko .grid-3:has(> article.lift) > article{flex:0 0 82%!important;min-width:0;scroll-snap-align:start}
  /* lifestyle photo strips: 2 x 2 grid */
  .bb .row:has(> div > img.photo):not(:has(> .m-strip)){display:grid!important;grid-template-columns:1fr 1fr}
  .bb .row:has(> div > img.photo):not(:has(> .m-strip)) > div{height:210px!important;min-width:0}
  .bb .row:has(> div > img.photo):not(:has(> .m-strip)) > div:nth-child(odd):last-child{grid-column:1 / -1}
  /* "drink it the bhai way": 2 x 2 */
  .bb ol.grid:has(> li.box){grid-template-columns:1fr 1fr!important;gap:14px!important}
  .bb ol.grid > li.box{padding:18px!important;gap:6px!important}
  .bb ol.grid > li.box > .disp:first-child{font-size:40px!important}
  .bb ol.grid > li.box > .disp:nth-child(2){font-size:24px!important}
  .bb ol.grid > li.box > span:last-child{font-size:13px!important;line-height:1.45!important}
}

@media (max-width:640px){
  /* ---------- STORY / LOCATIONS / SOURCING: card rows become swipe rails ---------- */
  .bb .grid-3:has(> div.box){
    display:flex!important;flex-wrap:nowrap!important;gap:16px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px,5vw,64px));padding:4px clamp(20px,5vw,64px) 18px!important;scroll-padding-inline:clamp(20px,5vw,64px)}
  .bb .grid-3:has(> div.box) > div.box{flex:0 0 80%!important;min-width:0;min-height:0!important;padding:26px!important;scroll-snap-align:start}

  /* ---------- CAREERS ---------- */
  /* "why you'll like it" + perks: 2 x 2 */
  .bb section .grid:has(> div.box > .kr):not(:has(a[href^="mailto"])){grid-template-columns:1fr 1fr!important;gap:12px!important}
  .bb section .grid:has(> div.box > .kr):not(:has(a[href^="mailto"])) > div{padding:18px!important;gap:8px!important;min-height:0!important}
  .bb section .grid:has(> div.box > .kr):not(:has(a[href^="mailto"])) .kr{font-size:30px!important}
  .bb section .grid:has(> div.box > .kr):not(:has(a[href^="mailto"])) .disp{font-size:22px!important}
  .bb section .grid:has(> div.box > .kr):not(:has(a[href^="mailto"])) span:last-child{font-size:13px!important;line-height:1.45!important}
  .bb .grid-3[style*="gap: 0"]{grid-template-columns:1fr 1fr!important}
  .bb .grid-3[style*="gap: 0"] > div{padding:18px!important;min-height:0!important;gap:6px!important}
  .bb .grid-3[style*="gap: 0"] > div > .disp{font-size:22px!important}
  .bb .grid-3[style*="gap: 0"] > div > span:last-child{font-size:13px!important;line-height:1.45!important}
  /* team filter: one swipeable line */
  .bb .tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(20px,5vw,64px));padding:2px clamp(20px,5vw,64px) 10px}
  .bb .tabs > .tab{flex:0 0 auto}
  /* open roles: compact rows, Apply stays on the same line */
  .bb li.row:has(> a.btn-sm){flex-wrap:nowrap!important;padding:16px 0!important;gap:12px!important}
  .bb li.row:has(> a.btn-sm) .disp{font-size:22px!important}
  .bb li.row:has(> a.btn-sm) > div{min-width:0;flex:1 1 auto}
  .bb li.row:has(> a.btn-sm) > a.btn-sm{flex:0 0 auto;padding:0 14px}

  /* ---------- FOOTER: link columns 2 across ---------- */
  .foot .wrap > .row:nth-child(2){display:grid!important;grid-template-columns:1fr 1fr;gap:28px 16px!important;padding-block:40px!important}
  .foot .wrap > .row:nth-child(2) > div:first-child{grid-column:1 / -1;max-width:none!important}
  .foot .wrap > .row:first-child{padding-bottom:32px!important;gap:24px!important}
  .bb .foot li > a{padding:9px 0}
  .foot h4,.foot h3{margin-bottom:8px!important}
}

/* very small phones */
@media (max-width:360px){
  #stores div:has(> button[aria-pressed]){grid-template-columns:repeat(2,1fr)!important}
  .bb .grid-3:has(> article.box.lift .kr[style*="vertical"]){grid-template-columns:1fr!important}
}

/* =========================================================
   ADDENDUM — Agent 2, 9 Nov 2026. Not part of the agency's
   approved sections above; delete this block to revert.

   Section 2 restores the side padding that site.css line 179
   (.bb .foot .row>a{padding:12px 0}, inside the <=640px query)
   had zeroed. That fixes the clipped text, and for a.btn the
   height is unaffected because .bb .btn{min-height:48px} holds
   it at 48px.

   a.chip has no min-height. site.css line 179 also forces
   display:inline-block on it, which overrides .chip's own
   inline-flex, so its height is purely padding + line-height:
     before  12px + 12px padding + 12px text + 4px border = 40px
     after   10px + 10px padding + 12px text + 4px border = 36px
   The Nov 2026 accessibility pass took sub-40px tap targets from
   26 down to 5; at 36px the Instagram and LinkedIn pills would go
   back under that floor. This restores exactly the previous 40px
   and changes nothing else. 44px (the WCAG/Apple figure) is the
   stricter option if Kapil wants it.
   ========================================================= */
@media (max-width:640px){
  .bb .foot .row > a.chip{display:inline-flex;align-items:center;min-height:40px}
}