/* The store's product grid (Nov 2026): inc/shop-grid.php, filled by js/shop.js. The orange bar is the table's
   (Full Inventory, last update, search box) and the gold strip under it the table's filter row, now with the product
   count and the sort menu. From 1025px the filters are a column at the left that stays in view while the cards
   scroll; below that they are a panel that slides in from the left behind the Filters button. The cards are the
   New Arrivals cards (master.css + featured.css); this only sets how many go in a row. */

#Shop {
  clear: both;
  margin-bottom: 30px;
}
#Shop h2 {
  position: relative;
}

/* ---------- The gold strip ---------- */
#Shop .ShopBar {
  align-items: center;
  background: #ccb671;
  color: #4a4722;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 40px;
  padding: 4px 15px;
}
#Shop .ShopCount {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 18px;
  text-transform: uppercase;
}
#Shop .ShopSort {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#Shop .ShopSort select {
  appearance: none;
  -webkit-appearance: none;
  background: #fdfdfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23604c26'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 0;
  border-radius: 4px;
  color: #604c26;
  cursor: pointer;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  letter-spacing: 0;
  padding: 0 30px 0 10px;
  text-transform: none;
}
#Shop .ShopFilterToggle {
  display: none;
}

/* ---------- Layout ---------- */
#Shop .ShopWrap {
  align-items: flex-start;
  display: flex;
  gap: 30px;
}
#Shop .ShopMain {
  flex: 1 1 auto;
  min-width: 0;
}
#Shop .ShopFilters,
#ShopFilters.is-open {
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
}
#Shop .ShopFilters {
  color: #604c26;
  flex: 0 0 220px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 4px 20px 0;
  position: sticky;
  scrollbar-width: thin;
  top: 70px;
}
#Shop .ShopFiltersHead,
#Shop .ShopFiltersFoot {
  display: none;
}
#Shop .ShopFiltersFoot .ShopClear {
  display: none;
}

/* ---------- Filter groups ---------- */
.ShopFilters .ShopGroup {
  border-bottom: 1px solid #d9ca93;
  padding: 10px 0 12px;
}
.ShopFilters .ShopGroup:first-child {
  padding-top: 0;
}
.ShopFilters .ShopGroup summary {
  color: #65612f;
  cursor: pointer;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  list-style: none;
  padding: 2px 18px 6px 0;
  position: relative;
  text-transform: uppercase;
}
.ShopFilters .ShopGroup summary::-webkit-details-marker {
  display: none;
}
/* a small chevron at the right: down while open */
.ShopFilters .ShopGroup summary:after {
  border-bottom: 2px solid #98855f;
  border-right: 2px solid #98855f;
  content: "";
  height: 6px;
  position: absolute;
  right: 4px;
  top: 4px;
  transform: rotate(45deg);
  width: 6px;
}
.ShopFilters .ShopGroup:not([open]) summary {
  padding-bottom: 0;
}
.ShopFilters .ShopGroup:not([open]) summary:after {
  top: 7px;
  transform: rotate(-135deg);
}
.ShopFilters .ShopGroup ul {
  margin: 0;
  padding: 0;
}
.ShopFilters .ShopGroup li {
  list-style: none;
  margin: 0;
}
.ShopFilters .ShopGroup label {
  align-items: flex-start;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 8px;
  line-height: 18px;
  padding: 4px 2px;
}
.ShopFilters .ShopGroup label:hover {
  background: rgba(204, 182, 113, 0.25);
}
/* master.css flattens every input (appearance: none), which leaves a box or dot with nothing to draw */
.ShopFilters .ShopGroup input[type=checkbox],
.ShopFilters .ShopGroup input[type=radio] {
  accent-color: #cc4410;
  -webkit-appearance: auto;
  appearance: auto;
  flex: 0 0 auto;
  height: 16px;
  margin: 1px 0 0;
  width: 16px;
}
.ShopFilters .ShopGroup label span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ShopFilters .ShopGroup label em {
  color: #6b6440;
  font-size: 12px;
  font-style: normal;
}
.ShopFilters .ShopGroup li.none {
  color: #6b6440;
  font-size: 13px;
  padding: 4px 2px;
}
.ShopFilters .ShopAll {
  background: none;
  border: 0;
  color: #cc4410;
  cursor: pointer;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px;
  text-decoration: underline;
}
.ShopFilters .ShopFind {
  background: #fdfdfd;
  border: 1px solid #d9ca93;
  border-radius: 4px;
  box-sizing: border-box;
  color: #604c26;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 14px;
  height: 32px;
  margin: 0 0 6px;
  padding: 0 8px;
  width: 100%;
}

