.plp {
  /* No max-width cap — the grid always fills the viewport (minus the small
     edge padding below), on huge monitors just as much as on tablets,
     instead of centering with big empty margins on wide screens. */
  max-width: none;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.plp-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-24);
  align-items: start;
}

@media (max-width: 900px) {
  .plp-layout {
    grid-template-columns: 1fr;
  }

  /* This view has no heading above the Filter button (unlike the PDP/cart/
     checkout pages this padding-top convention was written for), so the
     full 32px reads as dead empty space with nothing to justify it. Only
     reachable below 900px anyway — the Filter trigger itself doesn't
     exist above that width. */
  .plp {
    padding-top: var(--space-4);
  }
}

/* Tighter gutters than the default admin/form grid gap — less space eaten
   by margins means each product image renders bigger and more eye-catching. */
.plp-layout .grid--3 {
  gap: var(--space-6) var(--space-4);
}

/* A 2-up grid reads much better than one giant card per screen when most
   of this catalog's traffic is on a phone — matches the density shoppers
   already expect from any mobile shopping app. */
@media (max-width: 640px) {
  .plp-layout .grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-3);
  }

  .plp {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 380px) {
  .plp-layout .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile filter drawer ------------------------------------------------
   Desktop keeps the plain sidebar (180px column, always visible, no extra
   markup activated). Below 900px, the "Filter" trigger button and its
   backdrop are the only new visible elements — the <aside> itself becomes
   an off-canvas panel, hidden by translating it out of view until
   #plp-filter-trigger (see plp.js) adds --open. */
.plp-filter-trigger,
.plp-filter-backdrop,
.plp-filter-drawer__close {
  display: none;
}

@media (max-width: 900px) {
  .plp-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 600;
    background: var(--color-surface);
    margin-bottom: var(--space-4);
  }

  .plp-filter-trigger:hover {
    border-color: var(--color-rust);
  }

  .plp-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(42, 37, 33, 0.5);
    z-index: 60;
  }

  .plp-filter-backdrop[hidden] {
    display: none;
  }

  .plp-layout .plp-filter-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(85vw, 340px);
    background: var(--color-ivory);
    z-index: 61;
    padding: var(--space-6);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    box-shadow: var(--shadow-lg);
  }

  .plp-layout .plp-filter-drawer.plp-filter-drawer--open {
    transform: translateX(0);
  }

  .plp-filter-drawer__close {
    display: block;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-size: var(--text-h2);
    line-height: 1;
    color: var(--color-ink-muted);
    padding: var(--space-1) var(--space-2);
  }

  /* Room for the close button above the panel's own "Filter" heading. */
  .plp-filter-drawer .filter-panel {
    margin-top: var(--space-6);
  }
}

.filter-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.filter-group {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-default);
}

.filter-group__title {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.filter-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-group__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  cursor: pointer;
}

.filter-group__option input {
  accent-color: var(--color-rust);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-group__option:has(input:checked) span {
  color: var(--color-rust);
  font-weight: 600;
}

.filter-panel__apply {
  width: 100%;
  margin-top: var(--space-2);
}

.filter-panel__clear {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-rust);
}

/* Dual-handle price range slider — two overlaid native range inputs with a
   shared visual track/fill bar. */
.price-filter__slider {
  position: relative;
  height: 24px;
  margin-bottom: var(--space-2);
}

.price-filter__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-sand-dark);
  border-radius: var(--radius-sm);
  transform: translateY(-50%);
}

.price-filter__track-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-rust);
  border-radius: var(--radius-sm);
}

.price-filter__slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  pointer-events: none;
}

.price-filter__slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-rust);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-sand-dark);
  cursor: pointer;
  margin-top: 0;
}

.price-filter__slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-rust);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-sand-dark);
  cursor: pointer;
}

.price-filter__slider input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}

.price-filter__values {
  display: flex;
  justify-content: space-between;
}