@layer sections {
  .collection { position: relative; }

  /* ---- toolbar ---- */
  .collection__body { padding-top: calc(var(--section-y) * 0.5); }
  .collection__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.25rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .collection__toolbar-left, .collection__toolbar-right { display: flex; align-items: center; gap: 1rem; }
  .collection__count { font-size: var(--fs-s); color: var(--fg-soft); letter-spacing: 0.04em; }
  .collection__density { display: flex; gap: 0.25rem; }
  .collection__density .icon-btn { width: 2.6rem; height: 2.6rem; opacity: 0.55; transition: opacity var(--dur-s), background var(--dur-s); }
  .collection__density .icon-btn[aria-pressed='true'] { opacity: 1; background: color-mix(in oklab, var(--fg) 8%, transparent); }
  .collection__sort { display: flex; align-items: center; gap: 0.75rem; }
  .collection__sort-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); }
  .sort-select { position: relative; }
  .sort-select__el { appearance: none; padding: 0.7rem 2.6rem 0.7rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--fg); font-size: var(--fs-s); font-weight: 600; cursor: pointer; transition: border-color var(--dur-s); }
  .sort-select__el:hover { border-color: var(--fg); }
  .sort-select__el:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sort-select .icon { position: absolute; right: 0.9rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; pointer-events: none; }
  @media (max-width: 749px) {
    .collection__sort-label, .collection__density { display: none; }
    .collection__toolbar { gap: 0.75rem; }
    .collection__toolbar-left, .collection__toolbar-right { gap: 0.75rem; }
    .collection__filter-btn { padding-inline: 1rem; }
    .sort-select__el { padding: 0.6rem 2.1rem 0.6rem 1rem; font-size: var(--fs-xs); }
    .collection__count { font-size: var(--fs-xs); }
  }

  .collection__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
  .collection__chips .chip { gap: 0.5rem; text-decoration: none; }
  .collection__chips .chip .icon { width: 0.85rem; height: 0.85rem; }
  .collection__clear { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; color: var(--fg-soft); }

  /* ---- grid ---- */
  .collection__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(0.9rem, 0.4rem + 2vw, 2.25rem); list-style: none; margin: 0; padding: 0; transition: opacity 0.3s; }
  .collection.is-loading .collection__grid { opacity: 0.45; pointer-events: none; }
  @media (min-width: 750px) { .collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .collection__grid[data-density='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .collection__grid[data-density='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .collection__cell { display: flex; }
  .collection__cell > .pcard { width: 100%; }
  .collection__cell .pcard { animation: cell-in 0.9s var(--ease-out) both; animation-delay: calc(var(--enter, 0) * 70ms); }
  @keyframes cell-in { from { opacity: 0; translate: 0 24px; } }
  /* narrow cards: icon-only quick add */
  @container (max-width: 15rem) { .pcard__quick span { display: none; } .pcard__quick { padding: 0; width: 2.75rem; justify-content: center; } }

  .collection__pagination { display: grid; justify-items: center; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
  .collection__showing { font-size: var(--fs-s); color: var(--fg-soft); }
  .collection.has-js-pagination .collection__pagination .pagination { display: none; }
  .collection.has-js-pagination .collection__pagination:not(:has([data-load-more])) { display: none; }
  .collection__pagination [data-load-more][aria-busy='true'] { opacity: 0.6; pointer-events: none; }
  .collection__empty { display: grid; justify-items: center; gap: 1rem; text-align: center; padding-block: clamp(3rem, 8vw, 7rem); }

  /* ---- filter drawer ---- */
  .filter-drawer {
    position: fixed; inset: 0 auto 0 0; margin: 0; width: min(100vw, 26rem); height: 100%; max-height: 100dvh; z-index: var(--z-drawer);
    background: var(--c-paper); color: var(--c-bark); box-shadow: 50px 0 90px -40px rgb(0 0 0 / 0.6);
    transform: translateX(-105%); transition: transform 0.7s var(--ease-out), display 0.7s allow-discrete, overlay 0.7s allow-discrete;
  }
  .filter-drawer[open] { transform: none; }
  @starting-style { .filter-drawer[open] { transform: translateX(-105%); } }
  .filter-drawer::backdrop { background: rgb(10 6 4 / 0.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.5s var(--ease-out), display 0.5s allow-discrete, overlay 0.5s allow-discrete; }
  .filter-drawer[open]::backdrop { opacity: 1; }
  @starting-style { .filter-drawer[open]::backdrop { opacity: 0; } }
  .filter-drawer__panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .filter-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
  .filter-drawer__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 450; letter-spacing: -0.015em; }
  .filter-drawer__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .filter-drawer__groups { flex: 1; overflow-y: auto; padding: 0.5rem 1.5rem 1.5rem; overscroll-behavior: contain; }
  .filter { padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
  .filter__label { float: left; width: 100%; padding: 0; margin-bottom: 1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); }
  .filter__label + * { clear: both; }
  .filter__list { display: grid; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
  .filter__opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 0.55rem 0.2rem; cursor: pointer; }
  .filter__opt input { position: absolute; opacity: 0; pointer-events: none; }
  .filter__box { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1.5px solid color-mix(in oklab, var(--fg) 40%, transparent); border-radius: 6px; color: transparent; transition: background var(--dur-s), border-color var(--dur-s), color var(--dur-s), transform 0.5s var(--ease-spring); }
  .filter__box .icon { width: 0.95rem; height: 0.95rem; }
  .filter__opt input:checked + .filter__box { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); transform: scale(1.06); }
  .filter__opt input:focus-visible + .filter__box { outline: 2px solid var(--c-maroon); outline-offset: 3px; }
  .filter__count { font-size: var(--fs-xs); color: var(--fg-soft); font-variant-numeric: tabular-nums; }
  .filter__opt.is-disabled { opacity: 0.4; cursor: not-allowed; }
  .filter__price { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .filter__price-field { display: grid; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
  .filter__input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: transparent; font-size: var(--fs-m); color: var(--fg); font-variant-numeric: tabular-nums; }
  .filter__input:focus { outline: 0; border-color: var(--c-gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-gold) 22%, transparent); }
  .filter-drawer__foot { display: flex; gap: 0.75rem; padding: 1.1rem 1.5rem calc(1.1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .filter-drawer__foot .btn { flex: 1; padding-inline: 0.75rem; letter-spacing: 0.02em; }

  /* ---- search page ---- */
  .search-page__count { margin-bottom: 1.75rem; }
  .search-page__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
  .search-result { display: grid; align-content: start; gap: 0.6rem; width: 100%; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); text-decoration: none; transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color var(--dur-s); }
  .search-result:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--c-gold) 70%, transparent); box-shadow: 0 30px 50px -30px rgb(73 40 17 / 0.5); }
  .search-result__title { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.015em; }
  .search-result__excerpt { color: var(--fg-soft); font-size: var(--fs-s); line-height: 1.6; }
  .search-result__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .search-result__more .icon { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-out); }
  .search-result:hover .search-result__more .icon { transform: translateX(5px); }
}