/* ============================================================
   SHARED ARCHIVE CHROME — /stones, /countries, /contributor.

   This file is the `.as-*` block that all three archive pages have in common:
   the banner's content column, the filter bar, the List/Gallery view toggle,
   the list frame (header row + rows + the stretched row link + the thumbnail),
   the `.is-grid` gallery reflow, the pager and the empty state.

   It was lifted VERBATIM out of public/css/stones-archive.css — class names are
   still the live WordPress theme's (generatepress-child/style.css ~1027-1480),
   because that theme is the spec for these pages and matching names keeps the
   two diffable by eye.

   ── HOW A PAGE USES IT ──────────────────────────────────────────────────────
   @push('head')
       @include('partials.archive.head')          {{-- this file + archive-view.js --}}
       <link rel="stylesheet" href="{{ asset('css/my-page.css') }}">
   @endpush

   ⚠️ ORDER IS LOAD-BEARING: the page stylesheet MUST come after this one. Most
   of what a page overrides (its own `.as-col-*` typography, its `--as-grid`)
   sits at the same specificity as the rules here, so "later wins" is the only
   thing separating them.

   ── WHAT A PAGE OWNS ────────────────────────────────────────────────────────
   Two custom properties and its own column classes:

     .as-wrap {
         --as-grid:        <grid-template-columns for .as-list-head AND .as-row>;
         --as-filter-cols: <grid-template-columns for .as-filters-inner>;
     }

   `--as-grid` is declared ONCE and consumed by both the header row and the data
   rows, which is what makes it impossible for the two to drift out of column
   alignment. Below 760px the row becomes a card and the page restates its own
   `grid-template-columns` / `grid-template-areas` there.

   ── WHAT THIS FILE DELIBERATELY DOES NOT CONTAIN ────────────────────────────
   Anything named after a specific page's data: `.as-col-num`, `.as-col-loc`,
   `.as-col-country`, `.as-col-date`, `.as-col-type`, `.as-col-status` and the
   `.as-badge--*` colour modifiers all live in stones-archive.css. `.as-loc-main`
   / `.as-loc-sub` / `.as-loc-sub-link` DO live here — they are the generic
   "primary line + secondary line inside one cell" pattern, not a stone concept.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Scoped to .as-wrap rather than :root so a PAGE-level stylesheet cannot
   quietly introduce site-wide globals; every rule below lives inside .as-wrap,
   so inheritance covers them. Values are the theme's, verbatim. */
