/* ============================================================
   POWER PLATE — MENU PAGE (/menu): "DISPLAY CASE FIRST"
   The pink band is the shop counter: one arch per category stands
   on a white shelf. The open category is lifted onto a cake stand
   and its dishes are listed below as a printed menu. Builds on
   styles.css (tokens, nav, buttons, scallops, .kcal, footer).
   ============================================================ */

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ============================================================
   THE CASE (hero + category navigation)
   ============================================================ */

.case{
  --gut:clamp(20px, 4.2vw, 48px);   /* = .wrap padding */
  --case-gap:28px;
  --lift:30px;
  --shelf:14px;
  background:var(--pink);
  position:relative;
}
/* white scallops hanging under the top bar, like an awning */
.awning{
  height:22px;
  background-image:radial-gradient(circle at 50% 0, #fff 20.5px, transparent 21.8px);
  background-size:40px 22px;
  background-repeat:repeat-x;
  background-position:center top;
  position:relative;
  z-index:1;
}
.case-in{ position:relative; padding-top:clamp(14px, 2vw, 26px); padding-bottom:clamp(20px, 2.6vw, 34px); }
.case-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 400px);
  align-items:end;
  gap:14px 56px;
}
.case-head .eyebrow{ color:var(--ink-72); }
.case-head .eyebrow::before,
.case-head .eyebrow::after{ background:var(--ink); opacity:.5; }
.case-title{ margin-top:14px; font-size:calc(clamp(31px, 3.5vw, 48px) * var(--fs)); }
.case-head .lead{ padding-bottom:4px; }

.case-scroll{
  position:relative;
  margin-top:clamp(8px, 1.4vw, 16px);
  /* Many categories: the case scrolls sideways inside itself. */
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.case-scroll::-webkit-scrollbar{ display:none; }
/* With a mouse, a case wider than the page shows a thin scrollbar to drag. */
@media (hover: hover) and (pointer: fine){
  .case-scroll{ scrollbar-width:thin; scrollbar-color:var(--rose) transparent; }
  .case-scroll::-webkit-scrollbar{ display:block; height:6px; }
  .case-scroll::-webkit-scrollbar-thumb{ background:var(--rose); border-radius:999px; }
}
.case-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px, 1fr);
  column-gap:var(--case-gap);
  padding-top:calc(var(--lift) + 16px);
  padding-inline:10px;
}