/* ---------- Chips: the filters in use, each a button that removes it ---------- */
#Shop .ShopChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
}
#Shop .ShopChips[hidden] {
  display: none;
}
#Shop .ShopChips li {
  list-style: none;
  margin: 0;
}
#Shop .ShopChips button {
  align-items: center;
  background: #fdfdfd;
  border: 1px solid #ccb671;
  border-radius: 15px;
  color: #604c26;
  cursor: pointer;
  display: flex;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 12px;
}
#Shop .ShopChips button:hover {
  border-color: #cc4410;
}
/* the × */
#Shop .ShopChips button i {
  display: block;
  height: 10px;
  position: relative;
  width: 10px;
}
#Shop .ShopChips button i:before,
#Shop .ShopChips button i:after {
  background: #cc4410;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  width: 10px;
}
#Shop .ShopChips button i:after {
  transform: rotate(-45deg);
}
#Shop .ShopChips li.all button {
  background: none;
  border-color: transparent;
  color: #cc4410;
  font-weight: 700;
  text-decoration: underline;
}
.Shop .sr,
.ShopFilters .sr {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- The grid ---------- */
#FullColumn #Shop .FeaturedList {
  min-height: 300px;
  padding-top: 20px;
}
/* beside the filters (the page is 980px wide): three cards a row, each about as wide as a New Arrivals card
   (featured.css has four from 768px, two below, where the filters are behind their button) */
@media all and (min-width: 1025px) {
  #FullColumn #Shop .FeaturedList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* a card from a feed cached before the sizes were in it: a link to the beer page instead of the buttons */
#FullColumn #Shop .FeaturedList > span p.ShopSizes {
  margin-top: 6px;
}
#FullColumn #Shop .FeaturedList > span p.ShopSizes a {
  color: #cc4410;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}
/* the found words in a card, as the table lit them */
#Shop .FeaturedList span.highlight {
  background: #ffe08a;
  border-radius: 2px;
  color: inherit;
}
#Shop.is-ready .FeaturedList {
  min-height: 0;
}

#Shop .ShopEmpty {
  color: #604c26;
  font-size: 15px;
  line-height: 22px;
  padding: 30px 0 10px;
  text-align: center;
}
#Shop .ShopEmpty[hidden] {
  display: none;
}
#Shop .ShopEmpty strong {
  display: block;
  font-weight: 700;
}
#Shop .ShopEmpty button {
  background: none;
  border: 0;
  color: #cc4410;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
#Shop .ShopMoreWrap {
  margin: 0;
  text-align: center;
}
#Shop .ShopMore {
  background: #cc4410;
  border: 0;
  border-radius: 5px;
  color: #fdfdfd;
  cursor: pointer;
  font-family: "museo-sans-rounded", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 auto 10px;
  min-height: 40px;
  padding: 0 22px;
  text-transform: uppercase;
}
#Shop .ShopMore:hover {
  background: #b8400f;
}
#Shop .ShopMore[hidden] {
  display: none;
}
#Shop .ShopNoScript {
  padding: 20px 0;
  text-align: center;
}

