/* a3-storerows.css - the store page at every width (his rows 3 and 4 of 15 October): each item is its title and its
   price on one line, the whole row the tap to the item's own page (its description lives there), and under or beside
   it the same two buttons the item's page carries - Buy now straight to checkout, Add to cart to keep it. The four
   column words, the description column and the "What you get" words are off at every width, as the phone sheet
   already had them under 640 px. This sheet loads after the finder sheet, the phone sheet and the cart sheet. */

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

/* the item band: the row (its link) in the first column, the buy bar in the second; the rule line is the band's,
   so the bar sits inside the same band as its title */
.a3-phone-page .finder-group li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: center;
  border-top: 1px solid #7A7A76;
}
.a3-phone-page .finder-group li[hidden] {
  display: none;
}

/* the row: the title in the first column, the price in the second, baselines level, no underline,
   a 48-px tap at least (a long title runs to a second line and the price stays on its first) */
.a3-phone-page .finder a.finder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 14px;
  align-items: baseline;
  padding: 14px 0;
  min-height: 48px;
  border-top: 0;
  color: #F1F0EB;
  text-decoration: none;
}
.a3-phone-page .finder a.finder-row:hover .finder-name,
.a3-phone-page .finder a.finder-row:focus-visible .finder-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.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;
}
.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 and the link words are one tap away, on the item's own page; the column words are off */
.a3-phone-page .finder-row > .finder-line,
.a3-phone-page .finder-row > .finder-action,
.a3-phone-page .finder-columns {
  display: none;
}
.a3-phone-page .finder-row > span::before {
  content: none;
}

/* the buy bar beside the row: the cart sheet's own band rules (its margins, its top rule) do not apply here -
   the band is the item's */
.a3-phone-page .finder-buy.buybar {
  margin: 0;
  padding: 10px 0;
  border: 0;
}
.a3-phone-page .finder-buy .buybar__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-end;
}
/* the two buttons in the site's own ink on the black ground (no blue box on this page - his 14 October rule):
   Buy now filled paper with black words, Add to cart outlined paper; both 44 px tall at least */
.a3-phone-page .finder-buy .buybar__buy,
.a3-phone-page .finder-buy .buybar__cart {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.a3-phone-page .finder-buy .buybar__buy {
  background: #F1F0EB;
  border: 1px solid #F1F0EB;
  color: #000;
}
.a3-phone-page .finder-buy .buybar__buy:hover,
.a3-phone-page .finder-buy .buybar__buy:focus-visible {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000;
}
.a3-phone-page .finder-buy .buybar__buy:focus-visible {
  outline: 2px solid #F1F0EB;
  outline-offset: 2px;
}
.a3-phone-page .finder-buy .buybar__cart {
  background: #000;
  border: 1px solid #F1F0EB;
  color: #F1F0EB;
}
.a3-phone-page .finder-buy .buybar__cart:hover,
.a3-phone-page .finder-buy .buybar__cart:focus-visible {
  background: #1C1C1C;
  color: #FFFFFF;
}
.a3-phone-page .finder-buy .buybar__cart:focus-visible {
  outline: 2px solid #F1F0EB;
  outline-offset: 2px;
}
.a3-phone-page .finder-buy .buybar__cart[data-state="in"] {
  color: #F1F0EB;
  border-color: #FFFFFF;
  border-width: 2px;
}
/* the one line the cart answers with ("Added to your cart. Go to checkout (1 item)"): under the buttons, at the right */
.a3-phone-page .finder-buy .buybar__said {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.86rem;
  line-height: 1.3;
  color: #D7D6D1;
}
.a3-phone-page .finder-buy .buybar__said:empty {
  display: none;
}
.a3-phone-page .finder-buy .buybar__said a {
  color: #F1F0EB;
}

/* on a phone the bar goes under the row, the two buttons side by side across the width */
@media (max-width: 640px) {
  .a3-phone-page .finder-group li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .a3-phone-page .finder a.finder-row {
    padding: 13px 0 8px;
  }
  .a3-phone-page .finder-buy.buybar {
    padding: 0 0 14px;
  }
  .a3-phone-page .finder-buy .buybar__row {
    justify-content: stretch;
  }
  .a3-phone-page .finder-buy .buybar__buy,
  .a3-phone-page .finder-buy .buybar__cart {
    flex: 1 1 0;
    padding: 10px 8px;
  }
  .a3-phone-page .finder-buy .buybar__said {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a3-phone-page .finder-buy .buybar__buy,
  .a3-phone-page .finder-buy .buybar__cart {
    transition: none;
  }
}