/* Torg Storefront — results page (search/category). Layout uses the theme's
   Tailwind utilities; this file holds the in-place loading state plus the bits
   utilities can't express: <details> chrome, the price range slider, and the
   mobile filter drawer (slide-over). */

#torg-sf {
  position: relative;
}
#torg-sf.torg-sf-loading {
  opacity: .6;
  pointer-events: none;
  transition: opacity .15s ease;
}
/* Drawer-open loading needs two overrides (scoped so desktop keeps the dim
   and keeps sliding UNDER the header):
   · z-index: the loading state creates a stacking context on #torg-sf that
     traps the fixed drawer + backdrop (z-60/55 become local) — without it the
     region stacks at 0 and the theme's fixed z-10 header flashes on top of
     the open drawer during every fragment load.
   · opacity: the drawer lives INSIDE #torg-sf, so the region dim would fade
     the whole open drawer (a child can't be un-faded). Drop the dim; the
     region's pointer-events: none still guards against double-clicks, and
     the swap is fast enough to not need a drawer-side indicator. */
body.torg-sf-drawer-open #torg-sf.torg-sf-loading {
  z-index: 60;
  opacity: 1;
}
#torg-sf.torg-sf-loading::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border: 3px solid rgba(14, 165, 233, .25); /* versa-500 */
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: torg-sf-spin .7s linear infinite;
  z-index: 5;
}
@keyframes torg-sf-spin { 100% { transform: rotate(360deg); } }

/* ---------- Collapsible facet sections (<details>) ---------- */
.torg-sf-summary { list-style: none; }
.torg-sf-summary::-webkit-details-marker { display: none; }
.torg-sf-chev { transition: transform .18s ease; }
.torg-sf-section[open] > .torg-sf-summary .torg-sf-chev { transform: rotate(180deg); }

/* ---------- Price range (dual <input type=range> overlay) ---------- */
.torg-sf-range-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: #e5e7eb; /* gray-200 */
  border-radius: 999px;
}
.torg-sf-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--versa-500, #1E70B3);
  border-radius: 999px;
}
.torg-sf-range-input {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none; /* re-enabled on the thumbs so both handles are grabbable */
}
.torg-sf-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--versa-500, #1E70B3);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  cursor: pointer;
}
.torg-sf-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--versa-500, #1E70B3);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  cursor: pointer;
}
.torg-sf-range-input::-moz-range-track { background: transparent; }

/* ---------- Mobile filter drawer (slide-over) ---------- */
/* Below the 2xl breakpoint the rail becomes an off-canvas right-side sheet.
   At/above 2xl the rail is the static left column (drawer chrome hidden).
   2xl is Tailwind's DEFAULT 1536px (the theme config only ADDS 3xl:1600) —
   these media queries must match it exactly: the markup's 2xl: classes
   (Filter trigger 2xl:hidden, rail grid columns) flip at 1536, and a 1600px
   value here left a 1536-1599px dead zone with no Filter button AND no rail. */
.torg-sf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 55;
}

@media (max-width: 1535.98px) {
  #torg-sf-filters {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 92%;
    max-width: 380px;
    margin: 0;
    padding: 1rem;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
    z-index: 60;
  }
  body.torg-sf-drawer-open #torg-sf-filters { transform: translateX(0); }
  body.torg-sf-drawer-open .torg-sf-backdrop { opacity: 1; visibility: visible; }
  body.torg-sf-drawer-open { overflow: hidden; }
}

@media (min-width: 1536px) {
  .torg-sf-backdrop,
  .torg-sf-drawer-close,
  .torg-sf-drawer-footer { display: none !important; }
}