/* ============================================================
   Banh Mi Station — page components + cart chrome
   loaded after site.css on every page
   ============================================================ */

/* ---------- cart drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(8,29,92,.42);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:0;z-index:95;height:100%;width:min(420px,92vw);
  background:var(--cream);box-shadow:-30px 0 70px -30px rgba(8,29,92,.5);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.85,.2,1);
  display:flex;flex-direction:column;
}
.cart-drawer.open{transform:none;}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 1.5rem;border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.5rem;margin:0;display:flex;align-items:center;gap:.55rem;}
.cart-head h3 svg{width:22px;height:22px;color:var(--orange);}
.cart-close{width:42px;height:42px;border:none;background:rgba(8,29,92,.06);border-radius:50%;display:grid;place-items:center;color:var(--navy);transition:background .2s;}
.cart-close:hover{background:rgba(8,29,92,.12);}
.cart-close svg{width:22px;height:22px;}
.cart-items{flex:1;overflow-y:auto;padding:1.1rem 1.5rem;display:flex;flex-direction:column;gap:1rem;}
.cart-line{display:flex;gap:.9rem;align-items:center;}
.cart-line .thumb{width:60px;height:60px;border-radius:12px;flex:none;background:
  repeating-linear-gradient(135deg,#e6dbc4 0 10px,#efe5d0 10px 20px);display:grid;place-items:center;color:var(--green-deep);}
.cart-line .thumb svg{width:24px;height:24px;}
.cart-line .ci-info{flex:1;min-width:0;}
.cart-line .ci-name{font-weight:700;color:var(--navy);font-size:.96rem;line-height:1.2;}
.cart-line .ci-price{color:var(--orange);font-weight:700;font-size:.9rem;}
.qty{display:inline-flex;align-items:center;gap:.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.15rem;}
.qty button{width:28px;height:28px;border:none;background:transparent;border-radius:50%;color:var(--navy);font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:background .2s;}
.qty button:hover{background:rgba(8,29,92,.08);}
.qty span{min-width:22px;text-align:center;font-weight:700;font-size:.9rem;}
.ci-remove{border:none;background:none;color:var(--muted);cursor:pointer;padding:.2rem;display:grid;place-items:center;transition:color .2s;}
.ci-remove:hover{color:var(--red);}
.ci-remove svg{width:17px;height:17px;}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;color:var(--muted);padding:2rem;}
.cart-empty svg{width:54px;height:54px;color:rgba(8,29,92,.22);}
.cart-empty .btn{margin-top:.5rem;}
.cart-foot{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid var(--line);background:var(--cream-2);}
.cart-foot .sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;}
.cart-foot .sub span{color:var(--muted);font-weight:600;}
.cart-foot .sub b{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.7rem;}
.cart-foot .btn{width:100%;}
.cart-foot .note{text-align:center;font-size:.78rem;color:var(--muted);margin:.7rem 0 0;}
.cart-empty[hidden],.cart-foot[hidden]{display:none;}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.6rem;align-items:center;pointer-events:none;}
.toast{background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:var(--r-pill);
  box-shadow:var(--shadow);font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.6rem;
  transform:translateY(20px);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .35s;}
.toast.show{transform:none;opacity:1;}
.toast svg{width:18px;height:18px;color:var(--yellow);flex:none;}

/* ---------- page hero band (navy) ---------- */
.page-hero{position:relative;background:var(--navy);color:#fff;text-align:center;overflow:hidden;
  padding:clamp(64px,9vw,120px) var(--pad);}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 0%,rgba(248,100,2,.22),transparent 60%);}
.page-hero .inner{position:relative;max-width:760px;margin:0 auto;}
.page-hero .eyebrow{color:var(--yellow);justify-content:center;}
.page-hero .eyebrow::before{background:var(--yellow);}
.page-hero h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.8rem,6vw,4.8rem);line-height:1;margin:1rem 0 0;color:#fff;letter-spacing:-.01em;}
.page-hero p{color:rgba(255,255,255,.84);font-size:clamp(1.05rem,1.6vw,1.28rem);margin:1.1rem auto 0;max-width:46ch;}
.page-hero .btn{margin-top:2rem;}