.as-wrap {
    --ps-text-mid: var(--ps-text-soft, #475569);
    --ps-text-light: var(--ps-muted, #94a3b8);
    --ps-blue-pale: var(--ps-row-hover, #eff6ff);
    --ps-radius: 10px;
    --ps-shadow: var(--ps-shadow-sm, 0 2px 16px rgba(15, 23, 42, 0.08));

    /* Deliberately useless defaults. A page that forgets to set them gets a
       single-column list and a single-column filter bar — visibly wrong on
       first load, rather than subtly misaligned columns nobody notices. */
    --as-grid: 1fr;
    --as-filter-cols: 1fr;
    --as-pad-x: 18px;

    background: var(--ps-bg);
    min-height: 60vh;
}

/* ── Filter bar ─────────────────────────────────────────────────────────────
   A plain GET form in every page that uses it: every filtered listing stays a
   real, shareable, bookmarkable URL and keeps working with JavaScript off. */
.as-filters {
    background:var(--ps-surface);
    border-bottom: 1px solid var(--ps-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.as-filters-inner {
    /* ⚠️ DIVERGES from the theme, deliberately. The live stylesheet still caps
       this bar at the old 1000px while .as-content-inner was widened to the
       site-wide min(1600px,92vw) token, so on a wide desktop the filter row is
       visibly narrower than the list it filters. Both use the token here. */
    max-width: var(--ps-content);
    margin: 0 auto;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: var(--as-filter-cols);
    gap: 12px;
    align-items: end;
}
/* Visually hidden, still read aloud. Defined here rather than reused from the
   layout because this app has no .screen-reader-text rule — the one use in
   footer.blade carries an inline style instead. */
.as-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Collapsible filter bar (opt-in, MOBILE ONLY) ────────────────────────────
   A native <details>, so it opens with no JavaScript, is keyboard operable and
   announces its own expanded/collapsed state. No script means no toggle running
   after first paint, which is what keeps this page's CLS at 0.

   ⚠️ TWO ENGINE MODELS, and this bar has to work on both. Older engines hide a
   closed <details>'s children with a UA `display:none`; newer ones hide
   `::details-content` with `content-visibility` (Chrome here is the new model —
   verified with CSS.supports('selector(::details-content)')).

   That split cuts BOTH ways, which is why there are rules in both directions:

   • Above 600px the disclosure must look like it was never there. The markup
     ships WITHOUT `open` when no filter is active, so the content is forced
     visible — re-declaring `display` handles the old model, `content-visibility`
     the new one. Dropping either blanks the desktop filter bar on some engines.

   • Below 601px it must genuinely collapse — and `.as-filters-inner` already
     carries an author `display:grid`, which BEATS the old model's UA
     `display:none` (author styles always win over UA styles). Without the
     explicit `:not([open])` rule the panel would never close on those engines,
     silently undoing the whole feature on exactly the browsers that can't be
     checked here. */
.as-filters-summary { display: none; }

@media (min-width: 601px) {
    .as-filters-disclosure > .as-filters-inner { display: grid; }
    .as-filters-disclosure::details-content { content-visibility: visible; }
}

@media (max-width: 600px) {
    .as-filters-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;          /* comfortably past the 44px touch target */
        padding: 12px 20px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        color: var(--ps-text);
        list-style: none;          /* Firefox marker */
        -webkit-tap-highlight-color: transparent;
    }
    .as-filters-summary::-webkit-details-marker { display: none; }  /* Safari marker */
    .as-filters-summary:focus-visible {
        outline: 2px solid var(--ps-teal, #37959B);
        outline-offset: -2px;
    }
    /* Chevron: down when closed, up when open. */
    .as-filters-summary::after {
        content: '';
        margin-left: auto;
        width: 7px; height: 7px;
        border-right: 2px solid var(--ps-text-light);
        border-bottom: 2px solid var(--ps-text-light);
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.15s ease;
    }
    .as-filters-disclosure[open] > .as-filters-summary::after {
        transform: translateY(2px) rotate(-135deg);
    }
    .as-filters-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--ps-teal, #37959B);
        color: #fff;
        font-size: 12px;
        line-height: 1;
    }
    /* The summary already provides the top gutter. */
    .as-filters-disclosure > .as-filters-inner { padding-top: 0; }

    /* See the two-engine note above: this is what actually closes the panel on
       engines using the old display:none model, where the base
       `.as-filters-inner { display: grid }` would otherwise override the UA. */
    .as-filters-disclosure:not([open]) > .as-filters-inner { display: none; }
}

.as-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-filter-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ps-text-light);
}
.as-filter input[type="search"],
.as-filter select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--ps-border);
    border-radius: 8px;
    font-family: var(--ps-font);
    font-size: 14px;
    color: var(--ps-text);
    background: var(--ps-bg);
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.as-filter input[type="search"]:focus,
.as-filter select:focus {
    outline: none;
    border-color: var(--ps-blue);
    background:var(--ps-surface);
}
.as-filter select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23475569' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.as-filter-actions { flex-direction: row; align-items: stretch; gap: 8px; }
.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: var(--ps-font);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.as-btn-primary { background: var(--ps-navy); color: var(--ps-white) !important; }
.as-btn-primary:hover { background: var(--ps-blue); }
.as-btn-reset {
    background: transparent;
    color: var(--ps-text-mid) !important;
    border-color: var(--ps-border);
}
.as-btn-reset:hover { border-color: var(--ps-navy); color: var(--ps-navy) !important; }

/* ── Content column ─────────────────────────────────────────────────────── */
.as-content { padding: 24px 20px 60px; }
.as-content-inner { max-width: var(--ps-content); margin: 0 auto; }

/* ── View toggle: List (default) ⇄ Gallery ──────────────────────────────── */
.as-viewbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.as-viewbar-label {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--ps-text-light);
}
/* ── VIEW TOGGLE — a segmented control, not two buttons ─────────────────────
   The selected view used to be a solid navy block with white text. It read as
   a pressed BUTTON rather than a chosen segment, and next to the white cards it
   was the darkest thing on the page for something that is only a preference.

   The track is now the recessed surface and the SELECTED segment is the raised
   white one — the shape every phone uses for this control, so nobody has to
   learn it. The lift comes from the surface change plus a small shadow, not
   from colour, which is what keeps it quiet.

   ⚠️ ONE CONTROL, THREE ARCHIVES. /stones, /countries and /contributor all use
   these classes, so this changes all three together — which is the point: they
   were meant to look the same and a per-page override is how they stop. */
