/* Catalog page — from template/catalog.html */
/* ---- Catalog-specific layout ---- */
  .catalog-layout{ display:grid; gap: var(--space-7); padding-block: var(--space-4) var(--space-9); }
  @media (min-width:960px){ .catalog-layout{ grid-template-columns: 260px 1fr; align-items:start; } }

  .filters{ display:flex; flex-direction:column; gap: var(--space-6); }
  .filter-group{ border-bottom:1px solid var(--border); padding-bottom: var(--space-5); }
  .filter-group h3{ font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; margin-bottom: var(--space-4); display:flex; justify-content:space-between; align-items:center; }
  .filter-option{ display:flex; align-items:center; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--fs-sm); cursor:pointer; color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding-inline: 2px; }
  .filter-option:hover{ color: var(--color-ink); }
  .filter-option.is-active{ font-weight: 600; color: var(--color-ink); }
  .filter-option input{ width:18px; height:18px; accent-color: var(--color-gold); }
  .filter-option .count{ margin-left:auto; color: var(--fg-muted); font-size: var(--fs-xs); }
  .price-range{ display:flex; align-items:center; gap: var(--space-3); }
  .price-range input[type="number"]{ width:100%; height:40px; padding-inline: var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
  .swatch-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); }
  .swatch{ padding: 8px 14px; border:1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-xs); transition: border-color var(--dur-fast), background var(--dur-fast); }
  .swatch:hover, .swatch.is-active{ border-color: var(--color-ink); background: var(--color-ink); color: var(--color-on-ink); }

  .catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap:wrap; }
  .result-count{ font-size: var(--fs-sm); color: var(--fg-muted); }
  .toolbar-right{ display:flex; align-items:center; gap: var(--space-4); }
  .sort-select{ height:44px; padding-inline: var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
  .filters-open-btn{ display:inline-flex; align-items:center; gap: var(--space-2); height:44px; padding-inline: var(--space-4); border:1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
  @media (min-width:960px){ .filters-open-btn{ display:none; } }

  .active-chips{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
  .chip{ display:inline-flex; align-items:center; gap:6px; padding: 6px 8px 6px 14px; border-radius: var(--radius-pill); background: var(--color-bg-alt); font-size: var(--fs-xs); }
  .chip button{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .chip button:hover{ background: var(--color-ink); color: var(--color-on-ink); }

  .pagination{ display:flex; justify-content:center; align-items:center; gap: var(--space-2); margin-top: var(--space-8); }
  .pagination a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size: var(--fs-sm); transition: background var(--dur-fast); }
  .pagination a:hover, .pagination a.is-active{ background: var(--color-ink); color: var(--color-on-ink); }

  /* Mobile filter drawer reuses .mobile-drawer visuals but slides from left */
  .filters-drawer{ position: fixed; inset:0; z-index: var(--z-overlay); visibility:hidden; pointer-events:none; }
  .filters-drawer.is-open{ visibility:visible; pointer-events:auto; }
  .filters-drawer__scrim{ position:absolute; inset:0; background:rgba(20,17,13,0.5); opacity:0; transition: opacity var(--dur-base) var(--ease-out); }
  .filters-drawer.is-open .filters-drawer__scrim{ opacity:1; }
  .filters-drawer__panel{
    position:absolute; top:0; left:0; bottom:0; width:min(88vw,360px);
    background: var(--color-bg); padding: var(--space-6) var(--space-5);
    transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out);
    overflow-y:auto; display:flex; flex-direction:column; gap: var(--space-6);
  }
  .filters-drawer.is-open .filters-drawer__panel{ transform: translateX(0); }
  .filters-drawer__head{ display:flex; justify-content:space-between; align-items:center; }
  @media (min-width:960px){ .filters-drawer{ display:none; } }
  .filters-sidebar{ display:none; }
  @media (min-width:960px){ .filters-sidebar{ display:block; } }

  /* Brand chips — visible on phone and desktop (quick pick) */
  .brand-strip{
    display:flex; gap: var(--space-2);
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-5);
    padding-bottom: 2px;
  }
  .brand-strip::-webkit-scrollbar{ display:none; }
  .brand-strip__chip{
    flex-shrink:0;
    padding: 9px 14px;
    border:1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight:500; white-space:nowrap;
    color: inherit; text-decoration:none;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  }
  .brand-strip__chip:hover{ border-color: var(--color-ink); }
  .brand-strip__chip.is-active{
    background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink);
  }

  /* ---- Category tabs ---- */
  .cat-tabs{
    display:flex; gap: var(--space-2);
    overflow-x:auto; scrollbar-width:none;
    padding-block: var(--space-4);
    border-bottom:1px solid var(--border);
    margin-bottom: var(--space-6);
  }
  .cat-tabs::-webkit-scrollbar{ display:none; }
  .cat-tab{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:6px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border:1px solid var(--border);
    font-size: var(--fs-xs); font-weight:500; white-space:nowrap;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .cat-tab:hover{ border-color: var(--color-ink); }
  .cat-tab.is-active{ background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }
  .cat-tab__count{ opacity:0.6; font-variant-numeric: tabular-nums; }

  /* ---- Minimal layout (small categories: no filter facets, no sidebar) ---- */
  .catalog-layout--minimal{ grid-template-columns: 1fr; }
  .catalog-layout--minimal .filters-sidebar{ display:none !important; }

  .filter-option--toggle{ font-weight:500; }
  .filter-note{ font-size: var(--fs-2xs); color: var(--fg-muted); margin-top: var(--space-2); line-height:1.5; }
  .filters-empty{ font-size: var(--fs-sm); color: var(--fg-muted); }