/* The buyer pages' own touches on the theme: the header's controls and the product cards on shelves and lists. */

/* The brand name in Poppins, loaded for just its letters (it showed in Times, as nothing loaded Poppins). */
.brand-name { font-family: Poppins, var(--bs-font-sans-serif); font-weight: 700; }

/* The search box takes the room between the brand and the buttons, with a gap on each side. */
.header-search { flex: 1 1 auto; min-width: 0; margin: 0 1.5rem; }

/* The currency choice: the same height and colour as the round buttons beside it (track an order, cart). */
.form-select.currency-select {
  width: auto;
  height: 2.875rem;
  padding: 0 2.25rem 0 1.125rem;
  border: 0;
  border-radius: 50rem;
  background-color: #f3f5f9;
  background-position: right 1rem center;
  font-size: .875rem;
  font-weight: 500;
  color: #4b566b;
  cursor: pointer;
}
.form-select.currency-select:hover { background-color: #e3e9ef; }

.header-tools { gap: .75rem; }

/* Phones: the brand on the first row, the buttons spread evenly along the second. */
@media (max-width: 575.98px) {
  .header-tools { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: .25rem; padding-top: .25rem; }
  /* Tighter, so a signed-in buyer's six buttons fit one row on a 360px phone. */
  .form-select.currency-select { padding: 0 1.75rem 0 .75rem; background-position: right .5rem center; }
  .header-tools .navbar-toggler { padding-left: .5rem; padding-right: .5rem; }
}

/* A product card's photo: 220px tall, and shorter on a phone, where two cards sit side by side. */
.product-card .card-photo { display: block; width: 100%; height: 220px; object-fit: scale-down; }
@media (max-width: 575.98px) {
  .product-card .card-photo { height: 150px; }
}

/* Cards side by side end level, with their Add to Cart buttons in line, however long their details run. */
.product-card .card-body { display: flex; flex-direction: column; }
.product-shelf .tns-horizontal.tns-subpixel { display: flex; }
.product-shelf .tns-horizontal.tns-subpixel > .tns-item { flex: none; }