/* ES standard v2 (component theme 5) — chunk C: product card, grids, listing.
   Source: dev_template/UI mockups setup/ProductCard.dc.html (card) and
   Marketplace Pro.dc.html lines 285–383 (listing). Every value is the design's
   literal inline value, verified against ref_design/design_listing_*.json.
   Every rule is scoped to .sf-scope[data-ct="5"]; RTL via logical properties.
   Breakpoint: the design's "mob" layout = < 1000px. */

/* ---------- grid (every [data-sf-grid]: listing, home feeds, any card list) ---------- */
.sf-scope[data-ct="5"] .es-grid,
.sf-scope[data-ct="5"] [data-sf-grid] {
    --es-cols: var(--sf-cols-d, 4);
    display: grid;
    gap: 20px;
    /* the design: auto-fill, never narrower than 210px, N per row at full width */
    grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - (var(--es-cols) - 1) * 20px) / var(--es-cols))), 1fr));
    /* Owner (2026-10-22): every card in a row is the same height — the
       white body grows and the button sits on the bottom edge (a Quick
       Payment card with no category or price no longer ends up short). */
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-scope[data-ct="5"] .es-grid > *,
.sf-scope[data-ct="5"] [data-sf-grid] > * { display: flex; flex-direction: column; min-width: 0; }
.sf-scope[data-ct="5"] .es-grid > * > .es-card,
.sf-scope[data-ct="5"] [data-sf-grid] > * > .es-card { flex: 1 1 auto; }
.sf-scope[data-ct="5"] .es-grid.is-list,
.sf-scope[data-ct="5"] [data-sf-grid].is-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 999px) {
    .sf-scope[data-ct="5"] .es-grid,
    .sf-scope[data-ct="5"] [data-sf-grid] {
        gap: 12px;
        grid-template-columns: repeat(var(--sf-cols-m, 2), minmax(0, 1fr));
    }
}

