/* Common CSS Styles APS plugin */ .clearfix:before, .clearfix:after {content:""; display:table;} .clearfix:after, .clear {clear:both;} body {position:relative;} .aps-container, .aps-container *, .aps-shortcode *, .aps-comps-overlay * {line-height:1.5; padding:0; margin:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .aps-container {padding:20px 0 10px; margin:0 auto; color:var(--aps-text-color);} .aps-container img, .aps-shortcode img, .aps-comps-overlay img {max-width:100%; height:auto;} .aps-container ul, .aps-container ol, .aps-shortcode ul, .aps-shortcode ol, .aps-comps-overlay ul, .aps-comps-overlay ol {list-style:none;} .aps-container:before, .aps-container:after {content:" "; display:table;} .aps-container:after {clear:both;} .aps-content {width:70%;} .aps-content-left {float:right;} .aps-content-right {float:left;} .aps-sidebar {float:right; width:30%;} .aps-content, .aps-sidebar {padding-right:10px; padding-left:10px;} .aps-row {margin-right:-10px; margin-left:-10px;} .aps-products.aps-row {margin-right:calc(var(--aps-card-gap, 10px) * -1); margin-left:calc(var(--aps-card-gap, 10px) * -1);} .aps-row-mini {margin-right:-5px; margin-left:-5px;} .alignleft {float:right;} .alignright {float:left;} .no-margin {margin:0;} .uppercase {text-transform:uppercase;} .aps-container a, .aps-button, .aps-pd-search {transition:all .4s ease; -webkit-transition:all .4s ease; -moz-transition:all .4s ease;} .aps-container p, .aps-shortcode p {margin:0 0 20px;} .meta-elems {display:none;} h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a {color:var(--aps-headings-color);} /* font sizes handheld devices */ @media (max-width: 767px) { .aps-container h1, .aps-shortcode h1 {font-size:calc(var(--aps-h1-font) - 6px);} .aps-container h2, .aps-shortcode h2, .aps-products-list .aps-product-title, .aps-single-product .aps-price-value {font-size:calc(var(--aps-h2-font) - 4px);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-rating-total, .aps-comp-rating, .aps-total-score {font-size:calc(var(--aps-h3-font) - 3px);} .aps-container h4, .aps-shortcode h4, .aps-cr-price {font-size:calc(var(--aps-h4-font) - 3px);} .aps-product-price, .aps-comp-title, .aps-btn-iconic {font-size:calc(var(--aps-big-text) - 2px);} .aps-container, .aps-shortcode, .aps-specs-table {font-size:var(--aps-med-text);} ol.apscrumbs li span, .aps-product-details, span.aps-tooltip-display, .aps-comps-num, .aps-disclaimer-note, .aps-compare-txt {font-size:var(--aps-small-text);} } /* font sizes tablets */ @media (min-width: 768px) { .aps-container h1, .aps-shortcode h1 {font-size:calc(var(--aps-h1-font) - 4px);} .aps-container h2, .aps-shortcode h2, .aps-products-list .aps-product-title, .aps-single-product .aps-price-value {font-size:calc(var(--aps-h2-font) - 2px);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-rating-total, .aps-comp-rating, .aps-total-score {font-size:calc(var(--aps-h3-font) - 2px);} .aps-container h4, .aps-shortcode h4, .aps-cr-price {font-size:calc(var(--aps-h4-font) - 2px);} .aps-product-price, .aps-comp-title, .aps-btn-iconic {font-size:var(--aps-big-text);} .aps-container, .aps-shortcode, .aps-specs-table {font-size:var(--aps-med-text);} ol.apscrumbs li span, .aps-product-details, span.aps-tooltip-display, .aps-comps-num, .aps-disclaimer-note {font-size:var(--aps-small-text);} } /* font sizes desktop */ @media (min-width: 992px) { .aps-container h1, .aps-shortcode h1 {font-size:var(--aps-h1-font);} .aps-container h2, .aps-shortcode h2, .aps-products-list .aps-product-title, .aps-single-product .aps-price-value {font-size:var(--aps-h2-font);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-rating-total, .aps-comp-rating, .aps-total-score {font-size:var(--aps-h3-font);} .aps-container h4, .aps-shortcode h4, .aps-cr-price {font-size:var(--aps-h4-font);} .aps-product-price, .aps-comp-title, .aps-btn-iconic {font-size:var(--aps-big-text);} .aps-container, .aps-shortcode, .aps-specs-table {font-size:var(--aps-med-text);} ol.apscrumbs li span, .aps-product-details, span.aps-tooltip-display, .aps-comps-num, .aps-disclaimer-note {font-size:var(--aps-small-text);} } /* Breadcrumbs */ ol.apscrumbs {margin-bottom:10px;} ol.apscrumbs li {margin-left:20px; position:relative; display:inline-block;} ol.apscrumbs li:after {color:#c1c2c3; position:absolute; top:0; left:-19px;} ol.apscrumbs.style-1 li:after {content:"\002F"; left:-15px;} ol.apscrumbs.style-2 li:after {content:"\005C"; left:-15px;} ol.apscrumbs.style-3 li:after {content:"\002D"; left:-15px;} ol.apscrumbs.style-4 li:after {content:"\2192";} ol.apscrumbs.style-5 li:after {content:"\2190";} ol.apscrumbs.style-6 li:after {content:"\203A"; left:-15px;} ol.apscrumbs.style-7 li:after {content:"\2039"; left:-15px;} ol.apscrumbs.style-8 li:after {content:"\00BB"; left:-15px;} ol.apscrumbs.style-9 li:after {content:"\00AB"; left:-15px;} ol.apscrumbs.style-10 li:after {content:"\21D2";} ol.apscrumbs.style-11 li:after {content:"\21d0";} ol.apscrumbs.style-12 li:after {content:"\21E8";} ol.apscrumbs.style-13 li:after {content:"\21E6";} ol.apscrumbs.style-14 li:after {content:"\21E2";} ol.apscrumbs.style-14 li:after {content:"\21E0";} ol.apscrumbs li:last-child:after {content:"";} /* APS Brands Archive and Search */ .aps-products > li {padding:var(--aps-card-gap, 10px); display:inline-block; vertical-align:top;} .aps-product-box {float:inline-start; padding:0; position:relative; background:#fff; overflow:hidden;} .aps-product-thumb {display:block; border:5px solid transparent; overflow:hidden;} .aps-product-thumb img, .aps-product-pic img, .aps-wd-thumb img {width:100%; height:auto;} .aps-item-meta {padding:0 10px 5px;} .aps-product-title {margin:0; overflow:hidden;} .aps-product-details ul {margin:0;} .aps-product-details ul li {width:100%; padding:0; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .aps-product-details ul li strong {display:inline-block;} .aps-price-value del {color:#aaa; font-size:90%;} .aps-compare-txt {font-weight:700;} /* Product card action row - "Add to Compare" + "View Specs", shown under * the price on every product card (grid and list view). Same button family * as the Filters/Sort controls above (shape, weight, the Design corners), * just smaller and icon-free: one solid (primary) and one outlined * (secondary), sitting side by side on one row. Flex/gap based, so - as * with the brand-header controls - this needs no separate RTL version. */ /* justify-content:center handles two things at once: it keeps the pair * from being stretched flush against the card's edge when they comfortably * fit (was crowding the right edge compared to the image/price above), and * it automatically centers a single button when the other is turned off * via Settings - no extra rule needed for that case. */ /* Both buttons are the same solid blue now (View Specs and Add to Compare * no longer need visual hierarchy against each other), sized down and * kept to one line - text truncates with an ellipsis on the rare device * too narrow to fit it rather than wrapping onto a second line. */ /* Sized by content, not stretched to equal widths - "Add to Compare" * naturally comes out wider than "View Specs". Still shrinks (never * overflows the card) with an ellipsis as a last-resort fallback. */ /* font-size and padding scale continuously with viewport width (clamp) * instead of a fixed value tuned to one width - so there is no narrower * device where the old fixed size stops fitting and the edge-crowding * reappears. overflow:hidden + ellipsis stays as the last-resort fallback * for labels/widths clamp() can't fully solve on its own. */ /* Solid buttons are flat (no gradient / glow), 1px border in the same colour. */ /* On the 2-per-row mobile grid, a ~180px card is genuinely too narrow to * fit "Add to Compare" and "View Specs" as two side-by-side pills with * room to spare - their combined natural width meets or exceeds the card, * so flex-shrink consumes all the slack and there's nothing left for * justify-content:center to distribute (this is why hiding one button via * Settings "fixes" it: a single button alone is well under the card width * and centers normally). The real fix is to stop asking both buttons to * share one line there: when both are visible, stack them full-width * instead - still centered as a pair, each one easily readable. Wider * screens (or the single-button case, any width) keep the side-by-side row. */ /* grid view */ .aps-products-grid, .aps-wd-products, .aps-filters-inputs {display:flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap;} .aps-products-grid .aps-product-box {height:100%;} /* Card alignment across a grid row: .aps-products-grid already stretches * every card in a row to the same height (flex default align-items - * stretch), so once each card is a flex column with its meta area filling * the remaining space, pinning the action row to the bottom with * margin-top:auto lines it up at the same Y position on every card in the * row, however many lines the title above it wraps to. */ .aps-products-grid .aps-product-box {display:flex; flex-direction:column;} .aps-products-grid .aps-item-meta {display:flex; flex-direction:column; flex:1 1 auto;} .aps-wd-products li a {height:100%; box-sizing:border-box;} .aps-products-grid .aps-product-title {font-size:14px; font-weight:700; padding:0 0 5px; text-align:center;} .aps-product-title a {color:var(--aps-ink);} .aps-products-grid .aps-product-title a {line-height:1.3;} .aps-product-price {padding:0; text-align:center;} .aps-products-grid .aps-product-details {display:none;} .aps-products-grid .aps-comp-btn {width:100%; text-align:center; bottom:10px; right:0;} .aps-products-grid .aps-comp-rating {display:none;} .aps-products-grid .aps-item-buttons {padding:5px; background:var(--aps-tile); border-top:1px solid var(--aps-hair, #e3e8ef);} /* list view */ .aps-products-list li {width:100%;} .aps-products-list .aps-product-box {width:100%;} .aps-products-list .aps-product-thumb {float:right; width:200px;} .aps-products-list .aps-item-meta {display:inline-block; padding:0;} .aps-products-list .aps-product-title {font-size:24px; line-height:1.3; padding:10px 0 0; clear:none;} .aps-products-list .aps-product-price {text-align:right;} .aps-products-list .aps-product-details {float:right; padding:0; color:#727374;} .aps-products-list .aps-comp-btn {bottom:20px; left:20px;} .aps-products-list .aps-comp-rating {position:absolute; top:10px; left:10px; z-index:22;} .aps-products-list .aps-item-buttons {position:absolute; bottom:5px; left:10px; z-index:23;} /* APS Single Product (post) */ /* quick-links row list (comparison / images / specs / FAQ / comments) - see temps/parts/single-quicklinks.php. sizing, corner radius and border follow the same Design settings as the feature cards and the Our Rating card (Cards Scale, Corner Softness, Border Intensity, Border Color). */ .aps-quicklinks {clear:both; display:grid; gap:calc(8px * var(--aps-scale, 1)); width:100%; margin:0 0 10px; padding:calc(12px * var(--aps-scale, 1)); background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius, 10px); box-sizing:border-box;} .aps-qlink {display:flex; align-items:center; justify-content:space-between; gap:calc(12px * var(--aps-scale, 1)); margin:0; padding:calc(11px * var(--aps-scale, 1)) calc(13px * var(--aps-scale, 1)); background:var(--aps-tile); border:0; border-radius:var(--aps-radius-in, 14px); box-shadow:none; text-decoration:none; transition:background .15s ease;} .aps-qlink:hover, .aps-qlink:focus {background:var(--aps-tile-2);} .aps-qlink-icon {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; overflow:hidden; color:var(--aps-skin-color-1); background:#fff; border-radius:calc(var(--aps-radius-in, 14px) * .6);} .aps-qlink-icon svg {width:62%; height:62%; display:block; margin:auto; overflow:visible;} .aps-qlink-text {flex:1 1 auto; min-width:0; text-align:start;} .aps-qlink-title {display:block; font-size:.92em; font-weight:700; color:var(--aps-ink);} .aps-qlink-desc {display:block; margin-top:2px; font-size:.86em; color:var(--aps-mute);} .aps-faq-list {display:grid; gap:calc(8px * var(--aps-scale, 1)); margin:0; padding:calc(12px * var(--aps-scale, 1)); list-style:none; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius, 10px);} .aps-faq-item {margin:0; padding:0; list-style:none;} .aps-faq-details {background:var(--aps-tile); border:0; border-radius:var(--aps-radius-in, 14px); overflow:hidden;} .aps-faq-q {display:flex; align-items:center; justify-content:space-between; gap:calc(12px * var(--aps-scale, 1)); padding:calc(12px * var(--aps-scale, 1)) calc(14px * var(--aps-scale, 1)); cursor:pointer; list-style:none; font-weight:700; color:var(--aps-ink); text-align:start;} .aps-faq-q::-webkit-details-marker {display:none;} .aps-faq-q-text {flex:1 1 auto; min-width:0;} .aps-faq-q-icon {flex:0 0 auto; width:18px; height:18px; color:var(--aps-skin-color-1); display:flex; align-items:center; justify-content:center; transition:transform .2s ease;} .aps-faq-q-icon svg {width:100%; height:100%; display:block;} .aps-faq-details[open] .aps-faq-q-icon {transform:rotate(180deg);} .aps-faq-a {padding:0 calc(14px * var(--aps-scale, 1)) calc(14px * var(--aps-scale, 1)); color:#334155; line-height:1.75; text-align:start;} .aps-tabs {float:inline-start; width:100%; display:flex; flex-wrap:wrap; margin:10px 0 20px; border-bottom:1px solid var(--aps-hair, #e3e8ef);} .aps-tabs li {display:block; position:relative; margin:0 0 -1px;} .aps-tabs li a {display:block; padding:10px 14px; color:var(--aps-mute); font-weight:700; text-decoration:none; border:0; border-bottom:3px solid transparent; border-radius:0;} .aps-tabs li a:hover {color:var(--aps-skin-color-1); background:none;} .aps-tabs li.active a {color:var(--aps-skin-color-1); background:none; border-bottom-color:var(--aps-skin-color-1);} .aps-tabs-bottom {border-bottom:none; border-top:1px solid var(--aps-hair, #e3e8ef);} .aps-tabs-bottom li {margin:-1px 0 0;} .aps-tabs-bottom li a {border-bottom:0; border-top:3px solid transparent;} .aps-tabs-bottom li.active a {border-top-color:var(--aps-skin-color-1);} .aps-tab-container, .aps-tab-content {float:inline-start; width:100%;} .aps-tab-content {display:none;} .aps-flat-content {display:block !important;} /* section headings (Images, Specifications, Comments, etc.) - accent bar before the title, in the main color of the Design section: same height, rounded ends and Skin (color theme) gradient */ .aps-tab-title {margin-bottom:15px; display:flex; align-items:center; gap:6px;} .aps-tab-title:before {content:''; display:block; flex:0 0 auto; width:4px; height:1.2em; border-radius:3px; background:var(--aps-skin-color-1);} .aps-comp-title {font-size:16px; margin:0;} .aps-column {float:right; width:100%;} .aps-comp-column {width:100%; padding-top:10px;} .aps-product-pic {float:right; width:50%; padding-left:10px; padding-right:10px; margin:0 0 20px 0;} .aps-product-pic img {display:block; border:5px solid transparent;} /* single product top/main image - corner radius and border follow the same Design settings as the feature cards and quick-links (Corner Softness, Border Intensity, Border Color), instead of the generic Border / Box Shadow + Border Color fields. */ /* product specs page group cards (General, Display, etc.) - corner radius, border and spacing follow the same Design settings as the feature cards and quick-links (Cards Scale, Corner Softness, Border Intensity, Border Color), instead of the generic Border / Box Shadow + Border Color fields. */ .aps-group {float:inline-start; width:100%; margin-bottom:calc(12px * var(--aps-scale, 1)); border:1px solid var(--aps-hair, #e3e8ef); position:relative; background:#fff; overflow:hidden; border-radius:var(--aps-radius, 10px);} .aps-main-title {font-size:30px; margin:0 0 20px; display:table;} .aps-main-title span {display:table-cell;} .aps-main-title img {margin-left:10px;} .aps-main-title span, .aps-main-title img {vertical-align:middle;} .aps-product-meta {margin-bottom:calc(10px * var(--aps-scale, 1)); position:relative; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:var(--aps-radius, 10px); box-shadow:none; padding:calc(16px * var(--aps-scale, 1)); box-sizing:border-box;} .aps-single-product .aps-product-price {padding:0;} .aps-product-term {margin-bottom:2px; color:var(--aps-mute); font-weight:600; display:inline-block;} /* price / brand / category header row + status badges row (single product meta box) */ .aps-meta-top {display:flex; align-items:center; justify-content:space-between; gap:calc(10px * var(--aps-scale, 1));} .aps-main-features .aps-product-price {padding:0; text-align:end; flex:0 0 auto;} .aps-main-features .aps-product-price .aps-price-value {font-size:calc(var(--aps-big-text) + 10px); font-weight:800; color:var(--aps-ink);} .aps-meta-info {max-width:65%; text-align:start; flex:0 0 auto;} .aps-meta-info .aps-product-brand, .aps-meta-info .aps-product-cat {display:block; margin-bottom:4px;} .aps-meta-info .aps-product-brand a, .aps-meta-info .aps-product-cat a {color:var(--aps-skin-color-1); font-size:.9em; font-weight:700;} .aps-meta-divider {clear:both; height:1px; margin:calc(14px * var(--aps-scale, 1)) 0; background:var(--aps-hair, #e3e8ef);} .aps-group .aps-group-title {display:flex; align-items:center; gap:9px; padding:calc(11px * var(--aps-scale, 1)) calc(14px * var(--aps-scale, 1)); margin:0 !important; color:var(--aps-skin-color-1); font-size:18px; font-weight:700; line-height:1.4; background:var(--aps-tile); border:0;} .aps-price-group .aps-group-title {border-bottom:0;} /* spec group card header icon (Design/Network/Display/etc.) - before the group name, in the main color (Color 1). */ .aps-group-title span {order:-1; float:none; flex:0 0 auto; display:inline-flex; color:var(--aps-skin-color-1); --aps-icon-size:22px; line-height:1;} .aps-specs-table {float:right; width:100%; margin:0; padding:0; display:table; position:relative;} .aps-specs-table, .aps-specs-table tr td, .aps-specs-table tr th {border:0;} .aps-specs-table tr {margin:0; padding:0; border-top:1px solid var(--aps-hair, #e3e8ef);} .aps-specs-table tr.aps-attr-infold {display:none;} .aps-specs-table tr.aps-attr-infold.aps-attr-exfold {display:table-row;} .aps-specs-table td.aps-attr-title {width:180px; vertical-align:middle; color:var(--aps-mute);} .aps-specs-table td.aps-attr-title .aps-term {color:var(--aps-mute); font-weight:600;} .aps-specs-table td.aps-attr-value {vertical-align:middle;} .aps-specs-table td .aps-attr-header img {width:80px;} .aps-attr-co, .aps-1co, .aps-2co, .aps-3co, .aps-4co, .aps-5co {float:inline-start; min-height:32px; padding:9px 12px; display:inline-block; position:relative;} .aps-2co, .aps-3co, .aps-4co, .aps-5co, .aps-specs-table td .aps-attr-header {text-align:center;} .aps-1co, .aps-2co, .aps-3co, .aps-4co, .aps-5co {border-inline-start:1px solid var(--aps-hair, #e3e8ef);} .aps-1co {width:100%; text-align:start; color:var(--aps-ink);} .aps-2co {width:50%;} .aps-3co {width:33.33333%;} .aps-4co {width:25%;} .aps-5co {width:20%;} .aps-table-fold {padding:3px 10px; color:var(--aps-mute); background:#fff; position:absolute; top:100%; inset-inline-end:10px; cursor:pointer; border-radius:0 0 6px 6px;} .aps-table-fold:hover {color:var(--aps-skin-color-1);} .aps-tooltip {cursor:help;} .aps-tooltip-data, .aps-tb-fold-close {display:none;} span.aps-tooltip-display {min-width:200px; max-width:460px; padding:6px 10px; position:absolute; z-index:99; color:var(--aps-ink); background:#fff; border:1px solid var(--aps-hair, #e3e8ef); border-radius:8px; box-shadow:0 6px 18px -8px rgba(18,35,58,.35);} .aps-products-grid .aps-comp-btn, .aps-current-brand, .aps-sort-controls ul li a, .aps-wd-thumb:after {transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out;} .aps-main-features {float:right; width:50%; padding-left:10px; padding-right:10px;} .aps-btn-iconic {color:#777; font-size:16px; position:absolute; bottom:0; left:5px;} .aps-add-cart {display:none;} .aps-features {padding:0; list-style:none;} .aps-features li {float:right; width:50%; padding:0 5px; margin:0 0 10px;} .flip-front, .flip-back {width:100%; height:100%; padding:10px; text-align:center; position:absolute; right:0; overflow:hidden; transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out;} .flip-front {padding:30px; top:0;} .flip-back {bottom:-100%;} .flip-back > span {line-height:1.2;} /* Iconic Style feature label - follows the Skin (color theme) accent (Custom Color 1) instead of a hardcoded color, matching the .aps-feature-icn icon color. */ /* GSMArena-style horizontal scrolling rows: "Related Devices" (cross-brand, similar specs) and "Latest from [brand]" each render as a single horizontally-scrollable strip of fixed-width cards instead of the old floated multi-column grid. Flexbox removes the need for LTR/RTL-specific float direction here - same rules as the other stylesheet. */ .aps-related-wrap {float:right; width:100%; margin-top:calc(20px * var(--aps-scale, 1));} .aps-related-section {float:right; width:100%; margin-bottom:calc(20px * var(--aps-scale, 1));} .aps-related-section:last-child {margin-bottom:0;} /* Fixed heading size for these two rows, deliberately decoupled from the site's Typography settings (--aps-h3-font) so admin changes there never resize them. */ .aps-related-section > h3 {float:inline-start; width:100%; margin:0 0 12px; font-size:19px !important;} .aps-related-products {display:flex; width:100%; margin:0; padding:2px 2px 12px; list-style:none; gap:calc(12px * var(--aps-scale, 1)); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;} .aps-related-products::-webkit-scrollbar {height:6px;} /* Scroll bar of the "Related Devices" / "Latest from brand" rows: the main color, * instead of a pale grey-blue. Firefox has * no ::-webkit-scrollbar, so it gets scrollbar-color; the @supports guard keeps * scrollbar-color away from Chrome, where it would override the rule above. */ .aps-related-products::-webkit-scrollbar-thumb {background:var(--aps-skin-color-1); border-radius:10px;} @supports not selector(::-webkit-scrollbar) {.aps-related-products {scrollbar-width:thin; scrollbar-color:var(--aps-skin-color-1) transparent;}} .aps-related-products li {flex:0 0 auto; width:128px; padding:0; scroll-snap-align:start;} /* "Related Devices" / "Latest from [brand]" cards - corner radius, border and spacing follow the same Design settings as the feature cards and quick-links (Cards Scale, Corner Softness, Border Intensity, Border Color), instead of the generic Border / Box Shadow + Border Color fields. */ .aps-rd-box {display:flex; flex-direction:column; align-items:center; width:100%; height:100%; padding:calc(10px * var(--aps-scale, 1)); text-align:center; background:var(--aps-tile); box-sizing:border-box; border:0; border-radius:var(--aps-radius-in, 14px); transition:background .15s ease;} .aps-rd-box:hover {background:var(--aps-tile-2);} .aps-rd-thumb {display:block; width:76px; margin:0 0 10px;} .aps-rd-thumb img {display:block; width:100%; height:auto;} .aps-rd-title {display:-webkit-box; width:100%; margin-bottom:4px; overflow:hidden; color:var(--aps-ink); font-size:13px; font-weight:600; line-height:1.35; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .aps-rd-price {display:block; width:100%; margin-bottom:6px; font-size:13px; font-weight:700; color:var(--aps-skin-color-1);} .aps-attr-value .aps-icon-check, .aps-attr-value .aps-icon-cross {padding:3px; color:#fff; --aps-icon-size:16px; line-height:1; display:inline-block; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .aps-attr-value .aps-icon-check {background:var(--aps-good);} .aps-attr-value .aps-icon-cross {background:#ca321c;} /* color swatch attribute type */ .aps-color-swatches {display:flex; flex-direction:column; align-items:flex-start; width:100%; margin:0; padding:0; list-style:none;} .aps-color-swatches li {display:flex; align-items:center; padding:4px 0;} .aps-color-dot {width:20px; height:20px; margin-left:6px; display:inline-block; flex:0 0 auto; border:1px solid rgba(0,0,0,.2); border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .aps-color-name {line-height:20px;} .pd-text {color:#454647;} /* status badges are grouped into rows in PHP (see temps/parts/single-features.php), which also works out a single --aps-badge-font-scale for the whole set so long labels shrink just enough to fit - every badge in a product keeps the same font size and the same height, whether paired or alone on its row. */ .aps-product-status {padding-top:0;} .aps-status-badges {display:flex; flex-direction:column; gap:calc(8px * var(--aps-scale, 1));} .aps-status-badge {min-height:calc(26px + 10px); padding:5px 10px; display:inline-flex; align-items:center; gap:6px; font-size:calc(var(--aps-small-text) * var(--aps-badge-font-scale, 1)); font-weight:600; line-height:1.3; color:var(--aps-skin-color-1); background:var(--aps-tile); border:0; border-radius:calc(var(--aps-radius-in, 14px) * .6); box-sizing:border-box;} .aps-status-row {display:flex; flex-wrap:nowrap; justify-content:center; align-items:stretch; width:100%; gap:calc(8px * var(--aps-scale, 1));} /* paired badges split the row between them */ .aps-status-row .aps-status-badge {flex:1 1 auto; min-width:0; justify-content:center; text-align:center; overflow:hidden;} /* a badge alone on its row keeps its natural width and sits centered */ .aps-status-row .aps-status-badge.aps-badge-solo {flex:0 1 auto; max-width:100%;} .aps-badge-label {min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* the state of the device keeps a soft meaning color (announced / not announced yet / leaks); the market badges (global, China, India...) are plain tiles in the main color, the flag tells them apart */ .aps-badge-avl, .aps-badge-avlw {color:var(--aps-good); background:color-mix(in srgb, var(--aps-good) 11%, #fff);} .aps-badge-ufl {color:#9a5b00; background:#fdf1dc;} .aps-badge-ofl {color:var(--aps-bad); background:color-mix(in srgb, var(--aps-bad) 10%, #fff);} /* badge icons: soft-tinted circle for general badges, real round flag for country badges */ .aps-badge-icon {--aps-icon-size:17px; width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, currentColor 16%, transparent);} .aps-badge-dot {width:18px; height:18px; flex:0 0 18px; margin:4px 0; border-radius:50%; display:inline-block; background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 0 0 1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.12);} .aps-flag-dcn {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/cn.svg');} .aps-flag-rmd {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/in.svg');} .aps-flag-usa {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/us.svg');} .aps-flag-kor {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/kr.svg');} .aps-flag-eu {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/european_union.svg');} .aps-product-proscons {float:inline-start; width:50%; padding:0 10px; margin-bottom:16px; box-sizing:border-box;} /* 4.31.3 the Pros & Cons cards keep their 4.30 look (asked by Hassan) */ .aps-proscons-card {background:#fff; border:1px solid #f0f1f3; border-radius:var(--aps-radius, 10px); box-shadow:0 4px 14px rgba(30,41,59,.06); overflow:hidden; box-sizing:border-box;} .aps-pros-title, .aps-cons-title {display:flex; align-items:center; gap:8px; margin:0; padding:8px 10px; border-radius:0; position:relative;} .aps-pros-title {background:linear-gradient(240deg, #123f24, #0e4a4a 40%, #4c9a2a 75%, #7ec850 100%);} .aps-cons-title {background:linear-gradient(240deg, #7a1414, #c62828 45%, #e53935 80%, #ff5252 100%);} .aps-pros-pros, .aps-cons-cons {height:auto; padding:0; font-weight:bold; letter-spacing:.5px; text-align:right; line-height:1.4; background:none; display:inline-block; color:#fff; font-size:21px;} .aps-pros-circle, .aps-cons-circle {--aps-icon-size:23px; width:34px; height:34px; padding:0; flex:0 0 34px; display:flex; align-items:center; justify-content:center; color:var(--aps-on-head, #fff); background:var(--aps-head-tint, color-mix(in srgb, var(--aps-on-head, #fff) 28%, transparent)); position:relative; top:3px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aps-product-pros, .aps-product-cons {padding:0; margin:0; list-style:none; background:#fff; border:none; border-radius:0; box-shadow:none;} .aps-product-pros li, .aps-product-cons li {display:flex; align-items:flex-start; gap:8px; padding:12px 8px; margin:0; position:relative; border-bottom:1px solid #f0f1f3; color:#1e293b; font-size:14px; line-height:1.5;} .aps-product-pros li:last-child, .aps-product-cons li:last-child {border-bottom:none;} .aps-pros-item-text, .aps-cons-item-text {flex:1; min-width:0; display:block; unicode-bidi:plaintext;} .aps-pros-item-icon, .aps-cons-item-icon {--aps-icon-size:13px; width:21px; height:21px; flex:0 0 21px; padding:0; color:#fff; display:flex; align-items:center; justify-content:center; margin-top:2px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aps-pros-item-icon {background:#1f6b3f; box-shadow:0 0 0 4px rgba(31,107,63,.15);} .aps-cons-item-icon {background:#ca321c; box-shadow:0 0 0 4px rgba(202,50,28,.12);} /* rating */ .aps-rating-card {float:right; width:100%; padding:20px 20px 0; margin-bottom:20px; border:1px solid var(--aps-hair, #e3e8ef); background:#f8f9fa;} .aps-rating-text-box {float:right; width:66.6666%;} .aps-rating-bar-box {float:right; width:33.3333%; margin-bottom:30px;} .aps-overall-rating {float:left; padding-right:45px; position:relative;} .aps-rating-total, .aps-comp-rating {width:48px; height:48px; color:var(--aps-on-solid, #fff); line-height:48px; text-align:center; background:var(--aps-solid, var(--aps-skin-color-2));} .aps-rating-total {float:inline-start; position:absolute; inset-inline-start:0; top:0; background:var(--aps-skin-color-2);} .aps-comp-rating {display:inline-block;} .aps-total-wrap {float:right; width:190px; height:20px; margin-top:14px; background:#e1e2e3; position:relative;} .aps-total-wrap, .aps-total-bar {border-radius:0 0 2px 2px; -webkit-border-radius:0 0 2px 2px; -moz-border-radius:0 0 2px 2px;} .aps-total-bar {height:20px; position:absolute; right:0; top:0;} .aps-rating-total, .aps-range-output, .aps-comp-rating {border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aps-rating-box {width:100%; padding:5px 10px; background:#fff; box-shadow:1px 1px rgba(0,0,0, .1); -webkit-box-shadow:1px 1px rgba(0,0,0, .1); -moz-box-shadow:1px 1px rgba(0,0,0, .1); border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px;} .aps-rating-asp, .aps-rating-wrap, .aps-rating-bar {display:block;} .aps-rating-wrap {height:5px; margin:3px 0; position:relative; background:var(--aps-hair, #e3e8ef);} .aps-rating-bar {height:5px; position:absolute; top:0; right:0;} .aps-rating-num {float:left; color:#000; font-weight:bold;} .aps-red-bg {background:#00509d;} .aps-orange-bg {background:#00509d;} .aps-blue-bg {background:#00509d;} .aps-green-bg {background:#00509d;} /* rating card v3 (premium tech editorial style) - shares the Design settings with the other cards */ .aps-rc-box {width:100%; margin-bottom:20px; background:#fff; border:1px solid var(--aps-hair, #e3e8ef); box-shadow:0 1px 3px rgba(0,0,0,.06); border-radius:var(--aps-radius, 10px); overflow:hidden; box-sizing:border-box;} .aps-rc-header {width:100%; padding:calc(16px * var(--aps-scale, 1)); box-sizing:border-box;} .aps-rc-head-top {display:flex; align-items:flex-start; margin-bottom:calc(14px * var(--aps-scale, 1));} .aps-rc-badge {width:calc(30px * var(--aps-icon-scale, 1)); height:calc(30px * var(--aps-icon-scale, 1)); flex:0 0 auto; color:var(--aps-on-main, #fff); --aps-icon-size:calc(22.5px * var(--aps-icon-scale, 1)); display:flex; align-items:center; justify-content:center; line-height:0; margin-inline-end:calc(10px * var(--aps-scale, 1)); background:var(--aps-skin-color-1); box-shadow:none; border-radius:50%;} .aps-rc-text-box h2 {margin:0 0 3px; color:var(--aps-headings-color); font-size:calc(18px * var(--aps-font-scale, 1)); letter-spacing:.2px;} .aps-rc-text-box p {margin:0; color:var(--aps-text-color); opacity:.7; font-size:calc(12px * var(--aps-font-scale, 1));} .aps-rc-score-row {display:flex; flex-wrap:nowrap; align-items:center;} .aps-rc-box .aps-overall-rating {float:none; padding-right:0; position:relative; display:inline-block; flex:0 0 auto;} /* rating ring remainder - a deeper tile of the main color */ .aps-rc-ring {width:88px; height:88px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:50%; background-image:conic-gradient(var(--aps-skin-color-1) 0%, var(--aps-skin-color-1) var(--pct, 0%), var(--aps-tile-2) var(--pct, 0%) 100%);} .aps-rc-ring-inner {width:70px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border-radius:50%;} .aps-rc-box .aps-rating-total.aps-rc-ring-num {position:static; float:none; width:auto; height:auto; line-height:1; color:var(--aps-skin-color-1); font-size:calc(19px * var(--aps-font-scale, 1)); font-weight:800; background:none;} .aps-rc-ring-outof {margin-top:1px; color:var(--aps-text-color); font-size:calc(9px * var(--aps-font-scale, 1)); opacity:.6;} .aps-rc-hidden-bar {width:1px !important; height:1px !important; position:absolute; top:0; right:0; margin:0 !important; overflow:hidden; opacity:0; pointer-events:none;} .aps-rc-divider {flex:0 0 auto; width:1px; align-self:stretch; margin:0 calc(12px * var(--aps-scale, 1)); background:var(--aps-hair, #e3e8ef);} .aps-rc-grade {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:right;} .aps-rc-grade-label {margin-bottom:4px; color:var(--aps-skin-color-1); font-size:calc(16px * var(--aps-font-scale, 1)); font-weight:800; letter-spacing:.3px;} .aps-rc-stars {margin-bottom:6px; line-height:1;} .aps-rc-star {--aps-icon-size:calc(14px * var(--aps-icon-scale, 1)); margin:0 1px; vertical-align:text-top;} .aps-rc-star-full {color:var(--aps-skin-color-1);} .aps-rc-star-empty, .aps-rc-star-empty-base {color:color-mix(in srgb, var(--aps-skin-color-1) 12%, #d9dce1);} .aps-rc-star-half {position:relative; display:inline-block; width:calc(14px * var(--aps-icon-scale, 1)); height:calc(14px * var(--aps-icon-scale, 1)); vertical-align:text-top;} .aps-rc-star-empty-base {position:absolute; top:0; right:0;} .aps-rc-star-half-fill {position:absolute; top:0; right:0; width:50%; overflow:hidden; color:var(--aps-skin-color-1);} .aps-rc-grade-desc {color:var(--aps-text-color); font-size:calc(11px * var(--aps-font-scale, 1)); opacity:.75; line-height:1.45;} /* 4.25.0 Smart Rating: lines under the grade, short line under each bar, preliminary mark */ .aps-rc-grade-line {display:block; margin-top:5px; color:var(--aps-headings-color); font-size:calc(11px * var(--aps-font-scale, 1)); line-height:1.45; opacity:.85;} .aps-rc-prelim {display:inline-block; vertical-align:middle; margin:0 6px; padding:1px 7px; color:#8a5a00; background:#fff4d6; border:1px solid #f1d58a; border-radius:3px; font-size:calc(11px * var(--aps-font-scale, 1)); font-weight:700; letter-spacing:0; text-transform:none; line-height:1.6;} .aps-rc-item-why {display:block; margin:calc(-4px * var(--aps-scale, 1)) 0 calc(10px * var(--aps-scale, 1)); padding-inline-start:calc(28px * var(--aps-icon-scale, 1) + 10px * var(--aps-scale, 1)); color:var(--aps-text-color); font-size:calc(11px * var(--aps-font-scale, 1)); line-height:1.45; opacity:.65;} .aps-rc-updated {display:inline-block;} /* 4.25.8 one short line under a bar, grey, from the start of the line */ .aps-rc-item-line {display:block; margin:calc(-4px * var(--aps-scale, 1)) 0 calc(10px * var(--aps-scale, 1)); color:var(--aps-text-color, #444); font-size:calc(11px * var(--aps-font-scale, 1)); line-height:1.5; opacity:.72;} .aps-rc-text-box p.aps-rc-basis {margin:3px 0 0; color:var(--aps-headings-color); font-size:calc(12.5px * var(--aps-font-scale, 1)); font-weight:500; line-height:1.5; opacity:.75;} @media (min-width:768px) { .aps-rc-item-line {font-size:calc(11.5px * var(--aps-font-scale, 1));} .aps-rc-text-box p.aps-rc-basis {font-size:calc(13.5px * var(--aps-font-scale, 1));} } /* 4.25.4 smart rating card: category, colored levels, place among current devices, two columns */ .aps-rc-smart {--aps-rc-hi:var(--aps-skin-color-1); --aps-rc-md:color-mix(in srgb, var(--aps-skin-color-1) 50%, #fff); --aps-rc-lo:#d98a00; --aps-rc-vl:#d0472e; --aps-rc-track:#e4e8ed; container-type:inline-size;} .aps-rc-smart .aps-rc-item-track {background:var(--aps-rc-track);} .aps-rc-smart li.aps-rc-lv-md .aps-rc-item-fill {background:var(--aps-rc-md);} .aps-rc-smart li.aps-rc-lv-md .aps-rc-item-val {color:color-mix(in srgb, var(--aps-skin-color-1) 75%, #fff);} .aps-rc-smart li.aps-rc-lv-lo .aps-rc-item-fill {background:var(--aps-rc-lo);} .aps-rc-smart li.aps-rc-lv-lo .aps-rc-item-val {color:var(--aps-rc-lo);} .aps-rc-smart li.aps-rc-lv-vl .aps-rc-item-fill {background:var(--aps-rc-vl);} .aps-rc-smart li.aps-rc-lv-vl .aps-rc-item-val {color:var(--aps-rc-vl);} .aps-rc-smart.aps-rc-lv-lo {--aps-rc-main:var(--aps-rc-lo);} .aps-rc-smart.aps-rc-lv-vl {--aps-rc-main:var(--aps-rc-vl);} .aps-rc-smart.aps-rc-lv-lo .aps-rc-ring, .aps-rc-smart.aps-rc-lv-vl .aps-rc-ring {background-image:conic-gradient(color-mix(in srgb, var(--aps-rc-main) 80%, #fff) 0%, var(--aps-rc-main) calc(var(--pct, 0%) / 2), color-mix(in srgb, var(--aps-rc-main) 80%, #000) var(--pct, 0%), var(--aps-rc-track) var(--pct, 0%) 100%);} .aps-rc-smart.aps-rc-lv-lo .aps-rating-total.aps-rc-ring-num, .aps-rc-smart.aps-rc-lv-vl .aps-rating-total.aps-rc-ring-num, .aps-rc-smart.aps-rc-lv-lo .aps-rc-grade-label, .aps-rc-smart.aps-rc-lv-vl .aps-rc-grade-label, .aps-rc-smart.aps-rc-lv-lo .aps-rc-star-full, .aps-rc-smart.aps-rc-lv-vl .aps-rc-star-full, .aps-rc-smart.aps-rc-lv-lo .aps-rc-star-half-fill, .aps-rc-smart.aps-rc-lv-vl .aps-rc-star-half-fill {color:var(--aps-rc-main);} @container (min-width:700px) { .aps-rc-smart .aps-rc-list {display:grid; grid-template-columns:1fr 1fr; column-gap:calc(28px * var(--aps-scale, 1));} .aps-rc-smart .aps-rc-list li:last-child {border-bottom:none;} .aps-rc-smart .aps-rc-list li:nth-last-child(2):nth-child(odd) {border-bottom:none;} .aps-rc-smart .aps-rc-item {flex-wrap:wrap;} .aps-rc-smart .aps-rc-item-name {flex:1 1 auto; width:auto;} .aps-rc-smart .aps-rc-item-val {order:3; width:auto;} .aps-rc-smart .aps-rc-item-track {order:4; flex:0 0 100%; margin-top:calc(7px * var(--aps-scale, 1));} .aps-rc-smart .aps-rc-item-why {margin-top:calc(-4px * var(--aps-scale, 1));} } .aps-rc-list {width:100%; margin:0; padding:calc(4px * var(--aps-scale, 1)) calc(16px * var(--aps-scale, 1)); list-style:none; box-sizing:border-box; border-top:1px solid var(--aps-hair, #e3e8ef);} .aps-rc-list li {width:100%; padding:0; margin:0; border-bottom:1px solid var(--aps-hair, #e3e8ef);} .aps-rc-list li:last-child {border-bottom:none;} .aps-rc-item {display:flex; flex-wrap:wrap; align-items:center; padding:calc(10px * var(--aps-scale, 1)) 0; column-gap:calc(10px * var(--aps-scale, 1));} .aps-rc-item-icon-wrap {width:calc(28px * var(--aps-icon-scale, 1)); height:calc(28px * var(--aps-icon-scale, 1)); flex:0 0 auto; order:1; display:flex; align-items:center; justify-content:center; line-height:0; background:var(--aps-tile); box-shadow:none; border-radius:calc(var(--aps-radius-in, 14px) * .55);} .aps-rc-item-icon {--aps-icon-size:calc(19.6px * var(--aps-icon-scale, 1)); color:var(--aps-skin-color-1); display:flex; align-items:center; justify-content:center;} .aps-rc-item-name {order:2; flex:1 1 auto; min-width:0; color:var(--aps-headings-color); font-size:calc(13px * var(--aps-font-scale, 1)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .aps-rc-item-val {order:3; flex:0 0 auto; color:var(--aps-skin-color-1); font-weight:800; font-size:calc(13px * var(--aps-font-scale, 1)); white-space:nowrap;} .aps-rc-item-outof {color:var(--aps-text-color); font-weight:400; opacity:.6; font-size:calc(11px * var(--aps-font-scale, 1));} /* rating bar track remainder - a deeper tile of the main color */ .aps-rc-item-track {order:4; flex:0 0 100%; display:block; height:5px; margin-top:calc(7px * var(--aps-scale, 1)); background:var(--aps-tile-2); position:relative; overflow:hidden; border-radius:3px;} .aps-rc-item-fill {display:block; height:5px; width:0; position:absolute; top:0; inset-inline-start:0; background:linear-gradient(to right, var(--aps-skin-color-1), color-mix(in srgb, var(--aps-skin-color-1) 65%, #fff)); border-radius:3px;} .aps-rc-footer {margin:calc(12px * var(--aps-scale, 1)) calc(16px * var(--aps-scale, 1)) calc(16px * var(--aps-scale, 1)); padding:calc(12px * var(--aps-scale, 1)) calc(14px * var(--aps-scale, 1)); display:flex; align-items:flex-start; background:var(--aps-tile); border:0; border-radius:var(--aps-radius-in, 14px); box-sizing:border-box;} .aps-rc-footer-icon-wrap {width:calc(20px * var(--aps-icon-scale, 1)); height:calc(20px * var(--aps-icon-scale, 1)); flex:0 0 auto; margin-left:calc(10px * var(--aps-scale, 1)); margin-top:-1px; display:flex; align-items:center; justify-content:center; line-height:0; background:none; box-shadow:none;} .aps-rc-footer-icon {--aps-icon-size:calc(20px * var(--aps-icon-scale, 1)); color:var(--aps-skin-color-1); display:flex; align-items:center; justify-content:center;} .aps-rc-footer-icon:before {background:currentColor;} .aps-rc-footer p {flex:1 1 auto; min-width:0; margin:0; color:var(--aps-headings-color); font-size:calc(11px * var(--aps-font-scale, 1)); line-height:1.55; opacity:.85; overflow-wrap:break-word; word-wrap:break-word;} @media (min-width: 768px) { .aps-rc-header {padding:calc(22px * var(--aps-scale, 1));} .aps-rc-badge {width:calc(40px * var(--aps-icon-scale, 1)); height:calc(40px * var(--aps-icon-scale, 1)); --aps-icon-size:calc(30px * var(--aps-icon-scale, 1)); margin-inline-end:calc(14px * var(--aps-scale, 1));} .aps-rc-text-box h2 {font-size:calc(24px * var(--aps-font-scale, 1));} .aps-rc-ring {width:124px; height:124px;} .aps-rc-ring-inner {width:100px; height:100px;} .aps-rc-box .aps-rating-total.aps-rc-ring-num {font-size:calc(30px * var(--aps-font-scale, 1));} .aps-rc-ring-outof {font-size:calc(11px * var(--aps-font-scale, 1));} .aps-rc-divider {margin:4px calc(22px * var(--aps-scale, 1));} .aps-rc-grade-label {font-size:calc(18px * var(--aps-font-scale, 1));} .aps-rc-star {--aps-icon-size:calc(19px * var(--aps-icon-scale, 1));} .aps-rc-star-half {width:calc(19px * var(--aps-icon-scale, 1)); height:calc(19px * var(--aps-icon-scale, 1));} .aps-rc-grade-desc {font-size:calc(13px * var(--aps-font-scale, 1)); max-width:360px;} .aps-rc-grade-line {font-size:calc(12px * var(--aps-font-scale, 1)); max-width:360px;} .aps-rc-item-why {margin-top:calc(-7px * var(--aps-scale, 1)); margin-bottom:calc(12px * var(--aps-scale, 1)); font-size:calc(12px * var(--aps-font-scale, 1));} .aps-rc-list {padding:calc(6px * var(--aps-scale, 1)) calc(22px * var(--aps-scale, 1));} .aps-rc-item {flex-wrap:nowrap; padding:calc(13px * var(--aps-scale, 1)) 0;} .aps-rc-item-name {flex:0 0 auto; width:140px; font-size:calc(var(--aps-med-text) * var(--aps-font-scale, 1));} .aps-rc-item-track {order:3; flex:1 1 auto; margin-top:0;} .aps-rc-item-val {order:4; width:76px; text-align:left; font-size:calc(var(--aps-med-text) * var(--aps-font-scale, 1));} .aps-rc-footer {margin:calc(14px * var(--aps-scale, 1)) calc(22px * var(--aps-scale, 1)) calc(22px * var(--aps-scale, 1));} } .aps-search-comp {padding:5px 10px; border:1px solid var(--aps-hair, #e3e8ef); background:#fff;} .aps-total-score {width:40px; color:#fff; line-height:40px; font-size:20px; text-align:center; display:inline-block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aps-button {padding:8px 12px; color:var(--aps-on-main, #fff); font-weight:bold; font-size:13px; line-height:1; white-space:nowrap; display:inline-block; border:1px solid; cursor:pointer; border-radius:calc(var(--aps-radius-in, 14px) * .6);} .aps-pagination a.page-numbers {display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; font-weight:bold; font-size:13px; white-space:nowrap; text-decoration:none; border-radius:calc(var(--aps-radius-in, 14px) * .6); box-sizing:border-box;} .aps-button i {font-size:14px; line-height:1;} .aps-button:hover {color:var(--aps-on-main, #fff);} .aps-btn-black {background:#545556; border:1px solid #515253;} .aps-btn-black:hover {background:#444546; border:1px solid #414243;} .aps-loading {width:20px; height:20px; background:url(../img/spinner.gif) 0 0 no-repeat;} /* response message box */ .aps-msg-overlay {width:100%; height:100%; display:none; background:rgba(0,0,0, .7); position:fixed; top:0; right:0; z-index:991;} .aps-res-msg {width:420px; padding:10px 20px; display:none; background:#fff; position:fixed; top:50%; right:50%; z-index:999; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:2px 2px 5px rgba(0,0,0, .3); -webkit-box-shadow:2px 2px 5px rgba(0,0,0, .3); -moz-box-shadow:2px 2px 5px rgba(0,0,0, .3);} .aps-msg-success, .aps-msg-errors {padding-right:50px; display:block; position:relative;} .aps-msg-success .aps-icon-check, .aps-msg-errors .aps-icon-attention {font-size:30px; line-height:1; margin-top:-15px; position:absolute; top:50%; right:0;} .aps-close-icon {--aps-icon-size:18px; color:#c7c8c9; line-height:1; cursor:pointer; position:absolute; top:3px; left:3px;} .aps-msg-success .aps-icon-check {color:#27a50f;} .aps-msg-errors .aps-icon-attention {color:#ffc000;} .aps-close-icon:hover {color:#d71717;} /* 4.39.9 a label, not a heading (heading order), in a colour that reads (contrast) */ .aps-disclaimer-title, .aps-disclaimer-note {color:var(--aps-mute, #5e6e85);} .aps-disclaimer-title {margin:14px 0 4px; font-weight:700;} .aps-disclaimer-note {font-style:italic;} /* plain comments (discussion) section */ .aps-comments-section, .aps-comments-section * {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} .aps-comments-section {clear:both; float:right; width:100%; margin-top:25px; padding-top:15px;} /* comment list - reset first, since the active theme almost certainly already styles ol/li/.comment and would otherwise fight our layout */ .aps-comments-section ol.aps-cmt-list, .aps-comments-section ol.aps-cmt-list ol.children, .aps-comments-section ol.aps-cmt-list ul.children { float:right; width:100%; margin:0 !important; padding:0 !important; list-style:none !important; background:none !important; border:0 !important; } .aps-comments-section ol.aps-cmt-list .children { padding-right:28px !important; margin-right:22px !important; margin-top:16px !important; border-right:2px solid var(--aps-hair, #e3e8ef); } .aps-comments-section ol.aps-cmt-list .children .aps-cmt-avatar {width:32px; height:32px; line-height:32px; font-size:13px; flex:0 0 32px;} .aps-comments-section ol.aps-cmt-list .children .aps-cmt-name {font-size:13px;} .aps-comments-section ol.aps-cmt-list .children .aps-cmt-text {font-size:13px;} .aps-comments-section ol.aps-cmt-list .children > li {margin-top:14px !important; padding-top:14px !important;} .aps-comments-section ol.aps-cmt-list .children {display:none;} .aps-comments-section ol.aps-cmt-list .children.aps-cmt-expanded {display:block !important;} .aps-comments-section .aps-cmt-replies-btn { padding:0; margin-right:4px; color:var(--aps-skin-color-1); font-size:12px; font-weight:bold; display:inline-flex; align-items:center; gap:4px; cursor:pointer; background:none; border:0; } .aps-comments-section button.aps-cmt-replies-btn {padding:0 !important; color:var(--aps-skin-color-1) !important; background:none !important; border:0 !important; box-shadow:none !important; text-transform:none; letter-spacing:normal; min-height:0;} .aps-comments-section .aps-cmt-replies-btn .aps-icon-down {--aps-icon-size:10px; transition:transform .2s ease;} .aps-comments-section .aps-cmt-replies-btn.aps-cmt-replies-open .aps-icon-down {transform:rotate(180deg);} .aps-comments-section ol.aps-cmt-list > li { list-style:none !important; float:right; width:100%; padding:18px 0 0 !important; margin:18px 0 0 !important; border:0 !important; border-top:1px solid var(--aps-hair, #e3e8ef) !important; background:none !important; } .aps-comments-section ol.aps-cmt-list > li:first-child {padding-top:0 !important; margin-top:0 !important; border-top:0 !important;} .aps-comments-section .aps-cmt-avatar { width:40px; height:40px; margin:0 0 0 14px !important; padding:0 !important; color:#fff !important; font-size:15px; font-weight:bold; line-height:40px; text-align:center; flex:0 0 40px; display:inline-block; float:none !important; border:0 !important; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; } .aps-comments-section .aps-cmt-flex {display:flex; align-items:flex-start; width:100%;} .aps-comments-section .aps-cmt-body {flex:1; min-width:0;} .aps-comments-section .aps-cmt-head {display:flex; align-items:center; flex-wrap:wrap; gap:6px;} .aps-comments-section .aps-cmt-name {color:var(--aps-skin-color-1); font-weight:bold; font-size:15px; font-style:normal;} .aps-comments-section .aps-cmt-date {color:var(--aps-mute); font-family:inherit; font-size:var(--aps-small-text); line-height:1; display:inline-flex; align-items:center;} .aps-comments-section .aps-cmt-date:before {content:"\2022"; margin-left:8px; color:#ccc;} .aps-comments-section .aps-cmt-date .aps-icon-clock {--aps-icon-size:13px; margin-left:6px; flex-shrink:0; display:inline-flex; align-items:center;} .aps-comments-section .aps-cmt-date .aps-icon-clock:before {vertical-align:middle !important;} .aps-comments-section .aps-cmt-text {margin-top:6px !important; color:#334155; line-height:1.65;} .aps-comments-section .aps-cmt-text p {margin:0 0 10px !important;} .aps-comments-section .aps-cmt-text p:last-child {margin-bottom:0 !important;} .aps-comments-section .aps-cmt-pending {margin-top:6px; color:#e39b00; font-size:var(--aps-small-text);} .aps-comments-section .aps-cmt-actions {margin-top:8px;} .aps-comments-section .aps-cmt-reply a { padding:3px 10px; color:var(--aps-skin-color-1) !important; font-size:11px; font-weight:bold; display:inline-block; cursor:pointer; text-decoration:none !important; border:1px solid var(--aps-skin-color-1); border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; background:none !important; } /* the theme injects its own icon on generic .comment-reply-link elements elsewhere on the site - strip it here so only our plain text shows */ .aps-comments-section .comment-reply-link:before, .aps-comments-section .comment-reply-link:after, .aps-comments-section a.comment-reply-link:before, .aps-comments-section a.comment-reply-link:after { content:none !important; display:none !important; } .aps-comments-section .aps-cmt-reply a:hover {color:var(--aps-on-main, #fff) !important; background:var(--aps-skin-color-1) !important;} .aps-comments-section .aps-cmt-empty {padding:15px 0; color:#999;} /* comments pagination */ .aps-comments-section .aps-cmt-nav {float:right; width:100%; margin-top:15px;} .aps-comments-section .aps-cmt-nav a {font-size:var(--aps-small-text); font-weight:bold;} /* comment form */ .aps-comments-section #respond { position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; z-index:auto !important; float:right !important; width:100% !important; margin:25px 0 0 !important; padding:0 !important; background:none !important; border:0 !important; } /* the theme apparently applies its own unusual positioning to these standard WordPress comment classes/ids elsewhere on the site (this is the same category of bug we found with the cookies-consent checkbox) - forcibly neutralize it here so "Reply" never visually escapes to some other part of the page */ .aps-comments-section .comment-reply-link, .aps-comments-section a.comment-reply-link, .aps-comments-section #reply-title, .aps-comments-section #cancel-comment-reply-link { position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; z-index:auto !important; float:none !important; } .aps-comments-section #reply-title {margin:0 0 12px !important; font-size:var(--aps-h2-font, 20px); text-transform:uppercase;} .aps-comments-section #reply-title small {margin-right:8px; font-size:var(--aps-small-text); text-transform:none;} .aps-comments-section #reply-title small a {color:#999;} .aps-comments-section .comment-form {float:right; width:100%; margin:0 !important;} .aps-comments-section .comment-form p {float:right; width:100%; margin:0 0 12px !important; padding:0 !important;} .aps-comments-section #commentform {padding:0 !important; margin:0 !important; width:100% !important;} .aps-comments-section .comment-form-author, .aps-comments-section .comment-form-comment {padding:0 !important; margin:0 0 12px !important;} .aps-comments-section .comment-form-author {max-width:320px;} .aps-comments-section .form-submit {margin-bottom:0 !important; text-align:left;} .aps-comments-section .comment-form input[type="text"], .aps-comments-section .comment-form textarea { width:100%; padding:13px 16px; padding-inline-start:42px; color:var(--aps-ink); border:1px solid transparent; background:var(--aps-tile); transition:background-color .2s ease, box-shadow .2s ease; border-radius:var(--aps-radius-in, 14px); box-shadow:none; } .aps-comments-section .comment-form input[type="text"]::placeholder, .aps-comments-section .comment-form textarea::placeholder {color:var(--aps-mute);} .aps-comments-section .comment-form input[type="text"]:focus, .aps-comments-section .comment-form textarea:focus {background:#fff; box-shadow:0 0 0 2px var(--aps-skin-color-1); outline:none;} .aps-comments-section .comment-form textarea {min-height:100px; resize:vertical;} .aps-comments-section .comment-notes, .aps-comments-section .logged-in-as {margin-bottom:10px !important; font-size:var(--aps-small-text); color:#999;} .aps-comments-section .form-submit input[type="submit"] { display:inline-block !important; height:44px !important; line-height:42px !important; padding:0 26px !important; margin:0 !important; box-sizing:border-box !important; vertical-align:middle; color:var(--aps-on-main, #fff) !important; font-weight:bold !important; font-size:14px !important; cursor:pointer; border:0 !important; background:var(--aps-skin-color-1) !important; border-radius:calc(var(--aps-radius-in, 14px) * .6) !important; box-shadow:none; transition:background .15s ease; } .aps-comments-section .form-submit input[type="submit"]:hover, .aps-comments-section .form-submit input[type="submit"]:focus {background:color-mix(in srgb, var(--aps-skin-color-1) 85%, #000) !important;} /* comment form - leading field icons */ .aps-comments-section .comment-form p {position:relative;} .aps-comments-section .aps-cmt-field-icon {--aps-icon-size:16px; color:#9aa0a6; position:absolute; top:14px; right:14px; pointer-events:none;} /* comment form - cookies consent checkbox */ .aps-comments-section .comment-form-cookies-consent { display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap; position:static !important; top:auto !important; right:auto !important; bottom:auto !important; inset:auto !important; float:right !important; clear:both !important; width:100% !important; max-width:100% !important; margin:0 0 12px !important; padding:0 !important; font-size:var(--aps-small-text); color:#777; } .aps-comments-section .comment-form-cookies-consent input[type="checkbox"] {position:static !important; display:inline-block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; margin:0 !important; width:16px !important; height:16px !important; flex-shrink:0; vertical-align:middle; accent-color:var(--aps-skin-color-1);} /* small screens: name field can take the full row width */ @media (max-width:520px) { .aps-comments-section .comment-form-author {max-width:none;} .aps-comments-section .form-submit {text-align:right;} } .aps-comments-section .aps-cmt-list > li.aps-cmt-hidden {display:none !important;} .aps-comments-section .aps-cmt-loadmore {float:right; width:100%; margin-top:18px; text-align:center;} /* comment guidelines note, above the form */ .aps-comments-section .comment-form p.aps-cmt-guidelines {margin:0 0 14px !important; padding:10px 8px 10px 14px !important; color:#8a6d1a; font-size:var(--aps-small-text); line-height:1.6; background:#fdf6e3; border-right:3px solid #e6b800; border-radius:4px 0 0 4px;} /* inline notice shown after the AJAX comment submission */ .aps-comments-section .aps-cmt-notice {margin:0 0 14px; padding:12px 16px; color:#1e7e34; font-size:var(--aps-small-text); line-height:1.6; background:#eaf7ec; border:1px solid #b6e3bd; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;} .aps-comments-section .aps-cmt-notice-error {color:#a12626; background:#fbeaea; border-color:#f0bcbc;} /* the real