/* Mobile bar & drinks page (owner brief 2026-10-26). Loads after canapes-page.css and reuses its cb-* blocks;
   only adds the handmade-bar story, Greek pours, zero-proof band and the licensing explainer. */

/* Hero: the bar stands right of centre, keep it clear of the copy.
   Owner brief 2026-10-26: the picture must stay sharp and clean, so no fire glow, embers or slow zoom here,
   and the navy shade only sits behind the words. Bubbles, mist and garnish come from mobile-bar-fx.js. */
.menu-page main .mb-hero .mhero-food{object-position:58% 50%}
.menu-page .mb-hero .mhero-glow,.am-on .menu-page .mb-hero .mhero-visual::after{display:none!important}
.am-on .menu-page .mb-hero .mhero-food{animation:none;transform:none;will-change:auto}
.menu-page .mb-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
@media(min-width:901px){
  .menu-page main .mb-hero .mhero-shade{background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy-deep) 3%,rgba(12,23,60,.6) 14%,rgba(12,23,60,0) 34%)}
}
@media(min-width:601px) and (max-width:900px){
  .menu-page main .mb-hero .mhero-shade{background:linear-gradient(90deg,var(--navy-deep),rgba(12,23,60,.62) 26%,rgba(12,23,60,0) 58%)}
}

@media(max-width:600px){
  /* phones: the bar shows clear at the top, the navy only deepens behind the words lower down */
  .menu-page main .mb-hero .mhero-shade{background:linear-gradient(180deg,rgba(12,23,60,.12) 0%,rgba(12,23,60,.08) 30%,rgba(12,23,60,.82) 58%,var(--navy-deep) 82%)}
}

/* Bubbles rising through the dry hire band */
.menu-page main .cb-combo[data-bar-fx]{position:relative;overflow:hidden}
.menu-page main .cb-combo[data-bar-fx] .cb-combo-inner{position:relative;z-index:3}
.menu-page main .cb-combo .mb-fx{z-index:1}

