/* ─────────────────────────────────────────────────────────────
   Jinar — menu app (chooser, sidebar navigation, sliding cards)
   One cream sheet language with the rest of the site; each group has
   one colour (sidebar), each section one accent (icon + small line).
   ───────────────────────────────────────────────────────────── */
.mchoose[hidden],.msheet[hidden]{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.mlock{overflow:hidden}

/* ── 1. full-screen chooser ─────────────────────────────── */
.mchoose{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(14px,2.4vw,24px);
  background:#F2ECDF;
}
.mchoose-kick{
  margin:4px 0 0;text-align:center;
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--label);
  transition:opacity .3s ease;
}
.mchoose-close{
  position:absolute;top:12px;right:14px;z-index:2;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(31,26,18,.16);background:transparent;color:var(--ink);
  font-size:22px;line-height:1;transition:opacity .3s ease,background .25s ease;
}
.mchoose-close:hover{background:var(--ink);color:var(--paper)}
.mchoose-panels{flex:1;min-height:0;display:flex;gap:14px;transition:gap .5s ease}

.mpanel{
  --g:#5C7360;
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:30px;border:0;border-radius:var(--r-xl);
  background:var(--g);color:#F6F1E6;font:inherit;text-align:center;
  transition:flex-grow .6s cubic-bezier(.65,0,.35,1),opacity .45s ease,filter .4s ease,padding .5s ease;
}
.mpanel::before{        /* soft light, so a flat colour still feels warm */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 38%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
}
.mpanel > *{position:relative;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.mpanel-ic{width:clamp(62px,7vw,92px);height:clamp(62px,7vw,92px)}
.mpanel-ic svg{width:100%;height:100%}
.mpanel-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(42px,6vw,78px);line-height:1}
.mpanel-line{font-size:14px;opacity:.86;max-width:28ch;line-height:1.5}
.mpanel-go{
  margin-top:10px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:100px;border:1px solid rgba(246,241,230,.5);
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.mpanel-go i{font-style:normal;transition:transform .3s ease}
.mchoose:focus{outline:none}
.mpanel:focus{outline:none}
.mpanel:focus-visible .mpanel-go{background:#F6F1E6;color:var(--g)}   /* keyboard: the Enter pill fills instead of a frame */
@media (hover:hover){
  .mchoose-panels:hover .mpanel{flex-grow:.82;filter:saturate(.8) brightness(.96)}
  .mchoose-panels .mpanel:hover{flex-grow:1.3;filter:none}
  .mpanel:hover .mpanel-ic{transform:translateY(-4px) scale(1.04)}
  .mpanel:hover .mpanel-go{background:#F6F1E6;color:var(--g)}
  .mpanel:hover .mpanel-go i{transform:translateX(4px)}
}
/* entrance */
.mchoose.in .mpanel{animation:mPanelIn .8s cubic-bezier(.2,.8,.2,1) both}
.mchoose.in .mpanel + .mpanel{animation-delay:.08s}
.mchoose.in .mpanel > *{animation:mFadeUp .7s cubic-bezier(.2,.8,.2,1) both}
.mchoose.in .mpanel > :nth-child(2){animation-delay:.18s}
.mchoose.in .mpanel > :nth-child(3){animation-delay:.24s}
.mchoose.in .mpanel > :nth-child(4){animation-delay:.3s}
@keyframes mPanelIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* picking: the chosen panel takes the screen, the other folds away */
.mchoose.picking .mchoose-panels{gap:0}
.mchoose.picking .mchoose-kick,.mchoose.picking .mchoose-close{opacity:0}
.mchoose.picking .mpanel{flex-grow:.0001;opacity:0;padding:0;filter:none}
.mchoose.picking .mpanel.chosen{flex-grow:1;opacity:1;border-radius:0}
.mchoose.picking .mpanel.chosen > :not(.mpanel-ic){opacity:0}
.mchoose.picking{padding:0;transition:padding .55s cubic-bezier(.65,0,.35,1)}

/* ── 2. the menu: sidebar + stage ───────────────────────── */
.mapp{
  max-width:var(--max);margin:14px auto 0;padding:0 14px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start;
}
.mside{
  --side:#5C7360;
  position:sticky;top:calc(var(--navh,64px) + 14px);
  height:calc(100svh - var(--navh,64px) - 28px);min-height:440px;
  display:flex;flex-direction:column;overflow:hidden;
  padding:20px 14px;border-radius:var(--r-xl);
  background:var(--side);color:#F6F1E6;
  transition:background-color .6s ease;
}
.mside-head{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:6px 8px 18px;margin-bottom:12px;cursor:pointer;
  background:none;border:0;border-bottom:1px solid rgba(246,241,230,.2);
  color:inherit;font:inherit;text-align:left;
}
.mside-ic{width:34px;height:34px;flex:none}
.mside-ic svg{width:100%;height:100%}
.mside-group{flex:1;min-width:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;line-height:1}
.mside-switch{
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border-radius:100px;border:1px solid rgba(246,241,230,.38);opacity:.85;flex:none;letter-spacing:.12em;
  transition:background .25s ease,color .25s ease;
}
.mside-head:hover .mside-switch{background:#F6F1E6;color:var(--side);opacity:1}

.mside-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px}
.mside-item{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:14px;
  font-size:14.5px;color:rgba(246,241,230,.8);
  transition:color .35s ease;
}
.mside-item .mi{width:26px;height:26px;flex:none;transition:color .35s ease,transform .35s ease}
.mside-item .mi svg{width:100%;height:100%}
.mside-item .lbl{flex:1;line-height:1.25}
.mside-item small{font-size:11px;opacity:.6}
.mside-item:hover:not(.on){color:#fff}
.mside-item:hover:not(.on) .mi{transform:translateX(2px)}
.mside-item.on{color:var(--ink)}
.mside-item.on .mi{color:var(--c)}
.mside-item:focus-visible{outline:2px solid #F6F1E6;outline-offset:2px}
.mside-mark{                    /* the cream pill that glides to the active section */
  position:absolute;left:14px;right:14px;top:0;height:0;z-index:0;
  border-radius:14px;background:#F6F1E6;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.45);
  transition:top .5s cubic-bezier(.65,0,.35,1),height .5s cubic-bezier(.65,0,.35,1);
}
.mside.enter .mside-item{animation:mItemIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms + 80ms)}
.mside.enter .mside-mark{animation:mFade .4s .3s ease both}
@keyframes mItemIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}

.mstage{
  --c:var(--caramel);
  min-width:0;overflow:hidden;
  min-height:calc(100svh - var(--navh,64px) - 28px);
  display:flex;flex-direction:column;
  padding:clamp(26px,3.4vw,46px);
  border-radius:var(--r-xl);background:var(--paper);
  scroll-margin-top:calc(var(--navh,64px) + 10px);
}
.mhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 22px;align-items:end}
.mhead-ic{width:54px;height:54px;color:var(--c);align-self:start;transition:color .4s ease}
.mhead-ic svg{width:100%;height:100%}
.mhead-line{
  margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c);transition:color .4s ease;
}
.mhead-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(34px,3.8vw,52px);line-height:1;margin:0}
.mhead-blurb{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft);max-width:54ch}
.mhead-blurb:empty{display:none}
.mhead-actions{display:flex;gap:8px}

