/* a3-storelist.css - the store page on a phone (640 px and under): every item is its title and its price on one line,
   and the whole row is the tap to the item's own page, where its description lives. The four label words and the
   column header are off. This sheet loads after the page's own finder sheet and after a3-phone.css, and it stands on
   its own at phone width if the finder sheet does not load. Nothing here reaches a wider screen. */

@media (max-width: 640px) {

  /* the list carries no bullets: each row is a plain full-width tap */
  .a3-phone-page .finder-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* the row: the title in the first column, the price in the second, baselines level, no underline,
     a 48-px tap at least (two lines of title still fit; the row grows with the title) */
  .a3-phone-page .finder a.finder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 14px;
    align-items: baseline;
    padding: 13px 0;
    min-height: 48px;
    border-top: 1px solid #7A7A76;
    color: #F1F0EB;
    text-decoration: none;
  }

  /* the title: bold, on the first line; a long title runs to a second line and the price stays on its first */
  .a3-phone-page .finder-row > .finder-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  /* the price: on the title's line at the right edge, never wrapped, no label word above it */
  .a3-phone-page .finder-row > .finder-price {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* the description is one tap away, on the item's own page */
  .a3-phone-page .finder-row > .finder-line {
    display: none;
  }

  /* the link words ("What you get") stay off: the title is the direction */
  .a3-phone-page .finder-row > .finder-action {
    display: none;
  }

  /* the label words ("Name", "Details", "Price", "Page") stay off every cell, the price's included */
  .a3-phone-page .finder-row > span::before {
    content: none;
  }

  /* the column header is a wide-screen device: off on the phone */
  .a3-phone-page .finder-columns {
    display: none;
  }
}