/* Pump Match – CI Pumps 2026 look (matches the ShopWired site design):
   dark header #1D1D1F with the white CI Pumps logo, green bands #3D6352, accent #52B386,
   light panels #EEF3F0, card lines #DDE6E1, Outfit 800 headings, pill buttons. Loaded after app.css. */
:root{--ci-ink:#1D1D1F;--ci-green:#3D6352;--ci-accent:#52B386;--ci-accent-hover:#469F76;--ci-panel:#EEF3F0;--ci-line:#DDE6E1;--ci-text2:#3A4A42;--ci-muted:#4A5A52;--ci-on-dark:#C9D6CF;--ci-eyebrow:#A8DCC3}
#pump-match{--pm-dark:#3D6352;--pm-green:#52B386;--pm-ink:#1D1D1F;--pm-line:#DDE6E1;--pm-muted:#4A5A52;--pm-tint:#EEF3F0}
body{color:var(--ci-ink)}

/* Header */
.app-bar{background:var(--ci-ink);border-bottom:0;color:#fff}
.app-brand,.app-brand strong{color:#fff}
.app-brand strong{font-weight:800;letter-spacing:-.2px}
.app-brand small{color:var(--ci-on-dark)}
.app-icon{background:transparent;border:1.5px solid var(--ci-accent);color:#fff}
.app-icon:hover{background:var(--ci-accent);border-color:var(--ci-accent);color:var(--ci-ink)}
.app-count{background:var(--ci-accent);color:var(--ci-ink);font-weight:700}
.app-note{background:var(--ci-panel);border-top:0;color:var(--ci-ink)}
.app-note--install{background:var(--ci-panel)}

/* Hero band */
#pump-match .pm-hero{background:var(--ci-green)}
#pump-match .pm-hero::before,#pump-match .pm-hero::after{display:none}
#pump-match .pm-hero h1{font-weight:800;line-height:1.04;letter-spacing:-.5px}
#pump-match .pm-hero h1::before{display:none}
#pump-match .pm-eyebrow{font-size:14px;font-weight:600;letter-spacing:3px;color:var(--ci-eyebrow);text-transform:uppercase}
#pump-match .pm-hero .pm-wrap > p{color:#E2EEE8}
#pump-match .pm-box{border-radius:22px;box-shadow:none}

/* Switch and tabs: pill groups */
#pump-match .pm-cat{background:var(--ci-panel)!important;border-radius:999px!important}
#pump-match .pm-cat button{border-radius:999px!important;color:var(--ci-ink)!important;font-weight:600!important}
#pump-match .pm-cat button[aria-pressed=true]{background:var(--ci-ink)!important;color:#fff!important}
#pump-match .pm-tabs{border-bottom:0;gap:6px}
#pump-match .pm-tabs button{border:1.5px solid var(--ci-line);font-weight:600}
#pump-match .pm-tabs button[aria-selected="true"]{background:var(--ci-green);border-color:var(--ci-green);color:#fff}

/* Inputs */
#pump-match input[type=search],#pump-match input[type=text],#pump-match select{border:1.5px solid var(--ci-line);border-radius:999px}
#pump-match input[type=search]:focus,#pump-match input[type=text]:focus,#pump-match select:focus{border-color:var(--ci-green);outline:2px solid var(--ci-accent);outline-offset:1px}

/* Buttons: green pill with dark text, dark pill, outline pill */
#pump-match .pm-btn,.app-trade .pm-btn,.app-basket .pm-btn{background:var(--ci-accent);border:0;color:var(--ci-ink);font-weight:700;border-radius:999px;text-transform:none}
#pump-match .pm-btn:hover,.app-trade .pm-btn:hover{background:var(--ci-accent-hover);color:var(--ci-ink)}
#pump-match .pm-btn--ghost,.app-trade .pm-btn--ghost{background:transparent;border:1.5px solid var(--ci-ink);color:var(--ci-ink);font-weight:600}
#pump-match .pm-btn--ghost:hover,.app-trade .pm-btn--ghost:hover{background:var(--ci-ink);color:#fff}
#pump-match .pm-btn--wa{background:var(--ci-accent);border:0;color:var(--ci-ink)}

/* Brands row */
#pump-match .pm-brands .pm-brands__h{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ci-green)}
#pump-match .pm-brands span:not(.pm-brands__h):not(.pm-brands__more){border:0;background:var(--ci-panel);color:var(--ci-ink);font-weight:700}

/* Results */
#pump-match .pm-h2{font-weight:800;letter-spacing:-.3px}
#pump-match .pm-h3{font-weight:800}
#pump-match .pm-card{border:1.5px solid var(--ci-line);border-radius:18px;background:#fff}
#pump-match .pm-card--old{background:var(--ci-panel);border-color:var(--ci-panel)}
#pump-match .pm-label{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ci-green)}
#pump-match .pm-tag--direct{background:var(--ci-accent);color:var(--ci-ink);border-color:var(--ci-accent);font-weight:600}
#pump-match .pm-prod__img{background:var(--ci-panel);border-radius:14px}
#pump-match .pm-price__n{font-weight:800}
#pump-match .pm-sug{border:1.5px solid var(--ci-line);border-radius:18px}
#pump-match .pm-sug__b{color:var(--ci-green);font-weight:600}
#pump-match .pm-sug__m{font-weight:700}

/* Expert advice: light panel with dark and green buttons */
#pump-match .pm-help{background:var(--ci-panel);color:var(--ci-ink);border-radius:22px}
#pump-match .pm-help h3,#pump-match .pm-help p{color:var(--ci-ink)}
#pump-match .pm-help p{color:var(--ci-text2)}
#pump-match .pm-help a.pm-btn{color:var(--ci-ink)}
#pump-match .pm-help a.pm-btn--light{background:var(--ci-ink);color:#fff;border:0}
#pump-match .pm-help a.pm-btn--light:hover{background:var(--ci-green);color:#fff}

/* Trade accounts: dark card */
.app-trade{background:var(--ci-ink);color:#fff;border-radius:22px;padding:28px 24px;margin:8px 16px 32px;margin-left:max(16px,calc((100% - 1540px)/2 + 30px));box-sizing:border-box;max-width:900px}
.app-trade::before{content:"For plumbers & contractors";font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--ci-accent)}
.app-trade .pm-h3,.app-trade h2{color:#fff;font-weight:800;font-size:26px;margin:0}
.app-trade p{color:var(--ci-on-dark)}
.app-trade .pm-btn--ghost{border-color:#fff;color:#fff}
.app-trade .pm-btn--ghost:hover{background:#fff;color:var(--ci-ink)}

/* Footer: dark */
.app-foot{background:var(--ci-ink);color:var(--ci-on-dark);border-top:0;max-width:none;padding-top:28px;padding-bottom:32px}
.app-foot a{color:var(--ci-on-dark)}
.app-foot a:hover{color:var(--ci-accent)}
.app-foot .pm-muted{color:var(--ci-on-dark)!important}

/* Basket bar: white, like the site's phone sticky bar */
.app-basket{background:#fff;color:var(--ci-ink);border-top:1px solid var(--ci-line);box-shadow:0 -6px 20px rgba(29,29,31,.08)}
.app-basket__sum .pm-muted{color:var(--ci-muted)}
.app-basket .pm-btn--ghost{background:transparent;border:1.5px solid var(--ci-ink);color:var(--ci-ink)}
.app-basket .app-link{color:var(--ci-green)}
.app-basket__list li{background:var(--ci-panel)}
.app-q{border:1.5px solid var(--ci-line)}

@media (max-width:599px){
  #pump-match .pm-eyebrow{font-size:11.5px;letter-spacing:2.5px}
  .app-trade{padding:22px 20px;margin-left:16px;margin-right:16px}
}