/* Payism V3 website: search results / listing (system 7.10, DESIGN_home-search 4). */

.v3-ls { padding-top: 20px; }
.v3-ls__crumbs { margin-bottom: 12px; }
.v3-ls__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.v3-ls__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.v3-ls__title .v3-h1 { font-size: 30px; line-height: 38px; overflow-wrap: anywhere; }
.v3-ls__count { color: var(--v3-muted); font-size: 16px; }
.v3-ls__tools { display: flex; align-items: center; gap: 12px; flex: none; }
.v3-ls__sort { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; margin: 0; background: #fff; border: 1px solid var(--v3-line-strong); border-radius: var(--v3-r-12); font-size: 14px; color: var(--v3-muted); }
.v3-ls__sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 600 14px var(--v3-font); color: var(--v3-ink); padding-right: 22px; cursor: pointer; }
.v3-ls__sort .v3i { position: absolute; right: 12px; pointer-events: none; }
.v3-ls__view { display: flex; gap: 6px; }
.v3-ls__view button { width: 44px; height: 44px; border-radius: var(--v3-r-12); border: 1px solid var(--v3-line-strong); background: #fff; color: var(--v3-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.v3-ls__view button.is-active { background: var(--v3-brand-600); border-color: var(--v3-brand-600); color: #fff; }
.v3-ls__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v3-ls__chips:empty { display: none; }
.v3-ls__showing { font-size: 14px; margin: 10px 0 16px; }
.v3-ls__bar { display: none; }
.v3-ls__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--v3-grid-gap); align-items: start; }

/* filter rail */
.v3-filters { position: sticky; top: 80px; background: #fff; border-radius: var(--v3-r-20); box-shadow: var(--v3-shadow-1); max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.v3-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--v3-line); }
.v3-filters__close, .v3-filters__tabs, .v3-filters__foot { display: none; }
.v3-filters__groups { overflow-y: auto; padding: 0 20px 12px; overscroll-behavior: contain; }
.v3-fg { border-bottom: 1px solid var(--v3-line); padding: 6px 0; }
.v3-fg:last-child { border-bottom: 0; }
.v3-fg summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font: 600 15px var(--v3-font); list-style: none; cursor: pointer; }
.v3-fg summary::-webkit-details-marker { display: none; }
.v3-fg:not([open]) summary .v3i { transform: rotate(180deg); }
.v3-fg__body { padding: 0 0 10px; }
.v3-fg__scroll { max-height: 236px; overflow-y: auto; }
.v3-check--child { padding-left: 26px; }
.v3-fg__price { display: flex; align-items: center; gap: 8px; }
.v3-fg__price label { flex: 1; margin: 0; }
.v3-fg__price .v3-input { height: 40px; padding: 0 10px; font-size: 14px; }
.v3-fg__price .v3-btn { flex: none; padding: 0 12px; }
.v3-fg__presets { margin-top: 10px; }
.v3-fg__presets .v3-chip { height: 32px; font-size: 13px; padding: 0 10px; }
.v3-fg__disc { margin-top: 8px; }
.v3-fg__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 8px; border: 1px solid var(--v3-line-strong); border-radius: var(--v3-r-12); color: var(--v3-muted); }
.v3-fg__search input { flex: 1; min-width: 0; border: 0; background: none; font: 500 14px var(--v3-font); }
.v3-fg__search input:focus { outline: none; }
.v3-fg__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.v3-swatch { position: relative; margin: 0; cursor: pointer; }
.v3-swatch input { position: absolute; opacity: 0; inset: 0; }
.v3-swatch span:not(.v3-sr) { display: block; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 27, 45, .15); }
.v3-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--v3-brand-600); }
.v3-swatch input:focus-visible + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--v3-brand-400); }

/* results grid */
.v3-ls__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v3-grid-gap); }
.v3-ls__grid[aria-busy='true'] { opacity: .6; transition: opacity .15s; }
.v3-ls__grid > .v3-ls__promo, .v3-ls__grid > .v3-ls__empty { grid-column: 1 / -1; }
.v3-ls__grid.is-list { grid-template-columns: minmax(0, 1fr); }
.v3-ls__grid.is-list .v3-card { flex-direction: row; }
.v3-ls__grid.is-list .v3-card__media { width: 200px; flex: none; margin: 12px; }
.v3-ls__promo { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: #fff; border-radius: var(--v3-r-20); box-shadow: var(--v3-shadow-1); }
.v3-ls__promo div { flex: 1; display: flex; flex-direction: column; }
.v3-ls__promo b { font-size: 20px; line-height: 28px; font-weight: 800; }
.v3-ls__promo span { color: var(--v3-muted); }
.v3-ls__promo-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--v3-brand-100); color: var(--v3-brand-600); display: inline-flex !important; align-items: center; justify-content: center; flex: none; }
.v3-ls__more { text-align: center; margin-top: 32px; }
.v3-ls__more p { margin: 0 0 10px; font-size: 14px; }
.v3-ls__progress { width: 280px; height: 6px; margin: 0 auto 16px; border-radius: 99px; background: var(--v3-line); overflow: hidden; }
.v3-ls__progress i { display: block; height: 100%; width: 0; background: var(--v3-brand-600); border-radius: inherit; transition: width .3s; }
.v3-ls__more .v3-btn { min-width: 240px; }
.v3-ls__pages { margin-top: 16px; display: flex; justify-content: center; }
.v3-ls__pages .pagination { gap: 4px; margin: 0; }
.v3-ls__pages .page-item { margin: 0 !important; }
.v3-ls__pages .page-link { min-width: 40px !important; height: 40px; line-height: 40px !important; border: 0 !important; border-radius: var(--v3-r-8) !important; background: transparent; color: var(--v3-ink) !important; font-weight: 600; }
.v3-ls__pages .page-item.active .page-link { background: var(--v3-brand-100); color: var(--v3-brand-700) !important; }
.v3-ls__pages .page-item:not(.active) .page-link { background: transparent !important; }
.v3-ls__pages .page-item:not(.active):not(.disabled) .page-link:hover { background: var(--v3-brand-50) !important; color: var(--v3-brand-700) !important; }
.v3-ls__pages .page-item.disabled .page-link { color: var(--v3-muted) !important; opacity: .55; }
.v3-ls__empty-sub { margin: 24px 0 10px; font-weight: 700; }

