/* ============================================================
   Collection — toolbar + facets + grid + pagination. Tokens only.
   Behaviour in collection.js.
   ============================================================ */

.lh-collection { padding-block: var(--space-8) var(--section-pad-bottom); }

/* ---- Collection title (under the banner) ---- */
.lh-collection__header { margin-bottom: var(--space-6); text-align: center; }
.lh-collection__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h2);
  color: var(--text-heading);
}
.lh-collection__subtitle {
  margin: var(--space-2) auto 0;
  max-width: 60ch;
  font-size: var(--font-body-md);
  color: var(--text-muted);
  line-height: var(--leading-body);
}

/* ---- Toolbar ---- */
.lh-collection__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-collection__count { margin: 0; font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-collection__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.lh-collection__sort { position: relative; margin-left: auto; display: inline-flex; align-items: center; align-self: stretch; }
.lh-collection__sort-value {
  /* Stretched to the toolbar row, so it is exactly the Filter button's height
     (that button's height comes from its 18px icon, not its text). */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 10px 36px 10px 14px;
  line-height: normal; /* as the Filter button, so both boxes are 40px */
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.lh-collection__sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.lh-collection__sort:hover .lh-collection__sort-value { border-color: var(--border-strong); }
.lh-collection__sort:has(select:focus-visible) .lh-collection__sort-value {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lh-collection__sort-caret { position: absolute; right: 12px; pointer-events: none; color: var(--text-muted); }

/* ---- Layout ---- */
.lh-collection__layout { display: grid; gap: var(--space-6); }
.lh-collection__content.is-loading { opacity: 0.55; pointer-events: none; transition: opacity var(--duration-fast) linear; }

/* ---- Facets ---- */
.lh-collection__facets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-collection__facets-title { font-family: var(--font-display); font-size: var(--font-h4); }
.lh-collection__facets-close { background: none; border: 0; cursor: pointer; color: var(--text-heading); display: inline-flex; }
.lh-collection__facets-close:hover { color: var(--color-primary); }
.lh-facet { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) 0; }
.lh-facet__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-facet__summary::-webkit-details-marker { display: none; }
.lh-facet__caret { transition: transform var(--duration-fast) var(--ease-standard); color: var(--text-muted); }
.lh-facet[open] .lh-facet__caret { transform: rotate(180deg); }
.lh-facet__body { padding-top: var(--space-3); }
.lh-facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-height: 260px; overflow-y: auto; }
.lh-facet__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 4px;
  font-size: var(--font-body-sm);
  color: var(--text-body);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.lh-facet__option:hover { background: var(--surface-sunken); }
.lh-facet__option.is-disabled { opacity: 0.4; cursor: not-allowed; }
.lh-facet__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.lh-facet__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: #fff;
  transition: var(--transition-fast);
}
.lh-facet__check .lh-icon { opacity: 0; }
.lh-facet__option input:checked + .lh-facet__check { background: var(--color-primary); border-color: var(--color-primary); }
.lh-facet__option input:checked + .lh-facet__check .lh-icon { opacity: 1; }
.lh-facet__option input:focus-visible + .lh-facet__check { box-shadow: var(--ring-focus); }
.lh-facet__label { flex: 1; }
.lh-facet__count { color: var(--text-subtle); font-size: var(--font-caption); }
/* ---- Price range facet (collection-ref-1) ---- */
.lh-price-filter { display: flex; flex-direction: column; gap: var(--space-5); }
.lh-price-filter__fields { display: flex; align-items: center; gap: var(--space-3); }
.lh-price-filter__field { position: relative; flex: 1; display: flex; align-items: center; }
.lh-price-filter__currency {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: var(--font-body-sm);
  pointer-events: none;
}
.lh-price-filter__input {
  width: 100%;
  padding: 10px 12px 10px 26px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--text-heading);
  background: var(--surface-card);
  -moz-appearance: textfield;
  appearance: textfield;
}
.lh-price-filter__input::-webkit-outer-spin-button,
.lh-price-filter__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lh-price-filter__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-focus); }

/* Dual-thumb slider — two range inputs overlaid on a shared rail + active fill.
   Only the thumbs receive pointer events so both ends stay draggable. */
.lh-price-filter__slider { position: relative; height: 24px; }
.lh-price-filter__rail,
.lh-price-filter__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
}
.lh-price-filter__rail { left: 0; right: 0; background: var(--border-subtle); }
.lh-price-filter__fill { background: var(--color-action); }
.lh-price-filter__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.lh-price-filter__thumb::-webkit-slider-runnable-track { background: none; border: none; }
.lh-price-filter__thumb::-moz-range-track { background: none; border: none; }
.lh-price-filter__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  border: 2px solid var(--color-action);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.lh-price-filter__thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.lh-price-filter__thumb:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring-focus); }
.lh-price-filter__thumb:focus-visible::-moz-range-thumb { box-shadow: var(--ring-focus); }
.lh-collection__apply { margin-top: var(--space-4); width: 100%; }