/* ---------- product card ---------- */
.sf-scope[data-ct="5"] .es-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: 16px;
    overflow: hidden;
    line-height: normal;
    transition: box-shadow 200ms, border-color 200ms;
}
.sf-scope[data-ct="5"] .es-card:hover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .10);
    border-color: #CBD5E1;
}
.sf-scope[data-ct="5"] .es-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F1F5F9;
    overflow: hidden;
}
.sf-scope[data-ct="5"] .es-card__imglink { position: absolute; inset: 0; display: block; }
.sf-scope[data-ct="5"] .es-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-scope[data-ct="5"] .es-card--contain .es-card__img { object-fit: contain; padding: 8%; }
.sf-scope[data-ct="5"] .es-card__ph {
    position: absolute;
    inset: 10px;
    display: grid;
    place-items: center;
    border: 1.5px dashed #CBD5E1;
    border-radius: 12px;
    color: var(--es-muted-2);
}
.sf-scope[data-ct="5"] .es-card__badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 1;
    pointer-events: none;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: var(--es-amber);
    color: var(--es-navy);
}
.sf-scope[data-ct="5"] .es-card__badge--sale { background: var(--es-red); color: #fff; }
.sf-scope[data-ct="5"] .es-card__badge--new { background: var(--es-blue); color: #fff; }
.sf-scope[data-ct="5"] .es-card__badge--best { background: var(--es-amber); color: var(--es-navy); }
.sf-scope[data-ct="5"] .es-card__badge--out { background: var(--es-muted); color: #fff; }
.sf-scope[data-ct="5"] .es-card__fav {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--es-navy);
}
.sf-scope[data-ct="5"] .es-card__fav svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill 150ms, color 150ms;
}
.sf-scope[data-ct="5"] .es-card__fav[aria-pressed="true"] { color: #EF4444; }
.sf-scope[data-ct="5"] .es-card__fav[aria-pressed="true"] svg { fill: #EF4444; }
.sf-scope[data-ct="5"] .es-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 0;
    min-width: 0;
}
.sf-scope[data-ct="5"] .es-card__cat {
    align-self: flex-start;
    max-width: 100%;
    min-height: 15px;
    font-size: 12px;
    font-weight: 500;
    color: var(--es-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-scope[data-ct="5"] .es-card__name {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-scope[data-ct="5"] .es-card__link { color: var(--es-text); }
.sf-scope[data-ct="5"] .es-card__link:hover { color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 15px;
    font-size: 12px;
    color: var(--es-muted);
}
.sf-scope[data-ct="5"] .es-card__rating svg { flex: none; fill: #F59E0B; }
.sf-scope[data-ct="5"] .es-card__rating strong { color: var(--es-text); font-weight: 600; }
.sf-scope[data-ct="5"] .es-card__stars { display: inline-flex; gap: 1px; }
.sf-scope[data-ct="5"] .es-card__rating.is-empty svg { fill: #E2E8F0; }
.sf-scope[data-ct="5"] .es-card__pricerow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-top: 2px;
}
.sf-scope[data-ct="5"] .es-card__price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--es-navy);
    white-space: nowrap;
}
.sf-scope[data-ct="5"] .es-card__from { font-size: 12px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-card__was { font-size: 12px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-card__off { font-size: 12px; font-weight: 700; color: var(--es-red); }
.sf-scope[data-ct="5"] .es-card__delivery {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 15px;
    font-size: 12px;
    color: #475569;
}
.sf-scope[data-ct="5"] .es-card__delivery svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}
.sf-scope[data-ct="5"] .es-card__delivery.is-free { color: var(--es-green); }
.sf-scope[data-ct="5"] .es-card__delivery.is-hidden { visibility: hidden; }
.sf-scope[data-ct="5"] .es-card__foot { padding: 12px 14px 14px; }
.sf-scope[data-ct="5"] .es-card__add {
    position: relative;
    width: 100%;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 1px 6px;
    border-radius: 12px;
    border: 1px solid var(--es-blue-soft);
    background: var(--es-blue-soft);
    color: var(--es-blue-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.sf-scope[data-ct="5"] .es-card__add:hover:not([disabled]) { background: var(--es-blue-soft-2); border-color: var(--es-blue-soft-2); }
.sf-scope[data-ct="5"] .es-card__add[disabled] { opacity: .55; cursor: not-allowed; }
.sf-scope[data-ct="5"] .es-card__add > * { grid-area: 1 / 1; }
.sf-scope[data-ct="5"] .es-card__addlabel,
.sf-scope[data-ct="5"] .es-card__addstate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.sf-scope[data-ct="5"] .es-card__add svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}
.sf-scope[data-ct="5"] .es-card__addstate--done svg { stroke-width: 2.6; stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-card__addstate { visibility: hidden; }
.sf-scope[data-ct="5"] .es-card__add.is-busy .es-card__addlabel,
.sf-scope[data-ct="5"] .es-card__add.is-added .es-card__addlabel { visibility: hidden; }
.sf-scope[data-ct="5"] .es-card__add.is-busy .es-card__addstate--busy { visibility: visible; }
.sf-scope[data-ct="5"] .es-card__add.is-added { background: var(--es-navy); border-color: var(--es-navy); color: #fff; }
.sf-scope[data-ct="5"] .es-card__add.is-added .es-card__addstate--done { visibility: visible; }
.sf-scope[data-ct="5"] .es-card__spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--es-blue-ink) 25%, transparent);
    border-top-color: currentColor;
    animation: es-spin .7s linear infinite;
}
@keyframes es-spin { to { transform: rotate(360deg); } }

/* ---------- listing ---------- */
.sf-scope[data-ct="5"] .es-listing { line-height: normal; }
.sf-scope[data-ct="5"] .es-listing__wrap { margin-top: 0; }
.sf-scope[data-ct="5"] .es-listing__crumbs [aria-current] { font-weight: 500; }
.sf-scope[data-ct="5"] .es-listing__title,
.sf-scope[data-ct="5"] .es-listing__count,
.sf-scope[data-ct="5"] .es-listing__crumbs,
.sf-scope[data-ct="5"] .es-listing__sidetitle,
.sf-scope[data-ct="5"] .es-listing__legend,
.sf-scope[data-ct="5"] .es-listing__emptytitle { line-height: normal; }
.sf-scope[data-ct="5"] .es-listing__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 12px;
}
.sf-scope[data-ct="5"] .es-listing__title {
    margin: 0;
    font-size: clamp(24px, 2.6cqi, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--es-text);
}
.sf-scope[data-ct="5"] .es-listing__count { margin: 4px 0 0; font-size: 14px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-listing__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sf-scope[data-ct="5"] .es-listing__filtersbtn {
    display: none;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--es-border);
    background: var(--es-surface);
    color: var(--es-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__filtersbtn svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-listing__filtersn {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--es-blue);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}
.sf-scope[data-ct="5"] .es-listing__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #475569;
}
.sf-scope[data-ct="5"] .es-listing__select {
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--es-border);
    border-radius: 12px;
    background: var(--es-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--es-text);
    cursor: pointer;
}
/* the grid / list switch is a kept JS hook; the design has no such control */
.sf-scope[data-ct="5"] .es-listing__viewtoggle { display: none !important; }
.sf-scope[data-ct="5"] .es-listing__chips {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sf-scope[data-ct="5"] .es-listing__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding-inline: 12px 10px;
    border-radius: 999px;
    background: var(--es-blue-soft);
    color: var(--es-blue-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__chip:hover { background: var(--es-blue-soft-2); color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-listing__chip svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-listing__clearall {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 8px;
    color: var(--es-muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sf-scope[data-ct="5"] .es-listing__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}
.sf-scope[data-ct="5"] .es-listing--nofilters .es-listing__layout { grid-template-columns: minmax(0, 1fr); }
.sf-scope[data-ct="5"] .es-listing__main { min-width: 0; }

/* filters panel */
.sf-scope[data-ct="5"] .es-listing__side {
    position: sticky;
    top: 190px;
    z-index: 1;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    background: var(--es-surface);
    border: 1px solid var(--es-border);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: transform 240ms ease, visibility 240ms;
}
.sf-scope[data-ct="5"] .es-listing__sidehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sf-scope[data-ct="5"] .es-listing__sidetitle { margin: 0; font-size: 17px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-listing__close {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--es-text);
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-listing__form { display: flex; flex-direction: column; gap: 22px; }
.sf-scope[data-ct="5"] .es-listing__group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sf-scope[data-ct="5"] .es-listing__legend {
    display: block;
    padding: 0 2px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--es-navy);
}
.sf-scope[data-ct="5"] .es-listing__opts { display: flex; flex-direction: column; gap: 4px; }
.sf-scope[data-ct="5"] .es-listing__opt {
    position: relative;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--es-text-2);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: start;
}
.sf-scope[data-ct="5"] .es-listing__opt:hover { background: var(--es-bg); }
.sf-scope[data-ct="5"] .es-listing__opt.is-on,
.sf-scope[data-ct="5"] .es-listing__opt:has(input:checked) {
    background: var(--es-blue-soft);
    color: var(--es-blue-ink);
    font-weight: 600;
}
.sf-scope[data-ct="5"] .es-listing__opt:has(input:focus-visible) { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.sf-scope[data-ct="5"] .es-listing__optname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-scope[data-ct="5"] .es-listing__optn { font-size: 12px; font-weight: 400; color: var(--es-muted-2); }
.sf-scope[data-ct="5"] .es-listing__price { gap: 10px; }
.sf-scope[data-ct="5"] .es-listing__pricehead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 700;
    color: var(--es-navy);
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__pricehead .es-listing__legend { margin: 0; padding: 0; }
.sf-scope[data-ct="5"] .es-listing__priceval { font-weight: 600; color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-listing__range {
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    accent-color: var(--es-blue);
    background: transparent;
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__price.is-invalid .es-listing__range { accent-color: var(--es-red); }
.sf-scope[data-ct="5"] .es-listing__check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 14px;
    color: var(--es-text);
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--es-blue);
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__sidefoot { display: none; }
.sf-scope[data-ct="5"] .es-listing__scrim { display: none; }

/* category picker (1000+ categories: searchable lookup, same hooks as before) */
.sf-scope[data-ct="5"] .es-listing__picker { position: relative; }
.sf-scope[data-ct="5"] .es-listing__pickerctl { position: relative; }
.sf-scope[data-ct="5"] .es-listing__pickerinput { padding-inline-end: 40px; }
.sf-scope[data-ct="5"] .es-listing__pickerclear {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--es-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__pickerclear:hover { background: var(--es-line); color: var(--es-text); }
.sf-scope[data-ct="5"] .es-listing__pickerlist {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 5;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
}
.sf-scope[data-ct="5"] .es-listing__pickerlist[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-listing__pickerlist li,
.sf-scope[data-ct="5"] .es-listing__pickerlist [role="option"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--es-text-2);
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__pickerlist [role="option"]:hover,
.sf-scope[data-ct="5"] .es-listing__pickerlist [aria-selected="true"] { background: var(--es-blue-soft); color: var(--es-blue-ink); }

/* empty state */
.sf-scope[data-ct="5"] .es-listing__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    background: var(--es-surface);
    border: 1px dashed #CBD5E1;
    border-radius: 22px;
}
.sf-scope[data-ct="5"] .es-listing__empty[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-listing__gridwrap[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-listing__emptyicon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--es-blue-soft);
    color: var(--es-blue);
    margin-bottom: 6px;
}
.sf-scope[data-ct="5"] .es-listing__emptyicon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-listing__emptytitle { margin: 0; font-size: 19px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-listing__emptytext { margin: 0; font-size: 14px; color: var(--es-muted); max-width: 36ch; line-height: 1.55; }
.sf-scope[data-ct="5"] .es-listing__emptybtn { margin-top: 10px; min-height: 46px; padding: 0 22px; }

/* load more (optional, show_loadmore) */
.sf-scope[data-ct="5"] .es-listing__loadmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}
.sf-scope[data-ct="5"] .es-listing__loadcount { margin: 0; font-size: 13px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-listing__loadbar {
    width: 220px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--es-border);
    accent-color: var(--es-blue);
}
.sf-scope[data-ct="5"] .es-listing__loadbar::-webkit-progress-bar { background: var(--es-border); }
.sf-scope[data-ct="5"] .es-listing__loadbar::-webkit-progress-value { background: var(--es-blue); }
.sf-scope[data-ct="5"] .es-listing__loadbar::-moz-progress-bar { background: var(--es-blue); }

/* numbered pagination */
.sf-scope[data-ct="5"] .es-listing__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
}
.sf-scope[data-ct="5"] .es-listing__pgbtn,
.sf-scope[data-ct="5"] .es-listing__pgnum {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--es-border);
    background: var(--es-surface);
    color: var(--es-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.sf-scope[data-ct="5"] .es-listing__pgbtn:hover,
.sf-scope[data-ct="5"] .es-listing__pgnum:hover { background: var(--es-line); color: var(--es-text); }
.sf-scope[data-ct="5"] .es-listing__pgbtn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[dir="rtl"] .sf-scope[data-ct="5"] .es-listing__pgbtn svg,
.sf-scope[data-ct="5"][dir="rtl"] .es-listing__pgbtn svg { transform: scaleX(-1); }
.sf-scope[data-ct="5"] .es-listing__pgnum.is-current {
    background: var(--es-navy);
    border-color: var(--es-navy);
    color: #fff;
    cursor: default;
}
.sf-scope[data-ct="5"] .es-listing__pgbtn.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.sf-scope[data-ct="5"] .es-listing__pggap { padding: 0 2px; color: var(--es-muted); }

/* ---------- < 1000px: the design's mobile listing (filters = bottom sheet) ---------- */
@media (max-width: 999px) {
    .sf-scope[data-ct="5"] .es-listing__filtersbtn { display: flex; }
    .sf-scope[data-ct="5"] .es-listing__layout { grid-template-columns: minmax(0, 1fr); }
    .sf-scope[data-ct="5"] .es-listing__side {
        position: fixed;
        top: auto;
        bottom: 0;
        inset-inline: 0;
        z-index: 70;
        transform: translateY(105%);
        visibility: hidden;
        max-height: 82%;
        border-radius: 22px 22px 0 0;
    }
    .sf-scope[data-ct="5"] .es-listing__side.is-open { transform: translateY(0); visibility: visible; }
    .sf-scope[data-ct="5"] .es-listing__close { display: grid; }
    .sf-scope[data-ct="5"] .es-listing__sidefoot {
        position: sticky;
        bottom: -20px;
        margin: 0 -20px -20px;
        padding: 14px 20px 18px;
        background: var(--es-surface);
        border-top: 1px solid var(--es-border);
        display: flex;
        gap: 10px;
    }
    .sf-scope[data-ct="5"] .es-listing__sideclear {
        flex: 1;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid var(--es-border);
        background: var(--es-surface);
        color: var(--es-text);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .sf-scope[data-ct="5"] .es-listing__sideapply {
        flex: 2;
        min-height: 48px;
        border-radius: 12px;
        border: 0;
        background: var(--es-blue);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
    .sf-scope[data-ct="5"] .es-listing__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 69;
        background: rgba(15, 23, 42, .45);
    }
    .sf-scope[data-ct="5"] .es-listing__scrim[hidden] { display: none; }
    .sf-scope[data-ct="5"] .es-listing__pager { gap: 6px; }
}