/* Phones (decided 2026-11-02, a pass over every page of the buyer workspace): what
   changes on a narrow screen beyond each page's own layout. Loaded last. */

/* Breadcrumb links are tall enough to tap; the line is no taller. */
.product-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }

@media (max-width: 900px) {
  /* The chat button floats over the bottom right corner, so a page ends above it:
     the last card, the order summary's note and Log out stay uncovered. */
  body:has(> .chat-widget) .portal-workspace-shell .main-content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  /* Shop cards: the quantity and Add are tall enough to tap, and the quantity is
     16px text, so the phone doesn't zoom in when it is typed. */
  .portal-workspace-shell .grid-view .product-purchase:not(.listing-card-purchase) { grid-template-columns: minmax(0, 1fr) 48px; }
  .portal-workspace-shell .grid-view :is(.product-stepper, .card-add-button, .card-options-button) { min-height: 44px; height: 44px; }
  .portal-workspace-shell .grid-view .product-stepper > button { flex: 1 0 32px; }
  .portal-workspace-shell .grid-view .card-quantity { flex: 1 1 24px; width: 24px; font-size: 16px; }
  .portal-workspace-shell .grid-view .card-add-button { padding: 8px 4px; font-size: 13px; }
  .portal-workspace-shell .grid-view .card-options-button { font-size: 12px; }
  /* A sold-out card offers Notify me, not a quantity that can't be added. */
  .portal-workspace-shell .grid-view .product-purchase:has(+ .product-alert-row) { display: none; }
  .portal-workspace-shell .grid-view .product-alert-row { margin-top: 12px; }
  .portal-workspace-shell .product-card .card-alert-button { min-height: 44px; }

  /* Order history: each order on two lines, the order and its total, then its
     status (with the vendor's note) and the day it was placed. The column
     names stay for screen readers. */
  .portal-workspace-shell .gf-order-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "order total" "status placed"; gap: 4px 16px; align-items: start; padding: 14px 0; font-size: 13px; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) > :nth-child(1) { grid-area: order; font-size: 14px; font-weight: 600; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) > :nth-child(1) small { font-weight: 400; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) > :nth-child(2) { grid-area: placed; color: var(--muted); text-align: right; white-space: nowrap; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) > :nth-child(3) { grid-area: status; }
  .portal-workspace-shell .gf-order:not(.gf-order-head) > strong { grid-area: total; font-size: 14px; }
  .portal-workspace-shell .gf-order-head + .history-row > .gf-order { border-top: 0; }
}

/* Narrow phones: the quantity across the card, Add under it. */
@media (max-width: 350px) {
  .portal-workspace-shell .grid-view .product-purchase:not(.listing-card-purchase) { grid-template-columns: minmax(0, 1fr); }
  .portal-workspace-shell .grid-view .product-stepper > button { flex: 0 0 44px; }
}

/* Cart lines on a narrow cart: a quantity stepper and Remove tall enough to tap,
   and the vendor's name too. */
@container cart-lines (max-width: 599px) {
  .cart-stepper { flex: 0 0 132px; width: 132px; height: 44px; }
  .portal-workspace-shell .cart-stepper button { flex: 0 0 44px; width: 44px; }
  .cart-remove { min-height: 44px; }
}
@media (max-width: 900px) {
  .cart-vendor-header h2 .cart-vendor-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}

/* An order on a phone: each item across the screen, its quantity, unit price and
   amount under it, each named (printed, it stays a table); the short delivery
   facts two to a row. */
@media screen and (max-width: 560px) {
  .order-items-scroll { overflow: visible; }
  .order-items table, .order-items tbody { display: block; }
  .order-items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .order-items tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px; border-bottom: 1px solid #eee; }
  .order-items td, .order-items td:first-child, .order-items td:last-child { display: block; width: auto; padding: 0; border: 0; font-size: 13px; text-align: left; }
  .order-items td:first-child { grid-column: 1 / -1; }
  .order-items td:first-child strong { font-size: 14px; }
  .order-items td:last-child { text-align: right; font-weight: 600; }
  .order-items td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: #777; font-size: 11px; font-weight: 400; }
  .order-items td small { margin-top: 2px; }
  .order-detail-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .order-detail-card dl > div:first-child, .order-detail-card dl > div:has(.order-shipping-address) { grid-column: 1 / -1; }
}