/*
 * Breadwinner v3, city landing pages: healthy-bread-bangalore.html, healthy-bread-mumbai.html,
 * healthy-bread-delhi.html, healthy-bread-gurgaon.html, millet-bread-delhi.html. Loaded after
 * v3.css and v3-port.css (shell.html's {{PAGE_CSS}} slot). Shared by all five so a single
 * tweak to the city layout updates every city page at once. Do not edit v3.css or v3-port.css
 * from here; this file only adds what those two do not already cover.
 *
 * House rules match v3-port.css: colour only through the v3 tokens, no hex, no pure black or
 * white, no !important, class selectors, hover inside (hover: hover) and (pointer: fine),
 * 44px targets, no transitions on layout properties.
 */

/* The status line and the order/notify block sit a little closer to the head than a full
   section gap, since they read as part of the page head rather than a new topic. */
.city-status {
  margin-top: var(--s-md);
}
.city-status > * + * {
  margin-top: var(--s-md);
}

/* city-order already gets its top margin from v3-port.css section 20; this file only adds
   the row layout used on millet-bread-delhi.html for its two closing links. */
.city-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md);
}

/* .price-table (v3.css) is a plain two-column table: at 360-390px inside the .slip card that
   split roughly 203px label / 59px price, so a row label like "Quinoa Bread, quinoa and jowar
   sourdough, 250 g" wrapped to 3 lines. Stack label above price, full card width, so the price
   stays the only thing on its own line (still one line, never wraps) and the label gets the
   whole row instead of ~60% of it. Left-align the stacked price -- right-aligning a single
   value on its own full-width line would read as squeezed to the card's right edge, the exact
   complaint this is fixing. */
@media (max-width: 599.98px) {
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td { display: block; }
  .price-table tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
  .price-table tr:last-child { border-bottom: 0; }
  .price-table th,
  .price-table td { padding: 0; border: 0; text-align: left; }
  .price-table td.fig { margin-top: var(--s-2xs); padding-left: 0; text-align: left; }   /* v3.css .price-table .fig pads it 16px */
}