/* ==========================================================================
   Grillsons — shop toolbar, live results and the folding filters
   (inc/shop-search.php, inc/shop-filters.php, assets/js/shop-search.js).
   The dropdown itself is assets/css/gs-select.css.
   ========================================================================== */

/* ---- Search box: the header's search icon lands here (/shop/#gsQ) ---- */
#gsQ { scroll-margin-top: 140px; }
.gs-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer;
  background: no-repeat center / 14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8F7E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ---- Sort: the house dropdown in the toolbar ---- */
.gs-sortform .gs-sel__btn { min-width: 212px; }
.gs-sortform .gs-sel__pop { min-width: 236px; }

/* ---- Live results ---- */
.gs-results { position: relative; min-width: 0; }
.gs-results .gs-grid,
.gs-results .gs-empty { transition: opacity .18s ease; }
.gs-results.is-loading .gs-grid,
.gs-results.is-loading .gs-empty { opacity: .45; pointer-events: none; }
.gs-results.is-loading::before {
  content: ""; position: absolute; z-index: 2; top: -8px; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) no-repeat;
  background-size: 40% 100%; animation: gsScan 1s linear infinite;
}
@keyframes gsScan { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* No match for a search: the word in gold, three searches to try. */
.gs-noresult .gs-empty__t bdi { color: var(--gold-bright); }
.gs-noresult__try {
  color: var(--gold); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(212, 162, 78, .4); text-underline-offset: 3px;
}
.gs-noresult__try:hover,
.gs-noresult__try:focus-visible { color: var(--gold-bright); text-decoration-color: currentColor; }
.gs-noresult__clear { height: 44px; padding: 0 20px; }

/* ---- Desktop sidebar: sticky AND reachable ----
   With Cut type and Steak cut the panel can outgrow the window; a sticky box
   taller than the screen hides its own bottom (Source, Fresh, Price) until the
   page ends. It scrolls inside itself instead. */
@media (min-width: 901px) {
  .gs-facets {
    max-height: calc(100vh - 106px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(212, 162, 78, .3) transparent;
  }
}

/* ---- Folding filter groups (Price / pack) ---- */
.gs-fold > .gs-fold__sum {
  display: flex; align-items: center; gap: 8px; margin: -6px -8px; padding: 6px 8px;
  border-radius: 8px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gs-fold > .gs-fold__sum::-webkit-details-marker { display: none; }
.gs-fold > .gs-fold__sum::marker { content: ""; }
.gs-fold__sum .gs-facets__h { flex: 1 1 auto; margin: 0; transition: color .2s; }
.gs-fold__sum > svg { flex: none; color: var(--text-dim); transition: transform .25s var(--ease-out), color .2s; }
.gs-fold[open] > .gs-fold__sum > svg { transform: rotate(180deg); color: var(--gold); }
.gs-fold__sum:hover .gs-facets__h,
.gs-fold__sum:focus-visible .gs-facets__h { color: var(--text-2); }
.gs-fold__sum:focus-visible { outline: 2px solid rgba(212, 162, 78, .6); outline-offset: 0; }
.gs-fold__on {
  flex: none; padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(212, 162, 78, .14); color: var(--gold-bright);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.gs-fold[open] > .gs-fold__body { margin-top: 14px; }
.gs-rtl .gs-fold__on { font-family: var(--font-body); letter-spacing: 0; font-size: 11.5px; }

/* ---- Phones ---- */
@media (max-width: 860px) {
  .gs-sortform .gs-sel__btn { min-width: 0; min-height: 46px; }
  .gs-sortform .gs-sel__pop { min-width: min(250px, calc(100vw - 16px)); }
  .gs-fold > .gs-fold__sum { min-height: 44px; }
}
@media (max-width: 560px) {
  /* Half a phone's width: the value only, the kicker goes. */
  .gs-sortform .gs-sel__k { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-results.is-loading::before { animation: none; background-size: 100% 100%; opacity: .5; }
  .gs-fold__sum > svg { transition: none; }
}