/* the sideways row */
.mslide{
  --sp:clamp(26px,3.4vw,46px);
  flex:1;margin:clamp(22px,3vw,34px) calc(var(--sp) * -1) 0;padding:4px var(--sp) 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--sp);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
}
.mslide::-webkit-scrollbar{display:none}
.mslide.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.mslide.drag .mcard{pointer-events:none}
.mtrack{display:flex;gap:18px;width:max-content}
.mcard{width:clamp(230px,22vw,290px);scroll-snap-align:start;display:flex;flex-direction:column}
.mcard-photo{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--cream);
}
.mcard-photo .media{height:100%;border-radius:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mcard:hover .mcard-photo .media{transform:scale(1.05)}
.mcard-body{padding:14px 2px 0;display:flex;flex-direction:column;gap:6px}
.mcard h3{font-size:18px;line-height:1.25;margin:0;color:var(--ink)}
.mcard-meta{margin:0;display:flex;gap:10px;font-size:12px;color:var(--label)}
.mcard-meta span + span::before{content:"·";margin-right:10px}
.mcard-price{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
.mcard-price small{font-size:11px;font-weight:400;color:var(--label)}
.mcard-actions{display:flex;gap:8px;margin-top:6px}
.mcard-actions .tbtn{min-height:36px;padding:0 16px;font-size:13px}
.mcard-landed .mcard-photo{outline:3px solid var(--c);outline-offset:3px}

.mfoot{display:flex;align-items:center;gap:16px;margin-top:22px}
.marrows{display:flex;gap:8px}
.marrows button{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(31,26,18,.16);background:transparent;color:var(--ink);font-size:16px;
  transition:background .25s ease,color .25s ease,opacity .25s ease;
}
.marrows button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.marrows button:disabled{opacity:.3;cursor:default}
.mcount{font-size:12px;letter-spacing:.12em;color:var(--label)}
.mcount b{font-weight:500;color:var(--ink)}
.mnext{
  margin-left:auto;cursor:pointer;background:none;border:0;padding:6px 0;
  font:inherit;font-size:16px;color:var(--ink);text-align:right;
}
.mnext small{display:block;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:2px}
.mnext i{font-style:normal;display:inline-block;transition:transform .3s ease}
.mnext:hover{color:var(--c)}
.mnext:hover i{transform:translateX(4px)}
.mtax{margin:14px 0 0;font-size:12px;color:var(--label)}

/* ── 3. details sheet ───────────────────────────────────── */
.msheet{
  position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:20px;
  background:rgba(31,26,18,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.msheet-card{
  position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);overflow:auto;
  background:var(--paper);border-radius:var(--r-xl);padding:22px 22px 26px;
}
.msheet-close{
  position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(246,241,230,.92);cursor:pointer;font-size:20px;color:var(--ink);
}
.msheet-photo{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden}
.msheet-photo .media{height:100%;border-radius:0}
.msheet-line{margin:18px 0 6px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.msheet-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:32px;line-height:1.05;margin:0}
.msheet-desc{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:12px 0 0}
.msheet-inc{margin:12px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-soft)}
.msheet-inc li{padding:3px 0}
.msheet-inc b{font-weight:500;color:var(--ink)}
.msheet-opts{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid rgba(31,26,18,.1)}
.msheet-opts li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(31,26,18,.1);font-size:14px;color:var(--ink-soft)}
.msheet-opts b{font-weight:500;color:var(--ink)}
.msheet-opts small{font-size:11px;font-weight:400;color:var(--label)}
.msheet-book{width:100%;margin-top:18px}

/* the header already has "Ask" (WhatsApp); the floating pill would sit on top of "Next" */
body:has(.mapp) .wa{display:none}

/* note + etiquette under the app */
.menu-more{margin-top:14px}

/* ── phones ─────────────────────────────────────────────── */
@media (max-width:820px){
  .mchoose{gap:10px;padding:12px}
  .mchoose-kick{font-size:10px;margin-top:10px}
  .mchoose-close{top:8px;right:8px;width:38px;height:38px}
  .mchoose-panels{flex-direction:column;gap:10px}
  .mpanel{padding:20px;gap:8px;border-radius:var(--r-lg)}
  .mpanel-ic{width:52px;height:52px}
  .mpanel-name{font-size:40px}
  .mpanel-line{font-size:12.5px}
  .mpanel-go{font-size:10.5px;padding:8px 16px;margin-top:4px}

  /* sidebar becomes a slim rail of icons */
  .mapp{grid-template-columns:58px minmax(0,1fr);gap:8px;padding:0 8px;margin-top:8px}
  .mside{
    top:calc(var(--navh,56px) + 8px);height:calc(100svh - var(--navh,56px) - 16px);min-height:0;
    padding:12px 6px;border-radius:20px;
  }
  .mside-head{flex-direction:column;gap:6px;padding:2px 0 12px;margin-bottom:8px;text-align:center}
  .mside-ic{width:26px;height:26px}
  .mside-group{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
  .mside-switch{display:none}
  .mside-item{flex-direction:column;justify-content:center;gap:0;padding:11px 0}
  .mside-item .mi{width:25px;height:25px}
  .mside-item .lbl,.mside-item small{display:none}
  .mside-mark{left:6px;right:6px;border-radius:12px}

  .mstage{padding:18px 14px 20px;border-radius:20px;min-height:calc(100svh - var(--navh,56px) - 16px)}
  .mhead{grid-template-columns:1fr;gap:8px}
  .mhead-ic{width:32px;height:32px}
  .mhead-line{font-size:9.5px;letter-spacing:.16em;margin-bottom:4px}
  .mhead-name{font-size:28px}
  .mhead-blurb{font-size:13px;margin-top:6px}
  .mhead-actions{margin-top:4px}
  .mhead-actions .tbtn{min-height:34px;padding:0 14px;font-size:12.5px}
  .mslide{--sp:14px;margin-top:18px}
  .mtrack{gap:12px}
  .mcard{width:calc((100vw - 58px - 8px * 3 - 28px) * .84)}
  .mcard-photo{border-radius:16px}
  .mcard h3{font-size:16px}
  .mcard-meta{font-size:11px}
  .mcard-price{font-size:14px}
  .mcard-actions .tbtn{min-height:34px;padding:0 14px;font-size:12.5px}
  .mfoot{gap:10px;margin-top:16px}
  .marrows{display:none}
  .mnext{font-size:14px}
  .mtax{font-size:11px}

  .msheet{place-items:end center;padding:0}
  .msheet-card{border-radius:24px 24px 0 0;max-height:88svh;padding:16px 16px 22px}
  .msheet-card h3{font-size:26px}
  .msheet-desc{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .mchoose *,.mside *,.mstage *{animation:none !important;transition:none !important}
}

/* phones: the menu no longer forces itself to the full screen height —
   on iOS the floating Safari bar would cover the bottom row (count, Next).
   The rail simply runs as tall as the stage, and photos are a touch shorter. */
@media (max-width:820px){
  .mapp{align-items:stretch}
  .mside{position:relative;top:auto;height:auto;min-height:0}
  .mstage{min-height:0;padding-bottom:22px}
  .mcard-photo{aspect-ratio:1/1}
  .mslide{margin-top:16px}
  .mfoot{margin-top:14px}
  .mtax{margin-top:10px}
}
/* ── your visit: Add buttons ───────────────────────────── */
.tbtn-add{display:inline-flex;align-items:center;gap:6px}
.tbtn-add span{font-size:1.1em;line-height:1}
.tbtn-add.on{background:var(--c,#A8740F);border-color:var(--c,#A8740F);color:#FBF6EA}
.msheet-opts li{align-items:center}
.msheet-opts li > span{flex:1;min-width:0}
.msheet-add{
  flex:none;min-width:74px;min-height:36px;padding:0 16px;border-radius:100px;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-size:13px;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.msheet-add:hover{background:var(--caramel);border-color:var(--caramel)}
.msheet-add[aria-pressed="true"]{background:transparent;color:var(--ink);border-color:rgba(31,26,18,.25)}
.msheet-add[aria-pressed="true"]::before{content:"\2713  "}
.msheet-hint{margin:12px 0 0;font-size:12.5px;color:var(--label)}

/* tablets in portrait: keep the cards a sensible size */
@media (min-width:600px) and (max-width:820px){
  .mcard{width:300px}
}

/* ── details sheet: always fits the screen and scrolls inside (iPhone too).
   The card holds still, its body scrolls, so the × never scrolls away. ── */
.msheet{height:100dvh;overscroll-behavior:contain}
.msheet-card{
  display:flex;flex-direction:column;overflow:hidden;
  max-height:calc(100dvh - 40px);
}
.msheet-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  margin:-22px -22px -26px;padding:22px 22px 26px;      /* scroll the card's full padding area */
}
@media (max-width:820px){
  .msheet{align-items:end}
  .msheet-card{max-height:calc(100dvh - 56px)}
  .msheet-body{margin:-16px -16px -22px;padding:16px 16px calc(22px + env(safe-area-inset-bottom, 0px))}
  .msheet-photo{aspect-ratio:16/9;max-height:30dvh}
}

/* no grey/blue flash when a sidebar icon or card button is tapped on a phone */
.mside-item,.mside-head,.mcard button,.mcard a,.mpanel,.marrows button,.mnext,.msheet-add{-webkit-tap-highlight-color:transparent}