/* Handmade bar story */
.menu-page main .mb-made{background-color:#fcf9f3;background-image:var(--tex-grain),var(--tex-weave-soft),linear-gradient(180deg,#fdfbf6,#f7f1e6)}
.menu-page main .mb-made-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.menu-page main .mb-made h2{margin-top:13px}
.menu-page main .mb-made h2 em{color:var(--navy-light)}
.menu-page main .mb-made-copy p{color:var(--muted);margin-top:18px;line-height:1.75}
.menu-page main .mb-made-copy .mb-lead{font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--navy);letter-spacing:-.01em}
.menu-page main .mb-made-photo{margin:0}
.menu-page main .mb-made-photo img{border-radius:14px;box-shadow:0 24px 50px -28px #2a1e0e80}
.menu-page main .mb-made-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 55%}
.menu-page main .mb-made-photo figcaption{font-size:.8125rem;color:var(--muted);padding:10px 4px 0;text-align:center}
.menu-page main .mb-made-points{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.menu-page main .mb-made-points li{border-top:2px solid var(--gold);padding-top:10px;font-size:.9375rem;color:#3c4660;line-height:1.5}
.menu-page main .mb-made-points strong{display:block;color:var(--navy);font-weight:600}

/* Zero-proof note under the packages */
.menu-page main .mb-zero{margin:38px auto 0;max-width:860px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 30px;border:1px solid #e6dccb;border-left:3px solid var(--gold);border-radius:6px;background-color:#fffdf8;background-image:var(--tex-grain),var(--tex-weave-soft),linear-gradient(180deg,#fffefa,#fbf6ec)}
.menu-page main .mb-zero h3{font-size:1.3rem;letter-spacing:-.02em}
.menu-page main .mb-zero p{font-size:.9375rem;color:var(--muted);line-height:1.65;margin:0}
.menu-page main .mb-zero-mark{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold-dark)}
.menu-page main .mb-zero .button{min-height:46px;font-size:.875rem;white-space:nowrap}

.menu-page main .mb-food{margin-top:18px}
.menu-page main .mb-zero p strong{color:var(--navy);font-weight:600}

/* Priced add-ons: name left, price right */
.menu-page main .cb-extra .mb-addons li{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.menu-page main .cb-extra .mb-addons b{flex:none;font-weight:600;color:var(--navy);white-space:nowrap}

/* Sample cocktail menu (owner's light poster, 2026-10-26): the section takes the poster's own palette,
   soft linen blue #DCEAF2, warm ivory #F7F4EC and deep navy #20364A, on a fine linen weave */
.menu-page main .mb-menu{--mb-blue:#dceaf2;--mb-ivory:#f7f4ec;--mb-navy:#20364a;color:var(--mb-navy);background-color:var(--mb-blue);background-image:var(--tex-grain),var(--tex-weave-soft),radial-gradient(ellipse 55% 75% at 22% 45%,#f7f4ecb3,#0000 70%),linear-gradient(180deg,#e3eff6,#d6e6f0)}
.menu-page main .mb-menu-inner{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:64px;align-items:center}
.menu-page main .mb-menu-poster{margin:0}
.menu-page main .mb-menu-poster img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px -28px #20364a73,0 0 0 1px #20364a1f}
.menu-page main .mb-menu-poster figcaption{font-size:.8125rem;color:#4f6478;text-align:center;padding-top:10px}
.menu-page main .mb-menu .eyebrow{color:var(--gold-dark)}
.menu-page main .mb-menu h2{color:var(--mb-navy);margin-top:13px}
.menu-page main .mb-menu h2 em{color:var(--navy-light)}
.menu-page main .mb-menu .mb-lead{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--mb-navy);margin-top:18px}
.menu-page main .mb-menu-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.menu-page main .mb-menu-list li{background:var(--mb-ivory);border:1px solid #20364a14;border-left:3px solid var(--mb-navy);border-radius:4px;padding:12px 16px;font-size:.9375rem;line-height:1.6;color:#3f5266}
.menu-page main .mb-menu-list strong{display:block;color:var(--mb-navy);font-weight:600}
.menu-page main .mb-menu-note{margin-top:22px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#4f6478}
.menu-page main .mb-menu .cb-button{margin-top:18px;background:var(--mb-navy);border-color:var(--mb-navy);color:#fff;min-height:48px;padding-inline:26px}
.menu-page main .mb-menu .cb-button:hover{background:#162737}
@media(max-width:900px){
  .menu-page main .mb-menu-inner{grid-template-columns:1fr;gap:36px}
  .menu-page main .mb-menu-poster{max-width:420px;margin-inline:auto}
}

/* Garnish flat-lay: keep the ice and dry ice along the bottom in view, so a 16:9 crop rather than the canapé banner crop */
.menu-page main .mb-garnish .cb-touches-photo img{aspect-ratio:16/9;object-position:50% 55%}
@media(max-width:600px){.menu-page main .mb-garnish .cb-touches-photo img{aspect-ratio:4/3;object-position:50% 55%}}
.menu-page main .mb-garnish+.mb-greek{padding-top:10px}

/* Greek pours: the bartender-at-sunset photo beside the heading and a 2 x 2 list */
.menu-page main .mb-greek .cb-touches-list{margin-top:6px}
/* Owner's portrait photo with its own pink linen arch frame (2026-10-26): shown whole, no crop, corners or shadow */
.menu-page main .mb-greek-inner{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:64px;align-items:center}
.menu-page main .mb-greek-photo{margin:0}
.menu-page main .mb-greek-photo img{display:block;width:100%;height:auto;-webkit-mask-image:var(--banner-feather);-webkit-mask-composite:source-in;mask-image:var(--banner-feather);mask-composite:intersect}
.menu-page main .mb-greek-photo figcaption{font-size:.8125rem;color:var(--muted);text-align:center;padding-top:10px}
.menu-page main .mb-greek-copy .cb-touches-head{text-align:left;margin:0 0 26px;max-width:none}
.menu-page main .mb-greek-copy .cb-touches-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.menu-page main .mb-greek-inner{grid-template-columns:1fr;gap:34px}.menu-page main .mb-greek-photo{max-width:420px;margin-inline:auto}}

/* Licensing explainer: plain steps, navy cloth like the FAQ */
.menu-page main .mb-licence{background-color:#eaf1f7;background-image:var(--tex-grain),var(--tex-weave-soft),radial-gradient(ellipse 70% 60% at 50% 0%,#f6faff,#0000 70%),linear-gradient(180deg,#eef4f9,#e3ecf4)}
.menu-page main .mb-licence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.menu-page main .mb-licence-card{padding:30px;border:1px solid #d8e3ef;border-top:3px solid var(--navy);border-radius:6px;background-color:#fffdf8;background-image:var(--tex-grain),var(--tex-weave-soft),linear-gradient(180deg,#fffefa,#fbf6ec);box-shadow:0 14px 30px -22px #4a3a2259}
.menu-page main .mb-licence-card:nth-child(2){border-top-color:var(--gold)}
.menu-page main .mb-licence-card:nth-child(3){border-top-color:var(--silver)}
.menu-page main .mb-licence-card .mb-where{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark)}
.menu-page main .mb-licence-card h3{font-size:1.3rem;letter-spacing:-.02em;margin-top:10px}
.menu-page main .mb-licence-card p{font-size:.9375rem;color:#3c4660;line-height:1.65;margin-top:10px}
.menu-page main .mb-licence-need{margin:30px auto 0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0}
.menu-page main .mb-licence-need li{font-size:.9375rem;color:var(--muted);line-height:1.6;padding-left:16px;border-left:2px solid var(--gold)}
.menu-page main .mb-licence-need strong{display:block;color:var(--navy);font-weight:600}

@media(max-width:900px){
  .menu-page main .mb-made-inner{grid-template-columns:1fr;gap:34px}
  .menu-page main .mb-licence-grid,.menu-page main .mb-licence-need{grid-template-columns:1fr}
  .menu-page main .mb-zero{grid-template-columns:1fr;gap:14px}
  .menu-page main .mb-zero-mark{display:none}
  .menu-page main .mb-zero .button{justify-self:start}
}
@media(max-width:600px){
  .menu-page main .mb-made-points{grid-template-columns:1fr}
  .menu-page main .mb-zero{padding:22px 20px}
  .menu-page main .mb-licence-card{padding:24px 22px}
}

/* Pink grapefruit instead of beige (owner brief 2026-10-26): every cream linen section on this page takes a soft
   grapefruit blush, same grain and weave so it still reads as cloth. The blue and navy sections stay as they are. */
.menu-page main .mb-made,.menu-page main .cb-packages,.menu-page main .mb-garnish,.menu-page main .mb-greek,.menu-page main .cb-included{background-color:#fbe3da;background-image:var(--tex-grain),var(--tex-weave-soft),radial-gradient(ellipse 70% 60% at 50% 0%,#fff2ec,#0000 70%),linear-gradient(180deg,#fdeae3,#f7d6ca)}
.menu-page main .cb-in{background-color:#fbe9e2;background-image:var(--tex-grain),var(--tex-weave-soft),linear-gradient(180deg,#fdf0eb,#f8ddd3)}
.menu-page main .cb-card,.menu-page main .cb-included-grid>div,.menu-page main .mb-zero{border-color:#efcabd}
/* Champagne bubbles rising through the navy FAQ panel too (owner brief 2026-10-26) */
.menu-page main .service-section[data-bar-fx]{position:relative;overflow:hidden}
.menu-page main .service-section[data-bar-fx]>.container{position:relative;z-index:3}
.menu-page main .service-section .mb-fx{z-index:1}