/* ==========================================================================
   ShopFront — Category / shop listing
   --------------------------------------------------------------------------
   Loaded by category.html only. styles.css already ships the header,
   footer, drawer, buttons, badges, price and — importantly — `.product-card`
   itself, which this page renders through `window.shopfront.productCard`.
   Nothing here re-implements a card; the list view is the same card under a
   different grid.

   Same rules as styles.css and product.css:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", inline-start = right);
     · flat. Surfaces separate by border and tone.

   Contents
     01  Breadcrumb            (shared with the product page)
     02  Category head
     03  Line rail
     04  Shop layout
     05  Filters
     06  Toolbar
     07  Active chips
     08  Results grid & list view
     09  Empty state & load more
     10  Closing copy
     11  Responsive
     12  Motion, contrast & print
   ========================================================================== */


/* ==========================================================================
   01 · BREADCRUMB
   --------------------------------------------------------------------------
   Same component as the product page. It is duplicated rather than lifted
   into styles.css because only these two pages have one; if a third arrives,
   move this block up instead of copying it a second time.
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline-sm);
  margin: 0;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  inline-size: var(--space-1);
  block-size: var(--space-1);
  margin-inline-end: var(--gap-inline-sm);
  border-radius: var(--radius-circle);
  background: var(--border-strong);
  vertical-align: middle;
}
.breadcrumb__item[hidden] {
  display: none;
}

.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--fg-muted);
  transition: var(--transition-colors);
}
.breadcrumb__item a:hover {
  color: var(--brand-text);
}
.breadcrumb__item .icon {
  font-size: var(--icon-sm);
}
.breadcrumb__item [aria-current="page"] {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   02 · CATEGORY HEAD
   ========================================================================== */

.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-10);
  margin-block-start: var(--space-6);
  padding: var(--space-8);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(ellipse 32rem 18rem at 88% 0%, var(--bg-brand-subtle), transparent 70%),
    var(--bg-surface);
}

.cat-head__copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.cat-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cat-head__title {
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cat-head__lead {
  max-inline-size: 52ch;
  color: var(--fg-muted);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

.cat-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-sm) var(--gap-inline-lg);
  margin: 0;
  padding-block-start: var(--space-2);
}
.cat-head__facts li {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.cat-head__facts .icon {
  color: var(--brand);
  font-size: var(--icon-md);
}

/* A block frame with a definite height, not a centred grid — the note in
   product.css §03 explains why every picture box on these pages is one. */
.cat-head__media {
  display: block;
  block-size: 15rem;
  padding: 0;
  border-radius: var(--radius-2xl);
  background: var(--bg-surface-2);
  overflow: hidden;
}
.cat-head__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A line's own shot is a cutout: contain it and give it room, or the
   silhouette is cropped by the frame. */
.cat-head__media--contain {
  padding: var(--space-5);
  background:
    radial-gradient(circle at 50% 45%, var(--bg-brand-subtle), transparent 68%),
    var(--bg-surface-2);
}
.cat-head__media--contain img {
  object-fit: contain;
}


/* ==========================================================================
   03 · LINE RAIL
   ========================================================================== */

.line-rail {
  display: flex;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-8);
  padding-block: var(--space-1);
}

.line-tile {
  flex: 1 1 0;
  min-inline-size: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: var(--fg-muted);
  text-align: center;
  transition: var(--transition-elevate), var(--transition-colors);
}
.line-tile .icon {
  font-size: var(--icon-xl);
  transition: var(--transition-transform);
}
.line-tile span {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.line-tile b {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--fg-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.line-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-brand);
  color: var(--brand-text);
}
.line-tile:hover .icon {
  scale: 1.08;
}

/* The current line is a page state, not a hover state, so it is filled
   rather than tinted — it has to read at a glance which of seven is on. */
.line-tile.is-active {
  border-color: transparent;
  background: var(--gradient-brand-vivid);
  color: var(--fg-on-brand);
}
.line-tile.is-active b {
  background: oklch(0 0 0 / 0.22);
  color: inherit;
}


/* ==========================================================================
   04 · SHOP LAYOUT
   ========================================================================== */

