/* ==========================================================================
   Joopzy Shop Filters (UX-001)

   Mobile-first. 80% of traffic is mobile, so the bottom sheet IS the design and
   the desktop rail is the afterthought - the same DOM, reflowed by CSS alone,
   with no JS breakpoint branching.

   The sheet is a native <details>. With JS off it is a working accordion in the
   same DOM and the same open state; the rules below restyle that open state into
   a bottom sheet. There is no second visual mode to keep in sync.

   Every colour, radius and shadow is a token from joopzy-variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE MOST IMPORTANT RULE IN THIS FILE.

   joopzy-components.css:74 sets `.pgrid { grid-template-columns: 1fr }` below
   640px - the shop is ONE COLUMN on phones today. Raising per-page 12 -> 24 on a
   one-column grid would be TWENTY-FOUR full screens of scrolling for the 80% of
   traffic that is mobile: strictly worse than shipping nothing.

   Scoped to .joopzy-shop so the shared component grid (homepage, related
   products) is untouched - joopzy-components.css is owned by another file.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* minmax(0, 1fr), NOT 1fr: a bare `1fr` is minmax(auto, 1fr), so a long product
     title or a wide image can push its track out and the two columns come out
     uneven (measured 159px vs 176px at 390px wide). Flooring the minimum at 0
     forces two genuinely equal columns. */
  .joopzy-shop .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.joopzy-shop-layout { display: block; }
.joopzy-shop-main { min-width: 0; }

/* --------------------------------------------------------------------------
   Sticky filter bar (mobile / tablet)
   -------------------------------------------------------------------------- */
.jf {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 0 14px;
  background: var(--bg);
  font-family: var(--font);
}

.jf-details { position: relative; }

.jf-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jf-summary::-webkit-details-marker { display: none; }
.jf-summary::marker { content: ''; }

.jf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.jf-summary:hover .jf-btn,
.jf-summary:focus-visible .jf-btn {
  border-color: var(--blue-hi);
  background: var(--blue-pale);
  color: var(--blue);
}
.jf-icon { flex: none; }

.jf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Backdrop + bottom sheet
   -------------------------------------------------------------------------- */
.jf-backdrop { display: none; }

.jf-details[open] .jf-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 25, 35, .5);
  animation: jf-fade .2s ease both;
}

.jf-panel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  font-family: var(--font);
}

.jf-details[open] .jf-panel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 999;
  max-height: 85vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-lg);
  animation: jf-up .26s cubic-bezier(.34, 1.2, .64, 1) both;
}

/* Closing + swipe-to-dismiss are driven by JS adding these classes. */
.jf-details.is-closing .jf-panel { animation: jf-down .2s ease-in both; }
.jf-details.is-closing .jf-backdrop { animation: jf-fade .2s ease reverse both; }
.jf-details.is-dragging .jf-panel { animation: none; transition: none; }

@keyframes jf-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes jf-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes jf-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .jf-details[open] .jf-panel,
  .jf-details[open] .jf-backdrop,
  .jf-details.is-closing .jf-panel,
  .jf-details.is-closing .jf-backdrop { animation: none; }
}

/* Drag handle */
.jf-grip {
  flex: none;
  width: 38px;
  height: 4px;
  margin: 9px auto 2px;
  border-radius: var(--pill);
  background: var(--ink-5);
  cursor: grab;
  touch-action: none;
}
.jf-details.is-dragging .jf-grip { cursor: grabbing; }

/* Head */
.jf-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.jf-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.jf-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -5px -8px -5px 0;
  border: none;
  border-radius: 50%;
  background: var(--surf-2);
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.jf-close:hover { background: var(--surf-3); color: var(--ink); }

/* Body */
.jf-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 18px 18px;
}

.jf-group { padding: 16px 0; border-bottom: 1px solid var(--border); }
.jf-group:last-child { border-bottom: none; }
.jf-group-title {
  margin: 0 0 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   Category chips
   -------------------------------------------------------------------------- */
.jf-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.jf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}
.jf-chip:hover { border-color: var(--blue-hi); background: var(--blue-pale); color: var(--blue); }
.jf-chip.is-active {
  border-color: var(--blue-hi);
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
}
.jf-chip-count { font-size: 10px; font-weight: 700; color: var(--ink-4); }
.jf-chip.is-active .jf-chip-count { color: var(--blue-hi); }

/* Zero-result options are DISABLED, never hidden - hiding them would reflow the
   sheet under the user's thumb mid-tap. */
