/*
 * APS Products 4.39.0 - the list pages (inc/aps-lists.php): the full devices list (/page/N/), brand
 * and category pages, the brands list, the comparisons list and the cards of the search page.
 * Loaded with css/aps-home.css (the chips .aps-hm-chip, the section heads .aps-hm-head and the
 * brand tiles .aps-hm-brand come from there). One file for both directions: logical properties only.
 * Colors, corners and spacing come from the design tokens of APS Settings > Design.
 * The grids follow the width of the content column (container queries), so they fit with or
 * without the sidebar.
 */

/* 4.39.2 the corners of the cards of the home page and the list pages: 10px (chosen by Hassan) */
.aps-ls {--aps-radius-in:10px; container-type:inline-size; display:flow-root; color:var(--aps-text-color, #1f2937);}
.aps-ls *, .aps-ls *::before, .aps-ls *::after {box-sizing:border-box;}
.aps-ls ul, .aps-ls ol {margin:0 !important; padding:0 !important; list-style:none !important;}
.aps-ls li {margin:0; padding:0;}
.aps-ls li::before, .aps-ls li::marker {content:none;}
.aps-ls a {text-decoration:none !important; box-shadow:none !important;}
.aps-ls a:focus-visible, .aps-ls button:focus-visible {outline:2px solid var(--aps-skin-color-3); outline-offset:2px;}
.aps-ls .aps-hm-head {margin-top:calc(22px * var(--aps-scale, 1));}
.aps-ls h2.aps-hm-title {display:flex; align-items:center; gap:8px; min-width:0; margin:0 !important; padding:0 !important; color:var(--aps-headings-color, #101828); font-size:18px !important; font-weight:800 !important; line-height:1.35 !important; border:0 !important; background:none !important;}
.aps-ls h2.aps-hm-title::before {content:""; flex:none; width:4px; height:1.1em; border-radius:3px; background:var(--aps-skin-color-1);}
.aps-ls h2.aps-hm-title::after {display:none !important;}
.aps-ls-none {margin:16px 0; padding:16px; color:var(--aps-mute); text-align:center; background:var(--aps-tile); border-radius:var(--aps-radius-in, 14px);}

/* the dark head: logo, title, the numbers line, the text of the brand / category */
.aps-pf-head.aps-ls-head {position:relative; margin:0 0 14px; overflow:hidden;}
.aps-ls-deco::after {content:""; position:absolute; top:-90px; inset-inline-end:-70px; width:180px; height:180px; border:24px solid color-mix(in srgb, var(--aps-skin-color-3) 10%, transparent); border-radius:50%; pointer-events:none;}
/* no z-index here: it would cut the logo's blend off from the head behind it */
.aps-ls-head-row {position:relative; display:flex; align-items:center; gap:14px; min-width:0;}
.aps-ls-head-txt {flex:1 1 auto; min-width:0;}
.aps-ls-head .aps-main-title {margin:0 !important; font-size:21px !important; font-weight:800 !important; line-height:1.4 !important; overflow-wrap:anywhere;}
/* 4.39.3 the logo tile is see-through like the "Search by specs" card of the home page. The logo file is
   prepared on the server (aps_list_logo_prepare(): white background taken off, margins cut) and keeps its
   colours; a black / grey logo is shown white. A file that could not be prepared (SVG ...) is made light. */
.aps-ls-logo {display:flex; flex:none; align-items:center; justify-content:center; width:72px; height:72px; padding:7px; background:color-mix(in srgb, var(--aps-on-head, #fff) 7%, transparent); border:1px solid color-mix(in srgb, var(--aps-on-head, #fff) 15%, transparent); border-radius:calc(var(--aps-radius-in, 14px) * .85);}
.aps-ls-logo img {display:block; width:auto !important; max-width:100% !important; height:auto !important; max-height:100% !important; object-fit:contain;}
.aps-ls-logo.is-dark img {filter:brightness(0) invert(1);}
.aps-ls-logo.is-raw img {filter:grayscale(1) invert(1) brightness(1.15); mix-blend-mode:screen;}
/* the numbers follow the title on its line, each after a thin bar */
.aps-ls-head .aps-main-title {display:inline !important;}
.aps-pf-head .aps-ls-line {display:inline; margin:0 !important; padding:0 !important; color:var(--aps-head-mute); font-size:13px; line-height:1.6;}
.aps-ls-line > span {white-space:nowrap;}
.aps-ls-line b {color:var(--aps-on-head, #fff); font-size:15px; font-weight:800;}
.aps-ls-line > span::before {content:""; display:inline-block; width:1.5px; height:.95em; margin-inline:12px; vertical-align:-.12em; background:currentColor; border-radius:1px; opacity:.55;}
.aps-pf-head .aps-ls-desc {position:relative; z-index:1; margin:12px 0 0; font-size:14px; line-height:1.85;}

/* "Search by specs" (gold icon tile, as on the home page) and the brands / categories switcher */
.aps-ls .aps-pf-controls {display:flex; float:none; width:auto; align-items:flex-start; gap:8px; margin:0 0 12px;}
.aps-ls .aps-pf-filters-btn {flex:1 1 auto; justify-content:flex-start; gap:8px; min-width:0; height:46px; padding:0 7px !important; padding-inline-end:14px !important; color:var(--aps-ink, #1b2533) !important; font-size:14px; font-weight:800; background:#fff !important; border:1px solid var(--aps-hair, #e3e8ef); border-radius:calc(var(--aps-radius-in, 14px) * .85); transition:border-color .15s ease;}
.aps-ls .aps-pf-filters-btn:hover, .aps-ls .aps-pf-filters-btn:focus {color:var(--aps-ink, #1b2533) !important; background:#fff !important; border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff);}
.aps-ls .aps-pf-filters-btn > span:last-child {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.aps-ls-specs-ic {display:flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; color:var(--aps-on-hi, #2b1d00); background:var(--aps-skin-color-3); border-radius:calc(var(--aps-radius-in, 14px) * .6);}
.aps-ls-specs-ic i {--aps-icon-size:17px; display:block; line-height:0;}
.aps-ls .aps-pf-controls .aps-pf-catalog-switcher {flex:0 1 auto; width:38%; max-width:260px; z-index:20;}
.aps-ls .aps-pf-controls button.aps-pf-pill-trigger {padding:0 12px !important;}
.aps-ls .aps-pf-controls button.aps-pf-pill-trigger {height:46px; background:#fff !important; border:1px solid var(--aps-hair, #e3e8ef) !important; border-radius:calc(var(--aps-radius-in, 14px) * .85) !important;}
.aps-ls .aps-pf-catalog-switcher:not(.aps-fp-open) .aps-fp-card-body {border-width:0;}
.aps-ls .aps-pf-controls button.aps-pf-pill-trigger:hover, .aps-ls .aps-pf-catalog-switcher.aps-fp-open button.aps-pf-pill-trigger {background:var(--aps-tile) !important;}

/* chips (categories of a brand, sub categories ...): the chips of the home page, as links */
.aps-ls-chips {margin-bottom:14px;}
.aps-ls-chips .aps-hm-chip small {margin-inline-start:2px; font-size:11.5px; font-weight:600; opacity:.7;}

/* the devices grid: the home card with "add to compare" */
.aps-ls-grid {display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(10px * var(--aps-scale, 1)); margin:0 !important; padding:0 !important; list-style:none !important;}
.aps-ls-grid > li {display:flex; min-width:0; margin:0; padding:0;}
.aps-ls-grid > li::before {content:none;}
.aps-ls-grid .aps-hm-card {height:auto; min-height:100%; flex:1 1 auto;}
.aps-ls-grid .aps-hm-card .aps-rd-thumb {padding:12px 16%;}
.aps-ls-grid .aps-hm-card .aps-rd-thumb img {margin:0 auto;}
.aps-ls-grid .aps-hm-card .aps-rd-title {padding:0 10px; font-size:14px; line-height:1.4; overflow-wrap:anywhere;}
.aps-ls-grid .aps-hm-card .aps-rd-title a {text-decoration:none;}
.aps-ls-grid .aps-hm-card .aps-rd-price {padding:0 10px; margin-bottom:10px;}
.aps-ls-grid .aps-rd-price.aps-hm-noprice {color:var(--aps-mute) !important; font-size:12.5px; font-weight:700;}
.aps-ls-grid .aps-hm-stage {position:absolute; top:8px; inset-inline-end:8px; padding:2px 8px; color:var(--aps-skin-color-1); font-size:11.5px; font-weight:700; line-height:1.5; background:var(--aps-tile-2); border-radius:calc(var(--aps-radius-in, 14px) * .5);}
.aps-ls-grid .aps-hm-stage-ofl {color:var(--aps-bad, #c2410c); background:color-mix(in srgb, var(--aps-bad, #c2410c) 10%, #fff);}
a.aps-ls-cmp {display:flex; align-items:center; justify-content:center; gap:6px; margin:auto 10px 10px; min-height:36px; padding:6px 8px; color:var(--aps-skin-color-1) !important; font-size:13px; font-weight:800; line-height:1.3; text-align:center; text-decoration:none !important; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:calc(var(--aps-radius-in, 14px) * .65); transition:border-color .15s ease, background .15s ease;}
a.aps-ls-cmp:hover, a.aps-ls-cmp:focus {color:var(--aps-skin-color-1) !important; background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff);}
a.aps-ls-cmp svg {flex:none; width:14px; height:14px;}
.aps-ls-grid .aps-rd-price + a.aps-ls-cmp, .aps-ls-grid .aps-rd-title + a.aps-ls-cmp {margin-top:auto;}

/* page links: first, the pages around the current one, last */
.aps-ls-pag {margin:18px 0 6px; text-align:center;}
.aps-ls-pag ul {display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;}
.aps-ls-pg {display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 8px; color:var(--aps-skin-color-1) !important; font-size:14px; font-weight:800; line-height:1; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:calc(var(--aps-radius-in, 14px) * .65); transition:border-color .15s ease, background .15s ease;}
a.aps-ls-pg:hover, a.aps-ls-pg:focus {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff);}
.aps-ls-pg.is-on {color:var(--aps-on-main, #fff) !important; background:var(--aps-skin-color-1); border-color:var(--aps-skin-color-1);}
.aps-ls-pg-gap {min-width:22px; padding:0; color:var(--aps-mute) !important; background:none; border:0;}
.aps-ls-pg svg {width:16px; height:16px;}
.aps-ls-pag-of {margin:8px 0 0 !important; color:var(--aps-mute); font-size:12.5px;}

/* brand tiles (top brands of a category, the brands list) */
.aps-ls-brands {display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(8px * var(--aps-scale, 1));}
.aps-ls-brands > li {display:flex; min-width:0;}
.aps-ls .aps-hm-brand-logo img {display:block; width:auto !important; max-width:min(84px, 80%) !important; height:auto !important; max-height:34px !important; object-fit:contain;}

/* the brands list: the letters bar and a block of tiles per letter */
.aps-ls-letters {display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; scroll-margin-top:90px;}
.aps-ls-letters a {display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 6px; color:var(--aps-skin-color-1) !important; font-size:15px; font-weight:800; line-height:1; background:var(--aps-tile); border-radius:calc(var(--aps-radius-in, 14px) * .6); transition:background .15s ease;}
.aps-ls-letters a:hover, .aps-ls-letters a:focus {color:var(--aps-on-main, #fff) !important; background:var(--aps-skin-color-1);}
.aps-ls-letter {scroll-margin-top:90px;}
.aps-ls .aps-ls-letter-h {display:flex; align-items:center; gap:10px; margin:18px 0 8px !important; padding:0 !important; color:var(--aps-skin-color-1) !important; font-size:20px !important; font-weight:900 !important; line-height:1.3 !important; border:0 !important; background:none !important;}
.aps-ls .aps-ls-letter-h::before {display:none !important;}
.aps-ls .aps-ls-letter-h::after {content:""; flex:1 1 auto; order:1; height:1px; background:var(--aps-hair, #e3e8ef);}

/* the comparisons list */
.aps-ls-comps {display:grid !important; grid-template-columns:minmax(0, 1fr); gap:calc(10px * var(--aps-scale, 1));}
.aps-ls-comps > li {display:flex; min-width:0;}
a.aps-ls-comp {display:flex; flex-direction:column; gap:10px; width:100%; padding:10px; color:var(--aps-ink, #1b2533) !important; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius-in, 14px); transition:border-color .15s ease;}
a.aps-ls-comp:hover, a.aps-ls-comp:focus {border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff);}
.aps-ls-comp-row {display:flex; align-items:flex-start; gap:8px; min-width:0;}
.aps-ls-comp-row .aps-oc-vs {flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:var(--aps-on-hi, #1d2a3a); font-size:10px; font-weight:800; line-height:1; background:var(--aps-skin-color-3, #e8a317); border-radius:50%; margin-top:33px;}
.aps-ls-comp-dev {display:flex; flex:1 1 0; flex-direction:column; align-items:center; gap:7px; min-width:0; text-align:center;}
.aps-ls-comp-img {display:flex; align-items:center; justify-content:center; width:100%; height:96px; padding:8px; background:linear-gradient(180deg, #fbfcfe, var(--aps-tile)); border-radius:calc(var(--aps-radius-in, 14px) * .75);}
.aps-ls-comp-img img {display:block; width:auto !important; max-width:100% !important; height:auto !important; max-height:100% !important; object-fit:contain;}
.aps-ls-comp-dev bdi {display:-webkit-box; overflow:hidden; font-size:13.5px; font-weight:700; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere;}
.aps-ls-comp-3 .aps-ls-comp-row, .aps-ls-comp-4 .aps-ls-comp-row {gap:4px;}
.aps-ls-comp-3 .aps-oc-vs, .aps-ls-comp-4 .aps-oc-vs {width:24px; height:24px; margin-top:36px; font-size:8.5px;}
.aps-ls-comp-4 .aps-ls-comp-img {height:76px; padding:5px;}
.aps-ls-comp-4 .aps-oc-vs {margin-top:26px;}
.aps-ls-comp-4 .aps-ls-comp-dev bdi {font-size:12px;}
.aps-ls-comp-title {font-size:15px; font-weight:700; line-height:1.5;}
.aps-ls-comp-meta {display:flex; margin-top:auto; align-items:center; justify-content:space-between; gap:10px; padding-top:9px; color:var(--aps-mute); font-size:12.5px; line-height:1.4; border-top:1px solid var(--aps-hair, #e3e8ef);}
.aps-ls-comp-go {display:inline-flex; align-items:center; gap:4px; color:var(--aps-skin-color-1); font-size:13px; font-weight:800; white-space:nowrap;}
.aps-ls-comp-go svg {width:14px; height:14px;}

/* wider content columns */
@container (min-width: 520px) {
	.aps-ls-grid {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-ls-brands {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.aps-ls-comps {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.aps-ls .aps-pf-filters-btn {flex:0 1 auto;}
	.aps-ls .aps-pf-controls .aps-pf-catalog-switcher {width:240px;}
}
@container (min-width: 720px) {
	.aps-ls-grid.aps-ls-grid-4 {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.aps-ls-brands {grid-template-columns:repeat(6, minmax(0, 1fr));}
	.aps-ls .aps-pf-head.aps-ls-head {padding:calc(22px * var(--aps-scale, 1)) calc(24px * var(--aps-scale, 1));}
	.aps-ls-logo {width:84px; height:84px;}
	.aps-ls-head .aps-main-title {font-size:25px !important;}
}
@container (min-width: 980px) {
	.aps-ls-grid {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.aps-ls-grid.aps-ls-grid-4 {grid-template-columns:repeat(5, minmax(0, 1fr));}
	.aps-ls-comps {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-ls-brands {grid-template-columns:repeat(8, minmax(0, 1fr));}
}

@media (prefers-reduced-motion: reduce) {
	.aps-ls * {transition:none !important;}
}