/* Named areas rather than source order, because the three parts reflow into
   a different order at each width and only one of those orders can be the
   markup's. On a wide screen the sidebar runs down the inline-start and the
   toolbar caps the results column; collapsed, the toolbar comes first
   because it holds the button that opens the filters. */
.shop {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  grid-template-areas:
    "filters toolbar"
    "filters results";
  gap: var(--space-4) var(--gap-grid-lg);
  align-items: start;
  margin-block-start: var(--space-8);
}

.toolbar { grid-area: toolbar; }
.filters { grid-area: filters; }
.results { grid-area: results; }


/* ==========================================================================
   05 · FILTERS
   ========================================================================== */

.filters {
  position: sticky;
  inset-block-start: calc(var(--header-height-compact) + var(--space-4));
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
  overflow: hidden;
}

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-sm);
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.filters__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
}
.filters__title .icon {
  color: var(--brand);
}

.filters__clear {
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: var(--transition-colors);
}
.filters__clear:hover {
  color: var(--brand-hover);
}
.filters__clear[hidden] {
  display: none;
}

.filters__body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}

.filter-group {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.filter-group + .filter-group {
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}

.filter-group__label {
  padding: 0;
  margin-block-end: var(--space-3);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.filter-group__set {
  display: grid;
  gap: var(--space-1);
}

/* ---- Radio-style option ----------------------------------------------- */
.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  min-block-size: var(--space-10);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--fg-body);
  font-size: var(--text-md);
  text-align: start;
  transition: var(--transition-colors);
}
.filter-opt:hover {
  background: var(--bg-surface-2);
  color: var(--brand-text);
}

.filter-opt__mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--radius-circle);
  transition: var(--transition-colors);
}
.filter-opt__mark::after {
  content: "";
  inline-size: var(--space-2-5);
  block-size: var(--space-2-5);
  border-radius: var(--radius-circle);
  background: var(--brand);
  scale: 0;
  transition: scale var(--duration-fast) var(--ease-spring);
}

.filter-opt.is-selected {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}
.filter-opt.is-selected .filter-opt__mark {
  border-color: var(--brand);
}
.filter-opt.is-selected .filter-opt__mark::after {
  scale: 1;
}

.filter-opt__star {
  color: var(--rating);
  font-size: var(--icon-sm);
}

/* ---- Checkbox --------------------------------------------------------- */
.filter-check {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  min-block-size: var(--space-10);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--fg-body);
  font-size: var(--text-md);
  cursor: pointer;
  transition: var(--transition-colors);
}
.filter-check:hover {
  background: var(--bg-surface-2);
}

/* Hidden from sight, not from the keyboard or the accessibility tree. */
.filter-check input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.filter-check__box {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: transparent;
  font-size: var(--icon-sm);
  transition: var(--transition-colors);
}
.filter-check input:checked ~ .filter-check__box {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--fg-on-brand);
}
.filter-check input:focus-visible ~ .filter-check__box {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}
.filter-check input:checked ~ .filter-check__text {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}

.filter-check__count {
  margin-inline-start: auto;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.filters__help {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-accent-subtle);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  transition: var(--transition-colors);
}
.filters__help b {
  display: block;
  color: var(--accent-text);
  font-size: var(--text-sm);
}
.filters__help .icon {
  flex: none;
  color: var(--accent-text);
}


/* ==========================================================================
   06 · TOOLBAR
   ========================================================================== */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

/* The disclosure trigger only exists once the sidebar has collapsed. */
.toolbar__filters {
  display: none;
  align-items: center;
  gap: var(--gap-inline-sm);
  min-block-size: var(--btn-height);
  padding-inline: var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--btn-radius);
  color: var(--fg-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.toolbar__filters:hover {
  border-color: var(--border-brand);
  color: var(--brand-text);
}
.toolbar__badge {
  display: grid;
  place-items: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--fg-on-brand);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.toolbar__badge[hidden] {
  display: none;
}

.toolbar__count {
  color: var(--fg-muted);
  font-size: var(--text-md);
}
.toolbar__count b {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}

.toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  margin-inline-start: auto;
}
.toolbar__sort-label {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* A real <select>: the platform menu is keyboard-accessible, scrolls on a
   phone and needs no JavaScript. Only the chrome around it is ours. */
.select {
  position: relative;
  display: flex;
  align-items: center;
}
.select__input {
  appearance: none;
  min-block-size: var(--btn-height);
  padding-inline: var(--space-4) var(--space-9);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--btn-radius);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: var(--transition-colors);
}
.select__input:hover {
  border-color: var(--border-brand);
}
.select__caret {
  position: absolute;
  inset-inline-end: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--icon-md);
  pointer-events: none;
}

