/* Reference font pairing: Roboto body/navigation and Roboto Condensed headings.
   Keep this after legacy styles so typography is consistent across shared pages.
   Font-family overrides are limited to text; icon fonts retain their own family. */
:root {
    --font-body: 'Roboto', Arial, sans-serif;
    --font-heading: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    letter-spacing: .03em;
    line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0;
}
p, li, dt, dd, label, input, select, textarea, button,
.thm-button, .product-btn, .home-solution-link,
.home-solutions-contact > a, .stat-content,
.site-footer, .site-footer-bottom {
    font-family: var(--font-body) !important;
}
p { font-style: normal; }
input, select, textarea { font-weight: 400; }
button, .thm-button, .product-btn { font-weight: 700; font-style: normal; }
#main-navigation-wrapper .nav > li > a,
#main-navigation-wrapper .dropdown-submenu > li > a,
#main-navigation-wrapper .flyout-toggle,
#main-navigation-wrapper .product-flyout > li > a {
    font-family: var(--font-body);
    font-style: normal;
    letter-spacing: .02em;
}
#main-navigation-wrapper .nav > li > a { font-weight: 700; }
#main-navigation-wrapper .dropdown-submenu > li > a,
#main-navigation-wrapper .product-flyout > li > a,
#main-navigation-wrapper .flyout-toggle { font-weight: 700; }
.stat-title { font-family: var(--font-heading); font-weight: 700; }
@media (max-width: 767px) {
    body { letter-spacing: .015em; }
    input, select, textarea { font-size: 16px; }
}

/* Consistent page titles and section headings. */
body :is(h1:not(.sr-only), .sec-title h2, .inner-banner .page-title h3) {
    position: relative;
    color: #333333;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 15px;
    text-transform: uppercase;
}
body :is(h1:not(.sr-only), .sec-title h2, .inner-banner .page-title h3)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(270px, 100%);
    height: 4px;
    background: linear-gradient(to right, #4cad3b 0 26%, #e5e5e5 26% 100%);
}
/* Breadcrumb: bold, high-contrast trail; current page carries the brand green. */
.bread-cumb ul li a,
.bread-cumb ul li span {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .06em;
    color: #4a4a55;
    transition: color .2s ease;
}
.bread-cumb ul li a:hover,
.bread-cumb ul li a:focus-visible { color: #4cad3b; text-decoration: none; }
.bread-cumb ul li span { color: #1f1f29; }
.bread-cumb ul li span:before { color: #4cad3b; font-weight: 400; }
body .sec-title .decor-line { display: none; }

/* Product pages: justified body copy. Sibling selectors keep shared sections
   (pump results, features list) left-aligned when reused on other pages. */
.surface-protector-products .product-content p,
.surface-protector-products .product-content li,
.surface-product-modal .modal-body p,
.surface-product-modal .modal-body li,
.surface-protector-products ~ .home-pump-results p,
.surface-protector-products ~ .home-pump-results li,
.radiator-range ~ .home-pump-results p,
.radiator-range ~ .home-pump-results li,
.mahir-retail-page p,
.mahir-retail-page li,
.radiator-range ~ .full-img-sec .features-list li {
    text-align: justify;
    text-justify: inter-word;
}
.surface-protector-products .product-content .mahir-tagline,
.surface-protector-products .product-content .donex-use-line {
    text-align: inherit;
}
/* Narrow columns open wide word gaps; hyphenation keeps justified lines even. */
@media (max-width: 575px) {
    .surface-protector-products .product-content :is(p, li),
    .surface-product-modal .modal-body :is(p, li),
    .surface-protector-products ~ .home-pump-results :is(p, li),
    .mahir-retail-page :is(p, li),
    .radiator-range ~ .full-img-sec .features-list li {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}
body .inner-banner { background: #fff; padding: 30px 0; }
body .inner-banner::before { display: none; }
@media (max-width: 767px) {
    body :is(h1:not(.sr-only), .sec-title h2, .inner-banner .page-title h3) {
        font-size: clamp(26px, 5vw, 32px);
    }
    body .inner-banner { padding: 24px 0; }
}