/* =====================================================================
   DOUBLE UP — içecek menüsü
   ---------------------------------------------------------------------
   The drink list from the boards in the shop. It is deliberately NOT built
   from the same cards as the food: those carry a photo each, and a drink menu
   of forty-odd items with no photography would be forty identical placeholders.
   It also needs two prices per row (hot / cold), which a card has no room for.

   So it is a price list, laid out the way the board is: a title over a rule,
   HOT and COLD as column headers, and rows that line up on tabular figures.
   ===================================================================== */
.md-wrap{margin-top:clamp(30px,4vw,58px);padding:0 18px;max-width:1100px;margin-left:auto;margin-right:auto}
.md-note{font-size:.78rem;line-height:1.6;color:#4c4841;
  margin:clamp(14px,1.8vw,20px) 0 0;max-width:70ch}

/* Two columns that PACK. A grid put the 23-item espresso list beside the short
   brewing list and left a thousand pixels of empty space underneath it; a
   multi-column flow fills the second column with whatever fits. */
.md-lists{columns:2;column-gap:clamp(30px,4vw,72px);
  margin-top:clamp(16px,2vw,26px)}
.md-block{min-width:0;break-inside:avoid;
  margin-bottom:clamp(26px,3.4vw,58px)}

.md-title{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(1.05rem,1.7vw,1.42rem);
  margin:0;padding-bottom:.55em;border-bottom:2px solid var(--ink)}

/* the hot / cold header over the two price columns */
.md-cols{display:flex;justify-content:flex-end;gap:.9em;
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(19,19,17,.45);padding:.5em 0 .1em}
.md-cols b{min-width:3.4em;text-align:right;font-weight:800}

.md-rows{list-style:none;margin:0;padding:0}
.md-rows li{display:flex;align-items:baseline;gap:.9em;
  padding:clamp(7px,.85vw,11px) 0;
  border-bottom:1px solid rgba(19,19,17,.1);
  font-size:clamp(.86rem,1.05vw,.95rem);line-height:1.35}
.md-rows .n{flex:1 1 auto;min-width:0}
.md-rows .p{flex:none;min-width:3.4em;text-align:right;
  font-weight:800;font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1}
.md-rows .p.is-none{color:rgba(19,19,17,.3);font-weight:600}
.md-rows li:hover{background:rgba(19,19,17,.03)}

/* a block that spans the full width, for the short lists */
.md-block--wide{grid-column:1/-1}

@media (max-width:820px){
  .md-lists{columns:1}
  .md-rows li{font-size:.92rem;padding:11px 0}
}