.toolbar__view {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--btn-radius);
  background: var(--bg-inset);
}

.view-btn {
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  transition: var(--transition-colors);
}
.view-btn:hover {
  color: var(--brand-text);
}
.view-btn.is-active {
  background: var(--bg-surface);
  color: var(--brand-text);
}


/* ==========================================================================
   07 · ACTIVE CHIPS
   ========================================================================== */

.active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-inline-sm);
  margin-block-start: var(--space-4);
}
.active-chips[hidden] {
  display: none;
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  min-block-size: var(--space-9);
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.active-chip .icon {
  font-size: var(--icon-sm);
  opacity: 0.7;
}
.active-chip:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--fg-on-brand);
}
.active-chip:hover .icon {
  opacity: 1;
}


/* ==========================================================================
   08 · RESULTS GRID & LIST VIEW
   ========================================================================== */

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin-block-start: var(--space-5);
}

/* Out of stock. The card stays legible and clickable — the product page is
   still worth reading — but the artwork drops back and the cart button is
   disabled rather than quietly failing. */
.product-card--out .product-card__media {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.product-card--out .product-card__cart:disabled {
  background: var(--bg-inset);
  color: var(--fg-subtle);
  cursor: not-allowed;
}

/* Corner flag for the two states worth calling out on a listing. Sits over
   the card's own hover ring, which is why it takes a z-index. */
.product-card__flag {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  pointer-events: none;
}
.product-card__flag .icon {
  font-size: var(--icon-sm);
}
.product-card__flag--new {
  background: var(--bg-accent-subtle);
  color: var(--accent-text);
}
.product-card__flag--best {
  background: var(--brand);
  color: var(--fg-on-brand);
}
.product-card__flag--out {
  background: var(--bg-inset);
  color: var(--fg-muted);
}

/* ---- List view --------------------------------------------------------
   The same card, re-flowed. Grid areas rather than a second markup shape:
   the card's children keep their order in the DOM and only their placement
   changes, so nothing about `.product-card` itself has to know. */
.results-grid--list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-inline-lg);
}

.results-grid--list .product-card {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas:
    "media head"
    "media title"
    "media sub"
    "media foot";
  align-content: start;
  column-gap: var(--space-6);
}
.results-grid--list .product-card__head   { grid-area: head; }
.results-grid--list .product-card__media  { grid-area: media; }
.results-grid--list .product-card__title  { grid-area: title; }
.results-grid--list .product-card__sub    { grid-area: sub; }
.results-grid--list .product-card__foot   { grid-area: foot; }

.results-grid--list .product-card__media {
  block-size: 100%;
  min-block-size: 10rem;
  margin-block: 0;
}
.results-grid--list .product-card__title {
  font-size: var(--text-2xl);
}
.results-grid--list .product-card__sub {
  max-inline-size: 60ch;
}
/* The flag stays at the inline-start in this view too, which puts it over
   the artwork where it belongs. Moving it to the other end would land it on
   top of the wishlist button, which lives in that corner. */


/* ==========================================================================
   09 · EMPTY STATE & LOAD MORE
   ========================================================================== */

.results-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-16) var(--space-6);
  border: var(--border-hairline) dashed var(--border-strong);
  border-radius: var(--card-radius);
  text-align: center;
}
.results-empty[hidden] {
  display: none;
}
.results-empty b {
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
}
.results-empty span:not(.icon-tile) {
  max-inline-size: 44ch;
  color: var(--fg-muted);
  font-size: var(--text-md);
}
.results-empty .btn {
  margin-block-start: var(--space-2);
}

