/* 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:left;} .aps-content-right {float:right;} .aps-sidebar {float:left; width:30%;} .aps-content, .aps-sidebar {padding-left:10px; padding-right:10px;} .aps-row {margin-left:-10px; margin-right:-10px;} .aps-products.aps-row {margin-left:calc(var(--aps-card-gap, 10px) * -1); margin-right:calc(var(--aps-card-gap, 10px) * -1);} .aps-row-mini {margin-left:-5px; margin-right:-5px;} .alignleft {float:left;} .alignright {float:right;} .no-margin {margin:0;} .uppercase {text-transform:uppercase;} .aps-container a, .aps-button, .aps-search-btn, .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, .aps-sub-title {font-size:calc(var(--aps-h2-font) - 4px);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-group-title, .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, .aps-sub-title {font-size:calc(var(--aps-h2-font) - 2px);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-group-title, .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, .aps-sub-title {font-size:var(--aps-h2-font);} .aps-container h3, .aps-shortcode h3, .aps-widget h3, .aps-group-title, .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-right:20px; position:relative; display:inline-block;} ol.apscrumbs li:after {color:#c1c2c3; position:absolute; top:0; right:-19px;} ol.apscrumbs.style-1 li:after {content:"\002F"; right:-15px;} ol.apscrumbs.style-2 li:after {content:"\005C"; right:-15px;} ol.apscrumbs.style-3 li:after {content:"\002D"; right:-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"; right:-15px;} ol.apscrumbs.style-7 li:after {content:"\2039"; right:-15px;} ol.apscrumbs.style-8 li:after {content:"\00BB"; right:-15px;} ol.apscrumbs.style-9 li:after {content:"\00AB"; right:-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:left; padding:0; position:relative; background:#fff; overflow:hidden;} .aps-product-thumb {display:block; border:calc(5px * var(--aps-skin-scale, 1)) solid transparent; overflow:hidden;} .aps-product-thumb img, .aps-product-pic img, .aps-gallery-image 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-brand-desc, .aps-brand-desc p {margin:0 0 10px;} .aps-price-value del {color:#aaa; font-size:90%;} .aps-compare-btn {cursor:pointer;} .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, --aps-skin-radius), * 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. */ .aps-pf-card-actions {box-sizing:border-box; width:100%; max-width:100%; min-width:0; display:flex; align-items:stretch; justify-content:center; gap:clamp(2px, 1vw, 4px); margin:8px 0 2px;} /* 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. */ .aps-pf-card-btn {flex:0 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; padding:4px clamp(3px, 1.5vw, 6px); font-size:clamp(9.5px, 2.7vw, 11px); font-weight:700; line-height:1.25; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; text-decoration:none; border-radius:var(--aps-skin-radius); transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;} /* Solid buttons are flat (no gradient / glow), 1px border in the same colour. */ .aps-pf-card-btn-solid {color:#fff; background:var(--aps-skin-color-1); border:1px solid var(--aps-skin-color-1); box-shadow:none;} .aps-pf-card-btn-solid:hover, .aps-pf-card-btn-solid:focus {color:#fff; background:color-mix(in srgb, var(--aps-skin-color-1) 85%, #000); border-color:color-mix(in srgb, var(--aps-skin-color-1) 85%, #000); box-shadow:none;} .aps-pf-card-btn-outline {color:var(--aps-skin-color-1); background:transparent; border:1px solid var(--aps-skin-color-1);} .aps-pf-card-btn-outline:hover, .aps-pf-card-btn-outline:focus {background:var(--aps-skin-color-1); color:#fff;} /* 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. */ @media (max-width:767px) { /* "Stacked" (default) - the fix above. Skipped entirely when the * Settings > "'View Specs'/'Add to Compare' Layout" option is set to * "Side by side" (.aps-pf-card-actions-inline), which keeps both * buttons on one line and relies on shrink + ellipsis instead. */ .aps-pf-card-actions:not(.aps-pf-card-actions-inline):has(.aps-pf-card-btn:nth-child(2)) {flex-direction:column; align-items:stretch;} .aps-pf-card-actions:not(.aps-pf-card-actions-inline):has(.aps-pf-card-btn:nth-child(2)) .aps-pf-card-btn {flex:1 1 auto; width:100%; padding:5px 8px; font-size:clamp(10px, 2.7vw, 11px);} } /* 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-products-grid .aps-pf-card-actions {margin-top:auto; padding-top:8px;} .aps-wd-products li a {height:100%; box-sizing:border-box;} .aps-products-grid .aps-product-title {font-size:14px; padding:0 0 5px; text-align:center;} .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; left:0;} .aps-products-grid .aps-comp-rating {display:none;} .aps-products-grid .aps-item-buttons {padding:calc(5px * var(--aps-skin-scale, 1)); background:#f7f8f9; border-top:1px solid #f1f2f3;} /* list view */ .aps-products-list li {width:100%;} .aps-products-list .aps-product-box {width:100%;} .aps-products-list .aps-product-thumb {float:left; width:200px;} .aps-products-list .aps-item-meta {display:inline-block; padding:0;} .aps-products-list .aps-product-title {line-height:1.3; padding:10px 0 0; clear:none;} .aps-products-list .aps-product-price {text-align:left;} .aps-products-list .aps-product-details {float:left; padding:0; color:#727374;} .aps-products-list .aps-comp-btn {bottom:20px; right:20px;} .aps-products-list .aps-comp-rating {position:absolute; top:10px; right:10px; z-index:22;} .aps-products-list .aps-item-buttons {position:absolute; bottom:5px; right: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 Nova Style settings as the feature cards and the Our Rating card (Cards Scale, Corner Softness, Border Intensity, Border Color). */ .aps-quicklinks {clear:both; width:100%; margin:0 0 10px;} .aps-qlink {display:flex; align-items:center; justify-content:space-between; gap:calc(12px * var(--aps-nova-scale, 1)); background:#fff; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:var(--aps-nova-radius, 12px); padding:calc(13px * var(--aps-nova-scale, 1)) calc(15px * var(--aps-nova-scale, 1)); margin-bottom:calc(9px * var(--aps-nova-scale, 1)); box-shadow:0 1px 3px rgba(0,0,0,.05); text-decoration:none; transition:box-shadow .15s ease, transform .15s ease; box-sizing:border-box;} .aps-qlink:last-child {margin-bottom:0;} .aps-qlink:hover {box-shadow:0 4px 10px rgba(0,0,0,.08); transform:translateY(-1px);} .aps-qlink-icon {flex:0 0 auto; width:40px; height:40px; border-radius:var(--aps-qlink-icon-radius, calc(var(--aps-nova-radius, 12px) * 0.65)); display:flex; align-items:center; justify-content:center; overflow:hidden;} .aps-qlink-icon svg {width:75%; height:75%; display:block; margin:auto; overflow:visible;} .aps-qlink-text {flex:1 1 auto; min-width:0; text-align:left;} .aps-qlink-title {display:block; font-size:.9em; font-weight:800; color:#16181c;} .aps-qlink-desc {display:block; font-size:.9em; color:#8a8f98; margin-top:3px;} .aps-qlink-chevron {flex:0 0 auto; width:19px; height:19px; color:var(--aps-skin-color-1); display:flex; align-items:center; justify-content:center;} .aps-qlink-chevron svg {width:100%; height:100%; display:block;} .aps-qlink-icon {background:color-mix(in srgb, var(--aps-skin-color-1) 13%, #fff); color:var(--aps-skin-color-1);} .aps-tabs {float:left; width:100%; display:table; margin:10px 0 20px; border-bottom:1px solid var(--aps-border-color);} .aps-tabs li {float:left; display:block; position:relative; margin-bottom:-1px;} .aps-tabs li a {color:#777; display:block; padding:10px 15px; font-weight:bold; position:relative; text-decoration:none; margin-right:2px; border:1px solid transparent; border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0;} .aps-tabs li a:hover {color:#555; background:#f8f8f8; border-bottom-color:var(--aps-border-color);} .aps-tabs li.active a {color:#555; background:#fff; border-color:var(--aps-border-color) var(--aps-border-color) transparent;} .aps-tabs-bottom {border-bottom:none; border-top:1px solid var(--aps-border-color);} .aps-tabs-bottom li {margin-bottom:0; margin-top:-1px;} .aps-tabs-bottom li a {border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px;} .aps-tabs-bottom li a:hover {border-bottom-color:transparent; border-top-color:var(--aps-border-color);} .aps-tabs-bottom li.active a {color:#555; background:#fff; border-color:transparent var(--aps-border-color) var(--aps-border-color);} .aps-tab-container, .aps-tab-content {float:left; width:100%;} .aps-tab-content {display:none;} .aps-flat-content {display:block !important;} /* section headings (Images, Specifications, Comments, etc.) - accent bar before the title, matching the Features Style - Nova Style header bar (.aps-nova-header:before): 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:4px; background:linear-gradient(180deg, var(--aps-skin-color-1), var(--aps-skin-color-2));} .aps-comp-title {margin:0;} .aps-column {float:left; width:100%;} .aps-comp-column {width:100%; padding-top:10px;} .aps-product-pic {float:left; width:50%; padding-right:10px; padding-left: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 Nova Style settings as the feature cards and quick-links (Corner Softness, Border Intensity, Border Color), instead of the generic Border / Box Shadow + Border Color fields. */ .aps-main-image {position:relative; overflow:hidden; box-sizing:border-box; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:var(--aps-nova-radius, 10px);} .aps-main-img-zoom {cursor:pointer;} .aps-image-lens {width:100%; height:100%; display:block; position:absolute; top:0; left:0; border:0px solid rgba(0,0,0, .6); opacity:0; z-index:91; transition:all .4s ease; -moz-transition:all .4s ease; -webkit-transition:all .4s ease;} .aps-main-img-zoom:hover .aps-image-lens {opacity:1; border:240px solid rgba(0,0,0, .6);} .aps-main-img-zoom:after {width:40px; height:40px; background-color:#fff; content:""; --aps-icon-size:32px; line-height:1; position:absolute; top:50%; left:50%; z-index:101; margin-top:-20px; margin-left:-20px; opacity:0; mask-image:url("svg/search.svg"); -webkit-mask-image:url("svg/search.svg"); transform:scale(0,0); transition:all .3s ease .2s; -moz-transition:all .3s ease .2s; -webkit-transition:all .3s ease .2s;} .aps-main-img-zoom:hover:after {opacity:1; transform:scale(1,1);} .aps-img-loader {width:48px; height:48px; margin:-24px 0 0 -24px; display:none; position:absolute; top:50%; left:50%; z-index:99;} /* product specs page group cards (General, Display, etc.) - corner radius, border and spacing follow the same Nova Style 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:left; width:100%; margin-bottom:calc(13px * var(--aps-nova-scale, 1)); border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); position:relative; background:#fff; overflow:hidden; border-radius:var(--aps-nova-radius, 10px);} .aps-main-title {margin:0 0 20px; display:table;} .aps-main-title span {display:table-cell;} .aps-main-title img {margin-right:10px;} .aps-main-title span, .aps-main-title img {vertical-align:middle;} .aps-product-meta {margin-bottom:calc(10px * var(--aps-nova-scale, 1)); position:relative; background:#fff; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:var(--aps-nova-radius, 10px); box-shadow:0 1px 3px rgba(0,0,0,.06); padding:calc(16px * var(--aps-nova-scale, 1)); box-sizing:border-box;} .aps-single-product .aps-product-price {padding:0;} .aps-product-term {margin-bottom:2px; color:#000; 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-nova-scale, 1));} .aps-main-features .aps-product-price {padding:0; text-align:right; flex:0 0 auto;} .aps-main-features .aps-product-price .aps-price-value {font-size:calc(var(--aps-big-text) + 10px); font-weight:800;} .aps-meta-info {max-width:65%; text-align:left; 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;} .aps-meta-divider {clear:both; height:1px; margin:calc(14px * var(--aps-nova-scale, 1)) 0; background:color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff);} .aps-product-meta .aps-compare-btn {display:inline-block; margin-top:calc(14px * var(--aps-nova-scale, 1));} .aps-group-title {padding:calc(5px * var(--aps-nova-scale, 1)) calc(10px * var(--aps-nova-scale, 1)); line-height:1.5; margin:0 !important;} .aps-price-group .aps-group-title {background:color-mix(in srgb, var(--aps-skin-color-1, #4a6fa5) 10%, #fff); border-bottom:2px solid color-mix(in srgb, var(--aps-skin-color-1, #4a6fa5) 30%, #fff);} /* spec group card header icon (Design/Network/Display/etc.) - follows the Skin (color theme) accent (Custom Color 1) instead of a hardcoded orange. */ .aps-group-title span {color:var(--aps-skin-color-1, #f5a302); --aps-icon-size:26px; line-height:1;} .aps-sub-title {margin:10px 0; line-height:1;} .aps-cat-img {padding:calc(5px * var(--aps-skin-scale, 1)); margin:calc(10px * var(--aps-skin-scale, 1)) 0; background:#fff;} .aps-cat-img img {display:block; cursor:pointer;} .aps-sub-cats li {margin:0 10px 10px 0; display:inline-block;} .aps-sub-cats li i {color:#e7c009;} .aps-specs-table {float:left; width:100%; margin:0; padding:0; display:table; position:relative;} .aps-specs-table tr, .aps-specs-table td {border:1;} .aps-specs-table tr {margin:0; padding:0; border-top:1px solid #f1f2f3;} .aps-specs-table tr:nth-child(odd) {background:#f7f8f9;} .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;} .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:left; min-height:32px; padding:8px 10px; 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-left:3px solid #f1f2f3;} .aps-1co {width:100%; text-align:left;} .aps-2co {width:50%;} .aps-3co {width:33.33333%;} .aps-4co {width:25%;} .aps-5co {width:20%;} .aps-table-fold {padding:calc(3px * var(--aps-skin-scale, 1)) calc(10px * var(--aps-skin-scale, 1)); color:#999; background:#fff; position:absolute; top:100%; right:10px; cursor:pointer; border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px;} .aps-table-fold:hover {color:#555;} .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; background:#f3f8ff; border:1px solid #eaf4ff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; 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);} .aps-gallery-thumbs li {float:left; width:25%; padding:0 10px; margin-bottom:20px;} .aps-gallery-thumbs li a {width:100%; height:auto; padding-top:100%; position:relative; display:block; overflow:hidden;} .aps-gallery-thumb {width:100%; height:auto; position:absolute; bottom:0; left:0;} .aps-gallery-thumb, .aps-gallery-zoom, .aps-products-grid .aps-comp-btn, .aps-current-brand, .aps-sort-controls ul li a, .aps-wd-thumb:after, .aps-feature-anim:after, .aps-specs-table tr {transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out;} .aps-gallery-zoom {width:100%; height:100%; color:#fff; position:absolute; left:0; bottom:-100%; text-shadow:rgba(0,0,0,.05);} .aps-gallery-zoom .aps-icon-search {color:#fff; font-size:48px; position:absolute; left:50%; top:30px; margin-left:-24px;} .aps-gallery-zoom .aps-image-title {width:100%; padding:20px 10px; font-size:13px; text-align:center; position:absolute; left:0; bottom:0;} .aps-gallery-thumbs li a:hover .aps-gallery-zoom {bottom:0;} .aps-gallery-thumbs li a:hover .aps-gallery-thumb {bottom:100px;} .aps-main-features {float:left; width:50%; padding-right:10px; padding-left:10px;} .aps-btn-iconic {color:#777; position:absolute; bottom:0; right:5px;} .aps-add-cart {display:none;} .aps-features {padding:0; list-style:none;} .aps-features li {float:left; width:50%; padding:0 5px; margin:0 0 10px;} .aps-flipper {float:left; width:100%; height:110px; color:#fff; line-height:1.3; position:relative; overflow:hidden; text-shadow:rgba(0,0,0,.05);} .flip-front, .flip-back {width:100%; height:100%; padding:10px; text-align:center; position:absolute; left: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;} .aps-flipper:hover .flip-front {top:-30%;} .aps-flipper:hover .flip-back {bottom:0;} .aps-flip-icon {--aps-icon-size:60px; display:block;} .aps-back-icon {--aps-icon-size:32px;} .aps-features-iconic {float:left; width:100%; margin:0; padding-top:5px; border-top:1px dotted var(--aps-border-color);} .aps-features-iconic li {float:left; width:100%; padding:0 0 5px 60px; margin:0 0 5px; border-bottom:1px dotted var(--aps-border-color); position:relative;} .aps-feature-icn {--aps-icon-size:36px; line-height:1; position:absolute; top:3px; left:0;} /* Iconic Style feature label - follows the Skin (color theme) accent (Custom Color 1) instead of a hardcoded orange, matching the .aps-feature-icn icon color. */ .aps-feature-nm {float:left; width:100%; margin:0; color:var(--aps-skin-color-1, #f5a302);} .aps-feature-vl {float:left; width:100%; color:#000;} /* 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 - the RTL stylesheet carries the same rules. */ .aps-related-wrap {float:left; width:100%; margin-top:calc(20px * var(--aps-nova-scale, 1));} .aps-related-section {float:left; width:100%; margin-bottom:calc(20px * var(--aps-nova-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:left; 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-nova-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: same skin-color * gradient as the rating bars and buttons, instead of a pale grey-blue. Firefox has * no ::-webkit-scrollbar, so it gets the flat skin color; the @supports guard keeps * scrollbar-color away from Chrome, where it would override the gradient above. */ .aps-related-products::-webkit-scrollbar-thumb {background:linear-gradient(var(--aps-btn-grad-angle, 120deg), color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-light, 78%), #fff) 0%, var(--aps-skin-color-1) 45%, color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-dark, 72%), #000) 100%); 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 Nova Style 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-nova-scale, 1)); text-align:center; background:#fff; box-sizing:border-box; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:var(--aps-nova-radius, 10px); transition:box-shadow .2s ease, transform .2s ease;} .aps-rd-box:hover {box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px);} .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; font-size:13px; 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:600; color:var(--aps-skin-color-1, #f5a302);} .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:#8ac63c;} .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-right: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;} .aps-features-list li {height:46px; margin-bottom:10px;position:relative;} .aps-feature-anim {height:100%; width:100%; padding:13px 10px 13px 55px; margin-bottom:10px; color:#fff; line-height:15px; position:absolute; top:0; left:0;} .aps-feature-anim:after {height:100%; width:0; position:absolute; top:0; left:0; content:""; z-index:81} .aps-features-list li:hover .aps-feature-anim:after {width:100%;} .aps-list-icon {height:46px; padding:11px; color:#fff; --aps-icon-size:24px; line-height:1; position:absolute; top:0; left:0; z-index:82;} .aps-feature-info {height:20px; position:relative; z-index:83; overflow:hidden;} .aps-feature-info strong {display:inline-block;} .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-nova-scale, 1));} .aps-status-badge {min-height:calc(26px + 16px); padding:8px 14px; display:inline-flex; align-items:center; gap:7px; font-size:calc(var(--aps-small-text) * var(--aps-badge-font-scale, 1)); font-weight:600; line-height:1.3; border:1px solid; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; 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-nova-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;} .aps-badge-avl {color:#1f6a1b; background:#d5f7d3; border-color:#83d17e;} .aps-badge-ofl {color:#044f8f; background:#d7edff; border-color:#72bcfb;} .aps-badge-ufl {color:#a94f01; background:#ffe3cb; border-color:#fbb67b;} .aps-badge-csn {color:#176e4e; background:#bff7e3; border-color:#73e1b9;} .aps-badge-rmd {color:#b90550; background:#fbd1ec; border-color:#f9a0c5;} .aps-badge-dcn {color:#b51a1a; background:#ffd5d5; border-color:#f39e9e;} .aps-badge-mkt-global {color:#3949ab; background:#e3e6fb; border-color:#a6b1ee;} .aps-badge-mkt-china {color:#a81f0c; background:#ffe0dc; border-color:#f5a79c;} .aps-badge-mkt-india {color:#b35300; background:#ffeeda; border-color:#ffcc99;} .aps-badge-mkt-usa {color:#3C3B6E; background:#e2e2f0; border-color:#a8a7cd;} .aps-badge-mkt-korea {color:#a3222d; background:#ffe2e5; border-color:#f0a3aa;} .aps-badge-mkt-eu {color:#003399; background:#dde6ff; border-color:#a6bdf5;} /* badge icons: soft-tinted circle for general badges, real round flag for country badges */ .aps-badge-icon {--aps-icon-size:17px; width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, currentColor 22%, 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-mkt-china {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/cn.svg');} .aps-flag-mkt-india {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/in.svg');} .aps-flag-mkt-usa {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/us.svg');} .aps-flag-mkt-korea {background-image:url('https://cdn.jsdelivr.net/gh/hatscripts/circle-flags@2.2.0/flags/kr.svg');} .aps-flag-mkt-eu {background-image:url('https://phonenxt.com/wp-content/uploads/2025/08/European-Union-flag-circle.webp');} .aps-product-proscons {float:left; width:50%; padding:0 10px; margin-bottom:16px; box-sizing:border-box;} .aps-proscons-card {background:#fff; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:var(--aps-nova-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(120deg, #123f24, #0e4a4a 40%, #4c9a2a 75%, #7ec850 100%);} .aps-cons-title {background:linear-gradient(120deg, #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:left; line-height:1; background:none; display:inline-block; color:#fff; font-size:18px;} .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:#fff; background:rgba(255,255,255,.28); position:static; 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 color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); 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;} .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:left; width:100%; padding:20px 20px 0; margin-bottom:20px; border:1px solid var(--aps-border-color); background:#f8f9fa;} .aps-rating-text-box {float:left; width:66.6666%;} .aps-rating-bar-box {float:left; width:33.3333%; margin-bottom:30px;} .aps-overall-rating {float:right; padding-left:45px; position:relative;} .aps-rating-total, .aps-comp-rating {width:48px; height:48px; color:#fff; line-height:48px; text-align:center; background:#545556;} .aps-rating-total {float:left; position:absolute; left:0; top:0; background:#545556;} .aps-comp-rating {display:inline-block;} .aps-total-wrap {float:left; 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; left: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-border-color);} .aps-rating-bar {height:5px; position:absolute; top:0; left:0;} .aps-rating-num {float:right; color:#000; font-weight:bold;} .aps-red-bg {background:#f5a302;} .aps-orange-bg {background:#f5a302;} .aps-blue-bg {background:#f5a302;} .aps-green-bg {background:#f5a302;} /* rating card v3 (premium tech editorial style) - shares Nova Style settings with Features cards */ .aps-rc-box {width:100%; margin-bottom:20px; background:#fff; border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); box-shadow:0 1px 3px rgba(0,0,0,.06); border-radius:var(--aps-nova-radius, 10px); overflow:hidden; box-sizing:border-box;} .aps-rc-header {width:100%; padding:calc(16px * var(--aps-nova-scale, 1)); box-sizing:border-box;} .aps-rc-head-top {display:flex; align-items:flex-start; margin-bottom:calc(14px * var(--aps-nova-scale, 1));} .aps-rc-badge {width:calc(30px * var(--aps-rating-icon-scale, 1)); height:calc(30px * var(--aps-rating-icon-scale, 1)); flex:0 0 auto; color:rgba(255,255,255,.9); --aps-icon-size:calc(22.5px * var(--aps-rating-icon-scale, 1)); display:flex; align-items:center; justify-content:center; line-height:0; margin-right:calc(10px * var(--aps-nova-scale, 1)); background:linear-gradient(var(--aps-icon-grad-angle, 0deg), color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-grad-light, 78%), #fff) 0%, var(--aps-skin-color-1) 45%, color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-grad-dark, 72%), #000) 100%); box-shadow:0 3px 8px color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-glow, 20%), transparent); border-radius:50%;} .aps-rc-text-box h2 {margin:0 0 3px; color:var(--aps-headings-color); font-size:calc(18px * var(--aps-rating-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-rating-font-scale, 1));} .aps-rc-score-row {display:flex; flex-wrap:nowrap; align-items:center;} .aps-rc-box .aps-overall-rating {float:none; padding-left:0; position:relative; display:inline-block; flex:0 0 auto;} /* rating ring remainder - fixed neutral gray, independent of the Border Color design setting */ .aps-rc-ring {width:88px; height:88px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:50%; background-image:conic-gradient(color-mix(in srgb, var(--aps-skin-color-1) 78%, #fff) 0%, var(--aps-skin-color-1) calc(var(--pct, 0%) / 2), color-mix(in srgb, var(--aps-skin-color-1) 72%, #000) var(--pct, 0%), #bcbcbc 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-rating-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-rating-font-scale, 1)); opacity:.6;} .aps-rc-hidden-bar {width:1px !important; height:1px !important; position:absolute; top:0; left: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-nova-scale, 1)); background:color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff);} .aps-rc-grade {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left;} .aps-rc-grade-label {margin-bottom:4px; color:var(--aps-skin-color-1); font-size:calc(16px * var(--aps-rating-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-rating-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-rating-icon-scale, 1)); height:calc(14px * var(--aps-rating-icon-scale, 1)); vertical-align:text-top;} .aps-rc-star-empty-base {position:absolute; top:0; left:0;} .aps-rc-star-half-fill {position:absolute; top:0; left: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-rating-font-scale, 1)); opacity:.75; line-height:1.45;} .aps-rc-list {width:100%; margin:0; padding:calc(4px * var(--aps-nova-scale, 1)) calc(16px * var(--aps-nova-scale, 1)); list-style:none; box-sizing:border-box; border-top:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff);} .aps-rc-list li {width:100%; padding:0; margin:0; border-bottom:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff);} .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-nova-scale, 1)) 0; column-gap:calc(10px * var(--aps-nova-scale, 1));} .aps-rc-item-icon-wrap {width:calc(28px * var(--aps-rating-icon-scale, 1)); height:calc(28px * var(--aps-rating-icon-scale, 1)); flex:0 0 auto; order:1; display:flex; align-items:center; justify-content:center; line-height:0; background:linear-gradient(var(--aps-icon-grad-angle, 0deg), color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-grad-light, 78%), #fff) 0%, var(--aps-skin-color-1) 45%, color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-grad-dark, 72%), #000) 100%); box-shadow:0 2px 6px color-mix(in srgb, var(--aps-skin-color-1) var(--aps-icon-glow, 20%), transparent); border-radius:var(--aps-rating-icon-radius, 50%);} .aps-rc-item-icon {--aps-icon-size:calc(19.6px * var(--aps-rating-icon-scale, 1)); color:rgba(255,255,255,.9); 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-rating-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-rating-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-rating-font-scale, 1));} /* rating bar track remainder - fixed neutral gray, independent of the Border Color design setting */ .aps-rc-item-track {order:4; flex:0 0 100%; display:block; height:5px; margin-top:calc(7px * var(--aps-nova-scale, 1)); background:#bcbcbc; position:relative; overflow:hidden; border-radius:3px;} .aps-rc-item-fill {display:block; height:5px; width:0; position:absolute; top:0; left:0; background:linear-gradient(var(--aps-btn-grad-angle, 120deg), color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-light, 78%), #fff) 0%, var(--aps-skin-color-1) 45%, color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-dark, 72%), #000) 100%); border-radius:3px;} .aps-rc-footer {margin:calc(12px * var(--aps-nova-scale, 1)) calc(16px * var(--aps-nova-scale, 1)) calc(16px * var(--aps-nova-scale, 1)); padding:calc(12px * var(--aps-nova-scale, 1)) calc(14px * var(--aps-nova-scale, 1)); display:flex; align-items:flex-start; background:color-mix(in srgb, var(--aps-skin-color-1) 6%, #fff); border:1px solid color-mix(in srgb, var(--aps-nova-border-color, #f0f1f3) var(--aps-nova-border-opacity, 100%), #fff); border-radius:calc(var(--aps-nova-radius, 10px) * 0.8); box-sizing:border-box;} .aps-rc-footer-icon-wrap {width:calc(20px * var(--aps-rating-icon-scale, 1)); height:calc(20px * var(--aps-rating-icon-scale, 1)); flex:0 0 auto; margin-right:calc(10px * var(--aps-nova-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-rating-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-rating-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-nova-scale, 1));} .aps-rc-badge {width:calc(40px * var(--aps-rating-icon-scale, 1)); height:calc(40px * var(--aps-rating-icon-scale, 1)); --aps-icon-size:calc(30px * var(--aps-rating-icon-scale, 1)); margin-right:calc(14px * var(--aps-nova-scale, 1));} .aps-rc-text-box h2 {font-size:calc(24px * var(--aps-rating-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-rating-font-scale, 1));} .aps-rc-ring-outof {font-size:calc(11px * var(--aps-rating-font-scale, 1));} .aps-rc-divider {margin:4px calc(22px * var(--aps-nova-scale, 1));} .aps-rc-grade-label {font-size:calc(18px * var(--aps-rating-font-scale, 1));} .aps-rc-star {--aps-icon-size:calc(19px * var(--aps-rating-icon-scale, 1));} .aps-rc-star-half {width:calc(19px * var(--aps-rating-icon-scale, 1)); height:calc(19px * var(--aps-rating-icon-scale, 1));} .aps-rc-grade-desc {font-size:calc(13px * var(--aps-rating-font-scale, 1)); max-width:360px;} .aps-rc-list {padding:calc(6px * var(--aps-nova-scale, 1)) calc(22px * var(--aps-nova-scale, 1));} .aps-rc-item {flex-wrap:nowrap; padding:calc(13px * var(--aps-nova-scale, 1)) 0;} .aps-rc-item-name {flex:0 0 auto; width:140px; font-size:calc(var(--aps-med-text) * var(--aps-rating-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:right; font-size:calc(var(--aps-med-text) * var(--aps-rating-font-scale, 1));} .aps-rc-footer {margin:calc(14px * var(--aps-nova-scale, 1)) calc(22px * var(--aps-nova-scale, 1)) calc(22px * var(--aps-nova-scale, 1));} } .aps-search, .aps-search-comp {padding:5px 10px; border:1px solid var(--aps-border-color); background:#fff;} .aps-total-score {width:40px; color:#fff; line-height:40px; text-align:center; display:inline-block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aps-button, .aps-pagination a.page-numbers {padding:7px 8px; color:#fff; font-weight:bold; font-size:13px; line-height:1; white-space:nowrap; display:inline-block; border:1px solid; cursor:pointer; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;} .aps-button i {font-size:14px; line-height:1;} .aps-button:hover, .aps-pagination a.page-numbers:hover {color:#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; left:0; z-index:991;} .aps-res-msg {width:420px; padding:10px 20px; display:none; background:#fff; position:fixed; top:50%; left: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-left: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%; left:0;} .aps-close-icon {--aps-icon-size:18px; color:#c7c8c9; line-height:1; cursor:pointer; position:absolute; top:3px; right:3px;} .aps-msg-success .aps-icon-check {color:#27a50f;} .aps-msg-errors .aps-icon-attention {color:#ffc000;} .aps-close-icon:hover {color:#d71717;} .aps-disclaimer-title, .aps-disclaimer-note {color:#c7c8c9;} .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:left; 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:left; 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-left:28px !important; margin-left:22px !important; margin-top:16px !important; border-left:2px solid var(--aps-border-color); } .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-left: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 .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:left; width:100%; padding:18px 0 0 !important; margin:18px 0 0 !important; border:0 !important; border-top:1px solid var(--aps-border-color) !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 14px 0 0 !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:#999; 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-right:8px; color:#ccc;} .aps-comments-section .aps-cmt-date .aps-icon-clock {--aps-icon-size:13px; margin-right: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:#3d3d3d; line-height:1.6;} .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:4px 12px; color:var(--aps-skin-color-1) !important; font-size:12px; 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; } .aps-comments-section .aps-cmt-reply a:hover {color:#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:left; 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:left !important; width:100% !important; margin:25px 0 0 !important; padding:0 !important; background:none !important; border:0 !important; } /* the theme may apply 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; } /* strip any theme-injected icon on generic .comment-reply-link elements */ .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 #reply-title {margin:0 0 12px !important; font-size:var(--aps-h2-font, 20px); text-transform:uppercase;} .aps-comments-section #reply-title small {margin-left: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:left; width:100%; margin:0 !important;} .aps-comments-section .comment-form p {float:left; 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:right;} .aps-comments-section .comment-form input[type="text"], .aps-comments-section .comment-form textarea { width:100%; padding:13px 16px; padding-left:42px; color:#222; border:1px solid transparent; background:#f2f3f5; transition:background-color .2s ease, box-shadow .2s ease; border-radius:var(--aps-nova-radius, 10px); -webkit-border-radius:var(--aps-nova-radius, 10px); -moz-border-radius:var(--aps-nova-radius, 10px); box-shadow:none; } .aps-comments-section .comment-form input[type="text"]::placeholder, .aps-comments-section .comment-form textarea::placeholder {color:#8a8f98;} .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:#fff !important; font-weight:bold !important; font-size:14px !important; cursor:pointer; border:0 !important; background:linear-gradient(var(--aps-btn-grad-angle, 120deg), color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-light, 78%), #fff) 0%, var(--aps-skin-color-1) 45%, color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-grad-dark, 72%), #000) 100%) !important; border-radius:var(--aps-nova-radius, 10px) !important; -webkit-border-radius:var(--aps-nova-radius, 10px); -moz-border-radius:var(--aps-nova-radius, 10px); box-shadow:0 3px 10px color-mix(in srgb, var(--aps-skin-color-1) var(--aps-btn-glow, 25%), transparent); transition:box-shadow .2s ease, transform .15s ease; } .aps-comments-section .form-submit input[type="submit"]:hover {box-shadow:0 5px 14px color-mix(in srgb, var(--aps-skin-color-1) 28%, transparent);} .aps-comments-section .form-submit input[type="submit"]:active {transform:scale(.99);} /* 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; left: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; left:auto !important; bottom:auto !important; inset:auto !important; float:left !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:left;} } .aps-comments-section .aps-cmt-list > li.aps-cmt-hidden {display:none !important;} .aps-comments-section .aps-cmt-loadmore {float:left; 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 14px 10px 8px !important; color:#8a6d1a; font-size:var(--aps-small-text); line-height:1.6; background:#fdf6e3; border-left:3px solid #e6b800; border-radius:0 4px 4px 0;} /* 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