/* ==========================================================================
   ЛУЧ ШОП — pages/catalog.css
   Catalogue page only: club chips row, sidebar facet tweaks, toolbar,
   active-filter chips, pager, empty state and the mobile filters sheet.
   Everything else comes from main.css (.catalog, .filters, .filter, .toolbar,
   .view-toggle, .pager, .cards, .chip, .size-pill, .swatch, .range …).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head
   -------------------------------------------------------------------------- */
.page-title__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
#catalog-title { transition: opacity 140ms var(--ease); }
#catalog-title.is-swapping { opacity: 0; }

/* --------------------------------------------------------------------------
   2. Club chips row
   -------------------------------------------------------------------------- */
.catalog-clubs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; }
.catalog-club { --i: 0; }
.catalog-club.is-hidden { display: none; }
.catalog-club--extra { display: none; }
.catalog-clubs.is-expanded .catalog-club--extra { display: inline-flex; animation: fade-up 320ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.catalog-clubs.is-expanded .catalog-club--extra.is-hidden { display: none; }
.catalog-clubs__more {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--red); white-space: nowrap;
  transition: color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.catalog-clubs__more:hover { color: var(--red-dark); background: var(--white); }
.catalog-clubs__more svg { transition: transform 240ms var(--ease); }
.catalog-clubs__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   3. Sidebar facets
   -------------------------------------------------------------------------- */
.catalog-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.catalog-filters__head { display: none; }
.catalog-filters__body { display: flex; flex-direction: column; }
.catalog-facets { display: flex; flex-direction: column; }
/* .filter__body > div clips overflow for the collapse animation; give focus rings and
   swatch outlines 6px of breathing room without changing the layout (expanded state only). */
.catalog-facets .filter__body > div { margin: -6px; padding: 6px; }
.catalog-facets .filter__head[aria-expanded="false"] + .filter__body > div { margin: 0; padding: 0; }
.catalog-facets .filter__head { padding: 0; }
.catalog-facets .filter__head:focus-visible { outline-offset: 4px; }
.catalog-facets .checkbox { transition: color var(--t-hover) var(--ease); }
.catalog-facets .checkbox.is-out { color: var(--soft); cursor: not-allowed; }
.catalog-facets .checkbox.is-out .checkbox__box { opacity: .55; }
.catalog-facets .checkbox__count { font-variant-numeric: tabular-nums; }
/* price */
.catalog-price { flex: 1; min-width: 0; }
.catalog-price .input { height: 40px; font-size: 14px; padding-left: 36px; }
.catalog-price .input-wrap__prefix { font-size: 13px; }
.catalog-facets .range { margin-top: 4px; }
.catalog-facets .range__track { left: 8px; right: 8px; }
.catalog-facets .range__fill { left: 8px; right: 8px; transition: none; }
.catalog-facets .range input[type="range"] { z-index: 2; }
.catalog-facets .range input[type="range"]::-webkit-slider-thumb { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); box-shadow: 0 1px 4px rgba(15, 30, 61, .18); }
.catalog-facets .range input[type="range"]:hover::-webkit-slider-thumb, .catalog-facets .range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.catalog-facets .range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.catalog-facets .range input[type="range"]::-moz-range-track { background: transparent; }
.catalog-price-hint { font-size: 12px; color: var(--soft); }
/* sizes */
.catalog-facets .size-pill { --pill-w: 40px; }
.catalog-facets .size-pill:disabled, .catalog-facets .size-pill.is-out { color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; cursor: not-allowed; opacity: 1; transform: none; }
.catalog-facets .size-pill:disabled:hover { box-shadow: inset 0 0 0 1px var(--line); }
.catalog-size-link { margin-top: 2px; font-size: 13px; }
/* colours */
.catalog-facets .swatch { border: 0; padding: 0; }
.catalog-facets .swatch.is-out, .catalog-facets .swatch:disabled { opacity: .28; cursor: not-allowed; }
.catalog-facets .swatch:disabled:hover { transform: none; }
.catalog-facets .swatch:focus-visible { outline-color: var(--navy); }
.catalog-facets .swatch[aria-pressed="true"]:focus-visible { outline-color: var(--red); }
/* footer buttons */
.catalog-filters__foot .btn { width: 100%; }
.catalog-filters__foot .btn:disabled { opacity: .6; }
.catalog-filters__foot .filter__reset { border-radius: var(--r-4); transition: color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.catalog-filters__foot .filter__reset:hover { color: var(--red); background: var(--ice); }

/* --------------------------------------------------------------------------
   4. Toolbar: active chips, sort, view toggle, mobile filters button
   -------------------------------------------------------------------------- */
.toolbar__active:empty { display: none; }
/* sort + view stay on the right even when there are no active chips (the empty chips block is display:none) */
.toolbar__right { margin-left: auto; }
.chip--filter { animation: catalog-chip-in 220ms var(--ease) both; transition: opacity 180ms var(--ease), transform 180ms var(--ease), border-color var(--t-hover) var(--ease); }
.chip--filter:hover .chip__x { color: var(--red); }
/* animation: none — the finished pop-in must not hold opacity/transform while the chip fades out */
.chip--filter.is-leaving { animation: none; opacity: 0; transform: scale(.88); pointer-events: none; }
@keyframes catalog-chip-in { from { opacity: 0; transform: scale(.88); } }
.catalog-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sw, var(--red)); box-shadow: inset 0 0 0 1px rgba(15, 30, 61, .15); flex-shrink: 0; }
.catalog-clear { margin-left: 4px; font-size: 13px; height: 32px; padding: 0 6px; border-radius: var(--r-4); }
.catalog-clear:hover { color: var(--red); }
.catalog-sort { position: relative; display: inline-flex; align-items: center; }
.catalog-sort__icon { position: absolute; left: 12px; display: flex; color: var(--navy); pointer-events: none; }
.catalog-sort .select { width: auto; min-width: 232px; padding-left: 38px; }
.catalog-view button > span { display: flex; }
.catalog-view button:hover:not(.is-active) { color: var(--navy); background: var(--ice); }
.catalog-filters-btn { display: none; position: relative; }
.catalog-filters-btn .badge-count { top: -7px; right: -7px; }
.catalog-filters-btn > span:first-child { display: flex; }