.results-more {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}
.results-more[hidden] {
  display: none;
}
.results-more__status {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* How much of the list is already on screen. A page counter alone does not
   say how much is left; a bar does it without a word. */
.results-more__track {
  inline-size: min(18rem, 100%);
  block-size: var(--space-1-5);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  overflow: hidden;
}
.results-more__fill {
  display: block;
  inline-size: var(--shown, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: inline-size var(--duration-base) var(--ease-out);
}


/* ==========================================================================
   10 · CLOSING COPY
   ========================================================================== */

.cat-copy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: var(--gap-grid-lg);
  align-items: start;
}

.cat-copy .prose {
  max-inline-size: 68ch;
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.cat-copy .prose > * + * {
  margin-block-start: var(--space-4);
}

.cat-copy__points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
}
.cat-copy__points li {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.cat-copy__points b {
  display: block;
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   11 · RESPONSIVE
   --------------------------------------------------------------------------
   Same breakpoints as styles.css, so the sheets reflow together.
   ========================================================================== */

@media (max-width: 1240px) {
  .shop {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--gap-grid);
  }
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cat-head__title {
    font-size: var(--text-5xl);
  }
}

/* The sidebar stops paying for itself before the grid does: at this width it
   costs the results a whole column. It becomes a disclosure above them —
   not a modal sheet, which would need a focus trap, a scroll lock and an
   inert sibling to do the same job. */
@media (max-width: 1150px) {
  .shop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "toolbar"
      "filters"
      "results";
  }

  /* Seven tiles no longer fit the content column here, so the rail starts
     scrolling. It bleeds to the viewport edge from this width down, or the
     tile it is cutting looks like a rendering fault rather than a hint that
     there is more to swipe. */
  .line-rail {
    margin-inline: calc(var(--container-inline) * -1);
    padding-inline: var(--container-inline);
  }
  .line-tile {
    flex: 0 0 9rem;
  }

  .filters {
    position: static;
    display: none;
  }
  .filters.is-open {
    display: block;
  }
  .filters__head {
    display: none;
  }
  .filters__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .filter-group + .filter-group {
    padding-block-start: 0;
    border-block-start: 0;
  }
  .filters__help {
    grid-column: 1 / -1;
  }

  .toolbar__filters {
    display: inline-flex;
  }

  .cat-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .cat-head__media {
    block-size: 12rem;
    order: -1;
  }
  .results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cat-copy__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .cat-head {
    padding: var(--space-5);
  }
  .cat-head__lead {
    font-size: var(--text-lg);
  }

  .line-tile {
    flex: 0 0 8.5rem;
  }

  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-inline-lg);
  }

  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar__sort {
    order: 3;
    inline-size: 100%;
    margin-inline-start: 0;
  }
  .toolbar__sort .select {
    flex: 1;
  }
  .toolbar__sort .select__input {
    inline-size: 100%;
  }
  .toolbar__count {
    margin-inline-start: auto;
  }

  .filters__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .filter-group + .filter-group {
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--border-subtle);
  }

  /* One column of cards is taller than a phone screen and hides the rest of
     the list; the list view keeps the artwork small and the price visible. */
  .results-grid--list .product-card {
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--space-4);
  }
  .results-grid--list .product-card__media {
    min-block-size: 7rem;
  }
  .results-grid--list .product-card__title {
    font-size: var(--text-lg);
  }
}

@media (max-width: 540px) {
  .results-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .toolbar__view {
    display: none;
  }
  .cat-head__title {
    font-size: var(--text-4xl);
  }
  .cat-head__facts {
    gap: var(--space-2);
  }
}


/* ==========================================================================
   12 · MOTION, CONTRAST & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .line-tile:hover {
    transform: none;
  }
  .results-more__fill {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .filters,
  .toolbar,
  .line-tile,
  .cat-copy__points {
    border-width: var(--border-thick);
  }
}

@media (forced-colors: active) {
  .filters,
  .toolbar,
  .line-tile,
  .cat-copy__points,
  .cat-head {
    border: 1px solid CanvasText;
  }
  .line-tile.is-active,
  .view-btn.is-active,
  .filter-opt.is-selected,
  .active-chip {
    border: var(--border-thick) solid Highlight;
  }
  .results-more__fill {
    background: Highlight;
  }
}

@media print {
  .filters,
  .toolbar,
  .active-chips,
  .results-more,
  .line-rail {
    display: none !important;
  }
  .shop {
    grid-template-columns: minmax(0, 1fr);
  }
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}