/* Load with the document: no late theme, Back-row or scrollbar width changes. */
html:has(body.catalog-page){scrollbar-gutter:stable}
body.catalog-page{background:#fff}
/* A collection heading is content, not a tall promotional banner. */
.catalog-page main>.catalog-hero{min-height:0;padding-block:16px 0;justify-content:flex-start}
.catalog-page .catalog-hero #catalog-description{margin:8px 0 0;color:#75636d}
body.catalog-page main>.catalog-layout{padding-top:14px!important}
@media(min-width:981px){
  .catalog-page .header-category-rail{box-sizing:border-box;min-height:74px}
  /* Toolbar has its own row; sidebar and cards share the next row exactly. */
  .catalog-page .catalog-layout>.catalog-results-head{grid-column:2;grid-row:1}
  .catalog-page .catalog-layout>.catalog-filters{grid-column:1;grid-row:2}
  .catalog-page .catalog-layout>.catalog-results{grid-column:2;grid-row:2}
}
.catalog-page .catalog-results{min-width:0;min-height:min(480px,65vh)}
.catalog-page .catalog-results-head .result-count{min-height:20px}
/* Keep the product grid's 252px offset: give the saved gap to the sidebar. */
.catalog-page .catalog-layout{display:grid;grid-template-columns:calc(252px - var(--store-product-gap,12px)) minmax(0,1fr);column-gap:var(--store-product-gap,12px);row-gap:12px}
.catalog-page .catalog-layout>.catalog-results-head{margin:0;min-height:36px}
.catalog-page .catalog-filters{display:block}
.catalog-page .filter-panel-head{padding:0 16px;gap:12px}
.catalog-page .catalog-filters .filter-close{display:none}
.catalog-page .catalog-filters .filter-group{padding:0 16px 14px}
.catalog-page .catalog-filters .filter-group.group-collapsed{padding-bottom:0}
.catalog-page .catalog-filters .filter-group h3{margin:0 -16px;color:var(--plum);font:600 14px/1.5 var(--sans);letter-spacing:0}
.catalog-page .catalog-filters .filter-group h3>button{min-height:48px;gap:10px;font:inherit;width:100%;padding-inline:16px;border-radius:0}
.catalog-page .catalog-filters .filter-group h3>button svg{width:14px;height:14px;flex:0 0 14px}
.catalog-page .catalog-filters .filter-group h3>button:focus-visible{outline:2px solid var(--magenta);outline-offset:2px;border-radius:4px}
.catalog-page #catalog-filter-options[hidden]{display:none!important}
.catalog-page .filter-check[hidden]{display:none!important}
.catalog-page [data-show-facet]{font-size:13px;font-weight:600;color:var(--plum)}
.catalog-filter-trigger,.catalog-filter-backdrop{display:none}
.catalog-page .catalog-loading{grid-column:1/-1;margin:24px 0;color:#75666e;font:400 14px/1.6 var(--sans)}
@media(max-width:980px){
  .catalog-page .catalog-layout{display:block}
  .catalog-page .catalog-layout>.catalog-results-head{margin-bottom:12px}
  .catalog-page .catalog-layout .catalog-filters{display:none!important}
  .catalog-page .catalog-filter-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:0 0 14px;padding:9px 18px;border:1px solid #e5d5de;border-radius:24px;background:#fff;color:var(--plum);font:600 14px/1.4 var(--sans);cursor:pointer}
  .catalog-page .filter-drawer-open .catalog-filters{display:block!important;position:fixed!important;inset:0 auto 0 0!important;z-index:3101;width:min(340px,calc(100% - 32px))!important;height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;margin:0!important;padding:0 0 max(16px,env(safe-area-inset-bottom))!important;border:0;border-radius:0;background:#fff;box-shadow:12px 0 44px #32152630}
  .catalog-page .filter-drawer-open .filter-panel-head{position:sticky;top:0;z-index:2;min-height:58px;background:#fff}
  .catalog-page .catalog-filters .filter-close{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin:0;padding:0;border:1px solid #e4dbe0;border-radius:50%;background:#fff;color:var(--plum)}
  .catalog-page .filter-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .catalog-page .filter-drawer-open .catalog-filter-backdrop{display:block;position:fixed;inset:0;z-index:3100;background:#24121d70;backdrop-filter:blur(2px)}
  .catalog-filter-trigger:focus-visible,.catalog-page .filter-close:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
}
/* Fade newly rendered cards in place, without moving the heading or toolbar. */
@media(prefers-reduced-motion:no-preference){
  .catalog-page #catalog-grid>.product-card{animation:catalog-card-enter .18s ease-out both}
  @keyframes catalog-card-enter{from{opacity:0}to{opacity:1}}
}