/*
 * Glance — a Shopclass public theme.
 * Copyright (c) 2026 Navjot Tomer (Mindstellar) and contributors
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * The ad list (search and home): head, filters, ledger rows, reading panel and bottom sheets.
 * Wide ≥ 64rem: list beside panel. Tablet 48–64rem: panel over the list. Phone: bottom sheet.
 */

:root {
    --osc-bench: var(--surface);
    --osc-rule: var(--line);
    --osc-ink: var(--ink);
    --osc-bronze: var(--accent);
    --osc-bronze-tint: var(--accent-tint);
    --osc-radius: var(--radius);
    --osc-radius-sm: var(--radius-s);
    --sticky-top: 0px;
    --dir: 1;
}
:root[dir="rtl"], [dir="rtl"] { --dir: -1; }

.osc-ac-list { font-family: var(--font); color: var(--ink); z-index: 60; }

/* ---- Page head --------------------------------------------------------- */

.results-top { padding-block: var(--sp-2); }
.home-top { padding-block: var(--sp-5) var(--sp-4); }
.results-top .crumbs { margin-bottom: var(--sp-3); }

.results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3) var(--sp-2);
    margin-bottom: var(--sp-3);
}
.results-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-width: 0; margin-inline-end: auto; }
.results-title h1 { font-size: var(--fs-l); overflow-wrap: anywhere; }
.results-count { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }

/* Filters, sort and alert share one toolbar; when wide the filter form opens as a full bar below. */
.results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.results-alert { color: var(--muted); }
.results-alert:hover { color: var(--ink); }
@media (min-width: 64rem) {
    .results-tools { display: contents; }
    .results-title { order: 1; }
    .results-tools > .sort, .results-alert { order: 2; }
    .results-tools > .filters { order: 3; flex: 1 0 100%; margin: var(--sp-1) 0 0; }
}

.sort { display: flex; align-items: center; gap: var(--sp-2); }
.sort label { margin: 0; color: var(--muted); font-weight: 500; }
.sort select { width: auto; min-width: 11rem; font-size: var(--fs-s); }

/* ---- Filters ----------------------------------------------------------- */

.filters { margin: 0; }
.filters > summary { list-style: none; width: fit-content; }
.filters > summary::-webkit-details-marker { display: none; }
.filters-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--fs-2xs);
    line-height: 1.25rem;
    text-align: center;
}
.filters[open] > summary { margin-bottom: var(--sp-3); }

.filters-form {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
}
.filters-head { display: none; }

.filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
}
.ff { margin: 0; min-width: 0; }
.ff label, .ff legend, .filters-extra label, .filters-extra .ff-caption, .filters-extra .osc-distance > label {
    display: block;
    margin: 0 0 var(--sp-1);
    padding: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}
fieldset.ff { border: 0; padding: 0; }
.ff-cat { flex: 1 1 11rem; }
.ff-city { flex: 1 1 10rem; }
.ff-price { flex: 0 1 15rem; }
.ff-range { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); }
.ff-range input { flex: 1; min-width: 0; }
.ff-check label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    margin: 0;
    padding-inline: var(--sp-1) var(--sp-2);
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ff-go { flex: none; }

.filters-more { margin-top: var(--sp-3); }
.filters-more > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 2.25rem;
    color: var(--accent);
    font-size: var(--fs-s);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more > summary .gi { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease-out); }
.filters-more[open] > summary .gi { transform: rotate(180deg); }

.filters-extra { padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-2); }
.filters-extra fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.filters-extra > fieldset, .filters-extra {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--sp-3);
    align-items: end;
}
.filters-extra > fieldset { grid-column: 1 / -1; }
.filters-extra .row { display: grid; gap: var(--sp-1); min-width: 0; }
/* Core's From/To pair: caption above, then "From [ ] To [ ]" on one line. */
.filters-extra .input-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.filters-extra .input-group-text { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.filters-extra .input-group input { min-width: 0; }
.filters-extra .checkbox, .filters-extra .radio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filters-extra .checkbox label, .filters-extra .radio label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 2rem;
    margin: 0;
    padding-inline-end: var(--sp-2);
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 500;
    cursor: pointer;
}
.ff-check input, .filters-extra input[type="checkbox"], .filters-extra input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0; }
@media (pointer: coarse) { .filters-extra .checkbox label, .filters-extra .radio label { min-height: var(--tap); } }
.filters-extra .osc-distance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); align-items: end; }
.filters-extra .osc-distance > label { grid-column: 1 / -1; }
.osc-near-me {
    min-height: var(--tap);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: 600 var(--fs-s)/1 var(--font);
    cursor: pointer;
}
.osc-near-me:hover { border-color: var(--ink); }

@media (min-width: 64rem) {
    @supports selector(::details-content) {
        .filters > summary { display: none; }
        .filters::details-content { content-visibility: visible; display: block; block-size: auto; }
    }
}

/* ---- Active filter chips ------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 2.25rem; /* 36px; touch screens get the full tap size below */
    max-width: 22rem;
    padding: 0 var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 500;
    text-decoration: none;
}
.chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .gi { width: 1rem; height: 1rem; color: var(--muted); }
.chip:hover { border-color: var(--ink); }
.chip:hover .gi { color: var(--save); }
.chip-clear { padding-inline: var(--sp-3); border-color: transparent; background: transparent; color: var(--accent); }
.chip-clear:hover { border-color: transparent; text-decoration: underline; }
.chips-quick { align-items: center; }
.chips-quick-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.chips-quick .chip.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
@media (pointer: coarse) { .chip { min-height: var(--tap); } }

/* ---- Ledger: list beside reader ----------------------------------------- */

.ledger { position: relative; }
.ledger-list { position: relative; z-index: 2; min-width: 0; container: list / inline-size; }

.list-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.list-heading { margin: 0; padding-block: var(--sp-5) var(--sp-3); font-size: var(--fs-l); }
.list-heading-link { color: inherit; text-decoration: none; }
.list-heading-link:hover { color: var(--accent); }
.list-heading-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ledger-list > .list-heading:first-child, .ledger-list > .list-heading-row:first-child .list-heading { padding-top: 0; }
.list-more { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding-inline-end: var(--sp-4); color: var(--accent); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.list-more:hover { text-decoration: underline; }
.list-more .gi, .list-foot .gi { width: 1rem; height: 1rem; }
.list-more .gi, .list-foot .gi, .pager-step .gi { scale: var(--dir) 1; }
.list-foot { margin: var(--sp-5) 0 0; }
.list-slot { padding-block: var(--sp-3); list-style: none; }

/* ---- Rows --------------------------------------------------------------- */

.rows {
    --thumb-w: 4.5rem;
    --price-w: 7.5rem;
    --row-pad: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.rows[data-density="compact"] { --thumb-w: 3rem; --row-pad: 0.25rem; }

.rows .row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.15s;
}
.rows .row:hover { background: color-mix(in oklab, var(--surface) 70%, transparent); }
.rows .row-hl { background: color-mix(in oklab, var(--accent-tint) 70%, transparent); }

.row-link {
    display: grid;
    grid-template-columns: var(--thumb-w) minmax(0, 1fr) var(--price-w);
    gap: var(--sp-3);
    align-items: start;
    min-height: var(--tap);
    padding: var(--row-pad) var(--sp-1) var(--row-pad) var(--sp-3);
    color: inherit;
    text-decoration: none;
}
.row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-s); }