.as-view-toggle {
    display: inline-flex; border: 1px solid var(--ps-border);
    border-radius: 10px; padding: 3px; gap: 3px;
    background: var(--ps-surface-2);
}
.as-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; cursor: pointer; border-radius: 7px;
    padding: 7px 14px; font-family: var(--ps-font); font-size: 13px; font-weight: 700;
    color: var(--ps-muted); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.as-view-btn:hover { color: var(--ps-heading); }
/* ⚠️ WHITE IN BOTH THEMES, AND DELIBERATELY NOT A FLIPPING TOKEN.
   --ps-surface made the selected segment #121b2e in the dark theme: a dark pill
   on a dark track, which is the same "which one is selected?" problem the
   submit form's mode tiles had. The selected segment has to be the LIGHTEST
   thing in the control, and on a dark track that means white — the same answer
   the mode tiles arrived at.

   --ps-select-bg is NOT the token for this: it flips to navy on the light
   theme, where the segment is already correct as white. --ps-segment-* is
   declared identically in every palette precisely to say "this one does not
   flip", which is also what keeps ThemeTest's no-hardcoded-white guard honest
   rather than exempted. */
.as-view-btn.is-active {
    background: var(--ps-segment-bg);
    color: var(--ps-segment-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
}
.as-view-btn svg { flex: 0 0 auto; }

/* ⚠️ THE THREE-WAY TOGGLE OVERFLOWS THE NARROWEST PHONES, AND IT TAKES THE
   WHOLE PAGE WITH IT. Measured on /stones at a 320px viewport: `.as-viewbar`
   rendered 325px wide starting at x=13, so its right edge landed at 338 —
   document scrollWidth 337 against clientWidth 320, i.e. the horizontal body
   scroll this project has a documented history of. It also drags anything
   pinned to the viewport edges (the bottom tab bar renders 338px wide) out
   with it, which is how it was found.

   /stones is the only archive with THREE view buttons; countries and
   contributors have two and fit. So the fix is scoped to the width where it
   actually breaks rather than restyling the control everywhere.

   The label goes first — the buttons are self-explanatory and the word "VIEW"
   is the least informative 45px on the row — and the buttons then share what is
   left, shrinking their padding rather than their touch height. */
@media (max-width: 380px) {
    .as-viewbar-label { display: none; }
    .as-view-toggle { flex: 1; min-width: 0; }
    .as-view-btn { flex: 1; min-width: 0; justify-content: center; padding: 8px 6px; gap: 4px; }
}

/* Mobile-only "Sort by" select — desktop sorts via the header links. */
.as-mobile-sortbar { display: none; }

/* ── List header + rows ─────────────────────────────────────────────────── */
.as-list-head,
.as-row {
    display: grid;
    grid-template-columns: var(--as-grid);
    gap: 16px;
    padding-left: var(--as-pad-x);
    padding-right: var(--as-pad-x);
    box-sizing: border-box;
}
.as-list-head {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ps-text-light);
    border-bottom: 1px solid var(--ps-border);
    /* Match .as-list's 1px side borders so the header's grid origin and track
       widths equal the rows' (which sit inside that border) → pixel-exact
       columns. */
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}
.as-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background:var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow);
}
.as-list-head + .as-list {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}
/* The grid lives on .as-row (not on the link) so the link can be a stretched
   overlay covering the whole row while any link inside it — the "Hidden by"
   contributor link on /stones, for instance — stays independently clickable. */
