.bsmall, .b966, .b1366, .b1920, .b2560 { display: none !important; }
.mobile-header { display: none !important; }

.banner-with-logo {
    position: relative !important;
    width: 95%;
    margin: 0 auto;
    /* fixed: green belt always starts at the same offset in the banner box */
    margin-top: 20px !important;
    padding-top: 10px !important;
    line-height: 0 !important;
    overflow: visible !important;
    container-type: inline-size;
    container-name: banner;
}

.banner-with-logo .banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Green-belt menus: size tracks the banner so labels stay inside the strip */
.banner-with-logo .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 0.35em !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-weight: bold !important;
    top: 10px !important;
    transform: translateY(0.12cqi);
    height: calc((100% - 10px) * 0.168) !important;
    /* 1cqi = 1% of banner width — same pace as the photo */
    font-size: 1.12cqi !important;
    letter-spacing: 0 !important;
}
.logo-on-banner {
    left: 49% !important;
    /* width tracks banner; top keeps the disc centred on the green belt */
    width: 4.3cqi !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    top: calc(10px - 3.2cqi) !important;
    transform: translateX(-50%) !important;
}

.banner-slogan-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
}

.banner-slogan-box .banner-slogan {
    color: gold !important;
    font-style: italic !important;
    font-weight: bold !important;
    pointer-events: none;
    text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5,
                 -2px 2px 0 #006400, -2px -2px 0 #006400 !important;
}

.slogan-zh .banner-slogan {
    white-space: nowrap !important;
    letter-spacing: 0;
    font-size: 10px !important;
}
.slogan-zh .s1 { top: 62% !important; left: 70% !important; }
.slogan-zh .s2 { top: 74% !important; left: 76% !important; }
.slogan-zh .s3 { top: 86% !important; left: 82% !important; }

.slogan-en .banner-slogan {
    right: auto !important;
    text-align: left;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

.slogan-en .s1 { top: 62% !important; left: 62% !important; }
.slogan-en .s2 { top: 74% !important; left: 68% !important; }
.slogan-en .s3 { top: 86% !important; left: 74% !important; }

/* ---- per banner step (matches the corner label) ---- */
.banner-slogan-box.slogan-en .banner-slogan {
    font-size: 11px !important;
    text-shadow: 1px 1px 0 #4074b5, 1px -1px 0 #4074b5,
                 -1px 1px 0 #006400, -1px -1px 0 #006400 !important;
}
.banner-slogan-box.slogan-zh .banner-slogan { font-size: 10px !important; }

@media (min-width: 966px) and (max-width: 1919px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 13px !important; }
    .banner-slogan-box.slogan-zh .banner-slogan { font-size: 14px !important; }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 16px !important; }
    .banner-slogan-box.slogan-zh .banner-slogan { font-size: 17px !important; }
}

@media (min-width: 2560px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 19px !important; }
    .banner-slogan-box.slogan-zh .banner-slogan { font-size: 20px !important; }
}

@container banner (max-width: 1100px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 12px !important; }
}
@media (max-width: 799px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 7.5px !important; }
    .banner-slogan-box.slogan-en .s1 { top: 58% !important; left: 54% !important; }
    .banner-slogan-box.slogan-en .s2 { top: 70% !important; left: 59% !important; }
    .banner-slogan-box.slogan-en .s3 { top: 82% !important; left: 64% !important; }
    .banner-slogan-box.slogan-zh .banner-slogan { font-size: 9px !important; }
    .banner-slogan-box.slogan-zh .s1 { top: 58% !important; left: 66% !important; }
    .banner-slogan-box.slogan-zh .s2 { top: 70% !important; left: 72% !important; }
    .banner-slogan-box.slogan-zh .s3 { top: 82% !important; left: 78% !important; }
}
@media (min-width: 800px) and (max-width: 965px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 8.5px !important; }
    .banner-slogan-box.slogan-en .s1 { top: 58% !important; left: 58% !important; }
    .banner-slogan-box.slogan-en .s2 { top: 70% !important; left: 63% !important; }
    .banner-slogan-box.slogan-en .s3 { top: 82% !important; left: 68% !important; }
    .banner-slogan-box.slogan-zh .banner-slogan { font-size: 10px !important; }
    .banner-slogan-box.slogan-zh .s1 { top: 58% !important; left: 70% !important; }
    .banner-slogan-box.slogan-zh .s2 { top: 70% !important; left: 76% !important; }
    .banner-slogan-box.slogan-zh .s3 { top: 82% !important; left: 82% !important; }
}
@container banner (max-width: 900px) {
    .banner-slogan-box.slogan-en .banner-slogan { font-size: 8.5px !important; }
}

@media (max-width: 480px) {
    .banner-with-logo { display: none !important; }
    .mobile-header { display: block !important; width: 100%; overflow: hidden; padding: 6px 4px 10px; }
}

/* Comparison table: English labels are longer */
body.lang-en section#tableCompare th,
body.lang-en section#tableCompare td.chemistry,
body.lang-en section#tableCompare td.description {
    font-size: 0.92em;
}
body.lang-en section#tableCompare th {
    line-height: 1.15;
    padding: 4px 3px;
}
body.lang-en section#tableCompare td.description {
    text-align: left;
    white-space: normal;
}
body.lang-zh section#tableCompare td.description {
    text-align: left;
}



/* Vertical spec headings — rotate like live smart-oil.com */
div#contents section#tableCompare th.verticalTableHeader {
    vertical-align: bottom;
    height: 12em;
    width: 1.6em;
    padding: 4px 2px;
}
body.lang-en div#contents section#tableCompare th.verticalTableHeader p {
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    text-orientation: mixed;
    transform: rotate(180deg) !important;
    margin: 0 auto;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: bold;
}
body.lang-en div#contents section#tableCompare th.verticalTableHeader p {
    font-size: 0.78em;
}

/* Product Features / 产品特性 — keep table layout, widen 3rd column */
div#contents section#tableCompare td.description,
div#contents section#tableCompare td:nth-child(3) {
    min-width: 16em;
    width: 28%;
    white-space: normal;
    text-align: left;
    vertical-align: top;
}

@media (max-width: 481px) {
    section#tableCompare {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    div#contents section#tableCompare td.description,
    div#contents section#tableCompare td:nth-child(3) {
        min-width: 12em;
        width: 36%;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .banner-with-logo { display: none !important; }
    .mobile-header { display: block !important; width: 100%; overflow: hidden; padding: 6px 4px 10px; }
}


/* Language text only; current language gray and not clickable */
.utility-nav .lang a {
    padding-left: 0 !important;
    background: none !important;
    color: #003366;
}
.utility-nav .lang-current {
    color: #888 !important;
    pointer-events: none;
    cursor: default;
    font-weight: bold;
}
.utility-nav input.icon {
    background-color: rgba(255,255,255,0.4) !important;
}

.utility-nav input.icon,
#s_nav input.icon {
    background-color: rgba(255,255,255,0.35) !important;
    background-image: url(../images/search1.png) !important;
    background-repeat: no-repeat !important;
    background-position: 7px center !important;
}
.utility-nav .search-btn,
#s_nav .search-btn {
    width: 4.6em;
    min-width: 4.6em;
    box-sizing: border-box;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}