.jf-chip.is-disabled,
.jf-row.is-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Option rows (price, sale, rating, sort)
   -------------------------------------------------------------------------- */
.jf-rows { display: flex; flex-direction: column; }

.jf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* touch target floor */
  padding: 0 10px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.jf-row:hover { background: var(--blue-pale); color: var(--blue); }
.jf-row.is-active { background: var(--blue-pale); color: var(--blue); font-weight: 700; }

.jf-row-label { flex: 1 1 auto; }
.jf-row-count { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-4); }
.jf-row.is-active .jf-row-count { color: var(--blue-hi); }

/* Radio dot on the single-select groups (price, sort) */
.jf-row[data-jf-group="price"]::before,
.jf-row[data-jf-group="orderby"]::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-5);
  border-radius: 50%;
  transition: border-color .15s, box-shadow .15s;
}
.jf-row[data-jf-group="price"].is-active::before,
.jf-row[data-jf-group="orderby"].is-active::before {
  border-color: var(--blue-hi);
  border-width: 5px;
  box-shadow: inset 0 0 0 1px var(--white);
}

/* Toggle switch (on sale, rating) */
.jf-switch {
  flex: none;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: var(--pill);
  background: var(--surf-3);
  transition: background .18s;
}
.jf-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform .18s cubic-bezier(.34, 1.2, .64, 1);
}
.jf-row-toggle.is-active .jf-switch { background: var(--blue-hi); }
.jf-row-toggle.is-active .jf-switch::after { transform: translateX(16px); }

/* --------------------------------------------------------------------------
   Sticky sheet footer
   -------------------------------------------------------------------------- */
.jf-panel-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-md);
  background: var(--white);
}

.jf-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.jf-clear:hover { border-color: var(--blue-hi); background: var(--blue-pale); color: var(--blue); }

.jf-apply {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s;
}
.jf-apply:hover { background: var(--blue); color: var(--white); }
.jf-apply[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------------------
   Active filter chips (above the grid, every breakpoint)
   -------------------------------------------------------------------------- */
.jf-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-family: var(--font);
}
.jf-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.jf-active-chip:hover { background: var(--blue-hi); color: var(--white); }
.jf-active-chip svg { flex: none; opacity: .7; }

.jf-active-clear {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.jf-active-clear:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Empty state

   Load-bearing, not decorative: it is the only exit from a dead-end filter
   combination.
   -------------------------------------------------------------------------- */
.jf-empty {
  padding: 56px 20px 64px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: var(--font);
}
.jf-empty-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.jf-empty-text { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.jf-empty-chips { justify-content: center; margin-bottom: 20px; }
.jf-empty-cta { text-decoration: none; }

/* --------------------------------------------------------------------------
   Mobile toolbar: hide the native sort <select>.

   Sort is folded into the sheet as a radio group so a phone has ONE thumb-
   reachable control and ONE navigation, not two stranded controls.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .joopzy-shop-toolbar .woocommerce-ordering { display: none; }
}

/* --------------------------------------------------------------------------
   Desktop (>= 1024px): the SAME sheet reflows into a sticky rail. Pure CSS.

   The panel un-fixes, the backdrop / close button / grip / sort group disappear,
   and the Apply button stays at the bottom of the rail - keeping click-batching
   on a single code path across every breakpoint.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .joopzy-shop-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 28px;
    align-items: start;
  }

  .jf {
    position: sticky;
    top: 20px;
    z-index: 1;
    margin: 0;
    background: transparent;
  }

  /* With JS on, the rail is opened programmatically and the button is redundant.
     With JS OFF, .jf-ready is never added, so the summary stays visible and the
     panel remains a working click-to-open accordion. Nothing is ever invisible. */
  .jf-ready .jf-summary { display: none; }

  .jf-details[open] .jf-backdrop,
  .jf-close,
  .jf-grip,
  .jf-group-sort { display: none; }

  .jf-details[open] .jf-panel,
  .jf-panel {
    position: static;
    max-height: none;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: none;
    animation: none;
  }

  .jf-panel-head { padding: 14px 16px; }
  .jf-panel-body { overflow: visible; padding: 0 16px 6px; }
  .jf-panel-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px;
  }
  .jf-apply { order: -1; }

  .jf-chips { gap: 6px; }
  .jf-chip { min-height: 32px; padding: 0 11px; font-size: 11.5px; }
  .jf-row { min-height: 40px; padding: 0 8px; font-size: 12.5px; }
}