.jsj-srp{ --jsj-bg:#000; --jsj-panel:rgba(10,12,16,.60); --jsj-panel-card:rgba(10,12,16,.72); --jsj-panel-2:rgba(255,255,255,.035); --jsj-hairline:rgba(255,255,255,.06); --jsj-hairline-2:rgba(255,255,255,.08); --jsj-hairline-3:rgba(255,255,255,.14); --jsj-blue:#2e6be6; --jsj-blue-deep:#1f56c4; --jsj-blue-light:#6fa2f5; --jsj-blue-pale:#9cc0fa; --jsj-blue-link:#8fb4f2; --jsj-copper:#c8884a; --jsj-copper-light:#e7b57a; --jsj-gold-bright:#ffd9a8; --jsj-text:#f4f6f9; --jsj-text-2:#dbe0e7; --jsj-muted:#8c95a0; --jsj-muted-2:#6e7682; --jsj-display:"Saira Condensed","Saira",sans-serif; --jsj-ui:"Saira",sans-serif; --jsj-body:"Inter",sans-serif; --jsj-mono:"JetBrains Mono","Roboto Mono",monospace; --jsj-r-card:14px; --jsj-r-md:10px; --jsj-r-sm:9px; --jsj-r-xs:8px; /* Shell width. The approved comp is 1320px on a 1440 canvas; on the wide monitors this site is reviewed on that leaves huge dead gutters, so the shell scales up to 1560px and keeps a gutter instead of going edge-to-edge. */ --jsj-shell:1560px; position:relative; background:var(--jsj-bg); color:var(--jsj-text); font-family:var(--jsj-body); padding:0 26px 72px; /* overflow-x:clip clips stray horizontal overflow WITHOUT creating a scroll container — overflow:hidden here would break position:sticky on the filter sidebar. */ overflow-x:clip; } .jsj-srp-page .page-header,.jsj-srp-page .entry-header,.jsj-srp-page .entry-title{display:none} .jsj-srp *{box-sizing:border-box} .jsj-srp a:hover{color:var(--jsj-copper)} .jsj-srp button,.jsj-srp input,.jsj-srp select{font-family:inherit} /* hello-elementor's reset.css paints every button pink in its RESTING state: [type="button"],[type="submit"],button {border:1px solid #c36;color:#c36;border-radius:3px;...} That is 0-1-0, the same weight as a bare component class of ours, and WP.com concatenates the theme AFTER this file in one _static bundle — so on a tie the theme wins and the carousel chevron rendered pink with a pink ring, not white. 0-1-1 here clears it for good; component rules scoped .jsj-srp .x are 0-2-0 and still re-assert their own borders and colours. */ .jsj-srp button{border:0;border-radius:0;background-color:transparent;color:inherit;font:inherit;letter-spacing:inherit} .jsj-srp button:hover,.jsj-srp button:focus,.jsj-srp button:active{box-shadow:none} /* The pink. hello-elementor's reset.css paints EVERY button on hover and focus: button:focus,button:hover,[type="button"]:focus,[type="button"]:hover {background-color:#c36;color:#fff} (written #c36, which is why grepping cc3366 finds nothing). At 0-2-0 that beats any bare-class rule of ours, and WP.com concatenates the theme AFTER this file in one _static bundle so even a specificity tie loses on order. It was surfacing on nine controls here — most visibly the compare toggle, the carousel arrows and the view toggle, which keep :focus after a click and so stayed pink. :is() carries a class's weight, making this 0-2-1 and immune to bundle order. It only clears the theme's paint; every component below re-asserts its own hover colours, so nothing else changes. The one deliberate colour is the focus ring: copper, not the theme's pink, and only on :focus-visible so it appears for keyboard users without leaving a ring behind after a click. */ .jsj-srp button:is(:hover,:focus,:active,:focus-visible){background-color:transparent;color:inherit;outline:none} .jsj-srp button:focus-visible{outline:2px solid var(--jsj-copper);outline-offset:2px} /* The carousel arrow is the only