/* Fluid sizing layer, loaded last.
   Text, titles and buttons scale smoothly with the screen width between a
   phone minimum (320px screens) and a desktop maximum (1440px screens),
   instead of jumping between fixed sizes at breakpoints.
   Adjust a size site-wide by changing its token below. */
:root {
    --fs-small: clamp(13px, 12.4px + 0.18vw, 14px);
    --fs-body: clamp(15px, 14.4px + 0.2vw, 17px);
    --fs-lead: clamp(16px, 15px + 0.35vw, 19px);
    --fs-h3: clamp(18px, 16px + 0.6vw, 24px);
    --fs-sub-title: clamp(20px, 16.6px + 0.9vw, 30px);
    --fs-section: clamp(26px, 17.6px + 1.9vw, 42px);
    --fs-h1: 35px;
    --fs-h2: 30px;
    --fs-modal-title: clamp(19px, 17px + 0.6vw, 26px);
    --fs-btn: clamp(14px, 13.4px + 0.2vw, 16px);
    --btn-pad-y: clamp(10px, 8.6px + 0.4vw, 14px);
    --btn-pad-x: clamp(18px, 14px + 1vw, 30px);
    --hero-eyebrow: clamp(18px, 13.5px + 1.6vw, 40px);
    --hero-title: clamp(22px, 13.5px + 2.7vw, 58px);
}

/* Page titles and section headings */
body .inner-banner .page-title h3 {
    font-size: var(--fs-section);
}

/* Every h1 on every page: 35px on desktop, stepping down by device */
body h1:not(.sr-only) {
    font-size: var(--fs-h1) !important;
    line-height: 1.2;
}

/* Every h2 on every page: 30px on desktop, stepping down by device.
   !important overrides section-specific h2 sizes; the hero slider and popup titles keep their own. */
body h2:not(.modal-title) {
    font-size: var(--fs-h2) !important;
    line-height: 1.25;
}
/* Radiator coolant brand pages (Donex, Zedex, Neno): product title 40% smaller than the site h1 */
body .radiator-detail .radiator-description-panel h1 { font-size: calc(var(--fs-h1) * .6) !important; }

/* Footer column titles are small labels, not section headings */
body .footer.site-footer .title h2 { font-size: 19px !important; }
@media (max-width: 991px) {
    :root { --fs-h1: 30px; --fs-h2: 26px; }
}
@media (max-width: 575px) {
    :root { --fs-h1: 26px; --fs-h2: 22px; }
}
.sub-title,
.surface-protector-products h2.sub-title {
    font-size: var(--fs-sub-title);
    line-height: 1.3;
}
.surface-protector-products h3 { font-size: var(--fs-h3); line-height: 1.35; }

/* Body copy on product pages */
.surface-protector-products p,
.surface-protector-products li {
    font-size: var(--fs-body);
    line-height: 1.75;
}
.surface-protector-products p.large { font-size: var(--fs-lead); }

/* Buttons: scale with the screen and never drop below a 44px tap target */
.thm-button,
.product-btn,
.surface-protector-products .product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-size: var(--fs-btn);
    line-height: 1.3;
    text-align: center;
}
.surface-protector-products .product-btn { margin: 0 6px 10px 0; }

/* Phones: product buttons sit in two even columns instead of ragged rows */
@media (max-width: 575px) {
    .surface-protector-products .product-content .product-btn {
        width: calc(50% - 8px);
        margin: 0 0 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .surface-protector-products .product-content .product-btn ~ .product-btn:nth-of-type(odd) { margin-left: 0; }
    .footer-contacts .thm-button { width: 100%; }
}
/* Justified text leaves wide word gaps on narrow screens */
@media (max-width: 767px) {
    main p[style*="justify"],
    .surface-protector-products p[style*="justify"],
    .corporate-about p { text-align: left !important; }
}
@media (max-width: 339px) {
    .surface-protector-products .product-content .product-btn { width: 100%; }
}

/* Product popups */
.surface-product-modal .modal-title,
.surface-protector-products ~ .surface-product-modal .modal-title { font-size: var(--fs-modal-title); }
.surface-product-modal .modal-body { font-size: var(--fs-body); padding: clamp(16px, 12px + 1vw, 28px); }
.mahir-packing-card figcaption { font-size: clamp(16px, 14.5px + 0.45vw, 20px); }
.mahir-packing-card { padding: clamp(12px, 9px + 0.8vw, 18px); }

/* Small print: readable on phones, quiet on desktop */
.bread-cumb ul li a,
.bread-cumb ul li span,
.site-footer-bottom p,
.corporate-about .corporate-eyebrow,
.home-solutions-heading .home-solutions-eyebrow,
.pump-results-eyebrow,
.pump-results-note {
    font-size: var(--fs-small);
}

/* Home hero slider */
#minimal-bootstrap-carousel .carousel-caption p { font-size: var(--hero-eyebrow) !important; line-height: 1.3; margin: 0 0 .25em; }
#minimal-bootstrap-carousel .carousel-caption h2 { font-size: var(--hero-title) !important; line-height: 1.15; }
#minimal-bootstrap-carousel .carousel-caption .thm-container .box.valign-bottom { vertical-align: middle; }
#minimal-bootstrap-carousel .carousel-caption p,
#minimal-bootstrap-carousel .carousel-caption h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
/* Slide 3 lifts its title above the product photo; scale that lift with the slide height */
#minimal-bootstrap-carousel .slide-3 .carousel-caption h2 { padding-bottom: clamp(48px, 14vw, 200px) !important; }
@media (max-width: 991px) {
    /* Phones and tablets keep the desktop placement (vertically centred, centred text).
       Side padding clears the prev/next arrows; a light shade keeps text readable on busy photos. */
    #minimal-bootstrap-carousel .carousel-caption .thm-container .box .content {
        padding: 24px 56px !important;
        text-align: center !important;
    }
    #minimal-bootstrap-carousel .slide-1 .carousel-caption .content { width: 100%; }
    #minimal-bootstrap-carousel .slide-1 .carousel-caption,
    #minimal-bootstrap-carousel .slide-3 .carousel-caption,
    #minimal-bootstrap-carousel .slide-4 .carousel-caption { background: rgba(0, 0, 0, .22); }
    #minimal-bootstrap-carousel .carousel-caption h2,
    #minimal-bootstrap-carousel .carousel-caption p { overflow-wrap: break-word; }
    #minimal-bootstrap-carousel .slide-cooling-solutions .carousel-caption { transform: none; }
    #minimal-bootstrap-carousel .slide-cooling-solutions .carousel-caption .thm-container .box .content { padding: 24px 56px !important; }
    #minimal-bootstrap-carousel .slide-cooling-solutions .cooling-solutions-copy { left: 0; width: fit-content; text-align: center; }
    #minimal-bootstrap-carousel .slide-cooling-solutions .cooling-solutions-copy::before { inset: -12px; }
}

/* Text links styled as actions get a full-size tap area */
.home-solution-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }

/* Floating WhatsApp button: bottom corner so it never covers content or slider arrows */
.whatsapp-float {
    top: auto;
    bottom: calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
    transform: none;
}