/* photo variant (About) */
.page-hero--photo{padding:clamp(90px,12vw,150px) var(--pad);}
.page-hero--photo .ph-bg{position:absolute;inset:0;z-index:0;}
.page-hero--photo .ph-bg image-slot,.page-hero--photo .ph-bg img{width:100%;height:100%;object-fit:cover;display:block;--slot-bg:repeating-linear-gradient(135deg,#33405f 0 18px,#3b496b 18px 36px);}
.page-hero--photo::before{z-index:1;background:linear-gradient(180deg,rgba(8,29,92,.72),rgba(8,29,92,.55) 50%,rgba(8,29,92,.82));inset:0;}
.page-hero--photo .inner{z-index:2;}

/* ---------- section intro ---------- */
.intro{max-width:680px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center;}
.intro .eyebrow{justify-content:center;margin-bottom:1rem;}
.intro h2{margin:0;}
.intro p{margin:1.1rem auto 0;}
.section.on-cream{background:var(--cream);}
.section.on-cream2{background:var(--cream-2);}
.section.on-navy{background:var(--navy);color:#fff;}
.section.on-slate{background:var(--slate);color:#fff;}
.on-navy h2,.on-slate h2{color:#fff;}
.on-navy .intro p,.on-slate .intro p{color:rgba(255,255,255,.8);}

/* ---------- welcome block ---------- */
.welcome{max-width:760px;margin:0 auto;text-align:center;}
.welcome h2{margin:0 0 1.3rem;}
.welcome p{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--muted);line-height:1.7;text-wrap:pretty;}
.welcome .rule{width:60px;height:4px;background:var(--orange);border-radius:99px;margin:1.6rem auto 0;}

/* ---------- food card grid ---------- */
.food-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);}
.food-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid rgba(8,29,92,.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;}
.food-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.food-card .pic{position:relative;height:190px;overflow:hidden;}
.food-card .pic image-slot,.food-card .pic .ph,.food-card .pic .pic-img{width:100%;height:100%;}
.food-card .pic .pic-img{object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.food-card:hover .pic .pic-img{transform:scale(1.05);}
.food-card .pic .ph{background:repeating-linear-gradient(135deg,#e6dbc4 0 14px,#efe5d0 14px 28px);}
.food-card .badge-best{position:absolute;top:12px;left:12px;z-index:2;}
.food-card .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.food-card h3{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.22rem;line-height:1.1;margin:0;}
.food-card .desc{color:var(--muted);font-size:.92rem;line-height:1.5;margin:0;flex:1;}
.food-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;}
.food-card .price{font-family:var(--ff-display);font-weight:600;color:var(--orange);font-size:1.4rem;line-height:1;}

/* dark variant for best sellers on slate */
.food-card.dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);}
.food-card.dark h3{color:#fff;}
.food-card.dark .desc{color:rgba(255,255,255,.66);}
.food-card.dark:hover{background:rgba(255,255,255,.07);}

.add-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--navy);color:#fff;border:none;
  font-weight:700;font-size:.86rem;padding:.6em 1em;border-radius:var(--r-pill);transition:background .2s,transform .2s;}
.add-btn:hover{background:var(--orange);transform:translateY(-1px);}
.add-btn svg{width:16px;height:16px;}
.add-btn.added{background:var(--green);}

/* ---------- menu list ---------- */
.menu-wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);}
.menu-section h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 1.4rem;
  padding-bottom:.7rem;border-bottom:2px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:.7rem;}
.menu-section.light h2{border-bottom-color:var(--line);color:var(--navy);}
.menu-row{display:flex;gap:1.2rem;align-items:baseline;padding:.95rem 0;border-bottom:1px dashed rgba(255,255,255,.12);}
.menu-section.light .menu-row{border-bottom-color:var(--line);}
.menu-row:last-child{border-bottom:none;}
.menu-row .mi-info{flex:1;}
.menu-row .mi-name{font-weight:700;font-size:1.08rem;color:#fff;margin:0 0 .2rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.menu-section.light .mi-name{color:var(--navy);}
.menu-row .mi-desc{font-size:.92rem;color:rgba(255,255,255,.6);margin:0;line-height:1.5;}
.menu-section.light .mi-desc{color:var(--muted);}
.menu-row .dotfill{flex:1;border-bottom:2px dotted rgba(255,255,255,.2);align-self:flex-end;margin-bottom:.34rem;min-width:18px;}
.menu-row .mi-price{font-family:var(--ff-display);font-weight:600;color:var(--orange);font-size:1.32rem;white-space:nowrap;line-height:1;}
.menu-row .mi-add{flex:none;}
.menu-note{text-align:center;color:rgba(255,255,255,.6);font-style:italic;margin-top:2.5rem;}

/* thumbnail on a menu row */
.menu-row.has-thumb{align-items:center;}
.menu-row .mi-thumb{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);}

