/* The store's dropdowns are plain <select>s (SelectBoxIt was dropped, Nov 2026), so a tap or click opens the phone's or
   browser's own list. The closed box keeps the drawn one's look: white-to-grey gloss, 6px corners, a small black
   arrow. The sizes below are the drawn boxes' outer sizes, border included. The checkout invoice's quantity box has
   its own paper-toned look in invoice.css; the beer pages' size menu is in beer-page.css. */
#filters select,
#Inventory_length select,
#ProductInfo div.Buy select,
#MiniCart select.qty,
#Checkout div#billing.slide select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E"), linear-gradient(#fdfdfd, #e6e6e6);
  background-position: right 11px center, 0 0;
  background-repeat: no-repeat;
  background-size: 8px 4px, 100% 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom-color: #b3b3b3;
  border-radius: 6px;
  box-shadow: none;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font: 14px Helvetica, Arial, sans-serif;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0 26px 0 5px;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
#filters select:hover,
#Inventory_length select:hover,
#ProductInfo div.Buy select:hover,
#MiniCart select.qty:hover,
#Checkout div#billing.slide select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E"), linear-gradient(#f2f2f2, #dcdcdc);
}
#ProductInfo div.Buy select:disabled {
  cursor: default;
  opacity: 0.65;
}

/* Store table: the arrival-date filter and the per-page count */
#Inventory #filters select {
  float: left;
  height: 22px;
  margin-top: 4px;
  width: 132px;
}
#Inventory_length select {
  color: #65612f;
  height: 32px;
  width: 58px;
}

/* An opened beer in the store table: size (with its price) and quantity */
#Inventory tr#ProductInfo div.Buy select {
  color: #65612f;
  height: 32px;
}
#Inventory tr#ProductInfo div.Buy select#product {
  width: 237px;
}
#Inventory tr#ProductInfo div.Buy select#count {
  width: 50px;
}
/* Phones: the opened beer is one centred column (master.css, under 768px) and touch screens get 16px text (a11y.css),
   so "12-Pack | 12OZ Cans — $13.99" doesn't fit in 237px and the price was cut off. The size box grows to its longest
   option there, leaving room for the quantity box beside it. */
@media all and (max-width: 767px) {
  #Inventory tr#ProductInfo div.Buy select#product {
    max-width: calc(100% - 64px);
    min-width: 237px;
    width: auto;
  }
}

/* The cart bar's mini cart */
#MiniCart select.qty {
  float: left;
  height: 22px;
  width: 52px;
}

/* Checkout billing: state, order type, pickup date */
#Checkout div#billing.slide select {
  float: left;
  height: 22px;
}
#Checkout div#billing.slide select#state {
  width: 162px;
}
#Checkout div#billing.slide select#type {
  width: 92px;
}
/* touch screens get 16px text in every field (a11y.css), and "Curbside" was cut off at 92px */
@media (pointer: coarse) {
  #Checkout div#billing.slide select#type {
    width: 112px;
  }
}
#Checkout div#billing.slide select#p_orderDay {
  width: 167px;
}