/* APS Products - Compare Page (LTR)
* Loaded ONLY on the compare page/post - see aps_styles_scripts() in inc/aps-functions.php
* Every colour is derived from --aps-skin-color-1 (Design settings) so changing the
* site skin re-tints the whole page. Plain fallbacks come first for old browsers.
*/
.aps-cmp-wrap,
.aps-cmp-sheet {
--cmp-accent: var(--aps-skin-color-1);
--cmp-tint: #eaeff7;
--cmp-head: #e3e9f3;
--cmp-tint-strong: #dfe9f8;
--cmp-surface: #f7f9fc;
--cmp-hair: rgba(20,35,70,.10);
--cmp-win: #16a34a;
--cmp-radius: 10px;
--cmp-radius-sm: 8px;
position: relative;
margin-top: 10px;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
.aps-cmp-wrap,
.aps-cmp-sheet {
--cmp-tint: color-mix(in srgb, var(--aps-skin-color-1) 5%, #eef1f6);
--cmp-head: color-mix(in srgb, var(--aps-skin-color-1) 9%, #e9edf4);
--cmp-tint-strong: color-mix(in srgb, var(--aps-skin-color-1) 16%, #fff);
--cmp-surface: color-mix(in srgb, var(--aps-skin-color-1) 4%, #fff);
}
}
/* ---------- headline ---------- */
.aps-cmp-head {margin-bottom:14px; text-align:center;}
/* the base stylesheet sets .aps-main-title{display:table} and its spans to
display:table-cell - that turned each device name into a rigid table column.
Force normal inline text flow so the headline reads as one sentence. */
/* --cmp-title-max/min/lines drive the JS auto-fit: it starts at max and
steps down only until the text fits within `lines` lines */
.aps-cmp-headline.aps-main-title {--cmp-title-max:26; --cmp-title-min:10; --cmp-title-lines:1; display:block !important; margin:0 0 6px; text-align:center; line-height:1.45; white-space:nowrap;}
.aps-cmp-headline.aps-main-title .aps-cmp-vs-name {display:inline-block !important; unicode-bidi:isolate; white-space:nowrap;}
/* breadcrumbs sit under the headline, centered and muted */
.aps-cmp-head .apscrumbs {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; margin:0 0 8px; padding:0; font-size:13px;}
.aps-cmp-head .apscrumbs,
.aps-cmp-head .apscrumbs a,
.aps-cmp-head .apscrumbs li {color:#7b8aa5;}
.aps-cmp-head .apscrumbs a:hover {color:var(--cmp-accent);}
.aps-cmp-head .apscrumbs li:first-child a:before {content:""; --aps-icon-size:15px; width:15px; height:15px; display:inline-block; vertical-align:-2px; margin-inline-end:5px; background-color:currentColor; mask-image:url('svg/home.svg'); -webkit-mask-image:url('svg/home.svg'); mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-size:100% 100%; -webkit-mask-size:100% 100%;}
/* ---------- sticky device + tools bar ---------- */
/* only the device-name chips stay pinned while scrolling; the toggle
and group nav scroll away so they don't eat the mobile viewport */
/* Sticky rescue. A theme that sets overflow-x:hidden on html/body (very common,
to kill horizontal scroll) turns that element into the scroll container, and
position:sticky then pins to it instead of the page - the bar simply never
sticks. overflow:clip prevents the same horizontal scroll WITHOUT creating a
scroll container, so the theme keeps its intent and sticky works again.
Scoped with :has() so it only applies on the comparison page. */
html:has(.aps-cmp-wrap),
body:has(.aps-cmp-wrap) {overflow-x:clip;}
/* and make sure nothing the plugin itself renders traps it either */
body:has(.aps-cmp-wrap) .aps-container,
body:has(.aps-cmp-wrap) .aps-row,
body:has(.aps-cmp-wrap) .aps-content {overflow:visible;}
.aps-cmp-devices {position:-webkit-sticky; position:sticky; top:0; z-index:60; display:flex; align-items:stretch; gap:8px; padding:10px 2px; background:#fff; box-shadow:0 4px 12px -6px rgba(20,35,70,.35);}
/* briefly toggled by fitChipNames() while it measures - see the comment
there. Sticky's own deferred-layout behaviour for descendants (before
the browser has resolved it through a scroll pass) made scrollHeight
unreliable; dropping to static for that instant avoids it entirely. */
.aps-cmp-devices.aps-cmp-measuring {position:static !important;}
/* Applied to ancestors that block sticky only because of an overflow value
they are not actually using to scroll. clip clips exactly like hidden but
creates no scroll container, so native sticky works again. */
.aps-cmp-unblock {overflow:clip !important;}
/* used only when the runtime check finds that native sticky was blocked */
.aps-cmp-devices.aps-cmp-js-sticky {position:static;}
.aps-cmp-devices.aps-cmp-pinned {position:fixed; z-index:60; will-change:transform; box-shadow:0 4px 12px -6px rgba(20,35,70,.35);}
.aps-cmp-devices-spacer {flex:none;}
/* stretch: a chip whose name needs two lines would otherwise be taller
than its neighbour and the pair would look misaligned */
/* No overflow here. Per the CSS spec, setting overflow on one axis forces the
other axis to compute as auto, which turns this bar into its own scroll
container - and position:sticky then sticks to that container instead of
the page, so the bar never actually pinned. The chips are flexible and
always fit within the three-device maximum. */
.aps-cmp-chip {position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--aps-border-color); border-radius:var(--cmp-radius-sm); background:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(20,35,70,.06); transition:border-color .2s ease, box-shadow .2s ease;}
.aps-cmp-chip img {flex:0 0 auto; width:30px; height:34px; object-fit:contain;}
/* direction:ltr + plaintext keeps Latin device names truncating at their
end ("Spark 20 Pro...") instead of their start ("...Pro Plus") in RTL */
/* long device names wrap onto a second line rather than being cut off;
JS then shrinks the text until both lines fit the chip */
.aps-cmp-chip-name {flex:1; min-width:0; font-size:13px; font-weight:700; line-height:1.25; text-align:start; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow-wrap:anywhere; unicode-bidi:plaintext; color:var(--aps-headings-color);}
.aps-cmp-chip.aps-cmp-chip-active {border-color:var(--cmp-accent); box-shadow:0 0 0 1px var(--cmp-accent);}
.aps-cmp-chip-remove {flex:0 0 auto; width:22px; height:22px; line-height:20px; padding:0; border:none; border-radius:50%; background:var(--cmp-tint-strong); color:#5b6b86; font-size:14px; text-align:center; cursor:pointer;}
.aps-cmp-chip-remove:hover {background:#e33e3e; color:#fff;}
.aps-cmp-vs-badge {flex:0 0 auto; align-self:center; width:32px; height:32px; line-height:32px; border-radius:50%; background:var(--cmp-accent); color:#fff; font-size:12px; font-weight:700; text-align:center; text-transform:uppercase;}
.aps-cmp-chip-add {border-style:dashed; justify-content:center; color:var(--cmp-accent);}
.aps-cmp-chip-add .aps-cmp-chip-name {flex:0 1 auto; color:var(--cmp-accent);}
.aps-cmp-plus {font-size:18px; line-height:1;}
/* two rows: navigation tabs on top, the differences FILTER on its own row
beneath. They are different kinds of control (navigate vs. filter), and the
filter now sits directly above the table it affects. */
.aps-cmp-tools {display:block;}
.aps-cmp-nav-wrap {position:relative; min-width:0; border-bottom:1px solid var(--cmp-hair);}
.aps-cmp-chips-nav {display:flex; align-items:stretch; gap:0; min-height:52px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; min-width:0; scroll-padding-inline:0;}
.aps-cmp-chips-nav::-webkit-scrollbar {display:none;}
/* underline tabs: the active section reads instantly without competing with
the device chips above */
.aps-cmp-chips-nav a {position:relative; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:0 13px; border:none; background:none; color:#7b8aa5; font-size:14px; font-weight:700; white-space:nowrap; text-decoration:none; transition:color .2s ease;}
/* the mask-rendered icons were being clipped by the short bar - give them a
fixed box and neutral line-height so they always render whole */
.aps-cmp-chips-nav a i,
.aps-cmp-diff-btn i {--aps-icon-size:16px; flex:0 0 auto; width:16px; height:16px; line-height:1; color:currentColor;}
.aps-cmp-chips-nav a:after {content:""; position:absolute; inset-inline:6px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:transparent; transition:background .2s ease;}
.aps-cmp-chips-nav a:hover {color:var(--cmp-accent);}
.aps-cmp-chips-nav a.active {color:var(--cmp-accent);}
.aps-cmp-chips-nav a.active:after {background:var(--cmp-accent);}
/* filter row: a labelled slide switch. The label is always visible so the
control's purpose is never ambiguous. */
.aps-cmp-filter-row {display:flex; justify-content:flex-start; padding:10px 6px 0;}
.aps-cmp-diff-btn {display:inline-flex; align-items:center; gap:8px; padding:0; margin:0; border:none; background:none; cursor:pointer;}
.aps-cmp-diff-label {font-size:13px; font-weight:700; color:#5b6b86; white-space:nowrap; transition:color .2s ease;}
.aps-cmp-diff-btn.is-active .aps-cmp-diff-label {color:var(--cmp-accent);}
.aps-cmp-diff-switch {position:relative; flex:0 0 auto; width:36px; height:21px; border-radius:21px; background:#ccd5e2; transition:background .2s ease;}
.aps-cmp-diff-switch:before {content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease;}
.aps-cmp-diff-btn.is-active .aps-cmp-diff-switch {background:var(--cmp-accent);}
.aps-cmp-diff-btn.is-active .aps-cmp-diff-switch:before {transform:translateX(15px);}
/* ---------- shared cards ---------- */
.aps-cmp-result {margin-top:14px;}
.aps-cmp-hero,
.aps-cmp-keydiff,
.aps-cmp-group {background:#fff; border:1px solid var(--cmp-hair); border-radius:var(--cmp-radius); margin-bottom:16px; overflow:hidden; box-shadow:0 2px 10px -4px rgba(20,35,70,.14);}
.aps-cmp-wrap.aps-cmp-flat .aps-cmp-group,
.aps-cmp-wrap.aps-cmp-flat .aps-cmp-hero,
.aps-cmp-wrap.aps-cmp-flat .aps-cmp-keydiff {box-shadow:none; border-color:var(--aps-border-color);}
/* centered like the group headers, for a consistent card language */
/* ---------- hero (product) card ---------- */
.aps-cmp-hero-imgs {display:grid; grid-template-columns:repeat(2, 1fr); background:#fff;}
.aps-cmp-hero .aps-cmp-cell + .aps-cmp-cell:before {display:none;}
/* the base cell rule draws a border on every cell's leading edge. It was
only cancelled inside the mobile query, so on desktop a vertical line
sat between the centre pill and the value next to it. */
.aps-cmp-hero .aps-cmp-cell,
.aps-cmp-hero .aps-cmp-label {border-inline-start:none;}
.aps-cmp-hero-col {padding:16px 12px; text-align:center; border-inline-start:1px solid var(--cmp-hair);}
.aps-cmp-hero-col:first-child {border-inline-start:none;}
.aps-cmp-hero-img {display:block;}
.aps-cmp-hero-img img {max-width:132px; max-height:120px; width:auto; object-fit:contain;}
.aps-cmp-hero-price {color:var(--cmp-accent) !important;}
.aps-cmp-hero-rating i {--aps-icon-size:13px; color:var(--cmp-accent);}
/* star row - mirrors the single product page's rating box exactly
(.aps-rc-star there). The earlier version only gave the half-star span
its own vertical-align, so it aligned differently than the plain full/
empty icons next to it - invisible at the single page's 14-19px icons,
but visible as the half star sitting lower at this row's 12px size.
aps-cmp-star is the shared class that puts all three on the same
vertical-align:text-top baseline, same as aps-rc-star does there. */
.aps-cmp-star {--aps-icon-size:12px; vertical-align:text-top; margin:0 1px;}
.aps-cmp-hero-stars {line-height:1;}
.aps-cmp-star-full {color:var(--cmp-accent);}
.aps-cmp-star-empty, .aps-cmp-star-empty-base {color:color-mix(in srgb, var(--cmp-accent) 12%, #d9dce1);}
.aps-cmp-star-half {position:relative; display:inline-block; width:12px; height:12px;}
.aps-cmp-star-empty-base {position:absolute; top:0; left:0;}
.aps-cmp-star-half-fill {position:absolute; top:0; left:0; width:50%; overflow:hidden; color:var(--cmp-accent);}
/* the grade word ("Excellent", "Flagship"...) as a small badge using the
same Accent Color as everything else in this box (stars, price) - not
the red/orange/blue/green rating-bar scale from the single product page,
per explicit request to match the Compare Design accent instead. */
.aps-cmp-hero-grade {display:inline-block; padding:2px 10px; border-radius:20px; background:linear-gradient(var(--aps-btn-grad-angle, 120deg), color-mix(in srgb, var(--cmp-accent) var(--aps-btn-grad-light, 78%), #fff) 0%, var(--cmp-accent) 45%, color-mix(in srgb, var(--cmp-accent) var(--aps-btn-grad-dark, 72%), #000) 100%); box-shadow:0 3px 8px color-mix(in srgb, var(--cmp-accent) var(--aps-btn-glow, 25%), transparent); font-size:11px; font-weight:800; letter-spacing:.2px; line-height:1.6; color:#fff; text-transform:uppercase;}
/* Hero card keeps the classic face-off shape: value | label | value, with the
label as a pill in the middle column instead of a full-width band. */
.aps-cmp-hero .aps-cmp-table .aps-cmp-row {grid-template-columns:1fr auto 1fr; align-items:center; background:#fff;}
.aps-cmp-hero .aps-cmp-row + .aps-cmp-row {border-top:1px solid var(--cmp-hair);}
.aps-cmp-hero .aps-cmp-cell:nth-child(2) {order:1;}
.aps-cmp-hero .aps-cmp-label {order:2;}
.aps-cmp-hero .aps-cmp-cell:nth-child(3) {order:3;}
.aps-cmp-hero .aps-cmp-label {grid-column:auto; justify-content:center; padding:7px 16px; margin:8px 6px; border-radius:30px; background:var(--cmp-label-bg,var(--cmp-tint)); color:var(--cmp-label-text,#8593ab); font-size:var(--cmp-label-font-size,13px); font-weight:var(--cmp-label-font-weight,400); text-align:center; white-space:nowrap;}
/* ---------- key differences card ---------- */
/* the summary card is the most useful block on the page - give it an
accent identity so it doesn't read as just another spec group */
/* the summary card deliberately carries NO hardcoded colours or sizes: it
inherits the same group-card treatment, so the Compare Design settings
(header background, label band, font size/weight) apply to it too. */
.aps-cmp-keydiff .aps-cmp-cell {padding-bottom:14px;}
/* relative bar: each value as a share of the row's largest number. It shows
the size of the gap, it does not declare a winner. */
.aps-cmp-kd-bar {display:block; width:70%; max-width:130px; height:5px; margin-top:9px; border-radius:5px; background:var(--cmp-tint); overflow:hidden;}
.aps-cmp-kd-bar i {display:block; height:100%; border-radius:5px; background:var(--cmp-accent); transition:width .35s ease;}
/* badge drops to its own line under the attribute name, small and quiet */
.aps-cmp-kd-label {flex-direction:column; gap:3px;}
.aps-cmp-kd-name {display:inline-flex; align-items:center;}
.aps-cmp-kd-badge {display:inline-block; padding:1px 9px; border-radius:20px; background:var(--cmp-accent); color:#fff; font-size:9px; font-style:normal; font-weight:700; letter-spacing:.02em; white-space:nowrap;}
/* ---------- spec group cards ---------- */
.aps-cmp-group-head {display:flex; align-items:center; justify-content:center; gap:9px; padding:7px 18px; background:var(--cmp-head-bg,var(--cmp-head)); border-bottom:1px solid var(--cmp-hair);}
/* icon follows the title and lines up with the text rather than floating
above it - it used to sit before the title and looked detached */
.aps-cmp-group-icon {flex:0 0 auto; --aps-icon-size:var(--cmp-icon-size,22px); width:var(--cmp-icon-size,22px); height:var(--cmp-icon-size,22px); line-height:1; align-self:center; color:var(--cmp-head-text,var(--cmp-accent));}
.aps-cmp-group-title {margin:0; font-size:var(--cmp-head-font-size,19px) !important; font-weight:var(--cmp-head-font-weight,700) !important; text-align:center; color:var(--cmp-head-text,var(--aps-headings-color));}
.aps-cmp-row {display:grid; grid-template-columns:104px 1fr 1fr; align-items:stretch;}
.aps-cmp-row + .aps-cmp-row {border-top:1px solid var(--aps-border-color);}
.aps-cmp-row:nth-child(even) {background:var(--cmp-surface);}
.aps-cmp-label {display:flex; align-items:center; padding:12px 14px; font-size:13px; font-weight:700; color:var(--aps-headings-color);}
.aps-cmp-cell {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:12px 8px; text-align:center; word-break:break-word; border-inline-start:1px solid var(--aps-border-color);}
/* Mixed Arabic/Latin values must read exactly as they do in the single
product specs table. plaintext let each value take the direction of its
FIRST character, so "Wi-Fi Direct مباشر" flipped into an LTR run.
direction + isolate is the convention used elsewhere in the plugin. */
.aps-cmp-main {font-size:var(--cmp-font-size,16px); font-weight:var(--cmp-font-weight,700); color:#1c1f26; line-height:1.4; direction:ltr; unicode-bidi:isolate;}
.aps-cmp-cell .aps-icon-check {--aps-icon-size:22px; color:var(--cmp-win);}
.aps-cmp-cell .aps-icon-cross {--aps-icon-size:22px; color:#e33e3e;}
.aps-cmp-wrap.aps-diff-only-on .aps-row-same {display:none !important;}
.aps-cmp-wrap.aps-diff-only-on .aps-cmp-group-empty-diff {display:none !important;}
@media (max-width: 767px) {
.aps-cmp-cell.aps-hide-mobile,
.aps-cmp-hero-col.aps-hide-mobile {display:none;}
.aps-cmp-chip.aps-cmp-chip-inactive {opacity:.45;}
.aps-cmp-headline.aps-main-title {--cmp-title-max:24; --cmp-title-min:10; line-height:1.5;}
/* stacked-label layout: the attribute name takes a full-width row of its
own, so each value gets half the screen instead of competing with a
fixed label column. Long English spec strings need that room. */
.aps-cmp-table .aps-cmp-row {grid-template-columns:1fr 1fr; align-items:stretch;}
.aps-cmp-table .aps-cmp-row:nth-child(even) {background:transparent;}
.aps-cmp-table .aps-cmp-row + .aps-cmp-row {border-top:none;}
/* alternating bands: the label recedes (small, muted, tinted band) so the
value can lead (larger, near-black, on white) */
.aps-cmp-table .aps-cmp-label {grid-column:1 / -1; justify-content:center; padding:6px 12px; background:var(--cmp-label-bg,var(--cmp-tint)); font-size:var(--cmp-label-font-size,13px) !important; font-weight:var(--cmp-label-font-weight,400) !important; line-height:1.5; color:var(--cmp-label-text,#8593ab); text-align:center;}
.aps-cmp-table .aps-cmp-cell {position:relative; padding:10px 12px; background:#fff; border-inline-start:none;}
/* short inset hairline instead of a full-height border, so the divider
floats between the values rather than cutting the whole band */
.aps-cmp-table .aps-cmp-cell + .aps-cmp-cell:before {content:""; position:absolute; inset-block:7px; inset-inline-start:0; width:1px; background:var(--cmp-hair);}
.aps-cmp-table .aps-cmp-main {font-size:var(--cmp-font-size,16px); font-weight:var(--cmp-font-weight,700); color:#1c1f26; line-height:1.45;}
/* alignment and single-line shrinking apply on phones only: desktop has
the width for centred multi-line values, and forcing one line there
just made the text needlessly small */
/* per-attribute alignment set on the attribute itself. Multi-line lists
read far better aligned than centred. */
.aps-cmp-cell.aps-cmp-align-start {align-items:flex-start; text-align:start;}
.aps-cmp-cell.aps-cmp-align-end {align-items:flex-end; text-align:end;}
.aps-cmp-cell.aps-cmp-align-start .aps-cmp-main,
.aps-cmp-cell.aps-cmp-align-end .aps-cmp-main {width:100%;}
/* JS shrinks these until each value stops wrapping. overflow:hidden is a
hard stop so an over-long value can never spill across the divider,
and .aps-cmp-fit-give-up restores wrapping when even the smallest
size will not fit. */
.aps-cmp-cell.aps-cmp-fit-line {overflow:hidden;}
.aps-cmp-cell.aps-cmp-fit-line .aps-cmp-main {white-space:nowrap; max-width:100%;}
.aps-cmp-cell.aps-cmp-fit-line.aps-cmp-fit-give-up .aps-cmp-main {white-space:normal;}
/* Hero card keeps the classic face-off shape: value | label | value, with the
label as a pill in the middle column instead of a full-width band. */
.aps-cmp-hero .aps-cmp-table .aps-cmp-row {grid-template-columns:1fr auto 1fr; align-items:center; background:#fff;}
.aps-cmp-hero .aps-cmp-row + .aps-cmp-row {border-top:1px solid var(--cmp-hair);}
.aps-cmp-hero .aps-cmp-cell:nth-child(2) {order:1;}
.aps-cmp-hero .aps-cmp-label {order:2;}
.aps-cmp-hero .aps-cmp-cell:nth-child(3) {order:3;}
.aps-cmp-hero .aps-cmp-label {grid-column:auto; justify-content:center; padding:7px 16px; margin:8px 6px; border-radius:30px; background:var(--cmp-label-bg,var(--cmp-tint)); color:var(--cmp-label-text,#8593ab); font-size:var(--cmp-label-font-size,13px); font-weight:var(--cmp-label-font-weight,400); text-align:center; white-space:nowrap;}
}
/* ---------- empty state ---------- */
.aps-cmp-empty {text-align:center; padding:44px 15px; border:1px dashed var(--aps-border-color); border-radius:var(--cmp-radius); background:var(--cmp-surface);}
.aps-cmp-empty p {margin:0 0 14px; color:#71809b;}
/* suggested ready-made comparisons - a separate block below the empty-state
card (not nested inside it), so the "pick a device" CTA reads as its own
thing and this reads as a distinct "or browse" section. */
.aps-cmp-suggested {margin-top:28px; text-align:center;}
/* same rounded pill background as the "Price"/"Our Rating" labels, but
sized like a real heading (not their small label type) - this is the
size the person actually wants, not the compact label scale. Not an
and font-size/weight forced with !important: the theme's own
heading styles (outside this plugin's CSS, so nothing here can target
them directly) fight for this otherwise. */
.aps-cmp-suggested-title {display:inline-block; margin:0 0 18px; padding:9px 22px; border-radius:24px; background:var(--cmp-label-bg,var(--cmp-tint)); color:var(--cmp-accent); font-size:16px !important; font-weight:800 !important; line-height:1.5 !important;}
.aps-cmp-suggested-list {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; max-width:640px; margin-inline:auto;}
.aps-cmp-suggest-hidden {display:none;}
.aps-cmp-suggest-card {display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 12px; border:1px solid var(--cmp-hair); border-radius:var(--cmp-radius); background:#fff; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.aps-cmp-suggest-card:hover {border-color:var(--cmp-accent); box-shadow:0 4px 14px -6px rgba(20,35,70,.18); transform:translateY(-1px);}
/* each device gets its own thumb + name stacked together, instead of both
names sharing one line - a long name next to a separator inside a card
this narrow wrapped to a second line with the word order visibly
scrambled in the Arabic build (the exact bug the compare headline had
there) - keeping each name under its own image avoids the mixed-content
line entirely rather than isolating it and hoping it doesn't wrap. */
.aps-cmp-suggest-device {flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px;}
.aps-cmp-suggest-thumb {display:flex; align-items:center; justify-content:center; width:56px; height:56px;}
.aps-cmp-suggest-thumb img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.aps-cmp-suggest-name {max-width:100%; font-size:13px; font-weight:700; color:#1c1f26; text-align:center; line-height:1.4;}
.aps-cmp-suggest-card .aps-cmp-vs-badge {flex:0 0 auto; width:26px; height:26px; line-height:26px; font-size:10px;}
/* solid fill using the same accent colour as the VS badge, instead of an
outline - reads as a clear action button rather than another label. */
.aps-cmp-suggest-more {display:flex; align-items:center; justify-content:center; gap:8px; margin:18px auto 0; padding:10px 24px; border:none; border-radius:8px; background:linear-gradient(var(--aps-btn-grad-angle, 120deg), color-mix(in srgb, var(--cmp-accent) var(--aps-btn-grad-light, 78%), #fff) 0%, var(--cmp-accent) 45%, color-mix(in srgb, var(--cmp-accent) var(--aps-btn-grad-dark, 72%), #000) 100%); color:#fff; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 3px 10px color-mix(in srgb, var(--cmp-accent) var(--aps-btn-glow, 25%), transparent); transition:box-shadow .15s ease, transform .15s ease;}
.aps-cmp-suggest-more i {--aps-icon-size:14px; flex:0 0 auto;}
.aps-cmp-suggest-more:hover {box-shadow:0 5px 14px color-mix(in srgb, var(--cmp-accent) 28%, transparent);}
.aps-cmp-suggest-more:active {transform:scale(.99);}
/* ---------- bottom sheet (mobile) / modal (desktop) search ---------- */
.aps-cmp-sheet {position:fixed; inset:0; z-index:99999; display:none;}
.aps-cmp-sheet.is-open {display:block;}
.aps-cmp-sheet-backdrop {position:absolute; inset:0; background:rgba(15,25,50,.5);}
/* Fixed height, not content-driven: with one result (or none) the panel
used to shrink to a stub and hide behind the keyboard. dvh tracks the
visible viewport when the keyboard opens; vh does not. */
.aps-cmp-sheet-panel {position:absolute; left:0; right:0; bottom:0; height:78dvh; max-height:78dvh; display:flex; flex-direction:column; background:#fff; border-radius:20px 20px 0 0; padding:8px 15px 15px; box-shadow:0 -8px 24px rgba(0,0,0,.18); transform:translateY(100%); transition:transform .28s ease;}
@supports not (height: 1dvh) {
.aps-cmp-sheet-panel {height:78vh; max-height:78vh;}
}
.aps-cmp-sheet.is-open .aps-cmp-sheet-panel {transform:translateY(0);}
.aps-cmp-sheet-handle {width:44px; height:5px; margin:0 auto 12px; border-radius:5px; background:#dde3ec;}
.aps-cmp-sheet-header {display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.aps-cmp-sheet-field {position:relative; flex:1;}
.aps-cmp-sheet-field input {width:100%; height:48px; padding:0 14px 0 42px; border:1px solid var(--aps-border-color); border-radius:30px; background:#fff; font-size:15px; color:var(--aps-headings-color);}
.aps-cmp-sheet-field input:focus {border-color:var(--cmp-accent); outline:none; box-shadow:0 0 0 3px var(--cmp-tint);}
.aps-cmp-sheet-field .aps-icon-search {position:absolute; top:50%; right:14px; transform:translateY(-50%); --aps-icon-size:17px; color:#9aa7bd; pointer-events:none;}
/* real icon rather than the × glyph, which rendered thin and sat
off-centre; flex centring keeps it true regardless of font metrics */
/* real icon rather than the × glyph, which rendered thin and sat
off-centre; flex centring keeps it true regardless of font metrics.
The tinted circle is the RESTING state, not a hover effect. */
.aps-cmp-sheet-close {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:none; border-radius:50%; background:var(--cmp-tint); color:var(--cmp-accent); cursor:pointer; transition:background .2s ease, color .2s ease;}
.aps-cmp-sheet-close i {--aps-icon-size:16px; width:16px; height:16px; line-height:1; color:currentColor;}
.aps-cmp-sheet-close:hover {background:var(--cmp-accent); color:#fff;}
.aps-cmp-sheet-results {flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0; padding:2px; list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; align-content:start;}
.aps-cmp-sheet-results li {border:1px solid var(--cmp-hair); border-radius:var(--cmp-radius-sm); padding:10px 6px; text-align:center; cursor:pointer; transition:border-color .2s ease, background .2s ease;}
.aps-cmp-sheet-results li:hover {border-color:var(--cmp-accent); background:var(--cmp-surface);}
.aps-cmp-sheet-results img {width:100%; max-width:58px; height:58px; object-fit:contain; margin:0 auto 6px;}
/* the result markup is shared with an older widget, so target its classes */
.aps-cmp-sheet-results a {display:block; text-decoration:none;}
.aps-cmp-sheet-results .aps-wd-thumb {display:block;}
.aps-cmp-sheet-results .aps-wd-title {display:block; font-size:12px !important; font-weight:400 !important; line-height:1.35; color:var(--aps-headings-color);}
.aps-cmp-sheet-results li:hover .aps-wd-title {color:var(--cmp-accent);}
/* section headings are
too - strip the card chrome off them */
.aps-cmp-sheet-results .aps-cmp-sheet-heading {border:none; background:none; padding:0; cursor:default; text-align:start;}
.aps-cmp-sheet-results .aps-cmp-sheet-heading:hover {background:none; border:none;}
.aps-cmp-sheet-msg {grid-column:1 / -1; text-align:center; padding:26px 0; color:#9aa7bd; font-size:13px;}
.aps-cmp-sheet-heading {grid-column:1 / -1; margin:2px 0 0; padding:0 2px; font-size:12px; font-weight:700; color:var(--cmp-accent); list-style:none;}
.aps-cmp-sheet-heading:not(:first-child) {margin-top:10px;}
@media (min-width: 768px) {
.aps-cmp-wrap {--cmp-label-w:200px;}
.aps-cmp-headline.aps-main-title {--cmp-title-max:34; --cmp-title-min:16;}
.aps-cmp-chip {flex:0 1 260px;}
.aps-cmp-chip img {width:38px; height:44px;}
.aps-cmp-chip-name {font-size:15px;}
.aps-cmp-suggested-list {grid-template-columns:1fr 1fr;}
/* On desktop the attribute name sits in a real first column. It used to
look identical to the value cells, so the table read as one flat grid;
the tinted band gives it the same role the label bar has on mobile. */
.aps-cmp-table .aps-cmp-label {padding:14px 18px; background:var(--cmp-label-bg,var(--cmp-tint)); color:var(--cmp-label-text,#5b6b86); font-size:var(--cmp-label-font-size,14px); font-weight:var(--cmp-label-font-weight,700); text-align:start;}
/* the hero card keeps its centre pill, so undo the band there */
.aps-cmp-hero .aps-cmp-table .aps-cmp-label {padding:7px 16px; text-align:center;}
.aps-cmp-cell {padding:14px 12px;}
.aps-cmp-main {font-size:var(--cmp-font-size,15px);}
.aps-cmp-hero-img img {max-width:180px; max-height:180px;}
.aps-cmp-hero-imgs.aps-cmp-cols-3 {grid-template-columns:repeat(3, 1fr);}
.aps-cmp-hero-imgs.aps-cmp-cols-4 {grid-template-columns:repeat(4, 1fr);}
.aps-cmp-hero-imgs.aps-cmp-cols-5 {grid-template-columns:repeat(5, 1fr);}
/* the sticky chips bar reserves the same width so device 1's chip lands
directly above device 1's data column instead of spanning into the
label column below it (and the same for every device after it) */
.aps-cmp-devices:before {content:""; flex:0 0 var(--cmp-label-w); display:block;}
.aps-cmp-table.aps-cmp-cols-2 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(2, 1fr);}
.aps-cmp-table.aps-cmp-cols-3 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(3, 1fr);}
.aps-cmp-table.aps-cmp-cols-4 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(4, 1fr);}
.aps-cmp-table.aps-cmp-cols-5 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(5, 1fr);}
/* The hero card keeps its value | label | value shape on desktop too.
Declared here, after the generic column rules, because both selectors
carry the same specificity and the later one wins. */
.aps-cmp-hero .aps-cmp-table .aps-cmp-row,
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-2 .aps-cmp-row {grid-template-columns:1fr auto 1fr;}
/* with a third device the centre pill would squeeze the columns, so the
label goes back to a normal leading column */
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-3 .aps-cmp-row {grid-template-columns:170px repeat(3, 1fr);}
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-3 .aps-cmp-cell:nth-child(2),
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-3 .aps-cmp-label,
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-3 .aps-cmp-cell:nth-child(3) {order:0;}
.aps-cmp-hero .aps-cmp-table.aps-cmp-cols-3 .aps-cmp-label {margin:0; border-radius:0; background:transparent; min-width:0;}
.aps-cmp-sheet-panel {right:auto; left:auto; bottom:auto; top:8%; margin:0 auto; max-width:660px; border-radius:var(--cmp-radius); transform:translateY(-16px); opacity:0; transition:transform .2s ease, opacity .2s ease;}
.aps-cmp-sheet.is-open .aps-cmp-sheet-panel {transform:translateY(0); opacity:1;}
.aps-cmp-sheet-results {grid-template-columns:repeat(4, 1fr);}
}