/* one arch = frame on the shelf + its name tag */
.ta{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--ink);
  border-radius:28px;
  -webkit-tap-highlight-color:transparent;
}
.ta-zone{ position:relative; display:block; width:100%; padding:0 10px var(--shelf); }
.ta-zone::after{               /* the shelf, in segments that meet in the gaps */
  content:"";
  position:absolute;
  left:calc(var(--case-gap) / -2 - .5px);
  right:calc(var(--case-gap) / -2 - .5px);
  bottom:0;
  height:var(--shelf);
  background:#fff;
  box-shadow:0 3px 0 var(--rose);
}
.ta:first-child .ta-zone::after{ left:-8px; border-radius:999px 0 0 999px; }
.ta:last-child .ta-zone::after{ right:-8px; border-radius:0 999px 999px 0; }
.ta-frame{
  position:relative;
  z-index:2;
  display:block;
  aspect-ratio:3 / 4;
  border:8px solid #fff;
  border-bottom-width:0;
  border-radius:50% 50% 6px 6px / 34% 34% 6px 6px;
  background:var(--blush);
  overflow:hidden;
  box-shadow:0 22px 34px -24px rgba(20,17,20,.35);
  transition:transform .35s cubic-bezier(.22,.9,.24,1), box-shadow .35s ease;
}
.ta-frame .ph-img{ border-radius:0; }
.ta-frame::after{              /* quiet veil over the arches that aren't open */
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:rgba(255,246,246,.38);
  transition:opacity .25s ease;
}
.ta-frame.is-empty{
  display:grid;
  place-items:center;
  background-color:var(--pink-soft);
  background-image:radial-gradient(rgba(255,255,255,.9) 1.5px, rgba(255,255,255,0) 1.8px);
  background-size:16px 16px;
}
.ta-art{
  position:relative;
  width:58%;
  height:auto;
  margin-top:16%;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ta-art .fill{ fill:#fff; }

/* the cake stand the open arch is lifted onto */
.ta-stand{
  position:absolute;
  z-index:1;
  left:2px;
  width:calc(100% - 4px);
  bottom:var(--shelf);
  height:calc(var(--lift) + 8px);
  overflow:visible;
  fill:#fff;
  stroke:var(--ink);
  stroke-width:1.5;
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.22,.9,.24,1);
}
.ta-stand use{ vector-effect:non-scaling-stroke; }

.ta-label{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:14px; }
.ta-name{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 18px;
  border-radius:999px;
  font-family:var(--font-head);
  font-weight:580;
  font-size:calc(21px * var(--fs));
  line-height:1.1;
  transition:background-color .2s ease, color .2s ease;
}
.ta-count{ font-size:calc(13px * var(--fs)); font-weight:600; color:var(--ink-72); }

.ta:hover .ta-frame{ transform:translateY(-6px); }
.ta:hover .ta-frame::after{ opacity:.4; }
.ta.is-open .ta-frame{
  transform:translateY(calc(var(--lift) * -1));
  box-shadow:0 0 0 2px var(--ink), 0 16px 26px -18px rgba(20,17,20,.45);
}
.ta.is-open .ta-frame::after{ opacity:0; }
.ta.is-open .ta-stand{ transform:none; }
.ta.is-open .ta-name{ background:var(--ink); color:#fff; }
.ta:focus-visible{ outline-offset:6px; border-radius:28px; }

/* ============================================================
   THE OPEN CATEGORY (printed-menu lines) + THE KEY
   ============================================================ */

.shop{
  background:var(--cream);
  padding-block:clamp(30px, 3.4vw, 46px) clamp(72px, 8vw, 110px);
}
.tray-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 290px;
  gap:clamp(32px, 3.2vw, 44px);
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:34px;
  box-shadow:var(--sh-stick);
  padding:clamp(26px, 3.2vw, 44px) clamp(22px, 3.2vw, 44px) clamp(26px, 3.2vw, 40px);
}
.tray-card::before{            /* the tab pointing up at the open arch (menu.js sets --tab-x) */
  content:"";
  position:absolute;
  top:-13px;
  left:calc(var(--tab-x, 50%) - 12px);
  width:24px; height:24px;
  background:#fff;
  border:1.5px solid var(--ink);
  border-right:0;
  border-bottom:0;
  border-radius:7px 0 0 0;
  transform:rotate(45deg);
  transition:left .4s cubic-bezier(.22,.9,.24,1);
}

.trays{ min-width:0; }
.js .tray:not(.is-open){ display:none; }
html:not(.js) .tray + .tray{ margin-top:40px; }   /* without JS every category shows */
.tray{ scroll-margin-top:calc(var(--nav-h) + 24px); }
.tray-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 16px;
  padding-inline:14px;
  margin-bottom:14px;
}
.tray-name{
  font-family:var(--font-head);
  font-weight:580;
  font-variation-settings:'opsz' 110, 'SOFT' 60, 'WONK' 0;
  font-size:calc(clamp(30px, 3vw, 42px) * var(--fs));
  line-height:1.08;
  letter-spacing:-.012em;
}
.tray-count{ font-family:var(--font-head); font-style:italic; font-size:calc(19px * var(--fs)); color:var(--ink-55); }