.row-thumb {
    display: grid;
    place-items: center;
    width: var(--thumb-w);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: var(--sunk);
    color: var(--line-strong);
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-thumb .gi { width: 1.25rem; height: 1.25rem; }

.row-main { display: grid; gap: 0.0625rem; min-width: 0; }
.row-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-row);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.row-link:hover .row-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }

/* Facts wrap whole instead of shrinking into an ellipsis. Two lines are allowed by default;
   the price-badge layout grows as needed. Each fact carries its dot in its leading padding,
   and the strip where a line starts is clipped away. */
.row-facts {
    --fact-gap: 0.75em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    max-height: calc(1.45em * var(--fact-lines, 2));
    margin-inline-start: calc(var(--fact-gap) * -1);
    overflow: hidden;
    clip-path: inset(0 0 0 var(--fact-gap));
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}
[dir="rtl"] .row-facts { clip-path: inset(0 var(--fact-gap) 0 0); }
.row-fact {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    padding-inline-start: var(--fact-gap);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-fact::before {
    content: "·";
    position: absolute;
    inset-inline-start: 0;
    width: var(--fact-gap);
    color: var(--muted);
    font-weight: 400;
    text-align: center;
}
.row-spec { color: var(--ink); font-weight: 500; }
.row-badge {
    display: inline-block;
    margin-inline-start: var(--fact-gap);
    margin-inline-end: 0.25em;
    padding: 0 0.375rem;
    border-radius: var(--radius-s);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.6;
}
.row-badge + .row-fact::before { content: none; }
.row-badge-warn { background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); }
.row-badge-hl { background: color-mix(in oklab, var(--ink) 8%, var(--surface)); color: var(--ink); }

/* Badges and category are placed by the appearance settings. They are rendered in both
   slots so the preview page can switch them without a reload; only one slot is visible. */
