/* ══════════════════════════════════════════════════════════════════
   Venn Canteen · where the pairing buttons sit (1 Oct 2026, Snider)
   Desktop: the two buttons sit on the same line as the dish tags, after them. If the line is too short
   (tablets), the pair moves under the tags together. The tag tooltip ("nuts", "agroforestry"…) shows
   just under the row instead of beside the tags, so the buttons never shift when a tag is hovered.
   Phones: the two buttons share one row across the full width of the header, under the tags; each button
   stacks "wine" over the name. The taste wheel stays beside the title.
   Markup from the installer: <div class="vmenu-dish__header has-pour"> … <div class="pour-row">
   <div class="vmenu-dish__tags">…</div><div class="pour-chips">…</div></div>.
   Loaded after /css/menu.css and the other pairing styles.
   ══════════════════════════════════════════════════════════════════ */
.pour-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px}
.pour-row .vmenu-dish__tags{margin-top:0}
.pour-row .pour-chips{flex:none;margin-top:0}
.pour-row .tag-aside{position:absolute;left:0;top:100%;margin:6px 0 0;line-height:1.2}

@media (max-width:640px){
  .vmenu-dish__header.has-pour{display:grid !important;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  .vmenu-dish__header.has-pour > .vmenu-dish__htext{display:contents}
  .vmenu-dish__header.has-pour > .vmenu-dish__htext > *{grid-column:1}
  .vmenu-dish__header.has-pour > .vmenu-dish__htext > .vmenu-dish__name{margin-top:0}
  .vmenu-dish__header.has-pour > .wheel-widget{grid-column:2;grid-row:1 / span 3}
  .vmenu-dish__header.has-pour .pour-row{display:contents}
  .vmenu-dish__header.has-pour .vmenu-dish__tags{grid-column:1 / -1}
  .vmenu-dish__header.has-pour .tag-aside{position:static;margin:6px 0 0}
  .vmenu-dish__header.has-pour .pour-chips{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .vmenu-dish__header.has-pour .pour-chip{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;row-gap:3px;align-content:center;padding:7px 10px 7px 7px}
  .vmenu-dish__header.has-pour .pour-chip img{grid-row:1 / span 2;align-self:center;height:34px}
  .vmenu-dish__header.has-pour .pour-chip__k{align-self:end;line-height:1.2}
  .vmenu-dish__header.has-pour .pour-chip__n{align-self:start;font-size:.98rem;line-height:1.15;text-wrap:balance}
}