/* one printed-menu line */
.ml-list{ display:flex; flex-direction:column; gap:4px; }
.ml{
  display:grid;
  grid-template-columns:84px minmax(0, 1fr) 108px;
  grid-template-areas:
    "pic top  act"
    "pic desc ."
    "pic mac  mac";
  column-gap:22px;
  padding:20px 16px 20px 14px;
  border-radius:28px;
  transition:background-color .2s ease;
}
.ml.is-in{ background:var(--blush); }
.ml.is-in .kcal{ box-shadow:0 0 0 6px #fff, var(--sh-card); }

.ml-pic{ grid-area:pic; position:relative; align-self:start; }
.ml-pic .kcal{ position:relative; width:62px; height:62px; margin:0 auto; }
.ml-pic.has-photo{ width:74px; }
.ml-photo{
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  border-radius:50% 50% 12px 12px / 40% 40% 12px 12px;
  overflow:hidden;
  background:var(--pink-soft);
  box-shadow:var(--sh-card);
}
.ml-pic.has-photo .kcal{ position:absolute; right:-16px; bottom:-12px; width:50px; height:50px; }
.ml-pic.has-photo .kcal b{ font-size:calc(16px * var(--fs)); }
.ml-pic.has-photo .kcal small{ font-size:calc(9.5px * var(--fs)); margin-top:2px; }

.ml-top{ grid-area:top; display:flex; align-items:flex-end; gap:12px; min-width:0; }
.ml-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;            /* clips the leader at the price */
  font-family:var(--font-head);
  font-weight:580;
  font-size:calc(22px * var(--fs));
  line-height:1.2;
  overflow-wrap:anywhere;
}
.nw{ white-space:nowrap; }
.ml-lead{                      /* round rose dots from the last word to the price, even when the name wraps */
  padding-right:100vw;
  margin-right:-100vw;
  margin-left:12px;
  background:radial-gradient(circle, var(--rose) 1.5px, transparent 2px) 0 76% / 9px 4px repeat-x;
}
.ml-top.no-price .ml-lead{ background:none; }
.ml-price{
  flex:none;
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:calc(22px * var(--fs));
  line-height:1.2;
}
.ml-desc{
  grid-area:desc;
  margin-top:4px;
  max-width:54ch;
  font-size:calc(14.5px * var(--fs));
  line-height:1.6;
  color:var(--ink-72);
}
.ml-mac{
  grid-area:mac;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 9px;
  margin-top:8px;
  font-size:calc(13px * var(--fs));
  color:var(--ink-55);
}
.ml-mac b{ color:var(--ink); font-weight:700; }
.ml-mac i{ width:4px; height:4px; border-radius:50%; background:var(--rose); }
.ml-tags{ display:inline-flex; align-items:center; gap:4px; margin-left:10px; vertical-align:.18em; white-space:nowrap; }
.ml-tags .mk{ min-width:24px; height:24px; padding:0 5px; font-size:calc(9.5px * var(--fs)); }
.ml-tags .mk-ic{ width:13px; height:13px; }

/* dietary marks */
.mk{
  display:inline-grid;
  place-items:center;
  min-width:28px;
  height:28px;
  padding:0 6px;
  border-radius:999px;
  background:var(--pink-soft);
  font:800 calc(10.5px * var(--fs))/1 var(--font-body);
  letter-spacing:.02em;
  color:var(--ink);
  flex:none;
}
.mk-warn{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--rose); }
.mk-ic{ width:15px; height:15px; color:var(--ink); fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* add control: a round + that turns into a quantity stepper */
.ml-act{ grid-area:act; align-self:center; margin-block:-10px; justify-self:start; }
.ml-add{
  appearance:none;
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  box-shadow:var(--sh-stick);
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease;
}
.ml-add[hidden]{ display:none; }
.ml-add:hover{ background:var(--pink); transform:translateY(-2px); }
.ml-add .ic, .ml-step .ic{ width:18px; height:18px; stroke-width:2.2; }
.ml-step{
  display:inline-flex;
  align-items:center;
  height:44px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  box-shadow:var(--sh-ink);
}
.ml-step[hidden]{ display:none; }
.ml-step button{
  appearance:none;
  width:44px; height:44px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.ml-step button:hover{ background:rgba(255,255,255,.14); }
.ml-step output{
  min-width:20px;
  text-align:center;
  font-weight:800;
  font-size:calc(16px * var(--fs));
  font-variant-numeric:tabular-nums;
}

/* the key, shown once */
.key{
  align-self:start;
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  display:flex;
  flex-direction:column;
  gap:22px;
}
.key-card{ background:var(--blush); border-radius:28px; padding:24px 22px; }
.key-title{ font-family:var(--font-head); font-weight:580; font-size:calc(21px * var(--fs)); line-height:1.2; }
.key-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:16px;
  font-size:calc(14px * var(--fs));
  line-height:1.5;
  color:var(--ink-72);
}
.key-row .kcal{ position:relative; flex:none; width:54px; height:54px; box-shadow:0 0 0 5px #fff; }
.key-row .kcal b{ font-size:calc(17px * var(--fs)); }
.key-row .kcal small{ font-size:calc(9.5px * var(--fs)); }
.key-mac{ margin-top:14px; font-size:calc(14px * var(--fs)); line-height:1.5; color:var(--ink-72); }
.key-marks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
  padding-top:16px;
  border-top:1.5px dashed var(--rose);
}
.key-marks li{ display:flex; align-items:center; gap:9px; font-size:calc(13.5px * var(--fs)); line-height:1.25; color:var(--ink); }
.key-ask{ padding-inline:6px; }
.key-ask p{ font-family:var(--font-head); font-style:italic; font-size:calc(18px * var(--fs)); line-height:1.35; margin-bottom:14px; }

/* ============================================================
   YOUR ORDER — floating button + drawer
   ============================================================ */

.bag-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:66px;
  padding:8px 26px 8px 9px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  box-shadow:0 20px 38px -14px rgba(20,17,20,.55);
  font-family:var(--font-body);
  text-align:left;
  cursor:pointer;
}
.bag-btn[hidden]{ display:none; }
.bag-btn-box{
  flex:none;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--pink);
  color:var(--ink);
  display:grid;
  place-items:center;
}
.bag-btn-box .ic{ width:22px; height:22px; }
.bag-btn-txt{ display:flex; flex-direction:column; gap:3px; line-height:1.1; }
.bag-btn-label{ font-weight:700; font-size:calc(15px * var(--fs)); }
.bag-btn-count{ font-size:calc(13px * var(--fs)); color:rgba(255,255,255,.72); }
.bag-btn-sum{
  margin-left:6px;
  padding-left:18px;
  border-left:1.5px solid rgba(255,255,255,.22);
  font-family:var(--font-head);
  font-style:italic;
  font-weight:500;
  font-size:calc(25px * var(--fs));
  line-height:1;
}
.bag-btn-sum:empty{ display:none; }
.bag-btn.is-bump{ animation:bag-bump .36s ease; }
@keyframes bag-bump{ 40%{ transform:scale(1.06); } }
.page-menu .footer{ padding-bottom:120px; }

