/* COLLECTION / SHOP PAGE */

.coll-hero{ position:relative; height:min(56vh, 460px); min-height:320px; overflow:hidden; }
.coll-hero .ph{ position:absolute; inset:0; }
.coll-hero__content{
  position:absolute; left:0; right:0; bottom: var(--sp-7);
}

/* .cat-tabs lives in components.css — shared with the Drops archive tabs */

.coll-layout{ display:grid; grid-template-columns: 1fr; gap: var(--sp-7); padding-block: var(--sp-7); }
@media(min-width:1024px){ .coll-layout{ grid-template-columns: 240px minmax(0,1fr); } }

/* ---------------------------------------------------------
   FILTER FORM
   One element, two layouts: a static sidebar column from 1024px up, and an
   off-canvas drawer below that. There is deliberately no second copy of
   these controls for mobile — duplicate checkboxes with the same names
   would be invalid HTML and could disagree with each other.
   --------------------------------------------------------- */
.filters{ display:flex; flex-direction:column; }
.filters__head{ display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.filters__body{ flex:1; }
.filters__foot{ display:flex; flex-direction:column; gap: var(--sp-3); margin-top: var(--sp-5); }
.filters__foot [data-filter-submit][hidden]{ display:none; }
.filters__scrim{ position:fixed; inset:0; background:rgba(10,10,10,.5); z-index:84; }
.filters__scrim[hidden]{ display:none; }

@media(max-width:1023.98px){
  .filters{
    position:fixed; top:0; left:0; z-index:85;
    width:min(340px, 86vw); height:100%;
    background: var(--tt-white); padding: var(--sp-5);
    overflow-y:auto;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
  }
  .filters.is-open{ transform: translateX(0); }
}
@media(min-width:1024px){
  /* The mobile-only scrim and close buttons never apply on desktop; the
     .hide-desktop utility already handles the buttons. */
  .filters__scrim{ display:none; }
}

.filter-group summary::-webkit-details-marker{ display:none; }
.filter-group summary::after{ content:"+"; font-family: var(--font-body); font-weight:400; font-size:1rem; }
.filter-group[open] summary::after{ content:"–"; }

/* ---------------------------------------------------------
   RESULTS
   --------------------------------------------------------- */
/* While an AJAX filter request is in flight, dim the grid rather than
   emptying it — a half-second of blank space reads as "broken", a dimmed
   grid reads as "working". */
[data-product-results]{ transition: opacity var(--dur-base) var(--ease); }
[data-product-results].is-loading{ opacity:.45; pointer-events:none; }

.pagination{ display:flex; justify-content:center; gap: var(--sp-2); margin-top: var(--sp-8); flex-wrap:wrap; }
.pagination .page-numbers{
  min-width:40px; height:40px; padding:0 12px; border:1.5px solid var(--c-border);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:0.9rem;
}
.pagination .page-numbers:hover{ border-color: var(--tt-black); }
.pagination .page-numbers.current{ background: var(--tt-black); border-color: var(--tt-black); color: var(--tt-white); }

.coll-empty{ padding-block: var(--sp-8); text-align:center; }

.coll-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom:1px solid var(--c-border);
}
.coll-sort{ display:flex; align-items:center; gap: var(--sp-2); margin-left:auto; }