.row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-width: 0; }
.row-badges .row-badge { margin-inline: 0; }
.row-badges--end { display: none; justify-content: flex-end; margin-bottom: 0.1rem; }
.row-cat { display: none; color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
.rows[data-badges="price"] .row-badges--main { display: none; }
.rows[data-badges="price"] .row-badges--end { display: flex; }
.rows[data-cat="top"] .row-cat { display: block; }
.rows[data-cat="top"] .row-fact-cat { display: none; }
.rows[data-badges="price"][data-layout="price-below"] .row-badges--main { display: flex; }
.rows[data-badges="price"][data-layout="price-below"] .row-badges--end { display: none; }

.row-end { display: grid; justify-items: end; gap: 0.125rem; min-width: 0; text-align: end; }
.row-price { display: block; max-width: 100%; overflow: hidden; font-size: var(--fs-m); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.row-price .cur { color: var(--muted); font-size: 0.8125em; font-weight: 600; }
.row-price .price-note { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; white-space: normal; }
.row-when { display: inline-flex; align-items: center; gap: 0.375em; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; white-space: nowrap; }
.row-seen { display: inline-flex; align-items: center; gap: 0.25em; font-weight: 600; }
.row-seen[hidden] { display: none; }
.row-seen .gi { width: 0.875rem; height: 0.875rem; }

.rows .row[data-seen] .row-title { color: color-mix(in oklab, var(--ink) 74%, var(--muted)); }

.row-save { margin-inline-end: var(--sp-1); color: var(--muted); }
.row-save:hover { color: var(--save); background: transparent; }
.row-save .gi { width: 1.125rem; height: 1.125rem; }
.row-save[aria-pressed="true"] { border-color: transparent; }

.rows[data-density="compact"] .row-title { -webkit-line-clamp: 1; line-clamp: 1; }
.rows[data-density="compact"] .row-link { align-items: center; }
.rows[data-density="compact"] .row-when { display: none; }

/* List layout variants: the same row, rearranged. The open ad and the reader
   stay exactly where they are; only the optical alignment of the row changes. */
.rows[data-layout="balanced"]:not([data-density="compact"]) {
    --thumb-w: 5.25rem;
    --row-pad: 0.5rem;
}
.rows[data-layout="balanced"] .row-link {
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
}
.rows[data-layout="balanced"] .row-end { align-self: center; }

.rows[data-layout="image-right"] .row-link {
    grid-template-columns: minmax(0, 1fr) var(--price-w) var(--thumb-w);
    align-items: center;
}
.rows[data-layout="image-right"] .row-main {
    grid-column: 1;
    grid-row: 1;
}
.rows[data-layout="image-right"] .row-end {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.rows[data-layout="image-right"] .row-thumb {
    grid-column: 3;
    grid-row: 1;
}

.rows[data-layout="price-below"] .row-link {
    grid-template-columns: var(--thumb-w) minmax(0, 1fr);
    grid-template-areas:
        "thumb main"
        "thumb end";
    gap: 0.2rem var(--sp-3);
    align-items: center;
}
.rows[data-layout="price-below"] .row-thumb { grid-area: thumb; }
.rows[data-layout="price-below"] .row-main { grid-area: main; }
.rows[data-layout="price-below"] .row-end {
    grid-area: end;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    text-align: start;
}
.rows[data-layout="price-below"] .row-when { margin-inline-start: auto; }

/* Price-side badges: one four-row grid for category, title, facts and seller;
   badges, price, location and date use the same rows on the right. */
.rows[data-badges="price"]:not([data-layout="price-below"]) {
    --thumb-w: 5.5rem;
    --row-line-1: 1.25rem;
    --row-line-2: 1.25rem;
    --row-line-3: 1.25rem;
    --row-line-4: 1.25rem;
}
.rows[data-density="compact"][data-badges="price"]:not([data-layout="price-below"]) {
    --thumb-w: 5.25rem;
    --row-line-1: 1.25rem;
    --row-line-2: 1.25rem;
    --row-line-3: 1.25rem;
    --row-line-4: 1.25rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-link {
    grid-template-rows: var(--row-line-1) var(--row-line-2) var(--row-line-3) var(--row-line-4);
    row-gap: 0.0625rem;
    align-items: start;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-main,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-end {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 4;
    align-self: stretch;
    row-gap: 0;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat {
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title {
    display: block;
    grid-row: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rows[data-density="compact"][data-badges="price"]:not([data-layout="price-below"]) .row-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts {
    grid-row: 3;
    flex-wrap: nowrap;
    max-height: 1.25rem;
    line-height: 1.25rem;
    overflow: hidden;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title {
    line-height: 1.25rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end {
    grid-row: 1;
    flex-wrap: nowrap;
    overflow: hidden;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price {
    grid-row: 2;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price .price-note {
    display: inline;
    margin-inline-start: 0.25em;
    font-size: var(--fs-xs);
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-when {
    grid-row: 3;
    max-width: 100%;
    overflow: hidden;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-thumb {
    grid-row: 1 / span 4;
    width: var(--thumb-w);
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
}
.rows[data-density="compact"][data-badges="price"]:not([data-layout="price-below"]) .row-when { display: inline-flex; }

@container list (width < 32rem) {
    .rows { --thumb-w: 4.25rem; --price-w: 7.5rem; }
    .rows[data-density="compact"] { --thumb-w: 3rem; }
    .rows[data-layout="balanced"]:not([data-density="compact"]) { --thumb-w: 4.25rem; }
    .row-link { gap: var(--sp-2) var(--sp-3); }
    .row-price { font-size: var(--fs-row); }
    .row-facts { --fact-lines: 2; }
    /* The chosen badge and category positions are kept here; only type and spacing tighten. */
    .row-badges--end { gap: 0.15rem; }
    .row-badges--end .row-badge { font-size: 0.55rem; line-height: 1.45; }
    /* The eye alone marks a seen row here; the word stays for screen readers. */
    .row-seen-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container list (width < 26rem) {
    .rows .row-save { display: none; }
    .row-link { padding-inline-end: var(--sp-2); }
}

@container list (width < 32rem) {
    .rows[data-layout="price-below"] .row-link { gap: 0.2rem var(--sp-3); }
}

/* Open row: aria-current on its link, data-active on the row. It turns into the same white sheet
   as the reader; the title takes the accent colour without changing weight or width. */
.rows .row[data-active] { background: var(--surface); }
.rows .row[data-active]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1; width: 3px; background: var(--accent); pointer-events: none; }
.rows .row[data-active] .row-title { color: var(--accent); }
.rows .row[data-active] .row-spec { color: var(--ink); }
@media (forced-colors: active) {
    .rows .row[data-active] { outline: 2px solid Highlight; outline-offset: -2px; }
    .rows .row[data-active] .row-title { color: Highlight; }
}

/* ---- Reader ------------------------------------------------------------- */

.reader { display: none; min-width: 0; }
.reader-inner { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }

.reader-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    min-height: 3.25rem;
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    touch-action: none;
}

.reader.is-dragging {
    user-select: none;
    will-change: translate;
    transition: none;
}

.reader.is-closing-down {
    translate: 0 100%;
    visibility: hidden;
    pointer-events: none;
    will-change: translate;
    transition: translate 0.26s var(--ease-out), visibility 0s linear 0.26s;
}
.reader-bar[hidden] { display: none; }
.reader-bar::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--accent);
    opacity: 0;
}
[aria-busy="true"] .reader-bar::after { opacity: 1; animation: glance-load 1.4s var(--ease-out) infinite; }
@keyframes glance-load {
    0% { width: 0; inset-inline-start: 0; }
    60% { width: 70%; inset-inline-start: 15%; }
    100% { width: 0; inset-inline-start: 100%; }
}

.reader-step { display: flex; align-items: center; margin-inline: auto; }
.reader-step .gi { scale: var(--dir) 1; }
.reader-pos { min-width: 5.5rem; color: var(--muted); font-size: var(--fs-s); font-weight: 600; text-align: center; }
.reader-full { gap: var(--sp-1); color: var(--muted); font-weight: 600; padding-inline: var(--sp-3); }
.reader-full:hover { color: var(--ink); }
.reader-full .gi { width: 1rem; height: 1rem; }
.btn:disabled .gi { opacity: 0.6; }
.reader-nextpage { gap: var(--sp-1); padding-inline: var(--sp-3); color: var(--accent); }
.reader-nextpage .gi { width: 1rem; height: 1rem; scale: var(--dir) 1; }

/* Slim key reminder under the bar; only where a keyboard is likely. */
.reader-hints {
    display: none;
    flex: 1 0 100%;
    justify-content: center;
    gap: var(--sp-1) var(--sp-4);
    margin: 0;
    padding-bottom: 0.125rem;
    color: var(--muted);
    font-size: var(--fs-xs);
}
.reader-hints > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.reader-hints kbd { min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; font-size: var(--fs-2xs); }
.reader-hints kbd .gi { width: 0.75rem; height: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .reader-hints { display: flex; } }
.reader-sheet .reader-hints { display: none; }

/* The ad heading takes focus when an ad opens; a mouse open needs no ring. */
.reader-body [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.reader-grip { display: none; }

.reader-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    container: reader / inline-size;
    outline: none;
    transition: opacity 0.2s;
}
[aria-busy="true"] .reader-body { opacity: 0.6; }

.reader-empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--sp-3);
    height: 100%;
    min-height: 16rem;
    padding: var(--sp-6);
    color: var(--muted);
    text-align: center;
}
.reader-empty > .gi { width: 2rem; height: 2rem; color: var(--line-strong); }
.reader-empty p { margin: 0; }
.reader-empty-js, .reader-empty-nojs { color: var(--ink); font-size: var(--fs-l); font-weight: 600; letter-spacing: -0.01em; }
.reader-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-s); }
.reader-keys > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
:root:not(.glance-js) .reader-empty-js, :root:not(.glance-js) .reader-keys, .glance-js .reader-empty-nojs { display: none; }

/* Loading: a quiet outline of the ad (gallery, title, price, facts) while it is fetched. Pages
   with scripts show it from the first paint on wide screens, where the first ad opens by itself. */
.reader-loading { display: none; padding: var(--sp-4); }
.reader:not([data-ready]) .reader-bar { display: none; }
[aria-busy="true"] .reader-loading { display: grid; }
[aria-busy="true"] .reader-empty { display: none; }
[aria-busy="true"] .reader-body:has(> .reader-loading) { opacity: 1; }
@media (scripting: enabled) and (min-width: 64rem) {
    .reader:not([data-ready]) .reader-loading { display: grid; }
    .reader:not([data-ready]) .reader-empty { display: none; }
    .reader:not([data-ready]) .reader-bar { display: flex; }
}
.reader-loading { gap: var(--sp-3); align-content: start; }
.reader-loading-media { aspect-ratio: 16 / 9; max-height: 15rem; margin-bottom: var(--sp-2); border-radius: var(--radius); background: var(--sunk); }
.reader-loading-title { margin: 0; color: var(--muted); font-size: var(--fs-l); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
/* Same split as the ad at this width: gallery beside title and price. */
@container reader (min-width: 40rem) {
    .reader-loading { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: var(--sp-5); padding: var(--sp-5); }
    .reader-loading-media { grid-row: 1 / span 6; aspect-ratio: 4 / 3; margin: 0; }
}
.reader-loading-title:empty, .reader-loading-bar { display: block; height: 1rem; border-radius: var(--radius-s); background: var(--sunk); }
.reader-loading-title:empty { width: 70%; height: 1.75rem; }
.reader-loading-bar:nth-of-type(3) { width: 92%; }
.reader-loading-bar:nth-of-type(4) { width: 80%; }
.reader-loading-bar:nth-of-type(5) { width: 86%; }
.reader-loading-bar:nth-of-type(6) { width: 54%; }
.reader-loading-bar.is-price { width: 9rem; height: 2.25rem; margin-bottom: var(--sp-2); }
@media (prefers-reduced-motion: no-preference) {
    .reader-loading-media, .reader-loading-bar, .reader-loading-title:empty { animation: glance-pulse 1.6s ease-in-out infinite alternate; }
}
@keyframes glance-pulse { from { opacity: 1; } to { opacity: 0.55; } }

kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 0.375rem;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-s);
    background: var(--paper);
    color: var(--ink);
    font: 600 var(--fs-xs)/1 var(--font);
}
kbd .gi { width: 0.875rem; height: 0.875rem; }

/* ---- Wide: list ~42%, reader ~58% ---------------------------------------- */

@media (min-width: 64rem) {
    .ledger {
        display: grid;
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        align-items: start;
    }
    .ledger-list { padding-bottom: var(--sp-6); }
    .rows { margin-inline-start: calc(var(--sp-3) * -1); }
    .list-heading-row, .ledger-list > .list-heading { padding-inline-end: 0; }

    .reader {
        position: sticky;
        top: var(--sticky-top);
        z-index: 1;
        display: block;
        height: var(--reader-h, calc(100dvh - var(--sticky-top)));
        border: 1px solid var(--line);
        border-bottom: 0;
        background: var(--surface);
    }

    /* The pulled row stays inside its own column: no width change on selection. */
    .rows .row[data-active] {
        z-index: 3;
        box-shadow: inset 0 1px 0 var(--line);
    }

    .reader-body { view-transition-name: glance-reader; }

    .ledger[data-empty] { grid-template-columns: minmax(0, 1fr); }
}
.ledger[data-empty] .reader { display: none; }

::view-transition-old(glance-reader) { animation: 0.12s ease-out both glance-out; }
::view-transition-new(glance-reader) { animation: 0.28s var(--ease-out) both glance-in; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.12s; }
@keyframes glance-out { to { opacity: 0; } }
@keyframes glance-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Tablet: reader slides over the list --------------------------------- */

@media (min-width: 48rem) and (max-width: 63.999rem) {
    .rows { margin-inline: calc(var(--sp-3) * -1); }
    .reader {
        position: fixed;
        z-index: 35;
        inset-block: var(--sticky-top) 0;
        inset-inline-end: 0;
        display: block;
        width: min(42rem, 88vw);
        border-inline-start: 1px solid var(--line);
        background: var(--surface);
        box-shadow: var(--shadow-lift);
        translate: calc(100% * var(--dir)) 0;
        visibility: hidden;
        transition: translate 0.38s var(--ease-out), visibility 0s linear 0.38s;
    }
    .reader.is-open { translate: 0 0; visibility: visible; transition: translate 0.38s var(--ease-out), visibility 0s; }
}

/* ---- Bottom sheets (reader on phones, filters below wide) ---------------- */

.sheet {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 44rem;
    max-height: calc(100dvh - 2.5rem);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sheet);
    overflow: hidden;
    translate: 0 0;
    transition: translate 0.4s var(--ease-out), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet:not([open]) { translate: 0 100%; transition-duration: 0.22s; }
@starting-style { .sheet[open] { translate: 0 100%; } }
.sheet::backdrop {
    background: var(--scrim-soft);
    opacity: 1;
    transition: opacity 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.sheet:not([open])::backdrop { opacity: 0; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
.sheet.is-dragging { user-select: none; will-change: translate; transition: none; }
.sheet.is-closing-down {
    translate: 0 100%;
    pointer-events: none;
    will-change: translate;
    transition: translate 0.24s var(--ease-out), overlay 0.24s allow-discrete, display 0.24s allow-discrete;
}

.reader-sheet { height: calc(100dvh - 2.5rem); }
.reader-sheet .reader-inner { flex: 1; height: auto; }
.reader-sheet .reader-bar { padding-top: var(--sp-4); touch-action: none; }
.reader-sheet .reader-grip {
    display: block;
    position: absolute;
    top: 0.4375rem;
    inset-inline-start: 50%;
    width: 2.5rem;
    height: 0.25rem;
    margin-inline-start: -1.25rem;
    border-radius: 999px;
    background: var(--line-strong);
}
.reader-sheet .reader-body { touch-action: pan-y; scrollbar-gutter: auto; }
.reader-body { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.sheet { overscroll-behavior: contain; }
.reader-sheet .reader-full span { display: none; }
.reader-sheet .reader-pos { min-width: 4.5rem; }

.filter-sheet .filters-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.filter-sheet .filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.filter-sheet .filters-head h2 { font-size: var(--fs-l); }
.filter-sheet .filters-row, .filter-sheet .filters-more { padding-inline: var(--sp-4); }
.filter-sheet .filters-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    padding-block: var(--sp-4);
    overflow: auto;
    overscroll-behavior: contain;
}
.filter-sheet .filters-row > .ff { flex: none; }
.filter-sheet .ff-go {
    order: 99;
    position: sticky;
    bottom: calc(var(--sp-4) * -1);
    margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.filter-sheet .ff-go .btn { width: 100%; }
.filter-sheet .filters-more { padding-bottom: var(--sp-4); }

/* ---- Pager --------------------------------------------------------------- */

.pager-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-5) 0;
}
.pager-range { margin: 0; color: var(--muted); font-size: var(--fs-s); }
.pager-nav .pager { margin: 0; justify-content: flex-end; }
.pager-step a, .pager-step span { gap: var(--sp-1); display: inline-flex; }
.pager-step .gi { width: 1rem; height: 1rem; }
.pager-step [aria-disabled] { color: var(--muted); opacity: 0.55; }
.pager-gap span { color: var(--muted); min-width: 1.5rem; padding: 0; }
@media (max-width: 30rem) {
    .pager-step a > span, .pager-step [aria-disabled] > span { position: absolute; width: 1px; max-width: 1px; min-width: 0; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Empty, alerts ------------------------------------------------------- */

.list-empty { max-width: 36rem; padding: var(--sp-6) 0; }
.list-empty h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.list-empty > p { color: var(--muted); }
.list-empty .chips { margin-bottom: var(--sp-5); }
.list-empty-alert {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
}
.list-empty-alert h3 { margin-bottom: var(--sp-1); font-size: var(--fs-m); }
.list-empty-alert p { color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--sp-3); }
.list-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.alert-pop {
    position: fixed;
    inset: calc(var(--sticky-top) + var(--sp-2)) var(--gutter) auto auto;
    width: min(24rem, calc(100vw - 2 * var(--gutter)));
    margin: 0;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
    transition: opacity 0.18s, translate 0.25s var(--ease-out), overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
.alert-pop:not(:popover-open) { opacity: 0; translate: 0 -6px; }
@starting-style { .alert-pop:popover-open { opacity: 0; translate: 0 -6px; } }
.alert-pop h2 { font-size: var(--fs-l); }
.alert-note { margin: var(--sp-2) 0 var(--sp-3); color: var(--muted); font-size: var(--fs-s); }

/* ---- Home ---------------------------------------------------------------- */

.home-top { padding-top: var(--sp-6); }
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); }
.home-head h1 { font-size: var(--fs-xxl); }

.cat-index { margin: var(--sp-5) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.cat-index ul { margin: 0; padding: 0; list-style: none; columns: 14rem 4; column-gap: var(--sp-6); }
.cat-index li { break-inside: avoid; }
.cat-index a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-height: 2.25rem;
    padding-block: 0.5rem;
    font-size: var(--fs-s);
    font-weight: 600;
    text-decoration: none;
}
.cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-lead { flex: 1; min-width: var(--sp-3); border-bottom: 1px dotted var(--line-strong); translate: 0 -0.25em; }
.cat-count { color: var(--muted); font-weight: 500; }
.cat-index a:hover .cat-name { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.cat-index .is-empty a { color: var(--muted); font-weight: 500; }
@media (pointer: coarse) { .cat-index a { min-height: var(--tap); } }

/* ---- Below wide ---------------------------------------------------------- */

@media (max-width: 63.999rem) {
    .results-head { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
    .results-tools { flex-wrap: nowrap; }
    .results-tools > .sort { flex: 1; justify-content: flex-end; min-width: 0; }
    .sort select { min-width: 0; flex: 0 1 14rem; }
    .filters:not([open]) > .filters-form { display: none; }
    /* Without scripts the filter form opens in place, under the toolbar. */
    .results-tools:has(> .filters[open]), :root:not(.glance-js) .results-tools { flex-wrap: wrap; }
    .results-tools > .filters[open] { order: 3; flex: 1 0 100%; }
}
@media (max-width: 47.999rem) {
    .results-top { padding-block: var(--sp-2); }
    .results-top .crumbs { margin-bottom: var(--sp-2); }
    .results-title h1 { font-size: var(--fs-l); }
    .results-alert-label, .sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .results-alert { width: var(--tap); padding: 0; flex: none; }
    .filters-toggle { padding-inline: var(--sp-3); }
    .home-top { padding-top: var(--sp-5); }
    .cat-index ul { columns: 2; column-gap: var(--sp-4); }

    /* Edge-to-edge ad rows on phones. Labels, headings and the footer keep the page gutter. */
    .ledger { padding-inline: 0; }
    .ledger-list { padding-inline: 0; }
    .ledger-list > .list-heading,
    .ledger-list > .list-heading-row,
    .ledger-list > .list-foot,
    .ledger-list > .list-empty { padding-inline: var(--gutter); }
    .rows { margin-inline: 0; }
    .rows .row-link { padding-inline: var(--gutter) var(--sp-2); }
    .rows .row-save { margin-inline-end: var(--gutter); }
}

::view-transition { pointer-events: none; }

/* Location takes the old age slot on the right; the age and seen marker are gone. */
.row-loc {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25em;
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.3;
    text-align: end;
    white-space: nowrap;
}
.row-loc .gi { width: 0.875rem; height: 0.875rem; flex: none; }
.row-loc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc { grid-row: 3; }

/* One card height everywhere; a long location is cut with an ellipsis instead of
   pushing the row taller. */
.rows .row { height: 96px; }
.rows .row-link { height: 100%; }

/* Seller and date share the last row; the date sits opposite the seller. */
.row-seller {
    display: flex;
    align-items: center;
    gap: 0.25em;
    min-width: 0;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.25rem;
    white-space: nowrap;
}
.row-seller .gi { width: 0.875rem; height: 0.875rem; flex: none; }
.row-seller-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-date {
    display: inline-flex;
    justify-content: flex-end;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.25rem;
    white-space: nowrap;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date { grid-row: 4; }

/* Compact card rows: four tight tracks, two lines for facts, smaller type. */
.rows[data-badges="price"]:not([data-layout="price-below"]) {
    --row-line-1: 1rem;
    --row-line-2: 1rem;
    --row-line-3: 1rem;
    --row-line-4: 1rem;
    --row-pad: 0.125rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-link { row-gap: 0; align-content: center; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat {
    font-size: 0.625rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title {
    font-size: 0.8125rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts {
    flex-wrap: wrap;
    max-height: 2rem;
    font-size: 0.6875rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price {
    font-size: 0.9375rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date {
    font-size: 0.6875rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller {
    font-size: 0.6875rem;
    line-height: 1rem;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller .gi { width: 0.75rem; height: 0.75rem; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end .row-badge {
    font-size: 0.55rem;
    line-height: 1.4;
}
.rows .row { height: 92px; }

/* One-line facts: whole facts flow inline and the line ends with an ellipsis. */
.rows { --price-w: 7rem; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts {
    display: block;
    max-height: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-fact {
    display: inline;
    overflow: visible;
    text-overflow: clip;
}
.rows .row { height: 80px; min-height: 80px; max-height: 80px; }

/* Every card uses bold type; a read ad switches to thin type for good. */
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title { font-weight: 700; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date { font-weight: 600; }
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-spec { font-weight: 600; }
.rows .row[data-seen] .row-title { color: var(--muted); font-weight: 400; }
.rows .row[data-seen] .row-cat { color: var(--muted); font-weight: 400; }
.rows .row[data-seen] .row-facts,
.rows .row[data-seen] .row-seller,
.rows .row[data-seen] .row-loc,
.rows .row[data-seen] .row-date,
.rows .row[data-seen] .row-spec { font-weight: 400; }
.rows .row[data-seen] .row-price { font-weight: 500; }
.rows .row[data-seen] .row-badge { font-weight: 500; }

/* A price note must stay on the price line; a wrapped sentence was making some cards look taller. */
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price .price-note {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Every card line stays on one line; the category is clipped, never wrapped. */
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Every card row is exactly one 16px track; content can never grow a track. */
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end {
    height: 1rem;
    max-height: 1rem;
    overflow: hidden;
}
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end {
    align-items: center;
}

/* Highlighted ads keep their tint on hover and while the reader is open. */
.rows .row-hl:hover {
    background: color-mix(in oklab, var(--accent-tint) 88%, var(--surface));
}
.rows .row-hl[data-active] {
    background: color-mix(in oklab, var(--accent-tint) 82%, var(--surface));
}

@media (max-width: 47.999rem) {
    .item-page > .related {
        margin-inline: calc(-1 * var(--gutter));
    }

    .item-page > .related > :not(.rows) {
        padding-inline: var(--gutter);
    }
}

.related .rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end .row-badge {
    padding-inline: 0.5rem;
    font-size: 0.625rem;
    line-height: 1.4;
}

.related .rows .row-save {
    display: none;
}

.profile-rows {
    container: list / inline-size;
}

@media (max-width: 47.999rem) {
    .profile-rows {
        margin-inline: -1rem;
    }
}

.list-heading-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
}

.list-heading-links .list-more {
    padding-inline-end: 0;
}

.list-heading-row {
    flex-wrap: wrap;
    row-gap: var(--sp-1);
}

.price-drop-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}

.price-drop-filter label {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-s);
    font-weight: 600;
}

.price-drop-filter input {
    width: 12rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.price-drop-invalid {
    margin: 0 0 var(--sp-2);
    color: var(--save);
    font-size: var(--fs-s);
}

.price-drop-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 14rem) auto auto;
}

.price-drop-filter input {
    width: 100%;
}

@media (max-width: 47.999rem) {
    .price-drop-filter {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .price-drop-filter label {
        grid-column: 1 / -1;
    }
}

.price-drop-filter {
    justify-content: start;
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 47.999rem) {
    .price-drop-filter {
        width: 100%;
        justify-content: stretch;
    }
}

@media (min-width: 64rem) {
    .list-heading-links {
        padding-inline-end: var(--sp-4);
    }
}

html.js .urgent-results .results-tools,
html.js .price-results .results-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

html.js .urgent-results .results-head,
html.js .price-results .results-head {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

html.js .urgent-results .results-title,
html.js .price-results .results-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 0;
}

html.js .urgent-results .results-tools,
html.js .price-results .results-tools {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-inline-start: auto;
}

html.js .urgent-results .results-head,
html.js .price-results .results-head {
    flex: 1 1 auto;
    width: 100%;
}

html.js .urgent-results .results-title,
html.js .price-results .results-title {
    order: 1;
}

html.js .urgent-results .results-tools,
html.js .price-results .results-tools {
    order: 2;
}

.filters-rail {
    display: none;
}

html.js body.category-rail .results-title-mobile {
    display: inline;
}

body.category-rail .results-sort {
    display: none;
}

@media (min-width: 64rem) {
    html.js body.category-rail .results-head {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    html.js body.category-rail .results-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-inline-end: 0;
    }

    html.js body.category-rail .results-tools {
        order: 2;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-2);
        margin-inline-start: auto;
    }

    html.js body.category-rail .results-tools .filters-toggle {
        display: none;
    }

    .category-layout {
        display: grid;
        grid-template-columns: 17.5rem minmax(0, 1fr);
        gap: var(--sp-5);
        align-items: start;
    }

    .filters-rail {
        display: block;
        position: sticky;
        top: calc(var(--sticky-top) + var(--sp-3));
        max-height: calc(100dvh - var(--sticky-top) - var(--sp-6));
        overflow: auto;
        overscroll-behavior: contain;
    }

    .category-layout .ledger {
        display: block;
    }

    .category-layout .reader {
        display: none;
    }

    .category-layout .ledger-list {
        padding-bottom: var(--sp-6);
    }

    .category-layout .rows {
        margin-inline-start: 0;
    }

    .category-layout .filters-form {
        padding: var(--sp-4);
    }

    .category-layout .filters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 var(--sp-3);
    }

    .category-layout .filters-head h2 {
        font-size: var(--fs-m);
    }

    .category-layout .filters-head [data-filters-close] {
        display: none;
    }

    .category-layout .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .category-layout .ff {
        flex: none;
        min-width: 0;
    }

    .category-layout .filters-extra {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-layout .filters-actions {
        margin-top: var(--sp-3);
    }

    .category-layout .filters-actions .btn {
        width: 100%;
    }
}

@media (max-width: 63.999rem) {
    html.js body.category-rail .results-head {
        flex-direction: column;
        align-items: stretch;
    }

    html.js body.category-rail .results-tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--sp-2);
    }

    .category-layout {
        padding-inline: 0;
    }

    .category-layout .list-empty {
        padding-inline: var(--gutter);
    }
}

html.js body.category-rail .results-sort {
    display: none;
}

html.js body.category-rail dialog[data-gs-sheet="1"].filter-sheet[open] {
    display: flex !important;
    flex-direction: column;
}

body.category-rail .chips-quick {
    display: none;
}

.category-layout .filters-rail {
    border: 1px solid var(--line);
    background: var(--surface);
}

.category-layout .filters-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.category-layout .filters-head {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.category-layout .filters-head h2 {
    margin: 0;
    font-size: var(--fs-m);
    font-weight: 700;
}

.category-layout .filters-row {
    padding: 0 var(--sp-4);
    gap: 0;
    flex-direction: column;
    align-items: stretch;
}

.category-layout .ff {
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.category-layout .ff:last-child {
    border-bottom: 0;
}

.category-layout .ff label,
.category-layout .ff legend {
    font-size: var(--fs-s);
    font-weight: 700;
    color: var(--ink);
}

.category-layout .filters-actions {
    margin: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--line);
}

.category-layout .filters-actions .btn {
    width: 100%;
}

.category-layout .filters-more {
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.category-layout .filters-more > summary {
    padding: var(--sp-3) var(--sp-4);
    width: 100%;
    min-height: 2.5rem;
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 700;
}

.category-layout .filters-extra {
    margin: 0;
    padding: 0 var(--sp-4) var(--sp-3);
    border: 0;
    grid-template-columns: minmax(0, 1fr);
}

.rail-cats {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.rail-cats h2 {
    margin: 0 0 var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rail-cats ul {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rail-cats a {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.4rem;
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 500;
    text-decoration: none;
}

.rail-cats a:hover {
    background: var(--sunk);
}

.rail-cats a.is-active {
    color: var(--accent);
    font-weight: 700;
}

.lst-table-wrap {
    min-width: 0;
}

.lst-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.lst-table th,
.lst-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: start;
    vertical-align: middle;
}

.lst-table thead th {
    background: var(--sunk);
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lst-table th.lst-price-cell {
    width: 12rem;
    text-align: end;
}

.lst-table th.lst-place-cell {
    width: 10rem;
}

.lst-table th.lst-date-cell {
    width: 8rem;
}

.lst-table th:last-child {
    width: 3rem;
}

.lst-table tbody tr:hover {
    background: color-mix(in oklab, var(--surface) 72%, var(--sunk));
}

.lst-row.row-hl {
    background: color-mix(in oklab, var(--accent-tint) 55%, transparent);
}

.lst-link {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lst-link:hover .lst-title {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.lst-thumb {
    display: grid;
    place-items: center;
    width: 6rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: var(--sunk);
    color: var(--line-strong);
}

.lst-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lst-thumb .gi {
    width: 1.25rem;
    height: 1.25rem;
}

.lst-body {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.lst-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.lst-badge {
    display: inline-block;
    padding: 0 0.375rem;
    border-radius: var(--radius-s);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.5;
}

.lst-badge-warn {
    background: color-mix(in oklab, var(--warn) 14%, var(--surface));
    color: var(--warn);
}

.lst-title {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-s);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.55rem;
    max-height: 2.6em;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.3;
}

.lst-facts > span {
    white-space: nowrap;
}

.lst-facts > span + span::before {
    content: "·";
    margin-inline-end: 0.55rem;
}

.lst-seller {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-seller .gi {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
}

.lst-price-cell {
    text-align: end;
}

.lst-price {
    color: var(--ink);
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.lst-place-cell,
.lst-date-cell {
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.35;
    white-space: nowrap;
}

.lst-place-more {
    color: var(--muted);
}

.lst-save-cell {
    text-align: center;
}

.lst-save-cell .btn {
    margin-inline: auto;
}

.lst-divider td {
    padding: 0;
    background: var(--accent-tint);
    border-bottom: 1px solid var(--line);
}

.lst-divider a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.55rem 0.75rem;
    color: var(--accent);
    font-size: var(--fs-s);
    font-weight: 600;
    text-decoration: none;
}

.lst-slot-row td {
    padding: 0.5rem 0.75rem;
}

@media (max-width: 63.999rem) {
    .lst-table,
    .lst-table tbody,
    .lst-table tr,
    .lst-table td {
        display: block;
        width: 100%;
    }

    .lst-table thead {
        display: none;
    }

    .lst-table tbody tr {
        position: relative;
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--line);
    }

    .lst-table tbody tr:hover {
        background: transparent;
    }

    .lst-table td {
        border: 0;
        padding: 0;
    }

    .lst-main-cell .lst-link {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.6rem;
        padding-inline: var(--gutter) 2.75rem;
    }

    .lst-thumb {
        width: 4.5rem;
    }

    .lst-title {
        font-size: var(--fs-row);
    }

    .lst-price-cell {
        padding: 0.25rem var(--gutter) 0 calc(4.5rem + var(--gutter) + 0.6rem);
        text-align: start;
    }

    .lst-price {
        font-size: var(--fs-m);
    }

    .lst-place-cell {
        display: inline-block;
        padding: 0.1rem 0 0.2rem calc(4.5rem + var(--gutter) + 0.6rem);
        font-size: var(--fs-xs);
    }

    .lst-date-cell {
        display: inline-block;
        padding: 0.1rem 0 0.2rem 0.5rem;
        font-size: var(--fs-xs);
    }

    .lst-date-cell::before {
        content: "·";
        margin-inline-end: 0.5rem;
    }

    .lst-save-cell {
        position: absolute;
        inset-inline-end: var(--gutter);
        top: 0.55rem;
        width: auto;
    }

    .lst-divider td,
    .lst-slot-row td {
        padding-inline: var(--gutter);
    }

    .lst-divider a {
        padding-inline: 0;
    }
}

@media (max-width: 63.999rem) {
    .lst-table td.lst-price-cell {
        padding: 0.25rem var(--gutter) 0 calc(4.5rem + var(--gutter) + 0.6rem);
        text-align: start;
    }

    .lst-table td.lst-place-cell {
        display: inline-block;
        width: auto;
        padding: 0.1rem 0 0.2rem calc(4.5rem + var(--gutter) + 0.6rem);
    }

    .lst-table td.lst-date-cell {
        display: inline-block;
        width: auto;
        padding: 0.1rem 0 0.2rem 0.5rem;
    }

    .lst-table td.lst-save-cell {
        position: absolute;
        inset-inline-end: auto;
        right: var(--gutter);
        left: auto;
        top: 0.55rem;
        width: auto;
        padding: 0;
    }
}

.filters-clear {
    margin-inline-start: auto;
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.filters-clear:hover {
    text-decoration: underline;
}

.category-layout .filters-head [data-filters-close] {
    display: none;
}

.lst-table th,
.lst-table td {
    padding: 0.45rem 0.5rem;
}

.lst-table th:nth-child(1) {
    width: 6rem;
}

.lst-table th:nth-child(2) {
    width: 4.5rem;
}

.lst-table th:nth-child(3) {
    width: 5rem;
}

.lst-table th:nth-child(4) {
    width: 5.5rem;
}

.lst-table th:nth-child(5) {
    width: auto;
}

.lst-table th:nth-child(6) {
    width: 3rem;
}

.lst-table th:nth-child(7) {
    width: 3.5rem;
}

.lst-table th:nth-child(8) {
    width: 6rem;
    text-align: end;
}

.lst-table th:nth-child(9) {
    width: 5rem;
}

.lst-table th:nth-child(10) {
    width: 5rem;
}

.lst-table td:nth-child(2),
.lst-table td:nth-child(3),
.lst-table td:nth-child(4) {
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.lst-image-cell {
    position: relative;
}

.lst-image-link {
    display: block;
}

.lst-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-s);
}

.lst-save {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.lst-row:hover .lst-save,
.lst-save:focus-visible {
    opacity: 1;
}

.lst-save:hover {
    color: var(--save);
}

.lst-title-cell {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.3;
}

.lst-title-link {
    color: #1a5fb4;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.lst-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.lst-title-flags {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-inline-start: 0.3rem;
    color: var(--accent);
    vertical-align: -0.15em;
}

.lst-title-flags .gi {
    width: 0.875rem;
    height: 0.875rem;
}

.lst-title-flags .gi-zap {
    color: var(--warn);
}

.lst-store-tag {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0 0.3rem;
    background: var(--sunk);
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.45;
}

.lst-specs {
    display: block;
    margin-top: 0.15rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-mobile-facts {
    display: none;
}

.lst-year-cell,
.lst-km-cell {
    color: var(--ink);
    font-size: 0.75rem;
    white-space: nowrap;
}

.lst-price-cell {
    text-align: end;
}

.lst-price {
    color: var(--save);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.lst-date-cell {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
}

.lst-place-cell {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
}

.lst-place-cell > span {
    display: block;
}

@media (max-width: 63.999rem) {
    .lst-table tr {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        column-gap: 0.6rem;
        padding: 0.6rem var(--gutter);
    }

    .lst-table td {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .lst-image-cell {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
    }

    .lst-save {
        top: 0.15rem;
        right: 0.15rem;
        opacity: 1;
    }

    .lst-title-cell {
        grid-column: 2;
        grid-row: 1;
    }

    .lst-title-link {
        font-size: var(--fs-row);
    }

    .lst-brand-cell,
    .lst-series-cell,
    .lst-model-cell,
    .lst-year-cell,
    .lst-km-cell,
    .lst-place-cell,
    .lst-date-cell {
        display: none;
    }

    .lst-price-cell {
        grid-column: 2;
        grid-row: 2;
        padding-top: 0.15rem;
        text-align: start;
    }

    .lst-price {
        font-size: var(--fs-m);
    }

    .lst-mobile-facts {
        display: block;
        margin-top: 0.15rem;
        color: var(--muted);
        font-size: var(--fs-xs);
        line-height: 1.3;
    }

    .lst-table .lst-divider td,
    .lst-table .lst-slot-row td {
        padding-inline: var(--gutter);
    }
}

body.category-rail .results-tools {
    display: none !important;
}

body.category-rail .results-count {
    display: none;
}

.classic-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    background: var(--surface);
}

.classic-summary p {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-s);
    line-height: 1.4;
}

.classic-summary p strong {
    font-weight: 700;
}

.classic-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1a5fb4;
    font-size: var(--fs-s);
    font-weight: 600;
    cursor: pointer;
}

.classic-save .gi {
    width: 1rem;
    height: 1rem;
    color: #758390;
}

.classic-save:hover {
    text-decoration: underline;
}

.classic-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.classic-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.classic-tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0 0.9rem;
    border: 1px solid transparent;
    background: #eaf3fb;
    color: #0b5ed7;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.classic-tab:hover {
    background: #dcecf9;
    text-decoration: none;
}

.classic-tab.is-active {
    border-color: #d6dde4;
    background: #fff;
    color: #171b1f;
}

.classic-tab.is-disabled {
    background: #f2f4f6;
    color: #8a97a3;
    cursor: not-allowed;
}

.classic-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-inline-start: auto;
}

.classic-view {
    display: flex;
    align-items: center;
    padding: 2px;
    border: 1px solid #e0e5e9;
    background: #f1f4f6;
}

.classic-view-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 1.9rem;
    background: transparent;
    color: #63717c;
}

.classic-view-btn.is-active {
    background: #fff;
    color: #1d2328;
    box-shadow: inset 0 0 0 1px #d6dde3;
}

.classic-view-btn .gi {
    width: 1rem;
    height: 1rem;
}

.classic-sort {
    margin: 0;
}

.classic-sort select {
    min-width: 11rem;
    height: 2.1rem;
    padding: 0 0.55rem;
    border: 1px solid #d6dde3;
    border-radius: 2px;
    background: #fff;
    color: #26323b;
    font-size: 0.75rem;
}

.classic-info {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid #b7c2ca;
    border-radius: 50%;
    color: #7a8994;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.classic-filter-btn {
    display: none;
}

@media (max-width: 63.999rem) {
    .classic-summary {
        margin-inline: var(--gutter);
    }

    .classic-toolbar {
        margin-inline: var(--gutter);
    }

    .classic-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .classic-tabs::-webkit-scrollbar {
        display: none;
    }

    .classic-tools {
        width: 100%;
        justify-content: flex-end;
    }

    .classic-sort {
        flex: 1 1 auto;
        min-width: 0;
    }

    .classic-sort select {
        width: 100%;
        min-width: 0;
    }

    .classic-info {
        display: none;
    }

    .classic-filter-btn {
        display: inline-flex;
        flex: none;
    }
}

.lst-table .lst-save {
    position: absolute !important;
    inset-inline-start: auto;
    top: 0.25rem;
    right: 0.25rem;
    left: auto;
}

@media (max-width: 63.999rem) {
    .lst-table .lst-save {
        top: 0.15rem;
        right: 0.15rem;
    }

    .lst-title-cell .lst-specs {
        display: none;
    }
}

@media (max-width: 63.999rem) {
    .lst-table td.lst-brand-cell,
    .lst-table td.lst-series-cell,
    .lst-table td.lst-model-cell,
    .lst-table td.lst-year-cell,
    .lst-table td.lst-km-cell,
    .lst-table td.lst-date-cell,
    .lst-table td.lst-place-cell {
        display: none;
    }

    .lst-table td.lst-image-cell {
        position: static;
    }

    .lst-table .lst-save {
        width: 2rem;
        height: 2rem;
        min-height: 2rem;
        border: 0;
        background: transparent;
        top: 0.55rem;
        right: var(--gutter);
    }
}

.lst-title-head {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}

.lst-title-head .lst-title-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-title-head .lst-title-flags {
    flex: none;
    margin-inline-start: 0;
}

@media (max-width: 63.999rem) {
    .lst-table td.lst-title-cell {
        padding-inline-end: 2.6rem;
    }
}

.lst-table th:nth-child(1) {
    width: 7rem;
}

.lst-table th:nth-child(5) {
    width: auto;
}

.lst-table .lst-title-head .lst-title-link {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.lst-table .lst-title-head {
    align-items: flex-start;
}

.lst-table .lst-row.row-hl {
    background: transparent;
}

.lst-table .lst-row.row-hl td {
    border-bottom-color: color-mix(in oklab, var(--save) 34%, var(--line));
}

@media (max-width: 63.999rem) {
    .lst-table .lst-title-head .lst-title-link {
        display: block;
        overflow: hidden;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.lst-table th:nth-child(2) {
    width: 10rem;
}

.lst-table th:nth-child(3) {
    width: auto;
}

.lst-table th:nth-child(4) {
    width: 3rem;
}

.lst-table th:nth-child(5) {
    width: 4rem;
}

.lst-table th:nth-child(6) {
    width: 4.5rem;
}

.lst-table th:nth-child(7) {
    width: 6rem;
    text-align: end;
}

.lst-table th:nth-child(8) {
    width: 5rem;
}

.lst-table th:nth-child(9) {
    width: 5rem;
}

.lst-table th:nth-child(10) {
    width: 2.75rem;
}

.lst-model-cell {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.lst-color-cell {
    color: var(--ink);
    font-size: 0.75rem;
    white-space: nowrap;
}

.lst-fav-cell {
    text-align: center;
}

.lst-table .lst-fav {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8997a2;
}

.lst-table .lst-fav:hover,
.lst-table .lst-fav[aria-pressed="true"] {
    color: var(--save);
}

.lst-sort {
    display: inline-block;
    margin-inline-start: 0.15rem;
    color: #9ba8b2;
    font-size: 0.75em;
    line-height: 1;
}

@media (max-width: 63.999rem) {
    .lst-table tr {
        position: relative;
    }

    .lst-table td.lst-model-cell,
    .lst-table td.lst-year-cell,
    .lst-table td.lst-km-cell,
    .lst-table td.lst-color-cell,
    .lst-table td.lst-date-cell,
    .lst-table td.lst-place-cell {
        display: none;
    }

    .lst-table td.lst-fav-cell {
        position: absolute;
        inset-inline-end: var(--gutter);
        top: 0.55rem;
        width: auto;
        padding: 0;
    }

    .lst-table .lst-fav {
        width: 2rem;
        height: 2rem;
        min-height: 2rem;
    }
}

.category-layout .ff-cat {
    display: none;
}

.rail-cats {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
}

.rail-cats ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rail-cats ul.rail-children {
    max-height: 14rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.rail-cats li {
    margin: 0;
}

.rail-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.9rem;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.rail-cats a:hover {
    background: var(--sunk);
}

.rail-cats a.is-active {
    color: var(--accent);
    font-weight: 700;
}

.rail-cats .rail-count {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 500;
}

.lst-table th:nth-child(2) {
    width: 9rem;
}

.lst-table th:nth-child(4) {
    width: 3.5rem;
}

.lst-table th:nth-child(5) {
    width: 5.5rem;
}

.lst-table th:nth-child(6) {
    width: 4.5rem;
}

.lst-table thead th {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 64rem) {
    .category-layout {
        grid-template-columns: 16rem minmax(0, 1fr);
    }

    .lst-table th:nth-child(2) {
        width: 8.5rem;
    }

    .lst-table th:nth-child(5) {
        width: 6rem;
    }

    .lst-table .lst-row.row-hl {
        background: var(--surface) !important;
    }
}

.lst-table thead th {
    color: #3f4a52;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.pgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
}

.pcard.row-hl {
    background: var(--surface) !important;
}

.pcard-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sunk);
    color: var(--line-strong);
}

.pcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard-media .gi {
    width: 2rem;
    height: 2rem;
}

.pcard-save {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    color: var(--muted);
}

.pcard-save:hover,
.pcard-save[aria-pressed="true"] {
    color: var(--save);
}

.pcard-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem 0.75rem 0.3rem;
}

.pcard-model {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcard-title-head {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
}

.pcard-title {
    display: -webkit-box;
    flex: 1 1 auto;
    overflow: hidden;
    color: #1a5fb4;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pcard-title:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pcard-flags {
    display: inline-flex;
    flex: none;
    gap: 0.15rem;
    color: var(--accent);
}

.pcard-flags .gi {
    width: 0.875rem;
    height: 0.875rem;
}

.pcard-flags .gi-zap {
    color: var(--warn);
}

.pcard-facts {
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.3;
}

.pcard-store {
    align-self: flex-start;
    padding: 0 0.3rem;
    background: var(--sunk);
    color: var(--muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.45;
}

.pcard-place {
    margin-top: auto;
    padding-top: 0.35rem;
    color: var(--muted);
    font-size: 0.6875rem;
    line-height: 1.35;
}

.pcard-dot {
    margin-inline: 0.2rem;
}

.pcard-price {
    padding: 0.4rem 0.75rem 0.75rem;
    color: var(--save);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.pgrid-divider,
.pgrid-slot {
    grid-column: 1 / -1;
}

.pgrid-divider a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.65rem 0.75rem;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--fs-s);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pgrid {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: var(--gutter);
    }
}

.pgrid .pcard-save {
    position: absolute !important;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
}

.classic-tab {
    background: var(--accent-tint);
    color: var(--accent);
}

.classic-tab:hover {
    background: color-mix(in oklab, var(--accent) 14%, var(--surface));
}

.classic-tab.is-active {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

.classic-save {
    color: var(--accent);
}

.lst-title-link,
.pcard-title {
    color: var(--ink);
}

.lst-title-link:hover,
.pcard-title:hover {
    color: var(--accent);
    text-decoration: underline;
}