/* full-menu photo grids */
.menu-cat{margin-bottom:clamp(2.6rem,5vw,4rem);}
.menu-cat:last-of-type{margin-bottom:0;}
.menu-cat > h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin:0 0 1.4rem;
  padding-bottom:.7rem;border-bottom:2px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:.7rem;}
.menu-cat > h2 .cat-note{font-family:var(--ff-body);font-weight:600;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-left:auto;text-transform:none;}
.dish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.dish-card{display:flex;flex-direction:column;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .3s;}
.dish-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:rgba(255,255,255,.08);}
.dish-card .pic{position:relative;height:150px;overflow:hidden;}
.dish-card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.dish-card:hover .pic img{transform:scale(1.06);}
.dish-card .pic .ph{width:100%;height:100%;background:repeating-linear-gradient(135deg,#33405f 0 14px,#3b496b 14px 28px);
  display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.1em;color:rgba(255,255,255,.5);text-align:center;padding:1rem;}
.dish-card .tag-new{position:absolute;top:10px;left:10px;z-index:2;background:var(--yellow);color:var(--navy);font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.34em .7em;border-radius:999px;}
.dish-card .veg-dot{position:absolute;top:10px;right:10px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;place-items:center;}
.dish-card .veg-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;}
.dish-card .d-body{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.dish-card .d-body h3{font-family:var(--ff-display);font-weight:600;color:#fff;font-size:1.08rem;line-height:1.12;margin:0;}
.dish-card .d-body .desc{color:rgba(255,255,255,.6);font-size:.84rem;line-height:1.45;margin:0;flex:1;}
.dish-card .d-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.4rem;}
.dish-card .price{font-family:var(--ff-display);font-weight:600;color:var(--orange);font-size:1.3rem;line-height:1;}
.price-tbd{font-family:var(--ff-body);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yellow);background:rgba(253,217,1,.14);padding:.45em .8em;border-radius:999px;line-height:1;}
.dish-card .add-btn{background:var(--orange);color:#fff;padding:.5em .85em;font-size:.82rem;}
.dish-card .add-btn:hover{background:var(--orange-deep);}
.dish-card .add-btn.added{background:var(--green);}
@media (max-width:1024px){.dish-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.dish-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:430px){.dish-grid{grid-template-columns:1fr;}}

/* ---------- location cards ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2rem);max-width:1040px;margin:0 auto;}
.loc-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(8,29,92,.05);display:flex;flex-direction:column;}
.loc-card .map{height:280px;background:#dfe6ee;position:relative;}
.loc-card .map iframe{width:100%;height:100%;border:0;display:block;}
.loc-card .map .ph{width:100%;height:100%;background:
  repeating-linear-gradient(135deg,#dde6ee 0 16px,#e8eef4 16px 32px);}
.loc-card .lc-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.9rem;flex:1;}
.loc-card h3{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.5rem;margin:0;}
.loc-row{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-size:1rem;}
.loc-row svg{width:20px;height:20px;flex:none;margin-top:.18rem;color:var(--orange);}
.loc-card .btn{margin-top:.4rem;}
.loc-soon{align-items:center;justify-content:center;text-align:center;border:2px dashed rgba(8,29,92,.18);background:rgba(255,255,255,.5);box-shadow:none;padding:2rem;}
.loc-soon .so-badge{width:64px;height:64px;border-radius:50%;background:rgba(248,100,2,.12);display:grid;place-items:center;color:var(--orange);margin-bottom:.4rem;}
.loc-soon .so-badge svg{width:30px;height:30px;}
.loc-soon h3{color:var(--orange);}
.loc-soon p{color:var(--muted);max-width:30ch;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;}
.cta-band h2{margin:0 0 1.5rem;}
.cta-band .btn{margin:0 auto;}
.cta-band .sub{margin-top:1.3rem;color:rgba(255,255,255,.6);font-style:italic;font-size:.95rem;}

/* ---------- feature cards (about) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;max-width:820px;margin:0 auto;}
.feat-card{background:#fff;border-radius:var(--r-sm);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);border:1px solid rgba(8,29,92,.05);display:flex;gap:1rem;align-items:flex-start;transition:transform .3s;}
.feat-card:hover{transform:translateY(-4px);}
.feat-card .fc-ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;}
.feat-card .fc-ic svg{width:24px;height:24px;}
.feat-card h4{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.2rem;margin:0 0 .3rem;}
.feat-card p{color:var(--muted);font-size:.94rem;margin:0;line-height:1.5;}

/* ---------- story prose ---------- */
.story{max-width:720px;margin:0 auto;}
.story h2{display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;}
.story .badge-num{width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-weight:600;font-size:1.3rem;flex:none;}
.story p{color:var(--ink);font-size:1.08rem;line-height:1.75;margin:0 0 1.2rem;text-wrap:pretty;}
.story p.muted{color:var(--muted);}
.story .pull{font-family:var(--ff-display);font-weight:500;font-size:1.4rem;color:var(--navy);line-height:1.4;
  border-left:4px solid var(--orange);padding-left:1.2rem;margin:2rem 0;}
.story ul{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.8rem;}
.story ul li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.05rem;color:var(--ink);}
.story ul li svg{width:22px;height:22px;flex:none;margin-top:.15rem;color:var(--green);}