/* --------------------------------------------------------------------------
   5. Grid, empty state, pager
   -------------------------------------------------------------------------- */
#catalog-grid { transition: opacity 170ms var(--ease); }
#catalog-grid.is-switching { opacity: 0; }
#catalog-grid > .empty { grid-column: 1 / -1; }
.catalog-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.catalog-empty__actions .btn { margin-top: 0; }
.catalog-more {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px; border-radius: var(--r-4);
  font-size: 14px; font-weight: 500; color: var(--navy); white-space: nowrap;
  transition: color var(--t-hover) var(--ease);
}
.catalog-more:hover { color: var(--red); }
.catalog-more svg { transition: transform var(--t-hover) var(--ease); }
.catalog-more:hover svg { transform: translateY(2px); }
.catalog-more.is-loading { opacity: .6; pointer-events: none; }
.pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.pager__btn:active { transform: scale(.96); }
.pager__list a { transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform 120ms var(--ease); }

/* --------------------------------------------------------------------------
   6. Tablet / mobile: filters become a slide-in sheet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .catalog-filters-btn { display: inline-flex; }
  body.catalog-lock { overflow: hidden; }
  .catalog-backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(15, 30, 61, .48); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--t-panel) var(--ease);
  }
  .catalog-backdrop.is-open { opacity: 1; }
  /* main.css toggles display on .filters; here the sheet is always laid out and slides in with a transform */
  .filters, .filters.is-open { display: flex; }
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(400px, 92vw); z-index: var(--z-drawer);
    padding: 0; border: 0; border-radius: 0; box-shadow: 16px 0 48px rgba(15, 30, 61, .18);
    transform: translateX(-104%); visibility: hidden;
    transition: transform var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
  }
  .filters.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .catalog-filters__head { display: flex; align-items: center; justify-content: space-between; height: var(--mhdr-bar); padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .catalog-filters__title { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: .02em; }
  .catalog-filters__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .catalog-filters__foot {
    position: sticky; bottom: 0; z-index: 1; margin: 0 -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 30, 61, .06);
  }
  /* club row scrolls horizontally and shows every club — no «Ещё» toggle needed */
  .catalog-clubs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 16px; }
  .catalog-clubs::-webkit-scrollbar { display: none; }
  .catalog-clubs .chip { flex-shrink: 0; }
  .catalog-club--extra { display: inline-flex; }
  .catalog-clubs__more { display: none; }
  .catalog-sort .select { min-width: 200px; }
}

@media (max-width: 640px) {
  .catalog-view { display: none; } /* list view collapses to a single column on phones anyway */
  .toolbar__right { gap: 10px; }
  .catalog-sort { flex: 1; min-width: 0; }
  .catalog-sort .select { width: 100%; min-width: 0; padding-left: 12px; }
  .catalog-sort__icon { display: none; }
  .catalog-more { width: 100%; justify-content: center; height: 44px; border: 1.5px solid var(--navy); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 14px; }
  .catalog-more:hover { background: var(--navy); color: var(--white); }
  .pager { gap: 12px; }
  .catalog-clubs { gap: 6px; padding-bottom: 14px; }
  .catalog-clubs .chip { height: 36px; padding: 0 14px; font-size: 13px; }
  .catalog-clear { margin-left: 0; }
}