/* "For you", "Goes well with" and "Add something?" (suggestions): a row of small cards, each the menu's dish in brief - its
   photo or first letter, its name, its price and its Add button - that scrolls sideways under the thumb, running to the
   edge of a phone's screen so the next card peeks in. Loaded by the partials that show them, only where they show.
   Colours and type are the look's (site.css); logical properties only (CssLogicalPropertiesTest). */
.for-you { padding-block: 1.25rem 0; }
.suggest-beside { margin-block-start: 2rem; }
.suggest-title { margin-block-end: 0.7rem; font-size: 1.15rem; }
.suggest-row {
  display: flex; gap: 0.75rem; margin-block: 0; margin-inline: -1rem; padding-block: 0.1rem 0.6rem; padding-inline: 1rem; list-style: none;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: thin;
}
.suggest-card {
  flex: 0 0 9.5rem; min-inline-size: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.35rem;
  padding-block: 0.5rem 0.65rem; padding-inline: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.suggest-link { display: flex; flex-direction: column; gap: 0.45rem; color: var(--ink); text-decoration: none; }
.suggest-link:hover .suggest-name { text-decoration: underline; text-underline-offset: 0.2em; }
/* The menu's own photo and letter (site.css places them in the dish's grid), made the card's square. */
.suggest-card .dish-photo { grid-row: auto; grid-column: auto; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--radius) * 0.7); background: var(--line); }
.suggest-card .dish-letter {
  display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand-text); font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1;
}
.suggest-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* A price reads left to right in every language (.num): held to the card's reading side as a box of its own width. */
.suggest-card .price { align-self: flex-start; font-size: 0.92rem; }
.suggest-card .price-alt { text-align: start; }
.suggest-unit { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
/* The Add button at the foot of every card, whatever the length of the name above it. */
.suggest-card .dish-add, .suggest-card .suggest-add { display: flex; margin-block-start: auto; margin-inline-start: 0; }
.suggest-card .dish-add .btn, .suggest-card .btn.dish-add, .suggest-card .suggest-add .btn { flex: 1; min-block-size: var(--tap); }
/* While the diner searches or filters, the menu's bar shows only what they asked for, starting right under it. */
.menu-bar.is-searching ~ .for-you,
.menu-bar:has([data-finder-count]:not([hidden]), [data-finder-saved][aria-pressed=true]) ~ .for-you { display: none; }