@media (max-width: 1199.98px) {
    .v3-ls__body { grid-template-columns: 240px minmax(0, 1fr); }
    .v3-ls__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* phone + tablet: filter sheet, sticky bar, 2-across */
@media (max-width: 991.98px) {
    .v3-ls { padding-top: 8px; }
    .v3-ls__crumbs, .v3-ls__tools, .v3-ls__showing { display: none; }
    .v3-ls__top { order: 2; margin: 12px 0 10px; }
    .v3-ls__title .v3-h1 { font-size: 20px; line-height: 28px; }
    .v3-ls__count { font-size: 14px; }
    .v3-ls__bar { position: sticky; top: 104px; z-index: 1020; display: grid; grid-template-columns: 1fr 1fr; margin: 0 calc(-1 * var(--v3-side)); background: #fff; border-bottom: 1px solid var(--v3-line); }
    .v3-ls__bar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 0; background: none; font: 600 15px var(--v3-font); color: var(--v3-ink); }
    .v3-ls__bar-btn + .v3-ls__bar-btn { border-left: 1px solid var(--v3-line); }
    .v3-ls__bar-btn span { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
    .v3-ls__bar-btn small { font-size: 13px; color: var(--v3-muted); font-weight: 500; }
    .v3-ls__chips { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--v3-side)) 0; padding: 0 var(--v3-side); scrollbar-width: none; }
    .v3-ls__chips::-webkit-scrollbar { display: none; }
    .v3-ls__form { display: flex; flex-direction: column; }
    .v3-ls__bar { order: 1; } .v3-ls__chips { order: 1; } .v3-ls__body { order: 3; }
    .v3-ls__body { grid-template-columns: minmax(0, 1fr); }
    .v3-ls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-ls__promo { flex-wrap: wrap; padding: 16px; gap: 12px; }
    .v3-ls__promo b { font-size: 16px; line-height: 22px; }
    .v3-ls__promo-ico { width: 44px; height: 44px; }
    .v3-ls__more .v3-btn { width: 100%; }
    .v3-ls__progress { width: 60%; }

    .v3-filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1050; height: 92vh; max-height: none; border-radius: var(--v3-r-24) var(--v3-r-24) 0 0; box-shadow: var(--v3-shadow-3); transform: translateY(105%); transition: transform .25s; display: grid; grid-template-columns: 38% 62%; grid-template-rows: auto minmax(0, 1fr) auto; }
    .v3-filters.is-open { transform: none; }
    .v3-filters__head { grid-column: 1 / -1; padding: 16px 12px 12px 20px; }
    .v3-filters__head .v3-sg-link { display: none; }
    .v3-filters__close { display: inline-flex; background: var(--v3-tile); box-shadow: none; }
    .v3-filters__tabs { display: flex; flex-direction: column; overflow-y: auto; background: var(--v3-bg); }
    .v3-filters__tab { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 52px; padding: 0 12px 0 16px; border: 0; background: none; text-align: left; font: 500 15px var(--v3-font); color: var(--v3-ink); }
    .v3-filters__tab.is-active { background: #fff; color: var(--v3-brand-600); font-weight: 700; }
    .v3-filters__tab.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v3-brand-600); }
    .v3-filters__groups { padding: 8px 16px; }
    .v3-filters .v3-fg { display: none; border: 0; }
    .v3-filters .v3-fg.is-current { display: block; }
    .v3-filters .v3-fg summary { display: none; }
    .v3-filters .v3-fg__scroll { max-height: none; }
    .v3-filters .v3-check { min-height: 48px; font-size: 15px; }
    .v3-filters__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v3-line); background: #fff; }
    .v3-filters__foot .v3-btn--primary { flex: 1; }
    body.v3-sheet-open { overflow: hidden; }
    .v3-sort-sheet__list { padding: 8px 24px calc(16px + env(safe-area-inset-bottom)); }
    .v3-sort-sheet__list .v3-check { min-height: 52px; font-size: 16px; }
    .v3-ls__grid.is-list .v3-card__media { width: 120px; margin: 8px; }
}
@media (min-width: 992px) { .v3-sort-sheet { display: none !important; } }
/* phone filter sheet density (search-filter-sheet_390_v3) */
@media (max-width: 991.98px) {
    .v3-filters__tab { font-size: 14px; min-height: 48px; }
    .v3-filters .v3-check { font-size: 14px; min-height: 44px; }
}

