/* ══════════════════════════════════════════════════════════════════
   Venn Canteen · how the pairing buttons look (2 Oct 2026, Snider: option 11 of "Pairing Button Options")
   Each button is tinted like the dish tags: wine in the tags' terracotta, alcohol-free in their green.
   The bottle is in colour from the start and taller than its box, so it stands out of the top edge.
   Names are a step bolder (Cormorant Garamond italic 500, added to the page's Google Fonts link by the
   installer; nothing else on the menu asks for it). The "wine" / "alcohol-free" labels stay Inter 400, a
   little larger and darker: loading Inter 500 would also change the ingredient notes, nav and footer. Placement is unchanged: beside the tags on a computer (under them
   when the line is too short), two side by side under the tags on a phone, from /css/menu-pairing-chips.css.
   Second version (2 Oct, evening): on phones the bottles now line up across a row (see the phone rules).
   Replaces /css/menu-pairing-buttons.css, which stays on the server unused (CSS is edge-cached, so a change
   needs a new path).
   Loaded by /menu/ and /pt/menu/ after /css/menu-pairing-chips.css. Markup: button.pour-chip[data-kind]
   with img, .pour-chip__k and .pour-chip__n.
   ══════════════════════════════════════════════════════════════════ */
.pour-chip{position:relative;overflow:visible;padding-left:42px}
.pour-chip img{position:absolute;left:12px;bottom:6px;height:60px;filter:drop-shadow(0 2px 2px rgba(17,17,16,.16))}
.pour-chip:hover img,.pour-chip.is-active img,.pour-chip:focus-visible img{filter:drop-shadow(0 2px 2px rgba(17,17,16,.16))}
.pour-chip__k{font-size:.75rem;letter-spacing:.08em}
.pour-chip__n{font-weight:500}
.pour-chip[data-kind="wine"]{background:rgba(139,74,42,.13);border-color:rgba(139,74,42,.32)}
.pour-chip[data-kind="wine"] .pour-chip__k{color:rgb(120,60,32)}
.pour-chip[data-kind="zero"]{background:rgba(61,97,71,.13);border-color:rgba(61,97,71,.32)}
.pour-chip[data-kind="zero"] .pour-chip__k{color:rgb(48,82,58)}
.pour-chip[data-kind="wine"].is-active{background:rgba(139,74,42,.2);border-color:rgba(139,74,42,.55)}
.pour-chip[data-kind="zero"].is-active{background:rgba(61,97,71,.2);border-color:rgba(61,97,71,.55)}
@media (hover:hover){
  .pour-chip[data-kind="wine"]:hover{background:rgba(139,74,42,.2);border-color:rgba(139,74,42,.55)}
  .pour-chip[data-kind="zero"]:hover{background:rgba(61,97,71,.2);border-color:rgba(61,97,71,.55)}
}
/* room above the row for the bottles that stand out of it */
.pour-row .pour-chips{margin-top:12px}
/* the bottles are in colour already, so the arrival pulse only lifts the buttons */
.pour-chips.pulse .pour-chip img{animation:none}

@media (max-width:640px){
  .vmenu-dish__header.has-pour .pour-chips{margin-top:24px}
  .vmenu-dish__header.has-pour .pour-chip{grid-template-columns:minmax(0,1fr);padding:9px 8px 9px 40px;min-height:56px}
  .vmenu-dish__header.has-pour .pour-chip__k{letter-spacing:.03em}
  /* the bottle hangs from the top edge of the box, so both bottles in a row line up even when one name wraps
     onto two lines (it used to follow the text, which put a two-line wine lower than its neighbour) */
  .vmenu-dish__header.has-pour .pour-chip img{grid-row:auto;left:11px;top:-20px;bottom:auto;height:62px}
  .vmenu-dish__header.has-pour .pour-chip__k,.vmenu-dish__header.has-pour .pour-chip__n{grid-column:1}
}
/* the narrowest phones (an original SE is 320px): no spacing at all, so the label still fits on one line */
@media (max-width:370px){
  .vmenu-dish__header.has-pour .pour-chip{padding-right:6px}
  .vmenu-dish__header.has-pour .pour-chip__k{letter-spacing:0}
}
/* 340px and under the two buttons take a row each */
@media (max-width:340px){
  .vmenu-dish__header.has-pour .pour-chips{grid-template-columns:minmax(0,1fr);row-gap:26px}
}