/* ─────────────────────────────────────────────────────────────────────
   LINEN — Collection page (filter sidebar + product grid)
   ───────────────────────────────────────────────────────────────────── */

.main-collection {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 8rem);
}

/* Page header */
.main-collection__header {
  text-align: center;
  margin: clamp(2rem, 5vw, 4rem) auto;
  max-width: 760px;
}
.main-collection__header .eyebrow {
  display: inline-flex;
  margin-bottom: var(--space-3);
}
.main-collection__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.main-collection__description {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Layout — sidebar + grid */
.main-collection__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .main-collection__layout { grid-template-columns: 1fr; }
}

/* Toolbar above the products grid: mobile filter trigger | count | sort.
   Markup uses .main-collection__toolbar / __filter-trigger / __count / __sort. */
.main-collection__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.main-collection__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.main-collection__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.main-collection__sort .form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
/* Mobile-only: filter trigger lives in the toolbar at <=900px */
.main-collection__filter-trigger {
  display: none;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.main-collection__filter-trigger:hover {
  border-color: var(--color-text);
  background: var(--color-surface);
}
.main-collection__filter-trigger svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .main-collection__filter-trigger { display: inline-flex; }
}
/* Sort pill — small inline select on the right of the toolbar. Stroke
   colour in the chevron must match the dark theme (was inherited from the
   light-mode studio CSS — invisible on the ink canvas). */
.form-select {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 8px 32px 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  appearance: none;
  width: auto;
  min-width: 160px;
  max-width: 240px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23F5F5F5' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color var(--transition), color var(--transition);
}
.form-select:hover { border-color: var(--color-text); }
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-select option {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Filter sidebar */
.filter-sidebar {
  display: grid;
  gap: var(--space-6);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}
/* Reset native <fieldset> chrome (default 2px groove border that was
   bleeding through and overlapping the legend), then apply Linen
   spacing + a single hairline divider between groups. */
.filter-group {
  display: grid;
  gap: var(--space-3);
  border: 0;
  margin: 0;
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-group + .filter-group { padding-top: var(--space-4); }
.form-label,
.filter-group legend {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  /* Force <legend> to sit as a normal block, not floated against the
     fieldset's top border. */
  display: block;
  padding: 0;
  width: 100%;
  float: none;
}
/* Sidebar header (Filter + Clear all) */
.filter-sidebar__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
.filter-sidebar__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
}
.filter-sidebar__clear {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 0;
}
.filter-sidebar__clear:hover { color: var(--color-accent); }

.filter-form { display: grid; gap: var(--space-5); }
.filter-group__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  padding: 0;
}

/* Checklist (categories, availability) */
.filter-checklist { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.filter-check {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition);
}
/* Hide the native input visually but keep it accessible. */
.filter-check input[type="checkbox"],
.filter-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
/* Custom box styled via the explicit .filter-check__box span. */
.filter-check__box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-text);
  display: inline-block;
  background: transparent;
  transition: background var(--transition);
}
/* Radios get a circular variant of the same box so the rating fieldset
   reads as single-select rather than multi-select. */
.filter-check input[type="radio"] ~ .filter-check__box { border-radius: 50%; }
.filter-check input[type="checkbox"]:checked ~ .filter-check__box {
  background: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7l3 3 5-6' fill='none' stroke='%23FBF8F1' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.filter-check input[type="radio"]:checked ~ .filter-check__box {
  background: var(--color-text);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}
.filter-check input[type="checkbox"]:checked ~ .filter-check__label,
.filter-check input[type="radio"]:checked ~ .filter-check__label { color: var(--color-text); }
.filter-check__label { line-height: 1.3; }
.filter-check__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

/* Size pills */
.filter-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.filter-size input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.filter-size:has(input[type="checkbox"]:checked) {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

/* Price range */
.filter-price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--space-3);
}
.filter-price label { display: grid; gap: 4px; }
.filter-price__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.filter-price input {
  border: 0;
  border-bottom: 1px solid var(--color-text);
  background: transparent;
  padding: 6px 0;
  font-size: 13px;
  font-family: var(--font-mono);
  width: 100%;
}
.filter-price__sep { color: var(--color-text-muted); padding-bottom: 6px; }
.filter-price__hint {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}

.active-filters {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.active-filters__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.active-filters__pill > span {
  line-height: 1;
}
.active-filters__pill > button {
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}
.active-filters__pill > button:hover {
  background: var(--color-accent);
}
.active-filters__clear {
  display: inline-flex;
  align-items: center;
}
.active-filters__clear > button {
  border: 0;
  background: transparent;
  padding: 6px 4px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.active-filters__clear > button:hover {
  color: var(--color-text);
}

/* Product grid (uses .linen-card via the snippet) */
.product-grid {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem) clamp(1rem, 1.6vw, 1.75rem);
}
.product-grid--2 { grid-template-columns: repeat(2, 1fr); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--4 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1100px) {
  .product-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .product-grid--3, .product-grid--4 { grid-template-columns: 1fr 1fr; }
}

/* Pagination styles moved to /assets/common.css (used by every list page). */

/* ── Mobile filter drawer (≤900px) ────────────────────────────────────
   Desktop layout: sidebar sits inline as a column (top of file).
   Mobile: sidebar becomes a fixed slide-in panel from the left, behind
   a scrim. JS toggles .filter-sidebar--open and .has-filter-open on body. */
.filter-backdrop { display: none; }
.filter-sidebar__close {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.filter-sidebar__close .icon { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .filter-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 210;
    width: min(88vw, 380px);
    background: var(--color-paper);
    padding: var(--space-5);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 380ms var(--ease);
    box-shadow: 0 0 80px rgba(0,0,0,0.18);
    /* Cancel desktop stickiness */
    top: 0;
  }
  .filter-sidebar--open { transform: translateX(0); }
  .filter-sidebar__close { display: inline-flex; }
  .filter-sidebar__top {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: var(--color-overlay, rgba(0,0,0,0.45));
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--ease);
  }
  body.has-filter-open .filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Empty state */
.collection-empty {
  text-align: center;
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.collection-empty h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  margin-bottom: var(--space-4);
}