.bag-veil{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(20,17,20,.42);
  opacity:0;
  transition:opacity .3s ease;
}
.bag-veil.is-open{ opacity:1; }
.bag-veil[hidden]{ display:none; }

.bag{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:71;
  width:min(440px, 100vw);
  display:flex;
  flex-direction:column;
  background:#fff;
  border-left:1.5px solid var(--ink);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,.9,.24,1);
}
.bag.is-open{ transform:none; }
.bag[hidden]{ display:none; }
.bag-head{
  background:var(--pink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 18px 10px 26px;
}
.bag-title{
  font-family:var(--font-head);
  font-weight:590;
  font-size:calc(28px * var(--fs));
  line-height:1.1;
}
.bag-x{
  appearance:none;
  flex:none;
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.bag-x:hover{ background:var(--cream); }
.bag > .sc{ flex:none; }
.bag-scroll{
  flex:1;
  overflow:auto;
  overscroll-behavior:contain;
  padding:4px 26px 8px;
}
.bag-line{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px 14px;
  padding-block:16px;
  border-bottom:1.5px dashed var(--line);
}
.bag-line-name{
  display:block;
  font-family:var(--font-head);
  font-weight:580;
  font-size:calc(18px * var(--fs));
  line-height:1.25;
  overflow-wrap:anywhere;
}
.bag-line-meta{
  display:block;
  margin-top:2px;
  font-size:calc(13px * var(--fs));
  color:var(--ink-55);
}
.bag-line-price{
  font-family:var(--font-head);
  font-style:italic;
  font-size:calc(18px * var(--fs));
  text-align:right;
}
.bag-line .ml-step{ justify-self:start; height:38px; }
.bag-line .ml-step button{ width:38px; height:38px; }
.bag-line .ml-step .ic{ width:16px; height:16px; }
.bag-empty{
  padding:28px 0;
  font-family:var(--font-head);
  font-style:italic;
  font-size:calc(19px * var(--fs));
  color:var(--ink-72);
}
.bag-foot{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 26px 22px;
  border-top:1.5px solid var(--blush);
}
.bag-kcal, .bag-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.bag-kcal[hidden], .bag-total[hidden]{ display:none; }
.bag-kcal{ font-size:calc(14px * var(--fs)); color:var(--ink-72); }
.bag-total{ font-weight:700; }
.bag-total strong{
  font-family:var(--font-head);
  font-weight:600;
  font-size:calc(26px * var(--fs));
}
.bag-send{ width:100%; }
.bag-send[aria-disabled="true"]{ opacity:.38; box-shadow:none; pointer-events:none; }
.bag-note{
  font-size:calc(13px * var(--fs));
  color:var(--ink-55);
  text-align:center;
}
.bag-clear{
  appearance:none;
  align-self:center;
  min-height:40px;
  padding:0 12px;
  border:0;
  background:none;
  font:700 calc(13.5px * var(--fs)) var(--font-body);
  color:var(--ink-72);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.bag-clear[hidden]{ display:none; }
.bag-clear.is-confirm{ color:#9b2c22; }
html.bag-lock{ overflow:hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1020px){
  .tray-card{ grid-template-columns:minmax(0, 1fr); }
  .key{ position:static; display:grid; grid-template-columns:1fr 1fr; align-items:start; }
}

@media (max-width: 760px){
  .case{ --case-gap:14px; --lift:22px; --shelf:12px; }
  .case-head{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .case-title{ margin-top:12px; font-size:calc(31px * var(--fs)); }
  .case-head .lead{ font-size:calc(15px * var(--fs)); line-height:1.6; }

  /* the case scrolls sideways inside itself; the page never does */
  .case-scroll{
    margin-inline:calc(var(--gut) * -1);
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
  }
  .case-row{
    grid-auto-columns:138px;
    width:max-content;
    padding-inline:var(--gut);
    padding-bottom:4px;
  }
  .ta{ scroll-snap-align:start; }
  .ta-zone{ padding-inline:6px; }
  .ta-frame{ border-width:6px; border-bottom-width:0; }
  .ta-name{ min-height:36px; padding:0 14px; font-size:calc(17.5px * var(--fs)); }
  .ta-count{ font-size:calc(12.5px * var(--fs)); }
  .ta-label{ margin-top:12px; }

  .sc.on-cream{ background-color:#fff; }
  .shop{ background:#fff; padding-top:14px; }
  .tray-card{ padding:0; border:0; border-radius:0; box-shadow:none; background:none; gap:30px; }
  .tray-card::before{ display:none; }
  .tray-head{ padding-inline:0; margin-bottom:6px; }
  .tray-name{ font-size:calc(31px * var(--fs)); }
  .tray-count{ font-size:calc(17px * var(--fs)); }

  .ml{
    grid-template-columns:54px minmax(0, 1fr) auto;
    grid-template-areas:
      "pic top  top"
      "pic desc desc"
      "pic mac  act";
    column-gap:14px;
    margin-inline:-10px;
    padding:16px 10px 14px;
    border-radius:24px;
  }
  .ml-pic .kcal{ width:54px; height:54px; margin:2px 0 0; }
  .ml-pic .kcal b{ font-size:calc(17px * var(--fs)); }
  .ml-pic .kcal small{ font-size:calc(9.5px * var(--fs)); }
  .ml-pic.has-photo{ width:54px; }
  .ml-pic.has-photo .kcal{ right:-7px; bottom:-14px; width:44px; height:44px; }
  .ml-pic.has-photo .kcal b{ font-size:calc(14px * var(--fs)); }
  .ml-pic.has-photo .kcal small{ font-size:calc(8.5px * var(--fs)); margin-top:1px; }
  .ml-name, .ml-price{ font-size:calc(18.5px * var(--fs)); }
  .ml-top{ gap:8px; }
  .ml-lead{ margin-left:8px; }
  .ml-desc{ font-size:calc(14px * var(--fs)); line-height:1.55; }
  .ml-mac{ align-self:center; margin-top:8px; font-size:calc(12.5px * var(--fs)); gap:2px 7px; }
  .ml-act{ justify-self:end; align-self:end; margin:8px 0 0 10px; }
  .ml.is-in{
    grid-template-areas:
      "pic top  top"
      "pic desc desc"
      "pic mac  mac"
      "pic act  act";
  }
  .ml-tags{ margin-left:7px; gap:3px; }
  .ml-tags .mk{ min-width:22px; height:22px; padding:0 4px; font-size:calc(9px * var(--fs)); }

  .key{ grid-template-columns:minmax(0, 1fr); }
  .key-card{ padding:22px 18px; }
  .key-ask{ padding:0 6px 6px; }
  .key-ask .btn{ width:100%; }

  .bag-btn{ left:16px; right:16px; bottom:16px; padding-right:22px; }
  .bag-btn-txt{ flex:1; }
}

@media (max-width: 560px){
  .bag{
    top:auto;
    left:0;
    width:100%;
    max-height:88vh;
    border-left:0;
    border-top:1.5px solid var(--ink);
    border-radius:28px 28px 0 0;
    overflow:hidden;
    transform:translateY(100%);
  }
  .bag-head{ padding:20px 16px 8px 22px; }
  .bag-scroll{ padding-inline:22px; }
  .bag-foot{ padding:16px 22px calc(18px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  .ta-frame, .ta-stand, .tray-card::before{ transition:none; }
  .bag-btn.is-bump{ animation:none; }
}