/* ---- Active chips ---- */
.lh-collection__active { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); align-items: center; }
.lh-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 10px;
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  background: var(--color-primary-tint);
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
}
.lh-chip:hover { color: var(--color-primary); }
.lh-collection__clear { font-size: var(--font-caption); color: var(--text-muted); text-decoration: underline; }
.lh-collection__clear:hover { color: var(--color-primary); }

/* ---- Grid ---- */
/* Phones: the tighter card spacing from Theme settings -> Layout (tokens.css --card-gap-*). */
.lh-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap-y) var(--card-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-collection__empty { text-align: center; padding: var(--space-16) 0; display: grid; gap: var(--space-4); justify-items: center; color: var(--text-muted); }

/* ---- Pagination ---- */
.lh-collection__pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-10); }
.lh-collection__page {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-body-sm);
  color: var(--text-body);
  transition: var(--transition-fast);
}
.lh-collection__page:hover { background: var(--surface-sunken); }
.lh-collection__page.is-current { background: var(--color-cta, #1a1a1a); color: #fff; font-weight: var(--weight-semibold); }

/* ---- Mobile filter drawer ---- */
.lh-collection__overlay {
  position: fixed; inset: 0; z-index: 95; background: rgba(var(--lh-stone-900-rgb), 0.5);
  /* Fades with the drawer. allow-discrete lets it fade out before [hidden]
     applies display:none; a browser without it just shows/hides instantly. */
  transition: opacity var(--duration-base) var(--ease-standard), display var(--duration-base) allow-discrete;
}
@starting-style { .lh-collection__overlay { opacity: 0; } }
.lh-collection__overlay[hidden] { display: none; opacity: 0; }

@media (max-width: 1023px) {
  .lh-collection__facets {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 96;
    width: min(86vw, 360px);
    background: var(--surface-card);
    padding: var(--space-5);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-emphasis);
  }
  .lh-collection__facets.is-open { transform: translateX(0); }
}

/* ---- Desktop ---- */
@media (min-width: 768px) {
  .lh-collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cards-gap-row) var(--cards-gap-col); }
}
@media (min-width: 1024px) {
  /* Filter button stays visible on desktop and toggles the sidebar. */
  .lh-collection__layout {
    grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start;
    transition: grid-template-columns var(--duration-base) var(--ease-emphasis), column-gap var(--duration-base) var(--ease-emphasis);
  }
  .lh-collection__facets {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    min-width: 0;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-emphasis), visibility 0s;
  }
  /* Filters open: the sidebar takes 260px, so the grid drops to the "with
     filters" column count (3 by default) instead of squeezing four cards in. */
  .lh-collection__grid { grid-template-columns: repeat(var(--lh-col-cols-open, 3), minmax(0, 1fr)); }

  /* Collapsed state (the default on load) — hide the sidebar, let the grid
     fill the row at the full column count. */
  /* The sidebar's track animates 260px -> 0 (not display:none, which cannot
     transition); visibility waits for the fade so it leaves the tab order and
     the accessibility tree only once it is gone. */
  .lh-collection.is-filters-collapsed .lh-collection__layout { grid-template-columns: 0px 1fr; column-gap: 0px; }
  .lh-collection.is-filters-collapsed .lh-collection__facets {
    opacity: 0;
    transform: translateX(calc(-1 * var(--space-6)));
    visibility: hidden;
    overflow: hidden;
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-emphasis), visibility 0s var(--duration-base);
  }
  .lh-collection.is-filters-collapsed .lh-collection__grid { grid-template-columns: repeat(var(--lh-col-cols, 4), minmax(0, 1fr)); }

  /* The listing alone sets the row's height (owner, 2026-10-31). Size containment keeps the
     sidebar out of the row's sizing: collapsed, its text wrapped in a 0px track had made the row
     taller than the cards (an empty band under them). The sidebar is then as tall as the listing,
     at most one screen (it is sticky), and scrolls inside itself when the filters need more. */
  .lh-collection__facets {
    contain: size;
    height: min(100%, calc(100vh - var(--header-height) - var(--space-8)));
    height: min(100%, calc(100dvh - var(--header-height) - var(--space-8)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .lh-collection__facets::-webkit-scrollbar { width: 6px; }
  .lh-collection__facets::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
  .lh-collection__facets::-webkit-scrollbar-track { background: transparent; }
  .lh-collection.is-filters-collapsed .lh-collection__facets { padding-right: 0; }
}