/* ==========================================================================
   PddFalcon storefront — listing, filters, pagination
   ========================================================================== */

.s-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.s-toolbar__left { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-inline-size: 0; }
.s-toolbar__right { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.s-toolbar__count { color: var(--s-muted); font-size: var(--s-text-sm); }
.s-toolbar__filter { gap: 0.4rem; }
@media (min-width: 62rem) { .s-toolbar__filter { display: none; } }
.s-sort { min-inline-size: 11rem; min-block-size: 2.5rem; }
@media (max-width: 39.99rem) { .s-sort { min-inline-size: 8rem; } }
.s-resultshead { display: flex; align-items: center; gap: var(--s-3); }
.s-chipwrap { margin-block-end: var(--s-3); }
.s-chipwrap:empty { display: none; }

.s-listing { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) { .s-listing { grid-template-columns: 16rem minmax(0, 1fr); } }

.s-filters { display: none; }
@media (min-width: 62rem) { .s-filters { display: block; position: sticky; inset-block-start: 8.5rem; align-self: start; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); max-block-size: calc(100dvh - 9.5rem); overflow-y: auto; } }
.s-filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-4) var(--s-3); border-block-end: 1px solid var(--s-line); }
.s-filters__heading { font-size: var(--s-text-md); }
.s-filters__clear { color: var(--s-brand-500); font-size: var(--s-text-xs); font-weight: 600; }
.s-filters__applied { padding: var(--s-3) var(--s-4) 0; }
.s-filterform { padding: var(--s-2) var(--s-4) var(--s-4); }
.s-filters__group { padding-block: var(--s-3); border-block-end: 1px solid var(--s-line-soft); }
.s-filters__group:last-child { border-block-end: 0; }
.s-filters__title { margin-block-end: 0.35rem; font-family: var(--s-font-body); font-size: var(--s-text-xs); letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-muted); }
.s-filters__range { display: flex; align-items: center; gap: 0.4rem; margin-block-start: var(--s-2); }
.s-filters__range .s-input { min-block-size: 2.25rem; padding-inline: 0.5rem; font-size: var(--s-text-sm); }
.s-filters__submit { margin-block-start: var(--s-3); }

.s-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-block-start: var(--s-8); }
.s-pager a, .s-pager span { display: inline-grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: 0.6rem; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink-soft); font-size: var(--s-text-sm); font-weight: 600; }
.s-pager a:hover { border-color: var(--s-brand-500); color: var(--s-brand-800); }
.s-pager [aria-current], .s-pager .is-current { background: var(--s-brand-800); border-color: var(--s-brand-800); color: #fff; }
.s-pager .is-disabled { opacity: 0.4; }

/* Quick view */
.s-quick { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .s-quick { grid-template-columns: 1fr 1fr; } }
.s-quick__figure { border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: #fff; padding: var(--s-3); aspect-ratio: 1; }
.s-quick__figure img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.s-quick__thumbs { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; }
.s-quick__thumb { inline-size: 3.5rem; block-size: 3.5rem; padding: 2px; border: 1px solid var(--s-line); border-radius: var(--s-radius-sm); background: #fff; }
.s-quick__thumb.is-active { border-color: var(--s-brand-800); }
.s-quick__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.s-quick__title { font-size: var(--s-text-xl); }