/* full-width ingredient photo */
.ingredient-photo{max-width:900px;margin:clamp(2rem,4vw,3rem) auto 0;}
.ingredient-photo image-slot,.ingredient-photo .ph,.ingredient-photo img{width:100%;height:clamp(280px,38vw,440px);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.ingredient-photo img{object-fit:cover;display:block;}
.ingredient-photo .ph{background:repeating-linear-gradient(135deg,#e6dbc4 0 18px,#efe5d0 18px 36px);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);max-width:1080px;margin:0 auto;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:1rem;}
.contact-form h2{margin:0 0 .6rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-weight:700;font-size:.86rem;color:var(--navy);letter-spacing:.02em;}
.field input,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s;}
.field textarea{resize:vertical;min-height:140px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(248,100,2,.12);}
.field.invalid input,.field.invalid textarea{border-color:var(--red);}
.field .err{color:var(--red);font-size:.82rem;font-weight:600;display:none;}
.field.invalid .err{display:block;}
.contact-form .btn{align-self:flex-start;margin-top:.4rem;}
.form-success{display:none;background:rgba(78,158,23,.1);border:1.5px solid rgba(78,158,23,.4);border-radius:var(--r-sm);padding:1.4rem 1.5rem;text-align:center;color:var(--green-deep);}
.form-success.show{display:block;}
.form-success svg{width:42px;height:42px;color:var(--green);margin-bottom:.5rem;}
.form-success h3{font-family:var(--ff-display);color:var(--navy);margin:0 0 .3rem;font-size:1.4rem;}
.form-success p{margin:0;color:var(--muted);}

.contact-info h2{margin:0 0 1.6rem;}
.info-block{margin-bottom:1.8rem;}
.info-block h4{font-family:var(--ff-display);font-weight:600;color:var(--navy);font-size:1.3rem;margin:0 0 .7rem;}
.info-row{display:flex;gap:.8rem;align-items:center;color:var(--ink);font-size:1.05rem;margin-bottom:.5rem;}
.info-row .ic{width:42px;height:42px;border-radius:12px;background:rgba(248,100,2,.12);display:grid;place-items:center;color:var(--orange);flex:none;}
.info-row .ic svg{width:20px;height:20px;}
.contact-info a.morelink{color:var(--orange);font-weight:700;display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;}
.contact-info a.morelink:hover{gap:.7rem;}
.contact-card{background:#fff;border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm);border:1px solid rgba(8,29,92,.05);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .food-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .loc-grid{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .food-grid{grid-template-columns:1fr;}
  .menu-row{flex-wrap:wrap;}
  .menu-row .dotfill{display:none;}
}