/* ============================================================
   market.css — the deltas that are genuinely MARKET.

   The storefront and the product detail both load pages/menu.css FIRST
   (MarketController) and render the menu's own classes: .menu-bar +
   .menu-catnav for the sticky category rail, .menu-section per category,
   .menu-grid, .card.menu-item for every good, and the whole item-detail /
   ?embed=1 sheet layout. Owner, 2026-08-12: "make sure the market page looks
   like the /menu page" — so the menu page's stylesheet IS the market's, and
   this file only adds what a shelf has and a menu does not:

     · the one-row sticky rail (no day-part tabs above it),
     · stock + alcohol-compliance tags (sold out / low stock / pickup only),
     · the purveyor chip that links a good to /purveyors,
     · the compliance note on the detail page.

   Nothing here may restate a menu rule. If a card, a grid or a section needs
   changing, it changes in menu.css for both pages at once. Tokens only.
   ============================================================ */

/* ===== the sticky bar, one row ===== */
/* /menu's bar carries a tabs row whose padding also spaces the rail beneath it;
   with the rail alone the links would sit flush against the site nav's border. */
.menu-bar--rail .menu-catnav { padding-top: 10px; }

/* Section anchors clear a ONE-row bar (nav 84 + rail), not the menu's two-row
   one. Keep in step with the IntersectionObserver rootMargin in market.js. */
.market-list .menu-section { scroll-margin-top: 132px; }
@media (min-width: 980px) { .market-list .menu-section { scroll-margin-top: 140px; } }

/* ===== market-only card parts ===== */
/* Purveyor chip (links a good to its maker on /purveyors). Sits above the
   card's stretched title link, or the card would swallow the click. */
.pchip { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sage); }
.pchip:hover { border-color: var(--sage); color: var(--ink); }

/* Stock + compliance tags. Sold out is menu.css's .tag--out, so both surfaces
   label the same thing the same way; these two have no menu equivalent (the
   menu never sells a finite good, and its alcohol is in-house, not pickup). */
.tag--pickup { color: var(--olive-ink); border-color: var(--olive-ink); }
.tag--low { color: var(--c-warn-ink); border-color: var(--c-warn-ink); }
/* menu.css tints .tag--age with --sage, which measures 2.76:1 on the card
   surface — under AA, on the one label that carries a legal restriction. Same
   chip, one step darker: 6.18:1. Scoped here rather than fixed in menu.css
   because /menu is not being restyled in this pass; its own 21+ tag has the
   same problem and wants the same one-word change. */
.tag--age { color: var(--olive-ink); border-color: var(--olive-ink); }
/* AVAILABLE TO SHIP (client, 2026-08-25). Reads as information, not as a warning: the
   other three tags on this card are all restrictions (sold out, 21+, pickup only) and
   this is the one that says yes. Filled rather than outlined so it separates from them
   at a glance without introducing another colour — Stacey asked for it to catch
   attention ("just put it wherever it kind of catches someone's attention").

   THE TEXT IS WHITE, NOT --onink, and the difference is the whole point. --onink is a
   warm off-white built for the near-black ink ground, where it measures 12.5:1. On this
   mid-sage fill it measures 3.91:1 — under AA for text this size, and it read muddy
   rather than quiet. White on the same fill is 6.41:1, which also lands within a whisker
   of the 21+ tag's 6.18:1 beside it, so the row of tags carries one weight instead of one
   washed-out odd one out.

   If this ever wants to be quieter rather than stronger, the move is a pale sage fill
   with ink text (10.3:1), NOT a lighter text colour on this one. */
.tag--ship {
  color: var(--white);
  background: var(--olive-ink);
  border-color: var(--olive-ink);
}

/* ============ MARKET ITEM DETAIL (market-item.php) ============
   Layout, photo, option rows and the sticky buy bar all come from menu.css —
   this is the same detail page the item sheet embeds. Only the compliance
   note and the tag row are market's own. */
.item__tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
/* Inside the sheet, .item is a flex COLUMN and the shared .item rule sets
   align-items: start, so a media box with no intrinsic width shrinks to fit its
   content — a photographed item is saved by the image's own width, an item with
   only the monogram placeholder collapsed to a ~28px sliver. Almost nothing in
   the market has a photo yet, so state the width. Scoped to .market-item on
   purpose: /menu's sheet has the same latent collapse and is NOT being restyled
   here without the client seeing it. */
body.is-embed .market-item .item__media { width: 100%; }
.market-note { border: 1px solid var(--line); border-radius: var(--r); background: var(--cream-2); color: var(--ink-2); padding: clamp(14px, 2vw, 18px); font-size: 0.92rem; margin: 0 0 20px; }

/* NB: the intro paragraph is styled by .pagelede in base.css and nothing here.
   This is the page whose blurb the client asked to "look nicer" on 2026-08-28, so
   it is the one that must not carry a private measure the other five do not. */

/* ── THE FLAGS ROW SITS AT ONE HEIGHT ON EVERY CARD (2026-08-29) ──────────────────────
   Renato: "it bugs me that the ones that wrap the name have available to ship tag lower
   than others. maybe lower all of them so they all look the same??"

   That is exactly the fix, and it is the same shape as the catering CTA row: the tag was
   not misplaced, it was being PUSHED by the title above it. "The Web" is one line and
   "Tropical Green Tea" is two, so their tags landed a line apart. Add already agreed
   across the row because .menu-card__actions is bottom-anchored -- everything between the
   title and the button was free to drift.

   So the title row reserves two lines whether it needs them or not, which is the height
   the longest names take on this shelf now that sizes are their own cards ("Lemony Herb
   Salt — Small", "Body Butter — 16 ounce"). One line or two, the flags start at the same y.

   TWO LINES, NOT A CLAMP. Clamping would hide the half of the name that says which size
   it is, on the exact cards that need it most. A name that genuinely runs to three lines
   still gets its third and pushes its own tag down -- rarer than the wrap it replaces, and
   the alternative is truncating a product name to protect an alignment.

   Scoped to .market-list. The menu cards have descriptions of varying length between the
   title and the flags, so the title alone would not settle them; that is a separate fix
   and nobody has asked for it. */
/* BELOW 980px THE ROW IS A COLUMN -- title above price -- so the reserve has to cover
   both, or a two-line name still pushes the tag down by one line. Measured before and
   after at 1440/1100/760/390: the phone and tablet widths were the ones still drifting
   18px, which is exactly one line. */
.market-list .menu-item .card__row {
  /* 2 lines of title (0.96rem × 1.2) + the price line (0.94rem × 1.2) + the 1px gap */
  min-height: calc((0.96rem * 1.2 * 2) + (0.94rem * 1.2) + 1px);
}
/* The price inherits the body's 1.6 line-height, which is 6px taller than the 1.2 the
   reserve above assumes -- and 6px was exactly the drift left at every width below 980px
   after the first fix. Pinned so the arithmetic and the render agree. */
.market-list .menu-item .price { line-height: 1.2; }
@media (min-width: 980px) {
  /* Here title and price sit side by side, so only the title's two lines are reserved. */
  .market-list .menu-item .card__row {
    align-items: flex-start;
    min-height: calc(0.96rem * 1.2 * 2);
  }

}