/* APS Products - Compare Page (4.33.0)
 * Loaded ONLY on the compare page/post (aps_styles_scripts() in inc/aps-functions.php).
 * Colors, corners and borders come from the design tokens of APS Settings > Design:
 * Color 1 (navy) for text, icons and heads, its tints for tiles, Color 3 (gold) only
 * for what is better / the lowest price / VS. Written with logical properties, so the
 * same rules serve the RTL and the LTR file.
 */

.aps-cmp-wrap,
.aps-cmp-sheet,
.aps-cmp-slim-hold {
	--cmp-accent: var(--aps-skin-color-1);
	--cmp-act: var(--aps-act, var(--aps-skin-color-1));
	--cmp-head: var(--aps-skin-color-2);
	--cmp-gold: var(--aps-skin-color-3);
	--cmp-tint: var(--aps-tile);
	--cmp-tint-2: var(--aps-tile-2);
	--cmp-hair: var(--aps-hair, #e3e8ef);
	--cmp-soft: color-mix(in srgb, var(--aps-tile) 45%, #fff);
	--cmp-radius: var(--aps-radius, 10px);
	--cmp-radius-in: calc(var(--aps-radius-in, 14px) * .7);
	--cmp-label-w: 0px;
	position: relative;
}
.aps-cmp-wrap {margin-top:6px;}

/* ---------- headline ---------- */
.aps-cmp-head {margin-bottom:14px; text-align:center;}
.aps-cmp-headline.aps-main-title,
.aps-cmp-headline {display:block !important; margin:0 0 4px; font-size:20px; line-height:1.45; text-align:center; text-wrap:balance;}
.aps-cmp-headline .aps-cmp-vs-name {display:inline-block !important; max-width:100%; unicode-bidi:isolate;}
.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:var(--aps-mute);}
.aps-cmp-head .apscrumbs a:hover {color:var(--aps-skin-color-1);}
.aps-cmp-head .apscrumbs li:first-child a:before {content:""; 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 bar ---------- */
/* a theme with overflow-x:hidden on html/body turns it into the scroll container and sticky
   stops working; overflow:clip clips the same way without that (scoped to this page) */
html:has(.aps-cmp-wrap),
body:has(.aps-cmp-wrap) {overflow-x:clip;}
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-unblock {overflow:clip !important;}

.aps-cmp-devices {position:relative; display:flex; align-items:stretch; gap:0; padding:0; background:#fff; border:1px solid var(--cmp-hair); border-bottom:3px solid var(--cmp-head); border-radius:var(--cmp-radius); box-shadow:0 8px 18px -10px rgba(3,20,43,.45);}
/* 4.33.7: the full bar scrolls away with the page; a separate slim bar slides in over the page.
   Its holder is sticky and zero-height, so nothing in the page ever moves (no jumps) */
.aps-cmp-slim-hold {position:-webkit-sticky; position:sticky; top:0; z-index:60; height:0;}
/* a theme that blocks sticky (aps-compare.js): the holder lives in <body>, fixed to the screen */
.aps-cmp-slim-hold.aps-cmp-portal {position:fixed; top:0; z-index:60;}
.aps-cmp-slim {position:absolute; top:0; left:0; right:0; display:flex; align-items:center; background:#fff; border:1px solid var(--cmp-hair); border-top:0; border-bottom:3px solid var(--cmp-head); border-radius:0 0 var(--cmp-radius) var(--cmp-radius); box-shadow:0 8px 18px -10px rgba(3,20,43,.45); transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none; transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s;}
.aps-cmp-slim.is-on {transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:transform .2s ease, opacity .2s ease;}
.aps-cmp-slim-it {flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:5px 12px;}
.aps-cmp-slim-it + .aps-cmp-slim-vs + .aps-cmp-slim-it {border-inline-start:1px solid var(--cmp-hair); padding-inline-start:20px;}
.aps-cmp-slim-it:has(+ .aps-cmp-slim-vs) {padding-inline-end:20px;}
.aps-cmp-slim-it img {flex:none; width:20px; height:30px; object-fit:contain;}
.aps-cmp-slim-name {min-width:0; font-size:13px; font-weight:800; line-height:1.25; color:var(--aps-headings-color, #101828); text-align:center;}
.aps-cmp-slim-name bdi {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; text-align:center;}
.aps-cmp-slim-vs {position:relative; z-index:1; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-inline:-13px; border-radius:50%; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:9.5px; font-weight:800; box-shadow:0 0 0 3px #fff;}
.aps-cmp-devices-spacer {flex:none;}

/* 4.33.6: one white bar split per device, each device a centered card (photo, brand, name,
   "إزالة ×"), VS on the divider at the photo's height (the slim bar while scrolling is .aps-cmp-slim) */
.aps-cmp-chip {position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; gap:9px; min-height:58px; padding:8px 12px; border:0; border-radius:0; background:transparent;}
.aps-cmp-chip[data-pid] {flex-direction:column; justify-content:flex-start; gap:5px; padding:12px 10px 10px; text-align:center;}
.aps-cmp-chip[data-pid] + .aps-cmp-vs-badge + .aps-cmp-chip, .aps-cmp-vs-badge + .aps-cmp-chip-add {border-inline-start:1px solid var(--cmp-hair);}
.aps-cmp-chip img {flex:0 0 auto; width:26px; height:40px; object-fit:contain;}
.aps-cmp-chip[data-pid] img {width:36px; height:54px;}
.aps-cmp-chip-name {flex:1; min-width:0; font-size:13px; font-weight:800; line-height:1.25; text-align:start; color:var(--aps-headings-color, #101828);}
.aps-cmp-chip[data-pid] .aps-cmp-chip-name {flex:none; width:100%; text-align:center;}
.aps-cmp-chip-name bdi {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
.aps-cmp-chip[data-pid] .aps-cmp-chip-name bdi {text-align:center;}
.aps-cmp-chip-name small {display:block; margin-bottom:1px; font-size:10.5px; font-weight:700; line-height:1.3; color:var(--cmp-act); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* remove: a quiet pill, the word and a thin × (no circle) */
.aps-cmp-chip-remove {display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:auto; padding:0 11px; border:1px solid #e9a79e; border-radius:20px; background:#fff; color:#b42318; font-size:11px; font-weight:700; line-height:21px; white-space:nowrap; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;}
.aps-cmp-chip-remove svg {display:block; flex:none; width:8px; height:8px; margin-top:1px;}
.aps-cmp-chip-remove:hover, .aps-cmp-chip-remove:focus-visible {color:#912018; border-color:#d9776a; background:#fdecea;}
.aps-cmp-vs-badge {position:relative; z-index:1; flex:0 0 auto; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-inline:-13px; margin-top:26px; border-radius:50%; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:9.5px; font-weight:800; box-shadow:0 0 0 3px #fff;}
.aps-cmp-chip-add {justify-content:center; gap:6px; margin:6px; min-height:46px; border:1.5px dashed color-mix(in srgb, var(--cmp-accent) 35%, #fff); border-radius:var(--cmp-radius-in); cursor:pointer;}
.aps-cmp-chip-add .aps-cmp-chip-name {flex:0 1 auto; font-size:12.5px; color:var(--cmp-accent); text-align:center;}
.aps-cmp-plus {font-size:18px; font-weight:700; line-height:1;}
.aps-cmp-chip-add .aps-cmp-plus {color:var(--cmp-accent);}
.aps-cmp-third-note {display:none; margin:6px 0 0; font-size:12px; color:var(--aps-mute); text-align:center;}

/* ---------- section links ---------- */
.aps-cmp-tools {display:flex; align-items:center; gap:10px; margin:10px 0;}
.aps-cmp-chips-nav {flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px;}
.aps-cmp-chips-nav::-webkit-scrollbar {display:none;}
.aps-cmp-chips-nav a {display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:5px 11px; border:1px solid var(--cmp-hair); border-radius:20px; background:#fff; color:var(--cmp-accent); font-size:12.5px; font-weight:700; white-space:nowrap; text-decoration:none !important; box-shadow:none !important;}
.aps-cmp-chips-nav a i {--aps-icon-size:14px; width:14px; height:14px; line-height:1; flex:none;}
.aps-cmp-chips-nav a.active {background:var(--cmp-accent); border-color:var(--cmp-accent); color:var(--aps-on-main, #fff);}

/* ---------- loading / notice ---------- */
.aps-cmp-result {transition:opacity .2s ease;}
.aps-cmp-wrap.is-loading .aps-cmp-result {opacity:.45; pointer-events:none;}
.aps-cmp-notice {margin:8px 0; padding:8px 12px; border-radius:var(--cmp-radius-in); background:#fff4d6; border:1px solid #f1d58c; color:#6b4a00; font-size:13px; text-align:center;}

/* ---------- cards ---------- */
.aps-cmp-hero,
.aps-cmp-card {background:#fff; border:1px solid var(--cmp-hair); border-radius:var(--cmp-radius); margin-bottom:12px; overflow:hidden;}
.aps-cmp-dark-head {display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:12px 16px; background:var(--cmp-head);}
.aps-cmp-dark-head .aps-cmp-group-title {flex:none; white-space:nowrap;}
.aps-cmp-keydiff .aps-cmp-dark-head {justify-content:center;}
.aps-cmp-dark-head .aps-cmp-group-title {color:var(--aps-on-head, #fff) !important;}
.aps-cmp-head-note {flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; font-size:12px; line-height:1.4; color:var(--aps-head-mute, #b6c0cc); padding-inline-start:8px; border-inline-start:1px solid color-mix(in srgb, var(--aps-on-head, #fff) 30%, transparent);}
.aps-cmp-group-head {display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 16px; background:var(--cmp-tint); border-bottom:1px solid var(--cmp-hair);}
.aps-cmp-group-icon {flex:0 0 auto; --aps-icon-size:20px; width:20px; height:20px; line-height:1; color:var(--cmp-accent);}
.aps-cmp-group-title {margin:0 !important; font-size:17px !important; font-weight:700 !important; line-height:1.4 !important; text-align:center; color:var(--cmp-accent) !important;}

/* ---------- hero ---------- */
.aps-cmp-hero {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));}
.aps-cmp-hero-col {display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:14px 8px 12px; text-align:center;}
.aps-cmp-hero-col + .aps-cmp-hero-col {border-inline-start:1px solid var(--cmp-hair);}
.aps-cmp-hero-img {display:flex; align-items:center; justify-content:center; height:120px; margin-bottom:6px;}
.aps-cmp-hero-img img {max-width:110px; max-height:120px; width:auto; height:auto; object-fit:contain;}
.aps-cmp-hero-name {font-size:15px; font-weight:800; line-height:1.35; color:var(--aps-headings-color, #101828) !important; text-decoration:none !important; box-shadow:none !important; overflow-wrap:anywhere;}
.aps-cmp-hero-meta {display:block; font-size:12px; color:var(--aps-mute);}
.aps-cmp-hero-meta a {color:var(--aps-mute) !important; text-decoration:none !important; box-shadow:none !important;}
.aps-cmp-hero-meta i {font-style:normal;}
.aps-cmp-hero-cat, .aps-cmp-hero-leak, .aps-cmp-hero-market {display:inline-block; padding:1px 9px; border-radius:20px; font-size:11px; font-weight:700; text-decoration:none !important; box-shadow:none !important;}
.aps-cmp-hero-cat {background:var(--cmp-tint); color:var(--cmp-accent) !important;}
.aps-cmp-hero-leak {background:#fdecea; color:#b42318;}
.aps-cmp-hero-market {margin-top:2px; background:var(--cmp-tint); color:var(--cmp-accent); border:1px solid var(--cmp-hair);}
/* name, brand and date at the top; price, rating and the link on one line at the bottom of every column */
.aps-cmp-hero-boxes {margin-top:auto !important; padding-top:10px;}
.aps-cmp-hero-boxes {display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:8px; width:100%;}
.aps-cmp-hero-box {position:relative; display:flex; align-items:center; justify-content:center; gap:7px; flex:1 1 110px; max-width:170px; min-height:58px; padding:8px 10px; border-radius:var(--cmp-radius-in); background:var(--cmp-tint);}
.aps-cmp-hero-price {flex-direction:column; gap:0;}
.aps-cmp-hero-price small, .aps-cmp-hero-grade small {display:block; font-size:11px; font-weight:500; color:var(--aps-mute); line-height:1.3;}
.aps-cmp-hero-price b {font-size:17px; font-weight:800; line-height:1.3; color:var(--cmp-act);}
.aps-cmp-low {position:absolute; top:-8px; inset-inline-start:8px; padding:0 7px; border-radius:10px; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:10px; font-style:normal; font-weight:800; line-height:17px; white-space:nowrap;}
.aps-cmp-ring {--pct:0%; position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:conic-gradient(var(--cmp-accent) var(--pct), var(--cmp-tint-2) 0);}
.aps-cmp-ring:before {content:""; position:absolute; inset:5px; border-radius:50%; background:var(--cmp-tint);}
.aps-cmp-ring b {position:relative; font-size:14px; font-weight:800; color:var(--cmp-accent);}
.aps-cmp-hero-rate-win .aps-cmp-ring {background:conic-gradient(var(--cmp-gold) var(--pct), var(--cmp-tint-2) 0);}
.aps-cmp-hero-grade {text-align:start;}
.aps-cmp-hero-grade b {display:block; font-size:13px; font-weight:800; line-height:1.3; color:var(--cmp-accent);}
.aps-cmp-hero-more {margin-top:8px; font-size:12.5px; font-weight:700; color:var(--cmp-act) !important; text-decoration:none !important; box-shadow:none !important;}
.aps-cmp-hero-more:after {content:" ›";}
.aps-cmp-hero-add {justify-content:center; gap:6px; min-height:220px; margin:10px; border:1.5px dashed var(--cmp-hair) !important; border-radius:var(--cmp-radius-in); background:var(--cmp-soft) !important; color:var(--cmp-accent) !important; cursor:pointer; box-shadow:none !important;}
.aps-cmp-hero-add .aps-cmp-plus {display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--cmp-accent); color:var(--aps-on-main, #fff); font-size:24px;}
.aps-cmp-hero-add b {font-size:15px;}
.aps-cmp-hero-add small {font-size:12px; font-weight:500; color:var(--aps-mute);}

/* ---------- table rows ---------- */
/* phones: the name as a band across, the values side by side under it */
.aps-cmp-table .aps-cmp-row {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--cmp-hair);}
.aps-cmp-table .aps-cmp-row:first-child {border-top:0;}
.aps-cmp-label {grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:6px; padding:5px 10px; background:var(--cmp-soft); font-size:12.5px; font-weight:600; line-height:1.4; color:var(--aps-mute); text-align:center;}
.aps-cmp-cell {position:relative; display:flex; align-items:flex-start; justify-content:center; min-width:0; padding:10px 8px; text-align:center;}
.aps-cmp-cell + .aps-cmp-cell:before {content:""; position:absolute; inset-block:8px; inset-inline-start:0; width:1px; background:var(--cmp-hair);}
.aps-cmp-main {display:block; width:100%; min-width:0; font-size:14.5px; font-weight:700; line-height:1.45; color:var(--aps-ink); text-align:center; overflow-wrap:anywhere;}
.aps-cmp-main > * + * {margin-top:4px;}
.aps-cmp-v {font-weight:700; color:var(--aps-ink);}
.aps-cmp-sub {display:block; font-size:11.5px; font-weight:500; line-height:1.35; color:var(--aps-mute);}
.aps-cmp-none {font-size:13px; font-weight:500; color:#9aa6b6;}
.aps-row-same .aps-cmp-main, .aps-row-same .aps-cmp-v {color:#7b8798;}
/* the better value: navy + a gold mark */
.aps-cmp-cell-win .aps-cmp-v, .aps-cmp-cell-win .aps-cmp-main > b {color:var(--cmp-accent); font-weight:800;}
.aps-cmp-win-mark {display:flex; width:max-content; max-width:100%; margin-inline:auto; align-items:center; gap:4px; padding:0 8px; border-radius:20px; background:color-mix(in srgb, var(--cmp-gold) 16%, #fff); border:1px solid color-mix(in srgb, var(--cmp-gold) 55%, #fff); color:#6b4a00; font-size:10.5px; font-weight:800; line-height:18px; white-space:nowrap;}
.aps-cmp-win-mark:before {content:""; width:6px; height:6px; border-radius:50%; background:var(--cmp-gold);}
/* what all devices have, written once under the row */
.aps-cmp-both {grid-column:1 / -1; padding:7px 12px 9px; border-top:1px dashed var(--cmp-hair); background:#fcfdfe; font-size:12px; font-weight:500; line-height:1.7; color:var(--aps-mute); text-align:center;}
.aps-cmp-both b {color:var(--cmp-accent); font-weight:700;}
.aps-cmp-both i {margin:0; font-style:normal; color:var(--aps-mute);}
.aps-cmp-cell-merge {grid-column:1 / -1; flex-direction:column; align-items:center; gap:6px;}
.aps-cmp-cell-merge:before {display:none;}
.aps-cmp-cell-merge .aps-cmp-main {max-width:560px; margin-inline:auto;}
.aps-cmp-same-tag {display:inline-block; padding:0 9px; border-radius:20px; background:var(--cmp-tint); color:var(--aps-mute); font-size:11px; font-weight:600; line-height:20px;}
.aps-cmp-rate-line i {margin:0 4px; font-style:normal; color:#b3bdca;}
.aps-cmp-rate-line bdi {display:inline-block; max-width:100%;}
.aps-cmp-xchips {display:flex; flex-wrap:wrap; justify-content:center; gap:5px;}
.aps-cmp-xchip {padding:2px 8px; border:1px solid color-mix(in srgb, var(--cmp-accent) 55%, #fff); border-radius:6px; background:#fff; font-size:12px; font-weight:700; line-height:1.45; color:var(--cmp-accent);}
/* networks, cameras */
.aps-cmp-nets {display:flex; flex-wrap:wrap; justify-content:center; gap:4px;}
.aps-cmp-net {padding:1px 6px; border-radius:5px; background:var(--cmp-tint); color:var(--cmp-accent); font-size:12px; font-weight:800; line-height:1.5;}
.aps-cmp-net.aps-cmp-net-no {background:#f3f5f8; color:#b3bdca; text-decoration:line-through;}
.aps-cmp-row-sum .aps-cmp-main > b {font-size:15px;}
.aps-cmp-row-lens .aps-cmp-cell {align-items:flex-start;}
.aps-cmp-lens {display:flex; flex-direction:column; align-items:center; gap:5px; max-width:100%;}
.aps-cmp-lens + .aps-cmp-lens {margin-top:6px; padding-top:8px; border-top:1px dashed var(--cmp-hair);}
.aps-cmp-lens-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 6px;}
.aps-cmp-lens-meta {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; max-width:100%;}
/* the aperture / size / sensor bar: cells wrap as a grid with hairlines between them, never cut */
.aps-cmp-lens-meta .aps-lens-bar {display:inline-flex; flex-wrap:wrap; gap:1px; max-width:100%; background:var(--cmp-hair); border-color:var(--cmp-hair);}
.aps-cmp-lens-meta .aps-lens-bar .aps-lens-chip.aps-lens-chip-l {flex:1 1 auto; background:#fff; border:0 !important; padding:3px 8px; min-width:0;}
.aps-cmp-lens-meta .aps-lens-bar .aps-lens-chip-l b {overflow-wrap:anywhere;}
.aps-cmp-lens-meta .aps-lens-chip-l small {white-space:nowrap;}
.aps-cmp-note {font-weight:500;}
/* values with their own look (specs table markup) */
.aps-cmp-main .aps-vlist, .aps-cmp-main .aps-vchips, .aps-cmp-main .aps-vid {align-items:center; justify-content:center;}
.aps-cmp-main .aps-vchips {display:flex; flex-wrap:wrap; gap:4px;}
/* storage + RAM under each other, so a version never breaks across lines in a narrow column */
.aps-cmp-main .aps-vchip {flex-direction:column; align-items:stretch; min-width:96px; max-width:100%;}
.aps-cmp-main .aps-vchip > span {justify-content:center; text-align:center; border-inline-start:0 !important;}
.aps-cmp-main .aps-vchip > span + span {border-top:1px solid var(--cmp-hair);}
.aps-cmp-main .aps-bl {text-align:start;}
.aps-cmp-main .aps-net {justify-content:center; flex-wrap:wrap;}
.aps-cmp-main .aps-color-swatches {justify-content:center;}
.aps-cmp-main .aps-fp-line, .aps-cmp-main .aps-fp-row {flex-wrap:wrap; justify-content:center;}


/* ---------- 4.33.2 values with their own look, made calm and centered ---------- */
/* "2000 شمعة / السطوع العالي": the value, its note small under it (no pills side by side) */
.aps-cmp-main .aps-vlist {display:flex; flex-direction:column; align-items:center; gap:6px;}
.aps-cmp-main .aps-vrow {display:flex; flex-direction:column; align-items:center; gap:0;}
.aps-cmp-main .aps-vrow .aps-vpill {padding:0; border:0; background:none; font-size:11.5px; font-weight:500; color:var(--aps-mute);}
.aps-cmp-main .aps-net-speed.aps-vpill {padding:0 8px; border:1px solid var(--cmp-hair); background:var(--cmp-soft);}
/* lists: one block aligned to the reading start, centered in the cell */
.aps-cmp-list {display:inline-block; max-width:100%; text-align:start;}
.aps-cmp-cell-merge .aps-cmp-list {font-weight:600;}
/* video / slow motion: badge + frames on each line, the tags centered under them */
.aps-cmp-main .aps-vid {display:inline-flex; flex-direction:column; align-items:center; gap:5px; max-width:100%;}
.aps-cmp-main .aps-vid-row {display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px; max-width:100%; white-space:nowrap; overflow:hidden;}
.aps-cmp-main .aps-vid-row > * {flex:none;}
/* a line that must stay whole (aps-compare.js fitLines): the font shrinks first; only past
   10px it may wrap, at the "/" */
.aps-cmp-main .aps-vid-row.is-wrap {flex-wrap:wrap; justify-content:center; white-space:normal; overflow:visible;}
.aps-cmp-main .aps-vid-row.is-wrap > * {flex:0 1 auto;}
.aps-cmp-main .aps-vid-tags {display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:2px;}
/* camera: the aperture bar, then the tags on their own line */
.aps-cmp-lens-meta {flex-direction:column;}
.aps-cmp-lens-tags {display:flex; flex-wrap:wrap; justify-content:center; gap:4px;}
/* fingerprint: the title, then one quiet chip "place · technology" */
.aps-cmp-main .aps-fp {display:inline-block; text-align:start;}
.aps-cmp-main .aps-fp-line, .aps-cmp-main .aps-fp-row {display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.aps-cmp-main .aps-fp .aps-fp-chip {display:inline-flex; flex-wrap:wrap; justify-content:center; max-width:100%; margin:0; border-radius:6px; font-size:12px; white-space:normal;}
.aps-cmp-main .aps-fp .aps-fp-chip {flex-direction:column; gap:0; padding:3px 10px !important; line-height:1.35 !important;}
.aps-cmp-main .aps-fp .aps-fp-chip > .aps-fp-place::after {display:none;}
.aps-cmp-main .aps-fp .aps-fp-chip > .aps-fp-tech {font-size:.9em; line-height:1.35;}
/* dimensions */
.aps-cmp-dims {display:inline-flex;}
.aps-cmp-both-it {white-space:nowrap;}
.aps-cmp-rate-sum {flex-direction:column; align-items:center; gap:2px;}


/* build materials: the part small, the material under it */
.aps-cmp-kvs {display:flex; flex-direction:column; align-items:center; gap:6px;}
.aps-cmp-kv {display:flex; flex-direction:column; align-items:center; line-height:1.35;}
.aps-cmp-kv small {font-size:11.5px; font-weight:500; color:var(--aps-mute);}
.aps-cmp-kv b {font-size:14px; font-weight:700; color:var(--aps-ink);}
/* fingerprint: "بصمة الأصابع", then where it is and its technology as a small tag */
.aps-cmp-fp {display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:6px;}
.aps-cmp-fp > b {font-size:14.5px; font-weight:800; color:var(--aps-ink);}
.aps-cmp-fp-sub {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 6px; font-size:12px; font-weight:600; color:var(--aps-mute);}
.aps-cmp-fp-sub em {font-style:normal; font-size:11px; font-weight:700; line-height:18px; padding:0 7px; border:1px solid color-mix(in srgb, var(--cmp-accent) 40%, #fff); border-radius:4px; color:var(--cmp-accent);}


/* a Latin name in a clamped box takes its own direction: keep it on the reading side */
.aps-cmp-it-name bdi {text-align:right;}

/* device colors one under the other, the stack centered, every chip as wide as the widest */
.aps-cmp-main .aps-color-swatches {display:inline-flex !important; flex-direction:column !important; align-items:stretch; width:auto !important; max-width:100%; gap:5px;}
/* a long note in a cell: a little smaller */
.aps-cmp-long {display:block; font-size:13px; font-weight:600; line-height:1.6;}

/* ---------- rating comparison ---------- */
.aps-cmp-rate-icon {--aps-icon-size:15px; width:15px; height:15px; line-height:1; flex:none; color:var(--cmp-accent);}
.aps-cmp-rate-cell {flex-direction:column; align-items:stretch; gap:5px; padding:9px 10px;}
.aps-cmp-rate-score {display:flex; align-items:baseline; justify-content:center; gap:1px;}
.aps-cmp-rate-score b {font-size:16px; font-weight:800; line-height:1.2; color:var(--cmp-accent);}
.aps-cmp-rate-score small {font-size:11px; color:var(--aps-mute);}
.aps-cmp-rate-track {display:block; height:6px; border-radius:6px; background:var(--cmp-tint-2); overflow:hidden;}
.aps-cmp-rate-track i {display:block; height:100%; border-radius:6px; background:linear-gradient(to left, var(--cmp-accent), color-mix(in srgb, var(--cmp-accent) 60%, #fff));}
.aps-cmp-rate-line {font-size:11px; font-weight:500; line-height:1.45; color:var(--aps-mute); text-align:start;}
.aps-cmp-rate-cell.aps-cmp-cell-win .aps-cmp-rate-score b {color:#9a6a00;}
.aps-cmp-rate-cell.aps-cmp-cell-win .aps-cmp-rate-track i {background:linear-gradient(to left, var(--cmp-gold), color-mix(in srgb, var(--cmp-gold) 60%, #fff));}
.aps-cmp-rate-sum {display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; padding:10px 12px; background:var(--cmp-tint); font-size:13px; font-weight:600; color:var(--cmp-accent);}
.aps-cmp-rate-sum b {color:#9a6a00;}
.aps-cmp-rate-sum i {font-style:normal; color:#9aa6b6;}
.aps-cmp-foot {display:flex; align-items:flex-start; gap:8px; padding:9px 14px; border-top:1px solid var(--cmp-hair); font-size:12px; line-height:1.55; color:var(--aps-mute);}
.aps-cmp-foot-i {flex:none; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-top:2px; border-radius:50%; background:var(--cmp-accent); color:var(--aps-on-main, #fff); font-size:10px; font-weight:800; font-style:normal;}

/* ---------- more details ---------- */
.aps-cmp-more {border-top:1px solid var(--cmp-hair);}
.aps-cmp-more > summary {display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--cmp-soft); cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:var(--cmp-act);}
.aps-cmp-more > summary::-webkit-details-marker {display:none;}
.aps-cmp-more > summary:after {content:""; width:7px; height:7px; margin-inline-start:auto; border-inline-end:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease;}
.aps-cmp-more[open] > summary:after {transform:rotate(-135deg);}
.aps-cmp-more > summary > span {flex:none; white-space:nowrap;}
.aps-cmp-more > summary small {font-size:11.5px; font-weight:500; color:var(--aps-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.aps-cmp-more > .aps-cmp-table {border-top:1px solid var(--cmp-hair);}

/* ---------- phones: the third device is for computers only ---------- */
@media (max-width: 767px) {
		.aps-cmp-n3 [data-col="3"] {display:none !important;}
	.aps-cmp-n3 .aps-cmp-third-note {display:block;}
	.aps-cmp-headline.aps-main-title, .aps-cmp-headline {font-size:19px;}
}

/* ---------- computers: a real label column under the device bar ---------- */
@media (min-width: 768px) {
	.aps-cmp-wrap, .aps-cmp-slim-hold {--cmp-label-w:170px;}
	.aps-cmp-headline.aps-main-title, .aps-cmp-headline {font-size:26px;}
	/* the device bar on the columns of the table: the label column holds "+ add" (or stays empty),
	   one column per device, VS on the line between two devices */
	.aps-cmp-devices {display:grid; grid-template-columns:var(--cmp-label-w) repeat(2, minmax(0, 1fr));}
	.aps-cmp-n3 .aps-cmp-devices {grid-template-columns:var(--cmp-label-w) repeat(3, minmax(0, 1fr));}
	.aps-cmp-devices:before {content:""; grid-column:1; grid-row:1;}
	.aps-cmp-devices:has(.aps-cmp-chip-add):before {display:none;}
	.aps-cmp-devices .aps-cmp-chip-add {grid-column:1; grid-row:1;}
	.aps-cmp-devices .aps-cmp-chip[data-pid] {grid-row:1; border-inline-start:1px solid var(--cmp-hair); padding:14px 14px 12px;}
	.aps-cmp-devices .aps-cmp-chip[data-pid][data-col="1"] {grid-column:2;}
	.aps-cmp-devices .aps-cmp-chip[data-pid][data-col="2"] {grid-column:3;}
	.aps-cmp-devices .aps-cmp-chip[data-pid][data-col="3"] {grid-column:4;}
	.aps-cmp-devices .aps-cmp-vs-badge {display:none;}
	.aps-cmp-devices .aps-cmp-chip[data-pid][data-col="2"]:after,
	.aps-cmp-devices .aps-cmp-chip[data-pid][data-col="3"]:after {content:"VS"; position:absolute; top:44px; inset-inline-start:-15px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:11px; font-weight:800; box-shadow:0 0 0 3px #fff; z-index:1;}
	.aps-cmp-slim {display:grid; grid-template-columns:var(--cmp-label-w) repeat(2, minmax(0, 1fr));}
	.aps-cmp-n3 .aps-cmp-slim {grid-template-columns:var(--cmp-label-w) repeat(3, minmax(0, 1fr));}
	.aps-cmp-slim:before {content:""; grid-column:1; grid-row:1;}
	.aps-cmp-slim-vs {display:none;}
	.aps-cmp-slim-it {position:relative; grid-row:1; border-inline-start:1px solid var(--cmp-hair); padding:5px 14px;}
	.aps-cmp-slim-it[data-col="1"] {grid-column:2;}
	.aps-cmp-slim-it[data-col="2"] {grid-column:3;}
	.aps-cmp-slim-it[data-col="3"] {grid-column:4;}
	.aps-cmp-slim-it + .aps-cmp-slim-vs + .aps-cmp-slim-it {padding-inline-start:24px;}
	.aps-cmp-slim-it:has(+ .aps-cmp-slim-vs) {padding-inline-end:14px;}
	.aps-cmp-slim-it[data-col="2"]:after, .aps-cmp-slim-it[data-col="3"]:after {content:"VS"; position:absolute; top:50%; inset-inline-start:-14px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:10px; font-weight:800; box-shadow:0 0 0 3px #fff; z-index:1;}
	.aps-cmp-slim-name {font-size:14px;}
	.aps-cmp-chip {min-height:62px;}
	.aps-cmp-chip img {width:30px; height:44px;}
	.aps-cmp-chip[data-pid] img {width:40px; height:60px;}
	.aps-cmp-chip-name {font-size:14px;}
	.aps-cmp-chip-name small {font-size:11.5px;}

	.aps-cmp-hero {grid-template-columns:var(--cmp-label-w) repeat(2, minmax(0, 1fr));}
	.aps-cmp-hero:before {content:"VS"; display:flex; align-items:center; justify-content:center; align-self:center; justify-self:center; width:44px; height:44px; border-radius:50%; background:var(--cmp-gold); color:var(--aps-on-hi, #1d2a3a); font-size:14px; font-weight:800;}
	.aps-cmp-n3 .aps-cmp-hero {grid-template-columns:var(--cmp-label-w) repeat(3, minmax(0, 1fr));}
	.aps-cmp-hero-col {padding:18px 12px 14px;}
	.aps-cmp-hero-col:first-of-type {border-inline-start:1px solid var(--cmp-hair);}
	.aps-cmp-hero-img {height:160px;}
	.aps-cmp-hero-img img {max-width:150px; max-height:160px;}
	.aps-cmp-hero-name {font-size:17px;}

	.aps-cmp-table.aps-cmp-cols-2 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(2, minmax(0, 1fr));}
	.aps-cmp-table.aps-cmp-cols-3 .aps-cmp-row {grid-template-columns:var(--cmp-label-w) repeat(3, minmax(0, 1fr));}
	.aps-cmp-label {grid-column:auto; justify-content:flex-start; padding:12px 16px; background:var(--cmp-soft); border-inline-end:1px solid var(--cmp-hair); font-size:13.5px; text-align:start;}
	.aps-cmp-cell {padding:12px 10px;}
	.aps-cmp-cell + .aps-cmp-cell:before {inset-block:0;}
	.aps-cmp-main {font-size:15px;}
	.aps-cmp-both {grid-column:2 / -1;}
	.aps-cmp-cell-merge {grid-column:2 / -1;}
	.aps-cmp-row-has-both .aps-cmp-label {grid-row:span 2;}
	.aps-cmp-rate-cell {padding:11px 14px;}
}

/* ---------- suggested comparisons under the comparison: the .aps-oc card (aps-styles) ---------- */
.aps-cmp-others-wrap:empty {display:none;}
.aps-cmp-others-wrap .aps-oc {margin:4px 0 12px;}

/* ---------- empty state + suggested comparisons ---------- */
.aps-cmp-empty {display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 15px; border:1.5px dashed var(--cmp-hair); border-radius:var(--cmp-radius); background:var(--cmp-soft); text-align:center;}
.aps-cmp-empty p {margin:0; color:var(--aps-mute);}
.aps-cmp-empty-icon {display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--cmp-accent); color:var(--aps-on-main, #fff); font-size:28px; font-weight:700;}
.aps-cmp-suggested {margin-top:26px; text-align:center;}
.aps-cmp-suggested-title {display:inline-block; margin:0 0 16px; padding:8px 20px; border-radius:var(--cmp-radius-in); background: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 auto; padding:0; display:grid; grid-template-columns:1fr; gap:10px; max-width:660px;}
.aps-cmp-suggest-hidden {display:none;}
.aps-cmp-suggest-card {display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 12px; border-radius:var(--cmp-radius-in); background:var(--cmp-tint); text-decoration:none !important; box-shadow:none !important;}
.aps-cmp-suggest-card:hover {background:var(--cmp-tint-2);}
.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; line-height:1.4; color:var(--aps-ink);}
.aps-cmp-suggest-more {display:inline-flex; align-items:center; gap:8px; margin:16px auto 0; padding:10px 22px; border:none; border-radius:var(--cmp-radius-in); background:var(--cmp-accent); color:var(--aps-on-main, #fff); font-size:14px; font-weight:700; cursor:pointer;}
.aps-cmp-suggest-more i {--aps-icon-size:14px;}
@media (min-width: 768px) {
	.aps-cmp-suggested-list {grid-template-columns:1fr 1fr;}
}

/* ---------- add-a-device sheet (bottom sheet on phones, modal on computers) ---------- */
.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(11,25,48,.55);}
.aps-cmp-sheet-panel {position:absolute; inset-inline:0; bottom:0; height:86vh; height:86dvh; display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:20px 20px 0 0; padding:8px 14px 14px; box-shadow:0 -8px 24px rgba(0,0,0,.18); transform:translateY(100%); transition:transform .28s ease;}
.aps-cmp-sheet.is-open .aps-cmp-sheet-panel {transform:translateY(0);}
.aps-cmp-sheet-handle {flex:none; width:44px; height:5px; margin:0 auto; border-radius:5px; background:var(--cmp-tint-2);}
.aps-cmp-sheet-top {flex:none; display:flex; align-items:center; gap:10px;}
.aps-cmp-sheet-title {flex:1; margin:0 !important; font-size:16px !important; font-weight:800 !important; line-height:1.4 !important; color:var(--cmp-accent) !important;}
.aps-cmp-sheet-close {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:none; border-radius:50%; background:var(--cmp-tint); color:var(--cmp-accent); cursor:pointer;}
.aps-cmp-sheet-close i {--aps-icon-size:14px; width:14px; height:14px; line-height:1;}
.aps-cmp-sheet-field {flex:none; position:relative;}
.aps-cmp-sheet-field input {width:100%; height:46px; margin:0; padding-block:0; padding-inline:14px 42px; border:1.5px solid var(--cmp-hair); border-radius:12px; background:#fff; font-size:15px; color:var(--aps-headings-color); -webkit-appearance:none; appearance:none;}
.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%; inset-inline-end:14px; transform:translateY(-50%); --aps-icon-size:17px; color:var(--cmp-accent); pointer-events:none;}
.aps-cmp-sheet-cats {flex:none; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:1px;}
.aps-cmp-sheet-cats::-webkit-scrollbar {display:none;}
.aps-cmp-cat {flex:none; padding:5px 12px; border:1px solid var(--cmp-hair); border-radius:20px; background:#fff; color:var(--cmp-accent); font-size:12.5px; font-weight:700; line-height:1.5; cursor:pointer;}
.aps-cmp-cat.is-on {background:var(--cmp-accent); border-color:var(--cmp-accent); color:var(--aps-on-main, #fff);}
.aps-cmp-sheet-body {flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transition:opacity .15s ease;}
.aps-cmp-sheet-body.is-loading {opacity:.5;}
.aps-cmp-sheet-sec {margin:12px 0 7px; font-size:12.5px; line-height:1.4; color:var(--aps-mute);}
.aps-cmp-sheet-sec:first-child {margin-top:2px;}
.aps-cmp-sheet-sec b {color:var(--cmp-accent); font-weight:800;}
.aps-cmp-sheet-list {display:grid; grid-template-columns:1fr; border:1px solid var(--cmp-hair); border-radius:12px; overflow:hidden;}
.aps-cmp-it {display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:9px 10px; border:0; border-top:1px solid var(--cmp-hair); background:#fff; text-align:start; cursor:pointer; font-family:inherit;}
.aps-cmp-it:first-child {border-top:0;}
.aps-cmp-it:hover {background:var(--cmp-soft);}
.aps-cmp-it img {flex:none; width:34px; height:46px; object-fit:contain;}
.aps-cmp-it-name {flex:1; min-width:0; font-size:13.5px; font-weight:700; line-height:1.35; color:var(--aps-headings-color);}
.aps-cmp-it-name bdi {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.aps-cmp-it-name small {display:block; margin-top:1px; font-size:11.5px; font-weight:500; color:var(--aps-mute);}
.aps-cmp-it-score {flex:none; padding:2px 7px; border-radius:8px; background:var(--cmp-tint); color:var(--cmp-accent); font-size:12px; font-weight:800; line-height:1.4;}
.aps-cmp-it-score.aps-cmp-it-gold {background:color-mix(in srgb, var(--cmp-gold) 18%, #fff); color:#7a5200;}
.aps-cmp-it-score.aps-cmp-it-leak {background:#fdecea; color:#b42318;}
.aps-cmp-it-add {flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--cmp-accent); color:var(--aps-on-main, #fff); font-size:18px; font-weight:700; line-height:1;}
.aps-cmp-sheet-strip {display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;}
.aps-cmp-sheet-strip::-webkit-scrollbar {display:none;}
.aps-cmp-mini {flex:0 0 96px; display:flex; flex-direction:column; align-items:center; gap:5px; margin:0; padding:9px 6px; border:0; border-radius:12px; background:var(--cmp-tint); cursor:pointer; font-family:inherit;}
.aps-cmp-mini:hover {background:var(--cmp-tint-2);}
.aps-cmp-mini img {width:32px; height:44px; object-fit:contain;}
.aps-cmp-mini bdi {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--aps-ink); text-align:center;}
.aps-cmp-sheet-empty {display:flex; flex-direction:column; align-items:center; gap:4px; padding:30px 10px; text-align:center; color:var(--aps-mute); font-size:13px;}
.aps-cmp-sheet-empty b {color:var(--cmp-accent); font-size:14px;}
.aps-cmp-sheet-msg {padding:26px 0; margin:0; text-align:center; color:var(--aps-mute); font-size:13px;}
@media (min-width: 768px) {
	.aps-cmp-sheet-panel {inset-inline:0; bottom:auto; top:7%; margin:0 auto; max-width:680px; height:auto; max-height:84vh; min-height:460px; padding:16px; 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-handle {display:none;}
	.aps-cmp-sheet-list {grid-template-columns:1fr 1fr;}
	.aps-cmp-sheet-list .aps-cmp-it:nth-child(2) {border-top:0;}
	.aps-cmp-sheet-list .aps-cmp-it:nth-child(even) {border-inline-start:1px solid var(--cmp-hair);}
}

/* the theme's button styles must not reach the buttons of this page */
.aps-cmp-wrap button.aps-cmp-chip-remove {padding:0 11px !important; font-size:11px !important; line-height:21px !important; color:#b42318 !important; background:#fff !important; border:1px solid #e9a79e !important; box-shadow:none !important; min-height:0; text-transform:none; letter-spacing:normal;}
.aps-cmp-wrap button.aps-cmp-chip-remove:hover, .aps-cmp-wrap button.aps-cmp-chip-remove:focus-visible {color:#912018 !important; background:#fdecea !important; border-color:#d9776a !important;}
.aps-cmp-wrap button.aps-cmp-chip-add {color:var(--cmp-accent) !important; background:transparent !important; border:1.5px dashed color-mix(in srgb, var(--cmp-accent) 35%, #fff) !important; box-shadow:none !important; text-transform:none; letter-spacing:normal;}
.aps-cmp-wrap button.aps-cmp-hero-add {text-transform:none; letter-spacing:normal; font-family:inherit;}
.aps-cmp-sheet button.aps-cmp-it, .aps-cmp-sheet button.aps-cmp-mini, .aps-cmp-sheet button.aps-cmp-cat {box-shadow:none !important; text-transform:none; letter-spacing:normal; min-height:0;}
.aps-cmp-sheet button.aps-cmp-it {background:#fff !important; color:inherit !important;}
.aps-cmp-sheet button.aps-cmp-it:hover {background:var(--cmp-soft) !important;}
.aps-cmp-sheet button.aps-cmp-mini {background:var(--cmp-tint) !important; color:inherit !important;}
.aps-cmp-sheet button.aps-cmp-cat {background:#fff !important; color:var(--cmp-accent) !important; border:1px solid var(--cmp-hair) !important;}
.aps-cmp-sheet button.aps-cmp-cat.is-on {background:var(--cmp-accent) !important; color:var(--aps-on-main, #fff) !important; border-color:var(--cmp-accent) !important;}
.aps-cmp-sheet button.aps-cmp-sheet-close {padding:0 !important; color:var(--cmp-accent) !important; background:var(--cmp-tint) !important; border:0 !important; box-shadow:none !important; min-height:0;}
.aps-cmp-sheet button.aps-cmp-sheet-close:hover {color:var(--aps-on-main, #fff) !important; background:var(--cmp-accent) !important;}
.aps-cmp-wrap button.aps-cmp-suggest-more {color:var(--aps-on-main, #fff) !important; background:var(--cmp-accent) !important; border:0 !important; text-transform:none; letter-spacing:normal;}