/* Review (home-search, 28 Oct): on desktop the whole filter rail flows with the page, as drawn
   (search-results_1440_v3). A viewport-tall sticky rail cut groups off mid-row and hid Discount,
   Colour and the rest behind an inner scrollbar. Long value lists keep their own short scroll. */
@media (min-width: 992px) {
    .v3-filters { position: static; max-height: none; }
    .v3-filters__groups { overflow: visible; }
    .v3-fg__scroll { max-height: 232px; mask-image: linear-gradient(180deg, #000 82%, rgba(0,0,0,.25)); -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0,0,0,.25)); }
}

/* keyword with no results (search-empty_1440_v3): one full-width card, category photo tiles, best sellers */
.v3-ls--none .v3-ls__tools, .v3-ls--none .v3-filters, .v3-ls--none .v3-ls__showing, .v3-ls--none .v3-ls__bar,
.v3-ls--none .v3-ls__chips, .v3-ls--none .v3-ls__more, .v3-ls--none .v3-ls__pages { display: none !important; }
.v3-ls--none .v3-ls__top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.v3-ls--none .v3-ls__body { grid-template-columns: minmax(0, 1fr); }
.v3-ls--none .v3-ls__grid { gap: var(--v3-section) var(--v3-grid-gap); }
.v3-ls__empty-sec { min-width: 0; }
.v3-ls__empty-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.v3-ls__empty-cat { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 14px; background: #fff; border-radius: var(--v3-r-16); box-shadow: var(--v3-shadow-1); color: var(--v3-ink) !important; text-decoration: none !important; transition: box-shadow .2s, transform .2s; }
.v3-ls__empty-cat:hover { box-shadow: var(--v3-shadow-2); transform: translateY(-2px); }
.v3-ls__empty-cat-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: var(--v3-r-12); background: var(--v3-tile); overflow: hidden; color: var(--v3-muted); }
.v3-ls__empty-cat-img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.v3-ls__empty-cat b { padding: 0 4px; font: 700 15px/22px var(--v3-font); }
.v3-ls__empty-cat small { padding: 0 4px; font-size: 14px; color: var(--v3-muted); }
@media (max-width: 991.98px) {
    .v3-ls--none .v3-ls__grid { gap: 32px 12px; }
    .v3-ls__empty-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .v3-ls__empty-cat { padding: 8px 8px 10px; }
    .v3-ls__empty-cat b { font-size: 14px; line-height: 20px; }
    .v3-ls__empty-cat small { font-size: 13px; }
}

/* Review (home-search, 28 Oct): the returns promo row squeezed its copy into a 6-line column at 390. */
@media (max-width: 767.98px) {
    .v3-ls__promo { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
    .v3-ls__promo-ico { width: 44px; height: 44px; }
    .v3-ls__promo div { flex: 1 1 calc(100% - 64px); }
    .v3-ls__promo b { font-size: 17px; line-height: 24px; }
    .v3-ls__promo span { font-size: 14px; line-height: 20px; }
    .v3-ls__promo .v3-btn { flex: 1 1 100%; }
}
.v3-check--rating .v3-star { color: var(--v3-star, #F2A900); fill: var(--v3-star, #F2A900); margin: 0 2px; vertical-align: -2px; }
/* Admin-managed mid-grid promo art (search-results_1440_v3: illustration on the left). */
.v3-ls__promo-art { flex: none; width: 168px; height: 96px; object-fit: contain; border-radius: var(--v3-r-12); background: var(--v3-brand-100, #E6F1FA); }
@media (max-width: 767.98px) { .v3-ls__promo-art { width: 96px; height: 64px; } }

/* Brand and category pages: the count sits under the title ("Showing 1-24 of N"), as drawn; the default returns card
   is a search-results card there (an admin promo still shows). */
.v3-listing-page .v3-brand ~ .v3-ls__form .v3-ls__title .v3-ls__count,
.v3-listing-page .v3-cat ~ .v3-ls__form .v3-ls__title .v3-ls__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-listing-page .v3-brand ~ .v3-ls__form .v3-ls__promo--default,
.v3-listing-page .v3-cat ~ .v3-ls__form .v3-ls__promo--default { display: none; }

/* category_390_v3 / brand_390_v3: on phones the hero carries the name, so the listing title is read by screen readers only. */
@media (max-width: 767.98px) {
    .v3-listing-page .v3-brand ~ .v3-ls__form .v3-ls__title .v3-h2,
    .v3-listing-page .v3-cat ~ .v3-ls__form .v3-ls__title .v3-h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}