/*
 * APS Products 4.38.0 - the home page (temps/parts/home.php), loaded on that page only.
 * One file for both directions: logical properties only (inline-start / inline-end).
 * Colors, corners and spacing come from the design tokens of APS Settings > Design
 * (--aps-skin-color-1/2/3, --aps-tile, --aps-hair, --aps-radius ...), so every skin applies.
 */

.aps-home-wrap .aps-content-full {float:none !important; width:100% !important;}
.aps-home {--aps-radius-in:10px; display:flow-root; color:var(--aps-text-color, #1f2937);}
.aps-home *, .aps-home *::before, .aps-home *::after {box-sizing:border-box;}
.aps-home ul, .aps-home ol {margin:0 !important; padding:0 !important; list-style:none !important;}
.aps-home li {margin:0; padding:0;}
.aps-home li::before, .aps-home li::marker {content:none;}
.aps-home a {text-decoration:none !important; box-shadow:none !important;}
.aps-home a:focus-visible, .aps-home button:focus-visible {outline:2px solid var(--aps-skin-color-3); outline-offset:2px;}

/* header: the dark head of the plugin with the search of the search page and the numbers */
/* 4.38.2 option B: the search box, a "Search by specs" card under it, the numbers in one line.
   The hero is not clipped (the suggestions box opens over the page): its ring sits in .aps-hm-deco */
.aps-pf-head.aps-hm-hero {position:relative; z-index:5; display:grid; grid-template-areas:"main" "specs" "stats"; gap:14px; margin:0 0 14px; padding:calc(20px * var(--aps-scale, 1)); overflow:visible;}
.aps-hm-deco {position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none;}
.aps-hm-deco::after {content:""; position:absolute; top:-120px; inset-inline-end:-90px; width:210px; height:210px; border:28px solid color-mix(in srgb, var(--aps-skin-color-3) 10%, transparent); border-radius:50%;}
.aps-hm-hero-main {grid-area:main; position:relative; z-index:2; min-width:0;}
.aps-hm-hero .aps-main-title {margin:0 !important; font-size:25px !important; font-weight:800 !important; line-height:1.35 !important;}
.aps-hm-sub {margin:6px 0 0 !important; color:var(--aps-head-mute); font-size:14px; line-height:1.6;}
.aps-hm-search.aps-ps-form {max-width:680px; margin:14px 0 0;}
.aps-hm-search .aps-ps-input {height:48px;}
.aps-hm-search .aps-ps-submit {height:48px;}
.aps-hm-specs {grid-area:specs; position:relative; z-index:1; display:flex; align-items:center; gap:12px; min-width:0; max-width:680px; padding:10px 12px; color:var(--aps-on-head, #fff) !important; 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); transition:background .15s ease, border-color .15s ease;}
.aps-hm-specs:hover {background:color-mix(in srgb, var(--aps-on-head, #fff) 12%, transparent); border-color:color-mix(in srgb, var(--aps-on-head, #fff) 26%, transparent);}
.aps-hm-specs-ic {display:flex; flex:none; align-items:center; justify-content:center; width:42px; height:42px; color:var(--aps-on-hi, #2b1d00); background:var(--aps-skin-color-3); border-radius:calc(var(--aps-radius-in, 14px) * .7);}
.aps-hm-specs-ic i {--aps-icon-size:22px; display:block; line-height:0;}
.aps-hm-specs-t {display:flex; flex:1 1 auto; flex-direction:column; gap:1px; min-width:0;}
.aps-hm-specs-t b {color:var(--aps-on-head, #fff); font-size:15px; font-weight:800; line-height:1.4;}
.aps-hm-specs-t small {overflow:hidden; color:var(--aps-head-mute); font-size:12.5px; line-height:1.4; white-space:nowrap; text-overflow:ellipsis;}
.aps-hm-specs-go {display:flex; flex:none; color:var(--aps-on-head, #fff); opacity:.75;}
.aps-hm-specs-go svg {width:18px; height:18px;}
.aps-pf-head .aps-hm-stats {grid-area:stats; position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 !important; color:var(--aps-head-mute); font-size:13px; line-height:1.5;}
.aps-hm-stats b {color:var(--aps-on-head, #fff); font-size:16px; font-weight:800;}

/* section (the controls row above floats: every section starts on its own line) */
.aps-home .aps-pf-controls {display:flow-root;}
.aps-hm-sec {clear:both; margin-top:calc(28px * var(--aps-scale, 1));}
.aps-hm-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;}
.aps-home 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:20px !important; font-weight:800 !important; line-height:1.35 !important; border:0 !important; background:none !important;}
.aps-home h2.aps-hm-title::before {content:""; flex:none; width:4px; height:1.1em; border-radius:3px; background:var(--aps-skin-color-1);}
.aps-home h2.aps-hm-title::after {display:none !important;}
.aps-hm-more {display:inline-flex; align-items:center; gap:4px; flex:none; color:var(--aps-act, var(--aps-skin-color-1)) !important; font-size:14px; font-weight:700; line-height:1.4; white-space:nowrap;}
.aps-hm-more svg, .aps-hm-all svg {flex:none; width:15px; height:15px;}
.aps-hm-more:hover {color:var(--aps-skin-color-1) !important;}

/* category links and price tabs */
.aps-hm-chips, .aps-hm-tabs {display:flex; gap:8px; margin:0 0 12px; padding:0 0 2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.aps-hm-chips::-webkit-scrollbar, .aps-hm-tabs::-webkit-scrollbar {display:none;}
.aps-hm-tabs.is-cut, .aps-hm-chips.is-cut {-webkit-mask-image:linear-gradient(to left, transparent 0, #000 36px); mask-image:linear-gradient(to left, transparent 0, #000 36px);}
[dir="rtl"] .aps-hm-tabs.is-cut, .rtl .aps-hm-tabs.is-cut, [dir="rtl"] .aps-hm-chips.is-cut, .rtl .aps-hm-chips.is-cut {-webkit-mask-image:linear-gradient(to right, transparent 0, #000 36px); mask-image:linear-gradient(to right, transparent 0, #000 36px);}
.aps-hm-chip, .aps-home button.aps-hm-tab {flex:0 0 auto; margin:0 !important; padding:6px 14px !important; color:var(--aps-skin-color-1) !important; font-family:inherit; font-size:13px !important; font-weight:700 !important; line-height:1.5 !important; white-space:nowrap; text-transform:none !important; letter-spacing:normal !important; background:#fff !important; border:1px solid var(--aps-hair, #e3e8ef) !important; border-radius:20px !important; box-shadow:none !important; min-height:0 !important; height:auto !important; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.aps-hm-chip:hover, .aps-home button.aps-hm-tab:hover {border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff) !important;}
.aps-hm-chip.is-on, .aps-home button.aps-hm-tab.is-on {color:var(--aps-on-main, #fff) !important; background:var(--aps-skin-color-1) !important; border-color:var(--aps-skin-color-1) !important;}

/* device cards: the "Related devices" card of the device page (.aps-rd-*) in a grid or a row */
.aps-hm-panel[hidden], .aps-hm-grid[hidden] {display:none !important;}
.aps-hm-grid {display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(10px * var(--aps-scale, 1));}
.aps-hm-item {display:flex; min-width:0;}
.aps-home .aps-hm-card {height:auto; min-height:100%; flex:1 1 auto;}
.aps-home .aps-hm-card .aps-rd-thumb {padding:12px 16%;}
.aps-home .aps-hm-card .aps-rd-thumb img {margin:0 auto;}
.aps-home .aps-hm-card .aps-rd-title {padding:0 10px; font-size:14px; line-height:1.4; overflow-wrap:anywhere;}
.aps-home .aps-hm-card .aps-rd-price {padding:0 10px; margin-bottom:10px;}
.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:0; border-radius:calc(var(--aps-radius-in, 14px) * .5);}
/* the "leaks" badge of the device page (.aps-badge-ofl) */
.aps-hm-stage-ofl {color:var(--aps-bad, #c2410c); background:color-mix(in srgb, var(--aps-bad, #c2410c) 10%, #fff);}
.aps-home .aps-rd-price.aps-hm-noprice {color:var(--aps-mute) !important; font-size:12.5px; font-weight:700;}

/* a row that scrolls sideways; the dots under it are added by js/aps-home.js */
.aps-hm-rail {display:flex !important; gap:calc(10px * var(--aps-scale, 1)); margin:0 -2px !important; padding:2px 2px 4px !important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.aps-hm-rail::-webkit-scrollbar {display:none;}
.aps-hm-rail > .aps-hm-item {flex:0 0 150px; scroll-snap-align:start;}

/* brands */
.aps-hm-brands {display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(10px * var(--aps-scale, 1));}
.aps-hm-brands > li {display:flex; min-width:0;}
.aps-hm-brand {display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; padding:10px 6px 8px; text-align:center; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius-in, 14px); transition:border-color .15s ease, background .15s ease;}
.aps-hm-brand:hover {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 35%, #fff);}
.aps-hm-brand-logo {display:flex; align-items:center; justify-content:center; width:100%; height:36px; margin-bottom:4px;}
.aps-home .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;}
.aps-hm-brand-logo > span {display:flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--aps-on-head, #fff); font-size:18px; font-weight:800; background:var(--aps-skin-color-2); border-radius:calc(var(--aps-radius-in, 14px) * .7);}
.aps-hm-brand-name {max-width:100%; overflow:hidden; color:var(--aps-ink, #1b2533); font-size:13.5px; font-weight:700; line-height:1.35; white-space:nowrap; text-overflow:ellipsis;}
.aps-hm-brand-count {color:var(--aps-mute); font-size:11.5px; line-height:1.4;}

/* top rated */
.aps-hm-rank {display:grid !important; gap:8px;}
.aps-hm-rank[hidden] {display:none !important;}
.aps-hm-rank > li {min-width:0;}
.aps-hm-rank > li:nth-child(n+6) {display:none;}
.aps-hm-rank-it {display:flex; align-items:center; gap:12px; min-width:0; padding:9px 12px; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:calc(var(--aps-radius-in, 14px) * .8); transition:border-color .15s ease, background .15s ease;}
.aps-hm-rank-it:hover {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 35%, #fff);}
.aps-hm-rank-n {display:flex; flex:none; align-items:center; justify-content:center; width:28px; height:28px; color:var(--aps-skin-color-1); font-size:14px; font-weight:800; background:var(--aps-tile-2); border-radius:50%;}
.aps-hm-rank > li:nth-child(-n+3) .aps-hm-rank-n {color:var(--aps-on-head, #fff); background:var(--aps-skin-color-2);}
.aps-hm-rank-img {display:flex; flex:none; align-items:center; justify-content:center; width:40px; height:52px;}
.aps-home .aps-hm-rank-img img {display:block; width:auto !important; max-width:40px !important; height:auto !important; max-height:52px !important; object-fit:contain;}
.aps-hm-rank-txt {display:flex; flex:1 1 auto; flex-direction:column; gap:1px; min-width:0;}
.aps-hm-rank-name {display:-webkit-box; overflow:hidden; color:var(--aps-ink, #1b2533); font-size:14px; font-weight:700; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere;}
.aps-hm-rank-price {color:var(--aps-skin-color-1); font-size:13px; font-weight:800; line-height:1.4;}
.aps-hm-rank-score {flex:none; padding:3px 8px; color:var(--aps-on-hi, #2b1d00); font-size:13px; font-weight:800; line-height:1.5; background:var(--aps-skin-color-3); border-radius:8px;}

/* latest comparisons: the pair cards of the device page, without their box */
.aps-oc.aps-hm-comps {overflow:visible; background:none; border:0; border-radius:0;}
.aps-hm-comps .aps-oc-list {padding:0; gap:calc(10px * var(--aps-scale, 1));}
.aps-oc.aps-hm-comps a.aps-oc-it {padding:10px 12px; border-radius:var(--aps-radius-in, 14px);}
.aps-oc.aps-hm-comps .aps-oc-dev img {width:30px !important; max-width:30px !important; height:44px !important;}
.aps-oc.aps-hm-comps .aps-oc-vs {width:30px; height:30px; font-size:10.5px;}

/* budget */
.aps-hm-budget {display:flex !important; flex-wrap:wrap; gap:8px;}
.aps-hm-budget > li {display:flex; min-width:0;}
.aps-hm-bud {display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:7px 16px; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:999px; transition:border-color .15s ease, background .15s ease;}
.aps-hm-bud:hover {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 40%, #fff);}
.aps-hm-bud-val {color:var(--aps-skin-color-1); font-size:14.5px; font-weight:800; line-height:1.45; white-space:nowrap;}
.aps-hm-bud-n {color:var(--aps-mute); font-size:11.5px; line-height:1.4; white-space:nowrap;}
.aps-hm-bud-top {background:color-mix(in srgb, var(--aps-skin-color-3) 12%, #fff); border-color:color-mix(in srgb, var(--aps-skin-color-3) 40%, #fff);}
.aps-hm-bud-top:hover {background:color-mix(in srgb, var(--aps-skin-color-3) 18%, #fff); border-color:color-mix(in srgb, var(--aps-skin-color-3) 55%, #fff);}
.aps-hm-bud-top .aps-hm-bud-val {color:color-mix(in srgb, var(--aps-skin-color-3) 55%, #000);}

/* processors */
.aps-hm-procs {display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(10px * var(--aps-scale, 1));}
.aps-hm-procs > li {display:flex; min-width:0;}
.aps-hm-proc {display:flex; flex-direction:column; gap:6px; width:100%; padding:12px; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius-in, 14px); transition:border-color .15s ease, background .15s ease;}
.aps-hm-proc:hover {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 35%, #fff);}
.aps-hm-proc-logo {display:flex; align-items:center; justify-content:center; width:42px; height:42px; overflow:hidden; background:var(--aps-tile); border-radius:calc(var(--aps-radius-in, 14px) * .7);}
.aps-home .aps-hm-proc-logo img {display:block; width:auto !important; max-width:34px !important; height:auto !important; max-height:34px !important; object-fit:contain;}
.aps-hm-proc-logo > span {display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--aps-on-head, #fff); font-size:17px; font-weight:800; background:var(--aps-skin-color-2);}
.aps-hm-proc-name {color:var(--aps-ink, #1b2533); font-size:14px; font-weight:800; line-height:1.4; overflow-wrap:anywhere;}
.aps-hm-proc-meta {display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:auto; color:var(--aps-mute); font-size:12px; line-height:1.5;}
.aps-hm-proc-score {color:var(--aps-skin-color-1); font-weight:700;}

/* latest articles */
.aps-hm-posts {display:grid !important; grid-template-columns:minmax(0, 1fr); gap:calc(10px * var(--aps-scale, 1));}
.aps-hm-posts > li {display:flex; min-width:0;}
.aps-hm-post {display:flex; gap:12px; width:100%; padding:8px; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius-in, 14px); transition:border-color .15s ease, background .15s ease;}
.aps-hm-post:hover {background:var(--aps-tile); border-color:color-mix(in srgb, var(--aps-skin-color-1) 35%, #fff);}
.aps-hm-post-img {flex:none; display:block; width:112px; aspect-ratio:16 / 10; overflow:hidden; background:var(--aps-tile); border-radius:calc(var(--aps-radius-in, 14px) * .7);}
.aps-home .aps-hm-post-img img {display:block; width:100% !important; max-width:none !important; height:100% !important; object-fit:cover; margin:0 !important;}
.aps-hm-post-txt {display:flex; flex:1 1 auto; flex-direction:column; justify-content:center; gap:4px; min-width:0;}
.aps-hm-post-title {display:-webkit-box; overflow:hidden; color:var(--aps-ink, #1b2533); font-size:14.5px; font-weight:700; line-height:1.5; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:anywhere;}
.aps-hm-post-date {color:var(--aps-mute); font-size:12px; line-height:1.4;}

/* the full list */
.aps-hm-all {clear:both; display:flex; align-items:center; justify-content:center; gap:8px; margin:calc(14px * var(--aps-scale, 1)) 0 0; padding:13px 16px; color:var(--aps-on-head, #fff) !important; font-size:15px; font-weight:800; line-height:1.4; text-align:center; background:var(--aps-skin-color-2); border-radius:var(--aps-radius-in, 14px); transition:background .15s ease;}
.aps-hm-all:hover {background:color-mix(in srgb, var(--aps-skin-color-2) 88%, #fff);}

/* phones: 8 latest devices (two columns) */
@media (max-width: 599px) {
	.aps-hm-grid > .aps-hm-item:nth-child(n+9) {display:none;}
	.aps-hm-hero .aps-main-title {font-size:22px !important;}
	.aps-hm-head .aps-hm-more {font-size:13px;}
	.aps-home h2.aps-hm-title {font-size:18px !important;}
}

@media (max-width: 359px) {
	.aps-hm-brands {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.aps-hm-search .aps-ps-submit span {display:none;}
}

@media (min-width: 600px) {
	.aps-hm-grid {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-hm-brands {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.aps-hm-comps .aps-oc-list {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.aps-hm-procs {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-hm-rail > .aps-hm-item {flex-basis:165px;}
	.aps-hm-posts {grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (min-width: 768px) {
	.aps-hm-grid {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.aps-hm-brands {grid-template-columns:repeat(6, minmax(0, 1fr));}
	.aps-hm-rank {grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:column; grid-template-rows:repeat(5, auto);}
	.aps-hm-rank > li:nth-child(n+6) {display:block;}
	.aps-hm-rank > li:nth-child(n+11) {display:none;}
	.aps-hm-rail > .aps-hm-item {flex-basis:175px;}
	.aps-pf-head.aps-hm-hero {padding:calc(24px * var(--aps-scale, 1)) calc(26px * var(--aps-scale, 1));}
	.aps-hm-hero .aps-main-title {font-size:28px !important;}
}

@media (min-width: 992px) {
	.aps-pf-head.aps-hm-hero {grid-template-columns:minmax(0, 1fr) minmax(280px, 340px); grid-template-areas:"main specs" "stats specs"; align-items:end; column-gap:28px; row-gap:14px;}
	/* 4.39.9 the "Search by specs" card keeps its row (icon, text, arrow) on the side of the search box */
	.aps-hm-specs {align-self:center; gap:12px; padding:14px 16px;}
	.aps-hm-specs-t small {white-space:normal;}
	.aps-hm-deco::after {top:auto; bottom:-150px; inset-inline-end:auto; inset-inline-start:42%;}
	.aps-hm-all {width:fit-content; min-width:300px; margin-inline:auto; padding-inline:28px;}
	.aps-hm-procs {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-hm-comps .aps-oc-list {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-hm-posts {grid-template-columns:repeat(3, minmax(0, 1fr));}
	.aps-hm-post {flex-direction:column; gap:10px;}
	.aps-hm-post-img {width:100%;}
	.aps-hm-post-txt {padding:0 4px 4px; justify-content:flex-start;}
}

@media (min-width: 1200px) {
	.aps-hm-grid {grid-template-columns:repeat(6, minmax(0, 1fr));}
	.aps-hm-procs {grid-template-columns:repeat(6, minmax(0, 1fr));}
	.aps-hm-rail > .aps-hm-item {flex-basis:185px;}
}

@media (prefers-reduced-motion: reduce) {
	.aps-home * {transition:none !important; scroll-behavior:auto !important;}
}
.aps-home .aps-rail-dots[hidden] {display:none !important;}