/* ==========================================================================
   Skin_2 - Active Cutting Fluids (2026 redesign)
   GENERATED from the designer's HTML/Active-Cutting-Fluids/index.html by gen_skin2.js:
   every class is prefixed s2- and the global element rules are scoped to the skin's components,
   so it cannot collide with Bootstrap 4 or the old Default-skin stylesheets that the core pages still use.
   Hand-written additions (ASP.NET integration, inner pages, search results) are at the end of the file.
   ========================================================================== */
/* =========================================================
   0. Baseline reset (inside Skin_2 components only)
   The designer's page was written against plain browser defaults. The core pages of this store also load Bootstrap 4 and the
   old Default stylesheets (global "* {margin:0;padding:0}", "body h2 {font-size:65px}", "p {font-size:16px}" ...), which would
   change spacing/sizes inside the new header, hero, sections and footer. This block puts browser defaults back for those
   components. Specificity (0,1,2) is higher than the legacy element rules and lower than every component rule below.
   ========================================================= */
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) :is(h1,h2,h3,h4,h5,h6){font-family:inherit;font-weight:700;line-height:inherit;color:inherit;padding:0;border:0;background:none}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) h1{font-size:2em;margin:.67em 0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) h2{font-size:1.5em;margin:.83em 0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) h3{font-size:1.17em;margin:1em 0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) h4{font-size:1em;margin:1.33em 0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) p{margin:1em 0;padding:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) :is(ul,ol){margin:1em 0;padding:0 0 0 40px}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) li{margin:0;padding:0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) figure{margin:1em 40px}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) a{text-decoration:underline}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) label{display:inline;margin:0;font-weight:inherit}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) :is(button,input,select,textarea,option){font:revert;margin:revert;padding:revert;color:revert;text-transform:none;letter-spacing:normal}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) svg{vertical-align:baseline}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) img{vertical-align:baseline;border:0}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) :is(th,td){padding:1px;vertical-align:inherit}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) summary{display:list-item}

body.s2{text-align:start}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top){font-family:var(--f-body)}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) caption{padding:0;color:inherit;text-align:center}
/* =========================================================
   Active Cutting Fluids · Home
   1. Tokens & base      6. We Are Active     11. Footer
   2. Header             7. Section headings  12. Responsive
   3. Nav & search       8. Special offers
   4. Hero & finder      9. ZURNOIL cross-reference
   5. Categories        10. FAQ, manufacturers
   ========================================================= */