/* ---------- Phones and tablets: the filters as a panel ---------- */
@media all and (max-width: 1024px) {
  /* the bar is 720px or less: the search box would cover the Last Update pill */
  #Shop h2 em {
    display: none;
  }
  #Shop .ShopWrap {
    display: block;
  }
  #Shop .ShopFilters {
    display: none;
  }
  #Shop .ShopFilterToggle {
    align-items: center;
    background: #fdfdfd;
    border: 0;
    border-radius: 4px;
    color: #604c26;
    cursor: pointer;
    display: flex;
    font-family: "museo-sans-rounded", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 10px;
  }
  /* three lines, longest on top: the usual filter icon */
  #Shop .ShopFilterToggle:before {
    background: linear-gradient(#604c26, #604c26) 0 0 / 14px 2px no-repeat,
      linear-gradient(#604c26, #604c26) 2px 5px / 10px 2px no-repeat,
      linear-gradient(#604c26, #604c26) 4px 10px / 6px 2px no-repeat;
    content: "";
    display: block;
    height: 12px;
    width: 14px;
  }
  #Shop .ShopFilterToggle .n:empty {
    display: none;
  }

  /* open: at the end of <body> (js/shop.js moves it there), over a dimmed page */
  #ShopFilters.is-open {
    background: #e9e5d8 url(../img/back.jpg);
    bottom: 0;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    color: #604c26;
    display: flex;
    flex-direction: column;
    left: 0;
    max-width: 92vw;
    position: fixed;
    top: 0;
    width: 360px;
    z-index: 100001;
  }
  body.ShopFiltersOpen {
    overflow: hidden;
  }
  body.ShopFiltersOpen:after {
    background: rgba(0, 0, 0, 0.45);
    content: "";
    inset: 0;
    position: fixed;
    z-index: 100000;
  }
  #ShopFilters.is-open .ShopFiltersHead {
    align-items: center;
    background: #cc4410;
    color: #fdfdfd;
    display: flex;
    flex: 0 0 auto;
    height: 54px;
    justify-content: space-between;
    padding: 0 8px 0 18px;
  }
  #ShopFilters.is-open .ShopFiltersHead p {
    font-family: "museo-sans-rounded", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #ShopFilters.is-open .ShopClose {
    background: none;
    border: 0;
    cursor: pointer;
    height: 44px;
    position: relative;
    width: 44px;
  }
  #ShopFilters.is-open .ShopClose:before,
  #ShopFilters.is-open .ShopClose:after {
    background: #fdfdfd;
    content: "";
    height: 2px;
    left: 12px;
    position: absolute;
    top: 21px;
    transform: rotate(45deg);
    width: 20px;
  }
  #ShopFilters.is-open .ShopClose:after {
    transform: rotate(-45deg);
  }
  #ShopFilters.is-open .ShopFacets {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px;
  }
  #ShopFilters.is-open .ShopFiltersFoot {
    background: #e9e5d8;
    border-top: 1px solid #d9ca93;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }
  #ShopFilters.is-open .ShopFiltersFoot button {
    border-radius: 5px;
    cursor: pointer;
    font-family: "museo-sans-rounded", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    height: 44px;
  }
  #ShopFilters.is-open .ShopFiltersFoot .ShopClear {
    background: #fdfdfd;
    border: 1px solid #ccb671;
    color: #604c26;
    display: block;
    flex: 0 0 auto;
    padding: 0 14px;
  }
  #ShopFilters.is-open .ShopDone {
    background: #cc4410;
    border: 0;
    color: #fdfdfd;
    flex: 1 1 auto;
    letter-spacing: 0.5px;
  }
  #ShopFilters.is-open .ShopGroup label {
    font-size: 16px;
    line-height: 20px;
    padding: 7px 2px;
  }
  #ShopFilters.is-open .ShopGroup input[type=checkbox],
  #ShopFilters.is-open .ShopGroup input[type=radio] {
    height: 18px;
    margin-top: 1px;
    width: 18px;
  }
  #ShopFilters.is-open .ShopFind {
    font-size: 16px;
    height: 40px;
  }
}

@media all and (max-width: 480px) {
  #Shop .ShopBar {
    padding: 6px 10px;
  }
  #Shop .ShopCount {
    flex-basis: 100%;
    order: 3;
    text-align: center;
  }
  #Shop .ShopSort > span {
    display: none;
  }
  #Shop .ShopSort {
    margin-left: auto;
  }
  #Shop .ShopSort select {
    font-size: 16px;
  }
  #Shop .ShopChips {
    padding-left: 10px;
    padding-right: 10px;
  }
}