.as-row {
    border-bottom: 1px solid var(--ps-border);
    position: relative;
    align-items: start;   /* every cell shares one baseline; a secondary line
                             inside a cell hangs below it. */
    padding-top: 14px;
    padding-bottom: 14px;
    color: var(--ps-text);
    transition: background 0.15s;
}
.as-row:last-child { border-bottom: none; }
.as-row:hover { background: var(--ps-blue-pale); }
.as-row-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-decoration: none !important;
}

/* Primary/secondary text inside one cell. Generic, not stone-specific: the
   secondary line is what carries "Hidden by …" on /stones and is available to
   any other archive that needs a sub-label. */
.as-loc-main {
    display: block;
    font-weight: 700;
    color: var(--ps-text);
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.as-loc-sub {
    display: block;
    font-size: 12px;
    color: var(--ps-text-light);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.as-loc-sub-link {   /* sits above the stretched overlay so it stays clickable */
    position: relative;
    z-index: 1;
    color: var(--ps-teal);
    font-weight: 600;
    text-decoration: none;
}
.as-loc-sub-link:hover { text-decoration: underline; }

/* Sortable header links — inherit the header's uppercase type, navy on
   hover/active. */
.as-list-head .as-sort { color: inherit; text-decoration: none; cursor: pointer; }
.as-list-head .as-sort:hover,
.as-list-head .as-sort-active { color: var(--ps-heading); }

/* ── Badges ─────────────────────────────────────────────────────────────────
   Shape only. The colour modifiers (.as-badge--golden, …) belong to whichever
   page defines that vocabulary. */
.as-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Gallery view ───────────────────────────────────────────────────────────
   The gallery is NOT a second markup tree: it is the same rows, reflowed.
   `.is-grid` is the only thing JS adds. The thumbnail is rendered into every
   row and kept display:none in list view — a display:none grid item consumes
   no track, so the list stays byte-identical to a build without the gallery.

   ⚠️ Anything added here must keep that true. The moment a page renders a
   second, gallery-only copy of a row, first paint stops being JS-free and the
   page doubles its images. */
.as-thumb { display: none; }

.as-list.is-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
    list-style: none; padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
.as-list.is-grid .as-row {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 0; margin: 0;
    background:var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.as-list.is-grid .as-row:hover {
    background:var(--ps-surface);
    transform: translateY(-3px);
    border-color: var(--ps-yellow);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}
.as-list.is-grid .as-thumb { display: block; aspect-ratio: 4 / 3; background: #eef1ec; overflow: hidden; }
.as-list.is-grid .as-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.as-list.is-grid .as-row:hover .as-thumb img { transform: scale(1.04); }
.as-list.is-grid .as-thumb-ph {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 40px; color: #aeb4ac;
}
.as-list.is-grid .as-loc-main { font-size: 14px; font-weight: 700; white-space: normal; }
.as-list.is-grid .as-loc-sub { display: none; }   /* keep cards clean */

/* ── Pagination ─────────────────────────────────────────────────────────────
   Markup comes from resources/views/vendor/pagination/penguinstones.blade.php.
   Class names (.page-numbers, .current, .dots) mirror WordPress's paginate_links
   output so this block is a straight port of the theme's. */
.as-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 28px;
}
.as-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--ps-border);
    background:var(--ps-surface);
    color: var(--ps-text) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.as-pagination .page-numbers:hover {
    background: var(--ps-blue-pale);
    border-color: var(--ps-blue-light);
}
.as-pagination .page-numbers.current {
    background: var(--ps-navy);
    color: var(--ps-white) !important;
    border-color: var(--ps-navy);
}
.as-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.as-empty {
    text-align: center;
    padding: 60px 20px;
    background:var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
}
.as-empty-icon { font-size: 48px; margin-bottom: 12px; }
.as-empty h2 { color: var(--ps-heading); margin: 0 0 8px; }
.as-empty p { color: var(--ps-text-mid); margin: 0 0 20px; }

/* ── Breakpoints ────────────────────────────────────────────────────────────
   760 / 600 / 420 are the theme's own archive breakpoints — matched rather
   than re-chosen (see the "Mobile breakpoints" convention in the WP CLAUDE.md).

   ⚠️ A page that restates `.as-row` inside its own ≤760 block (to lay out its
   grid areas) is relying on load order to beat the desktop `--as-grid` rule
   above. Keep the page stylesheet second.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .as-filters-inner { grid-template-columns: 1fr 1fr; gap: 10px; }
    .as-filter-search { grid-column: 1 / -1; }
    .as-filter-actions { grid-column: 1 / -1; flex-direction: row; }
    .as-btn { flex: 1; }

    /* The sortable column headers go away with the table; the select replaces
       them so sorting is still reachable on a phone. */
    .as-list-head { display: none; }
    .as-mobile-sortbar { display: block; margin: 0 0 14px; }

    .as-list { background: transparent; border: none; box-shadow: none; border-radius: 0; }
    /* Card chrome only. The page supplies grid-template-columns and
       grid-template-areas for its own cells. */
    .as-row {
        background:var(--ps-surface);
        border: 1px solid var(--ps-border);
        border-radius: var(--ps-radius);
        margin-bottom: 10px;
        box-shadow: var(--ps-shadow);
        gap: 6px 14px;
        padding: 14px 16px;
    }
    .as-loc-main { white-space: normal; }
    .as-loc-sub  { white-space: normal; }

    .as-pagination .page-numbers { min-width: 34px; height: 34px; font-size: 13px; padding: 0 8px; }
}

@media (max-width: 600px) {
    .as-list.is-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .as-content { padding-left: 12px; padding-right: 12px; }
    /* 16px inputs on mobile → iOS Safari does not zoom the page on focus.
       Same rule the submit form lives by; keep it if these are ever restyled. */
    .as-filter input[type="search"],
    .as-filter select { font-size: 16px; }

    /* ── Reclaiming the vertical space above the first result ──────────────────
       Measured at 375x812 before this: the first row landed at y=470 on /stones
       and y=591 on /countries — 58% and 73% of the phone spent on chrome before
       any content. The hero, the filters, the sort select and the view toggle
       each claimed a full-width row of their own.

       ⚠️ INLINE-FLEX, NOT A FLEX WRAPPER. Sort and View are separate sibling
       includes with no shared parent to turn into a flex row, and giving them one
       would mean editing three page templates. As inline-level boxes they share a
       line when there is room and wrap when there is not — so a 320px phone
       degrades to the old stacked layout instead of overflowing. */
    .as-mobile-sortbar,
    .as-viewbar { display: inline-flex; vertical-align: top; margin-bottom: 10px; }
    .as-mobile-sortbar { margin-right: 10px; }
    /* ⚠️ NO max-width ON THE SELECT, AND THAT IS DELIBERATE. Capping it at 46vw
       was tried to make sort and view share a line; MEASURED at 375px they cannot
       — sort needs 173px and the view toggle 228px against 345px available, and
       /stones' third button makes it worse. So the cap bought nothing and cost
       legibility: "Stones (most first)" rendered as "Stones (most". They wrap here
       by design, and the inline-flex above pairs them up for free on wider phones
       where the space genuinely exists. */

    /* ⚠️ SCOPED UNDER .as-wrap DELIBERATELY. The archive hero partial reuses the
       class `.ss-hero`, which on a single stone page is the PHOTO hero — a bare
       `.ss-hero { padding }` rule here would silently reshape every stone page.
       The archive lives in .as-wrap and the stone page in .ss-wrap, so the
       ancestor is what keeps these apart.
       44px of vertical padding on a title-plus-one-subtitle band was pushing
       content off the fold by itself. */
    .as-wrap .ss-hero { padding-top: 20px; padding-bottom: 20px; }
}

@media (max-width: 420px) {
    .as-filters-inner { grid-template-columns: 1fr; }
}