/* ---------- 1. Tokens & base (brand values from the original stylesheet) ---------- */
body.s2{
  --cyan:#1ed2ff;        /* brand accent */
  --orange:#ff7b11;      /* CTA / checked state */
  --orange-ink:#b45309;  /* deeper orange: white text on it and it on white both pass AA (5:1) */
  --cyan-ink:#0a8db5;    /* cyan for headings on white (3.8:1, passes AA for large text) */
  --teal:#0c7a91;        /* links on white */
  --ink:#1d242c;
  --text:#231f20;
  --muted:#5f6670;
  --line:#d9dde1;
  --bg:#fff;
  --bg-alt:#e9eaeb;
  --black:#000;
  --f-display:'Roboto Slab', Georgia, serif;
  --f-ui:'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --f-body:'Noto Sans', Arial, sans-serif;
  --wrap:1180px;
  --skew:6vw;
  --sec:clamp(48px,6vw,72px);    /* standard section spacing */
  --sec-sm:clamp(32px,4vw,48px); /* tight section spacing */
}
body.s2 *,body.s2 *::before,body.s2 *::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.s2{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.65 var(--f-body)}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) img{max-width:100%;height:auto;display:block}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) a{color:var(--teal)}
body.s2 :where(.s2-topbar,.s2-hero,.s2-cats,.s2-about,.s2-offers,.s2-xref,.s2-faq,.s2-mfr,.s2-footer,.s2-to-top) a:hover{color:var(--orange-ink)}
body.s2 :focus-visible{outline:3px solid var(--orange);outline-offset:2px}
body.s2 .s2-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
body.s2 .s2-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.s2 .s2-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange);color:#fff;padding:10px 16px;font:700 15px var(--f-ui)}
body.s2 .s2-skip:focus{left:10px;top:10px}
body.s2 .s2-btn{display:inline-block;background:var(--orange-ink);color:#fff;border:0;font:700 14px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.04em;padding:15px 26px;cursor:pointer;text-decoration:none;white-space:nowrap}
body.s2 .s2-btn:hover{background:#9a4706;color:#fff}

/* ---------- 2. Header ---------- */
body.s2 .s2-topbar{background:var(--black);color:#fff;font-family:var(--f-ui)}
body.s2 .s2-topbar .s2-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
body.s2 .s2-brand{display:flex;align-items:center;gap:18px;color:#fff;text-decoration:none}
body.s2 .s2-brand img{width:150px}
body.s2 .s2-brand span{font-size:15px;color:#bbb;padding-left:18px;border-left:1px solid #333;line-height:1.2}
body.s2 .s2-util{list-style:none;margin:0;padding:0;display:flex;align-items:center}
body.s2 .s2-util li+li{border-left:1px solid #2e2e2e}
body.s2 .s2-act{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 18px;color:#fff;text-decoration:none}
body.s2 .s2-act:hover{color:var(--cyan)}
body.s2 .s2-util li:last-child .s2-act{padding-right:0}
body.s2 .s2-act .s2-ico{flex:none;width:22px;height:22px;fill:var(--cyan)}
body.s2 .s2-act .s2-txt{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
body.s2 .s2-act small{font-size:12px;color:#9aa3ab;text-transform:uppercase;letter-spacing:.04em}
body.s2 .s2-act b{font-size:15px}
body.s2 .s2-act b.s2-hot{color:var(--orange)}
body.s2 .s2-act.s2-icon-only{padding:6px 16px}
body.s2 .s2-act.s2-icon-only .s2-ico{width:26px;height:26px}
body.s2 .s2-ico-wrap{position:relative;display:inline-flex}
body.s2 .s2-badge{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--orange-ink);color:#fff;font:700 11px/17px var(--f-ui);text-align:center}

/* ---------- 3. Nav & search ---------- */
body.s2 .s2-nav{border-bottom:1px solid rgba(255,255,255,.15)}
body.s2 .s2-nav .s2-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
body.s2 .s2-nav ul{list-style:none;margin:0;padding:0;display:flex}
body.s2 .s2-nav li{display:flex;align-items:center}
body.s2 .s2-nav li+li::before{content:"/";color:var(--cyan);padding:0 7px}
body.s2 .s2-nav a{color:#fff;text-decoration:none;text-transform:uppercase;white-space:nowrap;font:400 14px/1 var(--f-ui);letter-spacing:.02em;padding:14px 0}
body.s2 .s2-nav a:hover{color:var(--cyan)}
body.s2 .s2-menu-btn{display:none;background:none;border:1px solid var(--cyan);color:#fff;font:700 14px var(--f-ui);text-transform:uppercase;padding:9px 14px;cursor:pointer}
/* Search bar matches the original: 30px, 1px cyan border, translucent navy, white magnifier */
body.s2 .s2-search{display:flex;align-items:center;height:30px;width:215px;border:1px solid var(--cyan);background:rgba(13,53,128,.4);color:#fff}
body.s2 .s2-search:focus-within{box-shadow:0 0 0 2px var(--orange)}
body.s2 .s2-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:400 14px Arial,var(--f-body);padding:0 10px}
body.s2 .s2-search input:focus{outline:none}
body.s2 .s2-search input::placeholder{color:#fff;opacity:1}
body.s2 .s2-search input::-webkit-search-cancel-button{display:none}
body.s2 .s2-search button{display:grid;place-items:center;height:100%;border:0;background:transparent;color:#fff;padding:0 8px;cursor:pointer}
body.s2 .s2-search button svg{width:14px;height:14px;fill:currentColor}

/* ---------- 4. Hero & fluid search ---------- */
/* The skewed background sits on ::before so the Avoid dropdown is never clipped */
body.s2 .s2-hero{position:relative;z-index:2;isolation:isolate;color:#fff;padding-bottom:calc(var(--skew) + 24px)}
/* Dark overlay keeps white text readable (WCAG AA) over the light-cyan parts of the wave image */
body.s2 .s2-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-color:#0b4a5e;background-image:linear-gradient(180deg,rgba(6,40,58,.38),rgba(6,40,58,.55)),url("../img/header1.png");background-image:linear-gradient(180deg,rgba(6,40,58,.38),rgba(6,40,58,.55)),image-set(url("../img/header1.webp") type("image/webp"),url("../img/header1.png") type("image/png"));background-position:center top;background-size:cover;background-repeat:no-repeat;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--skew)))}
body.s2 .s2-hero-body{padding-top:40px}
body.s2 .s2-eyebrow{display:inline-block;border:1px solid #fff;padding:5px 9px;font:700 13px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em;transform:skewX(-8deg)}
body.s2 .s2-hero h1{max-width:820px;margin:18px 0 14px;font:300 clamp(32px,4.4vw,54px)/1.1 var(--f-display);letter-spacing:-.005em}
body.s2 .s2-hero .s2-intro{max-width:820px;margin:0;color:#e3f8ff;font:400 clamp(15px,1.4vw,17px)/1.6 var(--f-body)}
body.s2 .s2-hero .s2-intro strong{color:#fff}

body.s2 .s2-finder{margin-top:32px;padding:20px 24px 24px;background:rgba(0,22,32,.5);border:1px solid rgba(255,255,255,.18);border-top:3px solid var(--orange)}
body.s2 .s2-finder-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin-bottom:16px}
body.s2 .s2-finder-head h2{margin:0;font:300 clamp(22px,2.2vw,28px)/1.2 var(--f-display)}
body.s2 .s2-finder-head a{color:#fff;font:700 13px var(--f-ui);text-decoration:none}
body.s2 .s2-finder-head a:hover{color:var(--cyan)}
body.s2 .s2-finder-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:12px;align-items:end}
body.s2 .s2-field{position:relative;min-width:0}
body.s2 .s2-field .s2-lab{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:#fff;font:700 12px/1.2 var(--f-ui);text-transform:uppercase;letter-spacing:.03em}
body.s2 .s2-field select,body.s2 .s2-multi summary{width:100%;height:44px;padding:0 34px 0 12px;border:1px solid #fff;border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230c7a91' stroke-width='2'/%3E%3C/svg%3E") right 12px center no-repeat;color:var(--ink);font:400 15px var(--f-ui);appearance:none;-webkit-appearance:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.s2 .s2-field select:focus-visible,body.s2 .s2-multi summary:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
body.s2 .s2-multi summary{display:flex;align-items:center;list-style:none}
body.s2 .s2-multi summary::-webkit-details-marker{display:none}
body.s2 .s2-multi .s2-panel{position:absolute;z-index:30;top:100%;left:0;right:0;min-width:240px;padding:8px 12px;background:#fff;color:var(--ink);border-top:3px solid var(--orange);box-shadow:0 12px 30px rgba(0,0,0,.35)}
body.s2 .s2-opt{display:flex;align-items:center;gap:9px;padding:7px 0;font:400 14px/1.3 var(--f-ui);cursor:pointer}
body.s2 .s2-opt input{position:absolute;opacity:0;width:1px;height:1px}
body.s2 .s2-opt .s2-box{flex:none;display:grid;place-items:center;width:16px;height:16px;border:1px solid #8a9299}
body.s2 .s2-opt input:checked + .s2-box{background:var(--orange);border-color:var(--orange)}
body.s2 .s2-opt input:checked + .s2-box::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
body.s2 .s2-opt input:focus-visible + .s2-box{outline:3px solid var(--orange);outline-offset:2px}

body.s2 .s2-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font:400 14px var(--f-ui)}
body.s2 .s2-trust li{display:flex;align-items:center;gap:8px}
body.s2 .s2-trust li::before{content:"";width:8px;height:8px;background:var(--orange);transform:rotate(45deg)}

/* ---------- 5. Categories & quick links ---------- */
body.s2 .s2-cats{position:relative;z-index:1;padding:16px 0 var(--sec)}
body.s2 .s2-cats h2{margin:0 0 6px;color:var(--ink);font:700 clamp(26px,3vw,36px)/1.2 var(--f-ui)}
body.s2 .s2-cats h2 span{color:var(--cyan-ink)}
body.s2 .s2-cats .s2-sub{max-width:760px;margin:0 0 26px;color:var(--muted)}
body.s2 .s2-cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.s2 .s2-cat{display:flex;flex-direction:column;height:100%;padding:18px 18px 16px;background:#fff;color:var(--text);text-decoration:none;border:1px solid var(--line);border-top:3px solid var(--cyan);transition:box-shadow .2s,transform .2s,border-color .2s}
body.s2 .s2-cat:hover{color:var(--text);border-top-color:var(--orange);box-shadow:0 10px 24px rgba(12,122,145,.15);transform:translateY(-2px)}
body.s2 .s2-cat h3{margin:0 0 6px;color:var(--ink);font:700 18px/1.25 var(--f-ui)}
body.s2 .s2-cat p{margin:0 0 12px;color:var(--muted);font-size:13.5px;line-height:1.5}
/* Category CTA: card footer with a divider and circled arrow */
body.s2 .s2-cat .s2-go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--orange-ink);font:700 13px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.04em}
body.s2 .s2-cat .s2-go::after{content:"\2192";flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font-size:14px;transition:background .2s,border-color .2s,color .2s,transform .2s}
body.s2 .s2-cat:hover .s2-go::after{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateX(3px)}
/* Dark "Not sure which fluid?" card */
body.s2 .s2-cat.s2-alt{background:var(--ink);border-color:var(--ink);border-top-color:var(--orange)}
body.s2 .s2-cat.s2-alt h3{color:#fff}
body.s2 .s2-cat.s2-alt p{color:#c9d2db}
body.s2 .s2-cat.s2-alt .s2-go{border-top-color:rgba(255,255,255,.18);color:var(--orange)}
/* Browse-by quick links: soft panel with pill tags */
body.s2 .s2-links{display:grid;grid-template-columns:130px 1fr;gap:14px 20px;align-items:center;margin-top:28px;padding:20px 22px;background:#f5f8fa;border:1px solid var(--line);border-left:4px solid var(--cyan)}
body.s2 .s2-links h3{margin:0;color:var(--ink);font:700 13px var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
body.s2 .s2-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
body.s2 .s2-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:1px solid #cfe3ea;border-radius:999px;background:#fff;color:var(--teal);font:400 14.5px var(--f-ui);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
body.s2 .s2-links a:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- 6. We Are Active ---------- */
body.s2 .s2-about{position:relative;padding:0 0 var(--sec);content-visibility:auto;contain-intrinsic-size:auto 700px}
body.s2 .s2-about .s2-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
body.s2 .s2-about figure{margin:0;clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}
body.s2 .s2-about figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
body.s2 .s2-about h2{margin:0 0 22px;line-height:0}   /* heading is the original "We Are Active" image */
body.s2 .s2-about h2 img{width:290px}
body.s2 .s2-about p{margin:0 0 14px;font-size:14.5px}
body.s2 .s2-about .s2-lead{color:var(--ink);font-size:16px}
body.s2 .s2-provides{list-style:none;margin:6px 0 18px;padding:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;font-size:14px}
body.s2 .s2-provides li{display:flex;align-items:center;gap:8px}
body.s2 .s2-provides li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
body.s2 .s2-help{padding:12px 16px;border:1px solid #ccc;border-left:4px solid var(--orange);font-size:14px}
body.s2 .s2-help strong{display:block;color:var(--black)}
body.s2 .s2-help a{color:var(--orange-ink);font-weight:700;text-decoration:none}

/* ---------- 7. Section headings ---------- */
body.s2 .s2-sec-title{margin:0 0 14px;text-align:center;color:var(--cyan);font:300 clamp(28px,3vw,38px)/1.2 var(--f-display)}
body.s2 .s2-rule{display:flex;align-items:center;gap:14px;margin:0 0 24px;font:700 13px var(--f-ui);text-transform:uppercase;letter-spacing:.04em}
body.s2 .s2-rule::before,body.s2 .s2-rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}

/* ---------- 8. Special offers ---------- */
body.s2 .s2-offers{padding:0 0 var(--sec)}
body.s2 .s2-offer-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.s2 .s2-offer-grid > li{display:flex}
/* Offer product card: image on top, details, cart row */
body.s2 .s2-pcard{position:relative;flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-align:center}
body.s2 .s2-pcard-img{position:relative;display:grid;place-items:center;height:180px;padding:8px;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
body.s2 .s2-pcard-img img{width:auto;height:auto;max-width:100%;max-height:164px;object-fit:contain;transform:scale(1.15)}   /* source photos carry wide white margins */
body.s2 .s2-pcard-img.s2-soon{align-content:center;gap:8px;color:var(--teal)}
body.s2 .s2-pcard-img.s2-soon svg{width:56px;height:56px}
body.s2 .s2-soon-txt{font:700 11px var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
body.s2 .s2-badge-offer{position:absolute;top:12px;left:12px;z-index:1;padding:5px 10px;border-radius:3px;background:var(--orange-ink);color:#fff;font:700 11px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
body.s2 .s2-badge-offer.s2-free{background:var(--teal)}
body.s2 .s2-pcard-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 0}
body.s2 .s2-pcard-kicker{margin:0 0 6px;color:var(--teal);font:700 12px var(--f-ui);text-transform:uppercase;letter-spacing:.05em}
body.s2 .s2-pcard h3{margin:0 0 6px;font:700 19px/1.25 var(--f-ui)}
body.s2 .s2-pcard h3 a{color:var(--ink);text-decoration:none}
body.s2 .s2-pcard h3 a::after{content:"";position:absolute;inset:0}   /* whole card is clickable */
body.s2 .s2-pcard .s2-desc{margin:0;min-height:3em;color:var(--muted);font-size:14px;line-height:1.5}   /* copy kept to ~2 lines on every card */
body.s2 .s2-pcard-buy{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px 20px 16px;border-top:1px solid var(--line)}
body.s2 .s2-pcard-price{flex:none;min-width:74px;margin:0;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);font:700 20px/1.1 var(--f-ui)}
body.s2 .s2-pcard-price.s2-free{color:var(--teal);text-transform:uppercase;letter-spacing:.02em}
body.s2 .s2-pcard-price s{color:#8d979e;font-size:13px;font-weight:400;text-transform:none}
body.s2 .s2-pcard-buy .s2-qty{flex:none}
body.s2 .s2-pcard-buy .s2-cart-btn{flex:1;justify-content:center;padding:0 12px}
body.s2 .s2-duo-title{margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--teal);font:300 clamp(24px,2.4vw,30px)/1.2 var(--f-display)}
body.s2 .s2-cart-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;background:var(--orange-ink);color:#fff;font:700 13px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .2s}
body.s2 .s2-cart-btn:hover{background:#9a4706}
/* Quantity: label + compact box with stacked chevrons (GTFO) */
body.s2 .s2-qty{display:inline-flex;align-items:center;gap:8px}
body.s2 .s2-qty label{color:var(--ink);font:400 14px var(--f-ui)}
body.s2 .s2-qty-box{display:inline-flex;height:44px;border:1px solid #c7d2d8;border-radius:6px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
body.s2 .s2-qty-box:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,122,145,.15)}
body.s2 .s2-qty-input{width:44px;padding:0 0 0 12px;border:0;background:transparent;color:var(--ink);font:700 16px var(--f-ui);-moz-appearance:textfield;appearance:textfield}
body.s2 .s2-qty-input:focus{outline:none}
body.s2 .s2-qty-input::-webkit-inner-spin-button,body.s2 .s2-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body.s2 .s2-qty-steps{display:flex;flex-direction:column;border-left:1px solid #e3e9ec}
body.s2 .s2-qty-btn{flex:1;width:28px;padding:0;border:0;background:#f5f8fa;color:var(--ink);cursor:pointer;display:grid;place-items:center}
body.s2 .s2-qty-btn + .s2-qty-btn{border-top:1px solid #e3e9ec}
body.s2 .s2-qty-btn:hover{background:#e6eef2;color:var(--teal)}
body.s2 .s2-qty-btn:disabled{color:#b6c0c6;background:#f5f8fa;cursor:default}
body.s2 .s2-qty-input[readonly]{color:var(--muted)}
body.s2 .s2-qty-btn svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.s2 .s2-cart-btn svg{width:17px;height:17px;fill:currentColor}

/* ---------- 9. ZURNOIL cross-reference (dark wave band, slanted like the hero) ---------- */
body.s2 .s2-xref{position:relative;isolation:isolate;padding:calc(var(--skew) + var(--sec-sm)) 0 calc(var(--skew) + 28px);color:#fff}
body.s2 .s2-xref::before{content:"";position:absolute;inset:0;z-index:-1;background-color:#0a2f40;background-image:linear-gradient(180deg,rgba(5,30,42,.82),rgba(5,24,34,.9)),url("../img/header1.png");background-image:linear-gradient(180deg,rgba(5,30,42,.82),rgba(5,24,34,.9)),image-set(url("../img/header1.webp") type("image/webp"),url("../img/header1.png") type("image/png"));background-position:center;background-size:cover;clip-path:polygon(0 var(--skew),100% 0,100% calc(100% - var(--skew)),0 100%)}
body.s2 .s2-xref-head{max-width:760px;margin:0 auto 26px;text-align:center}
body.s2 .s2-xref-head h2{margin:16px 0 10px;color:#fff;font:300 clamp(30px,3.6vw,44px)/1.15 var(--f-display)}
body.s2 .s2-xref-head .s2-vs{display:inline-block;margin:0 .15em;color:var(--orange);font-style:italic;font-weight:400;font-size:.72em;vertical-align:.12em}
body.s2 .s2-xref-head .s2-rule{max-width:560px;margin:0 auto 12px;color:var(--cyan);letter-spacing:.08em;text-wrap:balance}
body.s2 .s2-xref-sub{margin:0;color:#fff;font-size:15px}
body.s2 .s2-xref-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px;padding:0;list-style:none}
body.s2 .s2-xref-tabs button{min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font:700 14px var(--f-ui);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
body.s2 .s2-xref-tabs button:hover{border-color:var(--cyan);color:var(--cyan)}
body.s2 .s2-xref-tabs button[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--ink)}
body.s2 .s2-xref-panel{max-width:960px;margin:0 auto;overflow-x:auto;background:#fff;border-top:3px solid var(--cyan);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--text)}
body.s2 .s2-xref-panel[hidden]{display:none}
body.s2 .s2-xref table{width:100%;table-layout:fixed;border-collapse:collapse;font:15px/1.35 var(--f-ui)}
body.s2 .s2-xref th:nth-child(1){width:14%}
body.s2 .s2-xref th:nth-child(2){width:30%}
body.s2 .s2-xref th:nth-child(3){width:30%}
body.s2 .s2-xref th:nth-child(4){width:26%}
body.s2 .s2-xref caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* tab already shows it; kept for Google/AI */
body.s2 .s2-xref th{padding:12px 18px;background:#f2f6f8;color:var(--muted);font:700 12px var(--f-ui);text-align:left;text-transform:uppercase;letter-spacing:.05em}
body.s2 .s2-xref td{padding:12px 18px;border-top:1px solid var(--line)}
body.s2 .s2-xref tbody tr:hover{background:#f5fbfd}
body.s2 .s2-xref .s2-vg{display:inline-block;min-width:42px;padding:3px 8px;border-radius:999px;background:#e6f6fb;color:var(--teal);font:700 13px/1.2 var(--f-ui);text-align:center}
body.s2 .s2-xref .s2-na{color:#9aa4ab;font-style:italic}
body.s2 .s2-xref-panel:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
body.s2 .s2-xref td:nth-child(2) a{color:var(--teal);font-weight:700;text-decoration:none}
body.s2 .s2-xref td:nth-child(2) a:hover{text-decoration:underline}
body.s2 .s2-xref-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;max-width:960px;margin:18px auto 0}
body.s2 .s2-xref-note{margin:0;max-width:600px;color:#a9c3cd;font-size:12px;line-height:1.5}

/* ---------- 10. FAQ & manufacturers ---------- */
body.s2 .s2-faq{padding:0 0 var(--sec);content-visibility:auto;contain-intrinsic-size:auto 600px}
body.s2 .s2-faq .s2-wrap{max-width:900px}
body.s2 .s2-faq .s2-sec-title{color:var(--cyan-ink)}
body.s2 .s2-faq-group{margin:32px 0 2px;padding-bottom:8px;border-bottom:2px solid var(--cyan);color:var(--teal);font:700 13px var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
body.s2 .s2-faq details{border-bottom:1px solid var(--line)}
body.s2 .s2-faq summary{position:relative;padding:16px 36px 16px 0;list-style:none;cursor:pointer;color:var(--ink);font:700 17px/1.35 var(--f-ui)}
body.s2 .s2-faq summary::-webkit-details-marker{display:none}
body.s2 .s2-faq summary::after{content:"+";position:absolute;right:6px;top:12px;color:var(--orange);font:400 26px/1 var(--f-ui)}
body.s2 .s2-faq details[open] summary::after{content:"\2212"}
body.s2 .s2-faq details p{margin:0 0 16px;font-size:14.5px}

body.s2 .s2-mfr{padding:var(--sec-sm) 0;background:var(--bg-alt)}
body.s2 .s2-mfr ul{list-style:none;margin:0 auto;padding:0;max-width:820px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
body.s2 .s2-mfr a{display:grid;place-items:center;padding:8px;transition:transform .2s}
body.s2 .s2-mfr a:hover{transform:translateY(-3px)}
body.s2 .s2-mfr img{width:auto;max-height:130px}

/* ---------- 11. Footer ---------- */
body.s2 .s2-footer{padding:clamp(40px,5vw,60px) 0 0;background:#0b0f14;color:#c3cbd3;border-top:4px solid var(--cyan);font-family:var(--f-ui);content-visibility:auto;contain-intrinsic-size:auto 420px}
body.s2 .s2-footer a{color:#e6ebef;text-decoration:none}
body.s2 .s2-footer a:hover{color:var(--cyan)}
body.s2 .s2-f-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .9fr;gap:clamp(24px,4vw,48px)}
body.s2 .s2-f-tag{margin:10px 0 0;color:var(--cyan);font-size:14px}
body.s2 .s2-f-about{max-width:340px;margin:10px 0 18px;color:#9aa5af;font:14px/1.6 var(--f-body)}
body.s2 .s2-f-contact{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
body.s2 .s2-f-contact span{display:block;color:#7d8893;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
body.s2 .s2-f-contact a.s2-hot{color:var(--orange);font-size:17px;font-weight:700}
body.s2 .s2-f-head{margin:4px 0 14px;padding-bottom:10px;border-bottom:1px solid #222a33;color:#fff;font:700 13px var(--f-ui);text-transform:uppercase;letter-spacing:.08em}
body.s2 .s2-f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
body.s2 .s2-f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:clamp(32px,4vw,48px);padding:18px 0;border-top:1px solid #222a33;color:#7d8893;font-size:13px}
body.s2 .s2-f-bottom p{margin:0}

/* Back to top */
body.s2 .s2-to-top{position:fixed;right:20px;bottom:20px;z-index:50;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--orange-ink);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
body.s2 .s2-to-top.s2-show{opacity:1;visibility:visible;transform:none}
body.s2 .s2-to-top:hover{background:#9a4706}
body.s2 .s2-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 12. Responsive (largest to smallest) ---------- */
@media (max-width:1240px){
  body.s2 .s2-nav a{font-size:13px}
  body.s2 .s2-nav li+li::before{padding:0 5px}
  body.s2 .s2-search{width:190px}
}
@media (max-width:1200px){
  /* Nav collapses behind the Menu button */
  body.s2 .s2-menu-btn{display:block}
  body.s2 .s2-nav .s2-wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  body.s2 .s2-nav ul{display:none;order:3;width:100%;flex-direction:column}
  /* Open menu: solid dark panel so links never sit on the hero image */
  body.s2 .s2-nav ul.s2-open{display:flex;margin-top:8px;padding:4px 0;background:#0a1a24;border-top:3px solid var(--cyan);box-shadow:0 14px 28px rgba(0,0,0,.35)}
  body.s2 .s2-nav li{border-top:1px solid rgba(255,255,255,.1)}
  body.s2 .s2-nav li:first-child{border-top:0}
  body.s2 .s2-nav ul.s2-open a{display:block;padding:15px 16px}
  body.s2 .s2-nav ul.s2-open a:hover{background:rgba(30,210,255,.08)}
  body.s2 .s2-menu-btn[aria-expanded="true"]{background:var(--cyan);color:var(--ink)}
  body.s2 .s2-nav li+li::before{display:none}
  body.s2 .s2-nav a{font-size:14px}
  body.s2 .s2-search{flex:1;width:auto;min-width:0;height:44px}
  body.s2 .s2-search button{width:44px}
  body.s2 .s2-menu-btn{min-height:44px}

  body.s2 .s2-finder-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.s2 .s2-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  body.s2 .s2-offer-grid{grid-template-columns:1fr 1fr}
  body.s2 .s2-topbar .s2-brand span{display:none}
}
@media (max-width:900px){
  body.s2 .s2-f-grid{grid-template-columns:1fr 1fr}
  body.s2 .s2-f-brand{grid-column:1/-1}
}
@media (max-width:860px){
  body.s2 .s2-act{padding:6px 12px}
  body.s2 .s2-act small{display:none}
  body.s2 .s2-about .s2-wrap{grid-template-columns:1fr;gap:10px}
  body.s2 .s2-about h2{margin-top:20px}
  body.s2 .s2-offer-grid{grid-template-columns:1fr}
  /* Offer cards: image beside text, cart row underneath */
  body.s2 .s2-pcard{display:grid;grid-template-columns:116px 1fr;text-align:left}
  body.s2 .s2-pcard-img{height:auto;padding:4px;border-bottom:0;border-right:1px solid var(--line);overflow:hidden}
  body.s2 .s2-pcard-img img{max-height:118px}
  body.s2 .s2-pcard-img.s2-soon svg{width:40px;height:40px}
  body.s2 .s2-soon-txt{font-size:9px;text-align:center}
  body.s2 .s2-badge-offer{top:8px;left:8px;padding:4px 7px;font-size:9px}
  body.s2 .s2-pcard-kicker{margin-bottom:4px;font-size:11px}
  body.s2 .s2-pcard-body{justify-content:center;padding:14px 14px 12px}
  body.s2 .s2-pcard h3{margin-bottom:4px;font-size:17px}
  body.s2 .s2-pcard .s2-desc{min-height:0;font-size:13.5px;line-height:1.45}
  body.s2 .s2-pcard-buy{grid-column:1/-1;margin:0;padding:12px 14px}
  body.s2 .s2-pcard-price{min-width:64px;font-size:19px}
}
@media (max-width:640px){
  body.s2{--skew:10vw}
  body.s2 .s2-wrap{padding:0 16px}

  /* Header */
  body.s2 .s2-topbar .s2-wrap{min-height:60px;gap:8px}
  body.s2 .s2-brand img{width:120px}
  body.s2 .s2-act,body.s2 .s2-act.s2-icon-only{justify-content:center;min-width:44px;padding:6px 10px}
  body.s2 .s2-act .s2-txt{display:none}
  body.s2 .s2-util li+li{border-left:0}
  /* 16px stops iOS from zooming the page when a field is tapped */
  body.s2 .s2-search input{font-size:16px}

  /* Phone-sized background crops (only the visible centre strip is downloaded) */
  body.s2 .s2-hero::before{background-image:linear-gradient(180deg,rgba(6,40,58,.38),rgba(6,40,58,.55)),image-set(url("../img/header1-mobile.webp") type("image/webp"),url("../img/header1.png") type("image/png"))}

  /* Hero + fluid search: compact so the search panel sits as high as possible */
  body.s2 .s2-hero-body{padding-top:20px}
  body.s2 .s2-hero h1{margin:12px 0 12px;font-size:28px;line-height:1.15}
  body.s2 .s2-hero .s2-intro{font-size:15px;line-height:1.55}
  body.s2 .s2-finder{margin-top:22px;padding:16px 16px 18px}
  body.s2 .s2-finder-head{margin-bottom:12px}
  body.s2 .s2-finder-head h2{font-size:20px}
  body.s2 .s2-field .s2-lab{margin-bottom:6px}
  body.s2 .s2-finder-head a{display:none}               /* same link is in the header (info icon) */
  body.s2 .s2-finder-row{grid-template-columns:1fr 1fr;gap:12px 10px}
  body.s2 .s2-finder-row .s2-wide,body.s2 .s2-finder-row .s2-btn{grid-column:1/-1}
  body.s2 .s2-field select,body.s2 .s2-multi summary{font-size:16px}
  body.s2 .s2-btn{padding:15px;text-align:center}
  body.s2 .s2-trust{gap:8px 16px;margin-top:20px;font-size:13px}

  /* Categories: compact 2-column tiles, title + arrow (descriptions stay in the HTML) */
  body.s2 .s2-cats .s2-sub{margin-bottom:18px;font-size:14.5px}
  body.s2 .s2-cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  body.s2 .s2-cat{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:12px 12px 12px 14px}
  body.s2 .s2-cat h3{margin:0;font-size:15.5px}
  body.s2 .s2-cat p{display:none}
  body.s2 .s2-cat .s2-go{flex:none;margin:0;padding:0;border:0}
  body.s2 .s2-cat .s2-go-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* still read by screen readers & Google */
  body.s2 .s2-cat-grid li:nth-last-child(-n+2){grid-column:1/-1}   /* 7th category + "Not sure which fluid?" span both columns (no empty slot) */
  body.s2 .s2-cat.s2-alt{flex-direction:column;align-items:stretch;min-height:0}
  body.s2 .s2-cat.s2-alt .s2-go{justify-content:flex-end;margin-top:8px}
  body.s2 .s2-cat.s2-alt p{display:block;margin:6px 0 0;font-size:13.5px}

  /* Quick links: all tags visible, compact wrapped pills */
  body.s2 .s2-links{grid-template-columns:1fr;gap:6px;margin-top:22px;padding:12px 12px 14px}
  body.s2 .s2-links ul{gap:5px}
  body.s2 .s2-links h3{font-size:12px}
  body.s2 .s2-links h3:not(:first-child){margin-top:6px}
  body.s2 .s2-links a{min-height:34px;padding:0 10px;font-size:13px}

  /* We Are Active */
  body.s2 .s2-about figure img{aspect-ratio:16/10}
  body.s2 .s2-provides{grid-template-columns:max-content max-content;gap:6px 18px;font-size:13px}
  body.s2 .s2-provides a{display:inline-flex;align-items:center;min-height:44px}

  /* Cross-reference: 2x2 tabs; each table row becomes a small card */
  body.s2 .s2-xref-head h2{font-size:30px}
  body.s2 .s2-xref-tabs{display:grid;grid-template-columns:1fr 1fr}
  body.s2 .s2-xref-tabs button{padding:0 10px}
  body.s2 .s2-xref thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  body.s2 .s2-xref table,body.s2 .s2-xref tbody{display:block}
  body.s2 .s2-xref tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;border-top:1px solid var(--line)}
  body.s2 .s2-xref tbody tr:first-child{border-top:0}
  body.s2 .s2-xref td{display:block;padding:0;border:0;font-size:14px}
  body.s2 .s2-xref td:nth-child(1){grid-column:2;grid-row:1;align-self:center}
  body.s2 .s2-xref td:nth-child(2){grid-column:1;grid-row:1;font-size:16px}
  body.s2 .s2-xref td:nth-child(3),body.s2 .s2-xref td:nth-child(4){grid-column:1/-1;color:var(--ink)}
  body.s2 .s2-xref td:nth-child(3)::before,body.s2 .s2-xref td:nth-child(4)::before{content:attr(data-label) ": ";display:inline-block;min-width:52px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  body.s2 .s2-xref .s2-vg::before{content:"VG ";font-weight:400}
  body.s2 .s2-xref-foot .s2-btn{width:100%;text-align:center}

  /* FAQ */
  body.s2 .s2-faq summary{font-size:16px}

  /* Manufacturers */
  body.s2 .s2-mfr ul{gap:16px}
  body.s2 .s2-mfr img{max-height:72px}

  /* Back to top */
  body.s2 .s2-to-top{right:14px;bottom:14px;width:44px;height:44px}

  /* Footer: link columns side by side, roomier tap targets */
  body.s2 .s2-f-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  body.s2 .s2-f-col ul{gap:0}
  body.s2 .s2-f-col a{display:block;padding:11px 0}
  body.s2 .s2-f-contact{gap:2px}
  body.s2 .s2-f-contact a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:370px){
  body.s2 .s2-provides{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  body.s2 *{transition:none!important;scroll-behavior:auto!important}
}

/* =========================================================
   13. ASP.NET integration + inner pages (hand written)
   ========================================================= */

/* hidden compatibility links rendered by UserLinks (minicart scripts look for them) */
body.s2 .s2-hidden-links,body.s2 .s2-hidden-links li{ display: none !important; }
body.s2 .s2-util .s2-act .s2-signout{ margin-left: 6px; font-size: 12px; color: #9aa3ab; }

/* inner pages (cart, account, product, topics, search results): same header/nav strip, then a clean content wrapper.
   The old Default skin wrapped content in floated "col-12 pull-top2" blocks; floats are neutralised so the manufacturers strip and
   footer can never slide up beside the content. */
body.s2 .s2-hero--inner{ padding-bottom: 0; }
body.s2 .s2-hero--inner::before{ clip-path: none; }
body.s2 .s2-page-title{ padding-top: 10px; padding-bottom: 32px; }
body.s2 .s2-page-title h1{ margin: 0; color: #fff; font: 300 clamp(26px, 3vw, 38px)/1.2 var(--f-display); }
body.s2 .s2-main{ display: flow-root; clear: both; padding-top: 36px; padding-bottom: 56px; font-family: var(--f-body); color: var(--text); }
body.s2 .s2-main .col-12{ float: none; width: 100%; padding-left: 0; padding-right: 0; }
body.s2 .s2-main .pull-top,body.s2 .s2-main .pull-top2{ margin-top: 0; }
body.s2 .s2-main img{ max-width: 100%; height: auto; }
body.s2 .s2-main h1,body.s2 .s2-main h2,body.s2 .s2-main h3{ color: var(--ink); }
body.s2 .s2-mfr,body.s2 .s2-footer{ clear: both; }
body.s2 .s2-search-panel{ padding-bottom: 28px; color: #fff; }

/* homepage fluid finder: native selects + the Avoid multi-select */
body.s2 .s2-finder .s2-multi{ position: relative; }
body.s2 .s2-finder .s2-multi > summary{ cursor: pointer; }
body.s2 .s2-finder .s2-multi[open] > summary{ outline: 3px solid var(--orange); outline-offset: 1px; }

/* special-offer cards: price markup produced by the core price helper */
body.s2 .s2-pcard-price .price-wrap{ display: contents; }
body.s2 .s2-pcard-price .variant-price,body.s2 .s2-pcard-price .price.sale-price{ font: inherit; color: inherit; margin: 0; }
body.s2 .s2-pcard-price .price.regular-price{ order: 2; color: #8d979e; font-size: 13px; font-weight: 400; text-decoration: line-through; }
body.s2 .s2-pcard-price .price span,body.s2 .s2-pcard-price .variant-price span{ display: none; }
body.s2 .s2-pcard-buy .s2-js-errors:empty{ display: none; }
body.s2 .s2-pcard-buy .s2-js-errors{ flex-basis: 100%; }

/* manufacturers strip: same as the designer's 3-logo grid, but grows to 4 columns when InnoChem is added.
   (mobile: three per row, a 4th logo is centred underneath) */
body.s2 .s2-mfr ul{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 640px) {
	body.s2 .s2-mfr ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
	body.s2 .s2-mfr li{ flex: 0 0 calc((100% - 32px) / 3); }
}

/* second cross-reference band (InnoChem) sits tight under the first */
body.s2 .s2-xref + .s2-xref{ margin-top: calc(var(--skew) * -.7); }
body.s2 .s2-xref .s2-x2 th:nth-child(1){ width: 34%; }
body.s2 .s2-xref .s2-x2 th:nth-child(2){ width: 66%; }
body.s2 .s2-xref .s2-x2 td:nth-child(1){ color: var(--muted); font-weight: 700; }
body.s2 .s2-xref .s2-x2 td:nth-child(2){ color: var(--teal); font-weight: 700; }
body.s2 .s2-xref-panel-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
body.s2 .s2-xref-panel-head strong{ font: 700 20px/1.2 var(--f-ui); color: var(--ink); }
body.s2 .s2-xref-panel-head span{ color: var(--teal); font: 700 12px var(--f-ui); text-transform: uppercase; letter-spacing: .05em; }
body.s2 .s2-xref-panel-head em{ margin-left: auto; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
	body.s2 .s2-xref .s2-x2 td:nth-child(1){ grid-column: 1 / -1; grid-row: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
	body.s2 .s2-xref .s2-x2 td:nth-child(2){ grid-column: 1 / -1; grid-row: 2; font-size: 16px; }
	body.s2 .s2-xref-panel-head em{ margin-left: 0; flex-basis: 100%; }
}

/* ---------- Active Search page: finder in the hero + results card ---------- */
body.s2 .s2-hero--finder .s2-finder{ margin: 8px 0 40px; }
body.s2 .s2-results .s2-results-title{ margin: 0 0 14px; padding: 0; color: var(--ink); font: 700 24px/1.25 var(--f-ui); }
body.s2 .s2-results-card{ border: 1px solid var(--line); border-top: 3px solid var(--cyan); border-radius: 6px; overflow-x: auto; background: #fff; }
body.s2 .s2-results-table{ width: 100%; border-collapse: collapse; font-family: var(--f-ui); }
body.s2 .s2-results-table thead th{ padding: 14px 16px; background: var(--teal); color: #fff; font: 700 13px var(--f-ui); text-transform: uppercase; letter-spacing: .05em; text-align: left; }
body.s2 .s2-results-table thead th:last-child{ text-align: right; }
body.s2 .s2-results-table tbody td{ padding: 14px 16px; vertical-align: middle; border-top: 1px solid var(--line); font: 400 15px/1.4 var(--f-ui); color: var(--muted); }
body.s2 .s2-results-table tbody tr:first-child td{ border-top: 0; }
body.s2 .s2-results-table tbody tr:hover{ background: #f5fbfd; }
body.s2 .s2-results-table td:first-child{ width: 96px; }
body.s2 .s2-results-table td:first-child img{ display: block; width: 72px; height: auto; }
body.s2 .s2-results-table td a{ color: var(--teal); font-weight: 700; text-decoration: none; }
body.s2 .s2-results-table td a:hover{ text-decoration: underline; }
body.s2 .s2-results-table td:last-child{ text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); }
body.s2 .s2-results-table .price-wrap{ display: block; }
body.s2 .s2-results-empty{ padding: 28px 24px; border: 1px solid var(--line); border-left: 4px solid var(--orange); background: #fff; color: var(--ink); font: 400 16px/1.5 var(--f-body); }
body.s2 .s2-trait{ display: inline-block; margin: 2px 6px 2px 0; padding: 4px 12px; border-radius: 999px; background: #eef2f4; color: var(--ink); font: 400 14px/1.3 var(--f-ui); }
body.s2 .s2-trait--avoid{ background: #e8f6ee; border: 1px solid #bfe3cc; color: #1b7a3d; font-weight: 700; }
body.s2 .s2-trait--avoid::before{ content: "\2713\00a0"; }
@media (max-width: 640px) {
	body.s2 .s2-results-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
	body.s2 .s2-results-table,body.s2 .s2-results-table tbody{ display: block; }
	body.s2 .s2-results-table tr{ display: grid; grid-template-columns: 72px 1fr; gap: 4px 14px; padding: 14px; border-top: 1px solid var(--line); }
	body.s2 .s2-results-table tbody tr:first-child{ border-top: 0; }
	body.s2 .s2-results-table tbody td{ display: block; padding: 0; border: 0; }
	body.s2 .s2-results-table td:first-child{ grid-row: 1 / span 4; width: auto; }
	body.s2 .s2-results-table td:last-child{ text-align: left; }
}

/* filters that are set to something other than "Any" are marked, so a pre-selected search is visible at a glance */
body.s2 .s2-field select.s2-has-value,body.s2 .s2-multi.s2-has-value > summary{ border-color: var(--orange); box-shadow: inset 4px 0 0 var(--orange); font-weight: 700; }
/* "Your search:" chips above the results */
body.s2 .s2-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 20px; font-family: var(--f-ui); }
body.s2 .s2-filters-label{ color: var(--muted); font: 700 13px var(--f-ui); text-transform: uppercase; letter-spacing: .05em; }
body.s2 .s2-filter-chip{ display: inline-block; padding: 5px 12px; border: 1px solid #cfe3ea; border-radius: 999px; background: #f5f8fa; color: var(--ink); font: 400 14px/1.3 var(--f-ui); }
body.s2 .s2-filter-chip b{ color: var(--teal); font-weight: 700; }
body.s2 .s2-filter-chip--all{ color: var(--muted); }
body.s2 .s2-filters-clear{ margin-left: 4px; color: var(--orange-ink); font: 700 13px var(--f-ui); text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; }
body.s2 .s2-multi > summary .s2-sum{ display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }