/* =========================================
   Global
   ========================================= */
* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    width: 100%;
    margin: 0;
    background-image: url(../images/reaction-mechanisms.jpg);
    background-color: #FFF;
    background-attachment: fixed;
    font-family: "Trebuchet MS", "微軟正黑體", "Adobe 黑体 Std R", "Heiti SC",
    "PingFang HK", "Arial Unicode MS", "細明體", "新細明體", "標楷體",
    "Adobe 仿宋 Std R", "Adobe 宋体 Std L", "Adobe 明體 Std L",
    "Adobe 黑体 Std R", "Adobe 楷体 Std R", "Adobe 繁黑體 Std B",
    "MingLiU", "Hiragino Kaku Gothic Pro", "PMingLiU", Meiryo, Osaka,
    "DFKai-sb", "MS PGothic", sans-serif;
    color: #000;
    font-weight: normal;
}

/* =========================================
   Top utility strip (search + ENGLISH + 上页)
   ========================================= */
.utility-nav,
#s_nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(4px, 0.5vw, 10px);
    width: 95%;
    max-width: 2560px;
    margin: 6px auto 0;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    list-style: none;
    font-size: clamp(12px, 1.05vw, 14px);
    position: relative;
    z-index: 20;
}

.utility-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Back + search buttons share the search-field look */
.utility-nav .back-arrow,
.utility-nav .search-btn {
    cursor: pointer;
    height: clamp(24px, 1.85vw, 34px);
    padding: 0 clamp(6px, 0.6vw, 12px);
    border: 1px solid #888;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    color: #333;
    font-weight: bold;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: clamp(20px, 1.75vw, 32px);
    font-size: inherit;
}

.utility-nav .back-arrow:hover,
.utility-nav .search-btn:hover {
    background: rgba(255, 255, 255, 0.55);
}

.utility-nav .lang-select {
    height: clamp(22px, 1.85vw, 34px);
    padding: 0 clamp(14px, 1.2vw, 22px) 0 clamp(4px, 0.4vw, 8px);
    border: 1px solid #888;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    color: #333;
    font-size: inherit;
    font-weight: bold;
    box-sizing: border-box;
    cursor: pointer;
    appearance: auto;
}

.utility-nav .lang a,
#s_nav .lang a {
    padding-left: 0 !important;
    background: none !important;
}

.utility-nav .lang a:hover {
    color: darkgreen;
}

/* Search form */
.utility-nav .search-item form {
    display: flex;
    align-items: center;
    gap: 5px;
}

.utility-nav input.icon {
    width: clamp(140px, 15vw, 260px);
    height: clamp(22px, 1.85vw, 34px);
    padding: 0 8px 0 clamp(20px, 1.6vw, 28px);
    border: 1px solid #888;
    border-radius: 4px;
    background: #fff url(../images/search1.png) no-repeat 7px center;
    background-color: rgba(255, 255, 255, 0.35) !important;
    background-size: clamp(12px, 1.05vw, 18px);
    font-size: 0.95em;
}

.utility-nav .search-btn {
    min-width: 4.6em;
    text-align: center;
}

/* Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Give banners a little more breathing room so the green belt
   never collides with the utility strip */
.banner-with-logo {
    margin-top: 20px;
    padding-top: 10px; /* keep in sync with menu-btn top so the green belt does not jump */
}

h2.titleBar {
    margin: 20px 5px 0 5px;
    padding: 3px;
    background-color: cadetblue;
    color: beige;
    line-height: 1.3em;
    text-align: left;
    font-weight: normal;
}


/* Homepage body type matches TDS (banner + footer excluded) */
div#contents .fp-2-col,
div#contents .fp-2-col .left-col,
div#contents .fp-2-col .right-col,
div#contents .fp-2-col .left-col-e,
div#contents .fp-2-col .right-col-e,
div#contents .fp-2-col p,
div#contents .fp-2-col li,
div#contents .fp-2-col blockquote {
    font-size: 16px !important;
    line-height: 1.55 !important;
}

#style-1 {
    height: 600px;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    margin-left: 0;
    border: 1px solid darkgreen;
    background: rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

#style-1.memo-list {
    height: 600px;
    background: rgba(255, 255, 255, 0.12);
}

#style-1::-webkit-scrollbar {
    width: 5px;
    background-color: cornsilk;
}

#style-1::-webkit-scrollbar-thumb {
    background-color: #4CAF50;
}

#style-1::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: cornsilk;
}

article.paper,
section.paper {
    font-weight: normal;
    margin: 5px 0 5px 0;
    clear: both;
    background: transparent;
}

article.paper h3,
section.paper h3 {
    font-size: 0.95em;
    color: #093D3D;
    font-weight: bold;
    margin: 6px 8px 2px 10px;
}

article.paper h4,
section.paper h4 {
    font-size: 0.92em;
    text-align: left;
    color: #400000;
    font-weight: bold;
    margin: 16px 8px 4px 10px;
}

article.paper p,
section.paper p,
.memo-body {
    font-weight: normal;
    font-size: 0.85em;
    line-height: 1.55em;
    text-align: justify;
    padding: 0 10px 8px 10px;
    color: #1a1a1a;
}

.memo-item:first-child h4 {
    margin-top: 10px;
}

a.memo-more {
    font-size: 0.72em;
    font-weight: bold;
    color: #800000;
    margin-left: 1.2em;
    white-space: nowrap;
    text-decoration: none;
}

a.memo-more:hover {
    text-decoration: underline;
}

hr.extended {
    width: 95%;
    max-width: 2560px;
    margin: 0 auto;
    height: 3px;
    background: lightgoldenrodyellow;
    box-sizing: border-box;
}

/*==========================================

=========================================== */
.split-up {
    display: flex;
    justify-content: space-between;
}

/*==========================================
    Search above banner
=========================================== */
div#contents section#company {
    font-size: 1.2em;
}


/*==========================================
CONTENTS -> memoAttach
Fixed photo size; extra window width becomes gap
=========================================== */
div.memoPage {
    width: 100%;
    font-size: 0.9em;
}

div.memoPage figure.memoAttach {
    font-weight: normal;
    margin: 0;
    padding: 0 0 8px;
}

div.memoPage figure.memoAttach img {
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
}

div.memoPage figure.memoAttach figcaption {
    margin: 0;
    padding: 6px 2px 0;
    color: #093D3D;
}

div.memoPage section.memoFigureBox {
    margin: 0;
    border: 0;
}

/*==========================================
    FOOTER
=========================================== */
hr.extended {
    height: 2px;
}

div.footer {
    font-size: 1rem;
    margin: 5px 0 0 0;
    padding: 15px 15px 5px 15px;
}

/* Disclaimer (CN + EN): stay small, tight, justified at every width */
p.disclaimer,
p.disclaimer-e,
body.lang-en p.disclaimer,
body.lang-zh p.disclaimer,
html[lang="en"] p.disclaimer,
html[lang="zh"] p.disclaimer {
    font-size: 11px !important;
    line-height: 1.28 !important;
    text-align: justify !important;
    margin: 8px 0 4px 0 !important;
    font-weight: normal;
    max-width: none;
}

div.footer figure.qrcode {
    --qr-size: 80px;
    float: none;
    margin: 0;
    padding: 0;
    width: var(--qr-size);
    max-width: var(--qr-size);
    text-align: center;
    box-sizing: border-box;
}

div.footer figure.qrcode figcaption,
div.footer-e figure.qrcode figcaption {
    display: block;
    width: var(--qr-size);
    max-width: var(--qr-size);
    box-sizing: border-box;
    margin: 0 0 6px 0;
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    color: yellow;
    white-space: nowrap;
}

body.lang-en div.footer figure.qrcode figcaption,
html[lang="en"] div.footer figure.qrcode figcaption {
    font-size: 9.4px;
    padding: 0;
    letter-spacing: 0;
    white-space: nowrap;
    max-width: var(--qr-size);
}

figure.qrcode img,
div.footer figure.qrcode img {
    float: none;
    display: block;
    width: var(--qr-size);
    height: auto;
    margin: 0;
}

div.copyright {
    font-size: 0.8em;
    font-weight: bold;
    color: darkslategrey;
    margin: 3px;
}

/* =========================================
   HIDE the OLD header elements
   that come from header.php / heading.inc.php
   ========================================= */
header#header .smartLogo,
header#header img.smartLogo,
header#header .logoCrown,
header#header nav.menu,
header#header ul#s_nav,
header#header .b966,
header#header .b1366 {
    display: none !important;
}

/* The new mobile header is hidden by default */
.mobile-header {
    display: none !important;
}

/* =========================================
   Banner container (common)
   ========================================= */
.banner-with-logo {
    position: relative;
    width: 95%;
    margin: 0 auto;
    line-height: 0;
    overflow: visible;
    padding-top: 10px;
}

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

/* Banner and #contents share one column. Footer lives inside #contents,
   so it must be 100% of that column — not another 95%. */
.banner-with-logo,
div#contents,
#contents {
    width: 95% !important;
    max-width: 2560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#contents .footer,
#contents div.footer,
#contents p.disclaimer,
#contents p.disclaimer-e,
#contents div.copyright,
#contents hr.extended,
#contents hr {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* =========================================
   Logo on banner (common)
   ========================================= */
.logo-on-banner {
    position: absolute;
    z-index: 25;
    left: 49%;
    transform: translateX(-50%);
    width: 4.3cqi;
    height: auto;
    min-width: 0;
    max-width: none;
    top: calc(10px - 3.2cqi);
}

/* =========================================
   Menu buttons on banner (common)
   ========================================= */
.menu-btn {
    position: absolute;
    top: 10px;
    z-index: 30;
    color: #f5f5dc;
    font-size: 0.85em;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    padding: 1px 5px;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: color 0.2s, background-color 0.2s;
}

.menu-btn:hover {
    color: greenyellow;
    background-color: rgba(0, 0, 0, 0.3);
}

/* =========================================
   Slogan (three cascading lines)
   ========================================= */
.banner-slogan {
    position: absolute;
    z-index: 20;
    color: gold;
    font-size: 1.15em;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 2px 2px 0 #4074b5,
    2px -2px 0 #4074b5,
    -2px 2px 0 #006400,
    -2px -2px 0 #006400,
    2px 0 0 #006400,
    0 2px 0 #006400,
    -2px 0 0 #006400,
    0 -2px 0 #006400;
}

/* =========================================
   Show / hide banners
   ========================================= */
.bsmall,
.b966,
.b1366,
.b1920,
.b2560 {
    display: none;
}


div#contents {
    width: 95%;
    margin: 8px auto 20px;
    font-size: 0.8em;
    line-height: 140%;
}

.words-darkred {
    color: darkred;
    font-weight: bold;
    font-size: 0.98em;
}

.words-darkgreen {
    color: darkgreen;
    font-weight: bold;
    font-size: 0.98em;
}

.highlight-title-light-green {
    background: rgba(144, 238, 144, 0.6);
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 5px 3px 0;
    font-weight: bold;
}

blockquote {
    margin: 1em 0.5em;
    padding: 0.6em 1.2em;
    border-left: 2px solid teal;
    font-style: italic;
    font-weight: bold;
    color: darkgoldenrod;
}

ul {
    margin: 8px 0 13px 0;
}

ul li {
    /*margin-top: 3px;*/
    line-height: 1.4em;
    list-style-image: url(../images/bulletTri9.gif);
    padding-left: 10px;
    margin-left: 15px;
    font-size: 0.9em;
}

.long-dash {
    display: inline-block;
    width: 1.2em; /* control the length here */
    height: 1px;
    background-color: currentColor;
    vertical-align: middle;
    margin: 0 0.15em;
    position: relative;
    top: -0.1em;
}

.num-square {
    vertical-align: super;
    font-size: x-small;
    line-height: 90%;
    font-weight: 900;
}

.qrcode {
    text-align: center;
}

.footer .qrcode img,
.qrcode img {
    width: 80px;
    height: auto;
    display: block;
    margin: 0;
}

.qrcode p {
    margin: 0;
    font-size: 0.9em;
    font-weight: bold;
    color: darkred;
    padding-top: 10px;
    /*padding-bottom: 2px;*/
}

.footer {
    border-top: 1px solid #000;
    width: 95%;
    max-width: 2560px;
    margin: 20px auto;
    box-sizing: border-box;
    font-size: 0.8rem;
    text-align: left;
    font-style: normal;
    font-weight: normal;
    padding: 15px 15px 5px 15px;
    line-height: 130%;
    background-color: rgba(47, 79, 79, 0.8);
    color: honeydew;
}

.footer table.ft-addr {
    border-collapse: collapse;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    width: auto;
    max-width: 100%;
}
.footer table.ft-addr th,
.footer table.ft-addr td {
    border: 0;
    background: transparent;
    font-weight: normal;
    font-size: inherit;
    color: inherit;
    text-align: left;
    vertical-align: baseline;
    padding: 0 0 0.12em 0;
    line-height: 1.45;
}
.footer table.ft-addr th {
    width: 3.25em;
    white-space: nowrap;
    padding-right: 0;
}
body.lang-en .footer table.ft-addr th,
html[lang="en"] .footer table.ft-addr th {
    width: 8em;
}
.footer table.ft-addr td.ft-col {
    width: 1.2em;
    text-align: center;
    white-space: nowrap;
    padding: 0 0.2em 0.12em 0.15em;
}
.footer table.ft-addr tr.ft-gap th,
.footer table.ft-addr tr.ft-gap td {
    padding: 0;
    height: 0.85em;
    line-height: 0.85em;
}

.footer a {
    color: floralwhite;
    text-decoration: none;
}

.utility-nav .lang-current {
    color: #888 !important;
}

/*==========================================
 content area -> TABLE
===========================================*/
table.pdtIndex {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.pdtBox {
    font-size: 0.8em;
    padding: 8px 8px 10px;
    text-align: left;
    height: auto;
    min-height: 3.6em;
    width: 20%;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
}

/*==========================================
CONTENTS -> Product Categories
=========================================== */
div#contents section#pdtCat {
    width: 100%;
    margin: 0;
    padding: 3px 0;
    float: none;
    box-sizing: border-box;
    overflow: hidden;
}

div#contents section#pdtCat h5 {
    font-size: 0.8em;
    font-weight: bolder;
    color: #004080;
    margin: 30px 0 2px 0;
    clear: both;
    text-decoration: underline;
}

div#contents section#box {
    font-size: 0.8em;
    margin: 10px 8px 12px 0;
    float: left;
    height: 15px;
    width: 68px;
    border-collapse: collapse;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

div#contents section#boxE {
    font-size: 0.8em;
    margin: 10px 10px 5px 0;
    float: left;
    height: 60px;
    width: 85px;
    border-collapse: collapse;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

div#contents section#box a {
    font-weight: normal;
    display: block;
}

div#contents section#boxE a {
    font-weight: normal;
    display: block;
}

div#contents section#box a:hover {
    font-weight: bolder;
    color: lemonchiffon;
    background-color: #0D4F38;
}

div#contents section#boxE a:hover {
    font-weight: bolder;
    color: lemonchiffon;
    background-color: #0D4F38;
}

div#contents section#pdtCat h5 {
    font-size: 1.2em;
    color: darkred;
    font-weight: bold;
    margin-top: 0;
}
div#contents section#pdtCat h5:not(:first-of-type) {
    clear: both;
    margin-top: calc(3.6em + 16px);
    padding-top: 0;
}

div#contents section#pdtCat section#box {
    font-size: 0.88em;
    color: crimson;
    font-weight: bold;
}
div#contents section#pdtCat section#box,
div#contents section#pdtCat section#boxE,
div#contents section#pdtCat section#box a,
div#contents section#pdtCat section#boxE a {
    font-size: 0.88em;
}
div#contents section#pdtCat h5 {
    font-size: 1.2em;
}

/*==========================================
   content area -> TABLE PRODUCT COMPARE
  ===========================================*/
div#contents h5.compare-page-title {
    text-align: left;
    float: none;
    clear: both;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 1.05em;
    font-weight: bold;
    color: saddlebrown;
}
div#contents p.compare-showlist {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    min-height: 0;
}
#style-1.pdtIndex-pane.compare-pane {
    height: 500px;
}
div#contents section#iList.itemList,
div#contents section#iList.itemList h3,
div#contents section#iList.itemList a {
    font-size: 0.9em;
    line-height: 1.5;
}
div#contents section#iList.itemList h3 {
    width: 100%;
    max-width: none;
    margin: 8px 0 4px 0;
    box-sizing: border-box;
}
div#contents section#iList.itemList h3 > a[onclick] {
    float: right;
    margin: 0 0 6px 12px;
}
div#contents section#tableCompare table {
    font-size: 0.82em;
    border: 0.5px solid rgba(47, 79, 79, 0.18);
}
div#contents section#tableCompare table caption {
    display: none;
}
div#contents section#tableCompare table caption.descriptionNote {
    display: block;
    text-align: left;
}

div#contents section#tableCompare th.verticalTableHeader {
    font-size: 0.92em;
    vertical-align: bottom !important;
    height: 12em;
    width: 1.8em;
    max-width: 2.4em;
    padding: 4px 2px !important;
}
body.lang-en div#contents section#tableCompare th.verticalTableHeader {
    height: 14em !important;
    width: 1.7em !important;
    max-width: 2em !important;
    vertical-align: middle !important;
    text-align: center !important;
}
body.lang-en div#contents section#tableCompare th.verticalTableHeader p {
    display: block !important;
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: rotate(180deg) !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    line-height: 1.15;
    font-weight: normal;
}

div#contents section#tableCompare th {
    border: 0.5px solid rgba(47, 79, 79, 0.18);
    font-size: 0.92em;
    vertical-align: middle;
    padding: 8px 8px;
}

div#contents section#tableCompare td {
    border: 0.5px solid rgba(47, 79, 79, 0.18);
    font-size: 0.92em;
    vertical-align: middle;
    padding: 8px 8px;
}

div#contents section#tableCompare p.footnote {
    font-size: 1em;
}

/*==========================================
CONTENTS -> TDS
=========================================== */
div#contents div#tds {
    margin-bottom: 200px;
    overflow: hidden;
}

div#contents section#tds {
    width: 100%;
    padding: 10px;
    float: none;
    clear: both;
    font-size: min(calc(1.52 * 0.95vw), 39px);
    color: #000040;
}

div#contents section#tds h1 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 5px 0 10px;
}

div#contents section#tds .pdt-class {
    font-weight: bold;
    color: #800040;
}

div#contents section#tds .pdtChemistry {
    font-weight: bold;
    color: #800040;
}

div#contents section#tds img.heading {
    margin-bottom: 1em;
    margin-top: 2em;
    clear: both;
}

div#contents section#tds p {
    line-height: 1.4em;
    text-align: justify;
    color: #000040;
    padding: 5px 15px;
}

div#contents section#tds table {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    color: #000040;
}

div#contents section#tds table td {
    padding: 0 5px;
    width: 50%;
    height: 1.5em;
    font-weight: normal;
}

div#contents section#tds ul {
    padding-left: 3em;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

div#contents section#tds ul li {
    line-height: 1.2em;
    list-style-image: url(../images/bulletTri9.gif);
    color: #000040;
}

div#contents section p.note {
    margin-top: 1em;
    font-size: 0.7em;
}

div#contents section#tds table td.specType {
    padding-left: 10%;
}

div#contents section#tds table td.specData {
    text-align: center;
    padding-right: 15%;
}

div#contents section#tds table td.app {
    line-height: 1.1em;
}

div#contents section#tds .pdtName {
    line-height: 1.2em;
    font-weight: bolder;
    color: #039;
    font-size: 1em;
    font-style: normal;
}

div#contents section#pdtImages nav ul {
    list-style: none;
}
div#contents section#pdtImages nav ul li { /* For product sample flask picture. */
    text-align: center;
    float: left;
    width: 25%;
    font-weight: normal;
    border: 0 solid #000;
    padding: 0;
    margin: 50px 0 0 50px;
    list-style: none !important;
}

div#contents section#pdtImages nav ul li:nth-child(odd) {
    width: 25%;
}

div#contents section#pdtImages nav ul li figure img {
    margin: 0 auto;
    padding: 0;
    width: 70px;
    height: 70px;
}

div#contents section#pdtImages nav ul li figure figcaption {
    margin: 0 auto;
    padding: 5px 0 0;
    font-size: 0.9em;
    text-align: center;
    color: darkslategrey;
}



/* =========================================
    PURE MOBILE  < 481 px
   – left logo + 6 buttons, NO colourful banner
========================================= 8888*/

@media (max-width: 480px) {

    /* Hide every colourful banner */
    .banner-with-logo,
    .bsmall,
    .b966,
    .b1366,
    .b1920,
    .b2560 {
        display: none !important;
    }

    /* Show the new mobile header */
    .mobile-header {
        display: block !important;
        width: 100%;
        overflow: hidden;
        padding: 6px 4px 10px;
        background: transparent;
    }

    /* Left logo */
    .mobile-header .smartLogo {
        display: block !important;
        float: left;
        width: 52px;
        height: auto;
        margin: 4px 8px 0 4px;
    }

    /* 6 buttons in a tight 2×3 grid beside the logo */
    .mobile-header .mobile-menu {
        float: left;
        width: calc(100% - 70px);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-header .mobile-menu li {
        float: left;
        width: 32%;
        margin: 1px 0.6%;
        list-style: none;
        box-sizing: border-box;
    }

    .mobile-header .mobile-menu a {
        display: block;
        width: 100%;
        padding: 3px 2px;
        font-size: 12.5px;
        line-height: 1.2;
        font-weight: normal;
        text-align: center;
        color: #f5f5f5;
        background-color: rgba(47, 79, 79, 0.85);
        border-radius: 4px;
        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .mobile-header .mobile-menu a:hover {
        background-color: rgba(30, 60, 60, 0.95);
        color: #adff2f;
    }

    /* Force single column content */
    #contents,
    .fp-2-col,
    .left-col,
    .right-col,
    table.frontPage2Col {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 4px auto 12px;
        padding: 0 8px;
    }

    /*==========================================
       FOOTER
   =========================================== */
    hr.extended {
        height: 2px;
    }

    div.footer {
        font-size: 0.5rem;
        margin: 2px 0 0 0;
        padding: 15px 15px 5px 15px;
    }

    p.disclaimer-e,
    body.lang-en p.disclaimer {
        font-size: 11px !important;
        line-height: 1.28 !important;
        text-align: justify !important;
        margin: 6px 0 4px 0 !important;
    }


    figure.qrcode img {
        /*float: right;*/
        margin: 5px 2px 0 0;
        width: 40px;
    }

    div.copyright {
        font-size: 0.8em;
        font-weight: bold;
        color: darkslategrey;
        margin: 3px;
    }

    /*==========================================
       PRODUCT CATEGORIES
   =========================================== */
    div#contents section#box {
        font-size: 0.6rem;
        line-height: 100%;
        margin: 0 5px 0 0;
        padding: 2px;
        /*vertical-align: text-top;*/
        float: left;
        height: 60px;
        width: 78px;
        border: 0.5px solid whitesmoke;
    }

    div#contents section#pdtCat {
        font-size: 0.6rem;
        line-height: 100%;
    }

    div#contents section#pdtCat h5 {
        padding-bottom: 10px;
        font-size: 1.3em;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }

    .utility-nav,
    #s_nav {
        position: static;
        float: none;
        width: 100%;
        max-width: none;
        justify-content: flex-end;
        padding: 0 8px;
        box-sizing: border-box;
        background: transparent;
    }

    /* TABLE COMPARE: handled in mobile compare block at file end */

}

/* Tablet / small desktop 8888 */
@media (max-width: 965px) {

    hr.extended {
        height: 2px;
    }


    div.footer {
        font-size: 0.7rem;
        margin: 2px 0 0 0;
        padding: 15px 15px 5px 15px;
    }

    .utility-nav,
    #s_nav {
        max-width: 2560px;
    }

    div#contents {
        max-width: 965px;
        font-size: 0.9rem;
    }

    .bsmall {
        display: block;
    }

    .banner-with-logo,
    div#contents,
    #contents {
        width: 98% !important;
    }
    .banner-with-logo {
        padding-top: 10px;
    }

    .logo-on-banner {
        width: 4.5cqi;
        min-width: 0;
        max-width: none;
    }

    .menu-btn {
        top: 10px;
        font-size: 0.7em;
        padding: 0 2px;
    }

    .banner-slogan {
        font-size: 0.75em;
        letter-spacing: 1px;
    }

    /*==========================================
       FRONT PAGE
   =========================================== */
    div#contents div.left-col,
    div#contents div.right-col {
        font-size: 1rem;
    }

    div#contents div.left-col-e,
    div#contents div.right-col-e {
        font-size: 0.9rem;
    }

    /*==========================================
        FOOTER
    =========================================== */
    div.footer {
        font-size: 0.7em;
        margin: 10px 0 0 0;
        padding: 15px 15px 5px 15px;
    }

    p.disclaimer,
    p.disclaimer-e,
    body.lang-en p.disclaimer,
    body.lang-zh p.disclaimer {
        font-size: 11px !important;
        line-height: 1.28 !important;
        text-align: justify !important;
        margin: 8px 0 4px 0 !important;
    }

    p.disclaimer-e,
    body.lang-en p.disclaimer {
        font-size: 11px !important;
        line-height: 1.28 !important;
        text-align: justify !important;
    }

    div.footer figure.qrcode {
        --qr-size: 80px;
    }

    figure.qrcode img {
        float: none;
        width: 80px;
        margin: 0;
    }

    div.copyright {
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: bold;
        color: darkslategrey;
        margin: 6px 4px !important;
    }

    /*==========================================
          PRODUCT CATEGORIES
       =========================================== */
    div#contents section#box {
        font-size: 0.6rem;
        line-height: 130%;
        margin: 5px 0;
        padding: 0 3px 0 0;
        float: left;
        height: 60px;
        width: 100px;
        border-collapse: collapse;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    div#contents section#pdtCat {
        font-size: 0.6rem;
        line-height: 100%;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }



}


/*-two column and flex for min-width 966px ONWARD -----8888 */
@media (min-width: 966px) {

    .fp-2-col {
        display: flex;
        flex-wrap: nowrap;
        gap: 2%;
        justify-content: space-between;
        align-items: flex-start;
        text-align: justify;
    }

    .left-col {
        flex: 0 0 47.5%;
        width: 50%;
    }

    .right-col {
        flex: 0 0 47.5%;
        width: 50%;
    }

    .pdtBox {
        font-size: 0.88em;
        min-height: 4.6em;
        padding: 10px 8px 12px;
    }

    div#contents section#pdtImages nav ul li figure figcaption {
        margin: 0 auto;
        font-size: 0.9em;
        padding-top: 5px;
        text-align: center;
        color: darkslategrey;
    }

}


/* ----- 966 – 1365 px ----- 8888*/
@media (min-width: 966px) and (max-width: 1365px) {

    div#contents {
        max-width: 1365px;
        font-size: 1.1rem;
    }

    .pdtBox {
        font-size: 0.85em;
        min-height: 4.4em;
        padding: 10px 8px 12px;
    }

    .b966 {
        display: block;
    }

    .menu-btn {
        top: 10px;
        font-size: 0.85em;
    }

    /*==========================================
        FRONT PAGE
    =========================================== */
    div#contents div.left-col,
    div#contents div.right-col {
        font-size: 1.1rem;
    }

    div#contents div.left-col-e,
    div#contents div.right-col-e {
        font-size: 1rem;
    }

    /*==========================================
       PRODUCT CATEGORIES
    =========================================== */
    div#contents section#box {
        font-size: 1rem;
        line-height: 130%;
        margin: 5px 5px 5px 0;
        padding: 5px 20px 5px 0;
        float: left;
        height: 80px;
        width: 150px;
        border-collapse: collapse;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    div#contents section#pdtCat {
        font-size: 0.9rem;
        line-height: 100%;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }

}

/* ----- 1366 – 1919 px ----- 8888*/
@media (min-width: 1366px) and (max-width: 1919px) {

    div#contents {
        max-width: 1919px;
        font-size: 1.2rem;
    }

    .pdtBox {
        font-size: 0.85em;
        min-height: 4.4em;
        padding: 10px 10px 12px;
    }

    .b1366 {
        display: block;
    }

    .logo-on-banner {
        width: 4.5cqi;
    }

    .menu-btn {
        top: 10px;
        font-size: 1.05em;
    }

    .banner-slogan {
        font-size: 1.25em;
    }

    /*==========================================
        FRONT PAGE
    =========================================== */
    div#contents div.left-col,
    div#contents div.right-col {
        font-size: 1.2rem;
    }

    div#contents div.left-col-e,
    div#contents div.right-col-e {
        font-size: 1.1rem;
    }

    /*==========================================
           PRODUCT CATEGORIES
       =========================================== */
    div#contents section#box {
        font-size: 0.8rem;
        line-height: 130%;
        margin: 5px 5px 5px 0;
        padding: 5px 20px 5px 0;
        float: left;
        height: 80px;
        width: 150px;
        border-collapse: collapse;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    div#contents section#pdtCat {
        font-size: 0.8rem;
        line-height: 100%;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }

}

/* ----- 1920 – 2559 px ----- 8888*/
@media (min-width: 1920px) and (max-width: 2559px) {

    div#contents {
        max-width: 2559px;
        font-size: 1rem;
    }

    .pdtBox {
        font-size: 0.9em;
        min-height: 2.6em;
        padding: 8px 10px;
    }

    .b1920 {
        display: block;
    }

    .logo-with-logo {
        width: 3.4%;
        top: -6px;
        max-width: 80px;
    }

    .logo-on-banner {
        width: 4.5cqi;
        max-width: none;
    }

    .menu-btn {
        top: 10px;
        font-size: 1.25em;
    }

    .banner-slogan {
        font-size: 1.35em;
        letter-spacing: 2.5px;
    }

    /*==========================================
        FRONT PAGE
    =========================================== */
    div#contents div.left-col,
    div#contents div.right-col {
        font-size: 1.3rem;
    }

    div#contents div.left-col-e,
    div#contents div.right-col-e {
        font-size: 1.2rem;
    }


    #contents {
        font-size: 1.2rem;
    }

    /*==========================================
       PRODUCT CATEGORIES
   =========================================== */
    div#contents section#box {
        font-size: 1rem;
        line-height: 130%;
        margin: 5px 5px 5px 0;
        padding: 5px 20px 5px 0;
        float: left;
        height: 80px;
        width: 150px;
        border-collapse: collapse;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    div#contents section#pdtCat {
        font-size: 0.9rem;
        line-height: 100%;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }

}

/* ----- ≥ 2560 px ----- 8888*/
@media (min-width: 2560px) {

    div#contents {
        max-width: 2560px;
        font-size: 1.2rem;
    }

    .pdtBox {
        font-size: 0.95em;
        min-height: 2.6em;
        padding: 8px 12px;
    }

    .b2560 {
        display: block;
    }

    .banner-with-logo {
        max-width: 2560px;
    }

    .logo-on-banner {
        width: 4.5cqi;
        max-width: none;
    }

    .menu-btn {
        top: 10px;
        font-size: 1.3em;
    }

    .banner-slogan {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }

    /*==========================================
        FRONT PAGE
    =========================================== */
    div#contents div.left-col,
    div#contents div.right-col {
        font-size: 1.4rem;
    }

    div#contents div.left-col-e,
    div#contents div.right-col-e {
        font-size: 1.3rem;
    }

    /*==========================================
        PRODUCT CATEGORIES
    =========================================== */
    div#contents section#box {
        font-size: 1rem;
        line-height: 130%;
        margin: 5px 5px 5px 0;
        padding: 5px 20px 5px 0;
        float: left;
        height: 80px;
        width: 150px;
        border-collapse: collapse;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    div#contents section#pdtCat {
        font-size: 0.9rem;
        line-height: 100%;
    }

    div#contents section#pdtCat a {
        text-decoration: none;
    }


    /*==========================================
        FOOTER
    =========================================== */
    div.footer {
        font-size: 1.3rem;
        margin: 20px 0 0 0;
        padding: 50px 50px 30px 50px;
    }

    p.disclaimer-e,
    body.lang-en p.disclaimer {
        font-size: 11px !important;
        line-height: 1.28 !important;
        text-align: justify !important;
        margin: 8px 0 4px 0 !important;
    }

    div.footer figure.qrcode {
        --qr-size: 130px;
    }

    div.footer figure.qrcode figcaption,
    div.footer-e figure.qrcode figcaption {
        font-size: 26px;
        width: 130px;
    }

    body.lang-en div.footer figure.qrcode figcaption {
        font-size: 13px;
    }

    figure.qrcode img {
        float: none;
        width: 130px;
        min-width: 130px;
        margin: 0;
    }

    div.copyright {
        font-size: 1.1rem;
        font-weight: bold;
        color: darkslategrey;
        margin: 20px;
    }

}

/* =========================================
   Memo gallery (last = wins)
   Photo stays ~560px; stretch grows the gaps.
   <1366: 1 | 1366–1919: 2 | 1920–2559: 3 | ≥2560: 4
   ========================================= */
div.memoPage {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
    width: 100% !important;
}
div.memoPage section.memoFigureBox {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
}
div.memoPage figure.memoAttach {
    margin: 0 !important;
    padding: 0 0 8px !important;
}
div.memoPage figure.memoAttach img {
    display: block !important;
    width: 560px !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

@media (max-width: 1365px) {
    div.memoPage section.memoFigureBox {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}
@media (min-width: 1366px) and (max-width: 1919px) {
    div.memoPage section.memoFigureBox {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}
@media (min-width: 1920px) and (max-width: 2559px) {
    div.memoPage section.memoFigureBox {
        flex: 0 0 33.333% !important;
        width: 33.333% !important;
        max-width: 33.333% !important;
    }
}
@media (min-width: 2560px) {
    div.memoPage section.memoFigureBox {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

/* Shared chemistry/features: desktop uses rowspan, hide extra mobile row */
div#contents section#tableCompare tr.mobile-group-head {
    display: none !important;
}

/* =========================================
   Phone: stack comparison tables into cards
   Live page already prints td:before labels
   at max-device-width 481px. This makes the
   table actually stack so those labels work.
   ========================================= */
@media (max-width: 480px), (max-device-width: 481px) {
    html, body {
        overflow-x: hidden;
    }
    div#contents {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 8px !important;
        overflow-x: hidden;
    }
    div#contents section#tableCompare {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
    }
    div#contents section#tableCompare table {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box;
    }
    div#contents section#tableCompare thead,
    div#contents section#tableCompare tbody,
    div#contents section#tableCompare tr,
    div#contents section#tableCompare th,
    div#contents section#tableCompare td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box;
    }
    div#contents section#tableCompare colgroup,
    div#contents section#tableCompare col {
        display: none !important;
    }
    div#contents section#tableCompare thead,
    div#contents section#tableCompare thead tr,
    div#contents section#tableCompare thead th {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
    div#contents section#tableCompare caption,
    div#contents section#tableCompare caption.descriptionNote {
        display: block !important;
        float: none !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 1em !important;
        font-weight: bold;
        line-height: 1.4;
        margin: 0 0 10px !important;
        padding: 4px 2px 8px !important;
    }
    div#contents section#tableCompare tr {
        margin: 0 0 12px;
        padding: 6px 8px 2px;
        border: 1px solid #2f4f4f;
        background: rgba(255,255,255,0.42);
    }
    div#contents section#tableCompare td {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 8px;
        align-items: start;
        position: relative !important;
        border: none !important;
        border-bottom: 1px solid #c5c5c5 !important;
        padding: 7px 8px !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: 0.88em !important;
    }
    div#contents section#tableCompare td:last-child {
        border-bottom: none !important;
    }
    div#contents section#tableCompare td:before {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.25;
        font-weight: bold;
        text-align: left;
    }
    div#contents section#tableCompare td.description,
    div#contents section#tableCompare td:nth-child(3) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    div#contents section#tableCompare tr.mobile-group-head {
        display: block !important;
        margin: 0 0 8px;
        padding: 10px 12px;
        border: 1px solid #2f4f4f;
        background: rgba(255,255,255,0.55);
    }
    div#contents section#tableCompare tr.mobile-group-head td {
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        border: none !important;
    }
    div#contents section#tableCompare tr.mobile-group-head td:before,
    div#contents section#tableCompare tr.mobile-group-head td:nth-of-type(1):before,
    div#contents section#tableCompare tr.mobile-group-head td:nth-of-type(2):before,
    div#contents section#tableCompare tr.mobile-group-head td:nth-of-type(3):before {
        content: "" !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    div#contents section#tableCompare tr.mobile-group-head .g-block {
        display: block;
        margin: 0 0 10px;
    }
    div#contents section#tableCompare tr.mobile-group-head .g-block:last-child {
        margin-bottom: 0;
    }
    div#contents section#tableCompare tr.mobile-group-head .glabel {
        display: block;
        font-weight: bold;
        color: #400000;
        margin: 0 0 4px;
    }
    div#contents section#tableCompare caption.descriptionNote:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        border: none !important;
    }
    div#contents section#tableCompare td.shared-cell,
    div#contents section#tableCompare td.chemistry[rowspan],
    div#contents section#tableCompare td.description[rowspan] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: none !important;
    }
    div#contents section#tableCompare a.g-brand {
        color: #800000;
        font-weight: bold;
        text-decoration: underline;
    }
}
/* =========================================
   Formulae.php — formulation + performance
   ========================================= */
section.formula {
    width: 100%;
    max-width: 960px;
    clear: both;
}

table.smtFormula {
    width: 100%;
    max-width: 800px;
    margin: 8px 0 28px;
    border-collapse: collapse;
    clear: both;
}

table.smtFormula caption {
    font-weight: bold;
    text-align: left;
    margin: 8px 0 12px;
    color: darkslateblue;
    caption-side: top;
}

table.smtFormula th {
    color: seashell;
    line-height: 1.25;
    background-color: rgba(25, 119, 52, 0.8);
    border: 1px solid #fff;
    text-align: center;
    font-weight: bold;
    font-size: 0.85em;
    padding: 6px 10px;
}

table.smtFormula td {
    border: 1px solid #cfe8e0;
    text-align: left;
    font-weight: normal;
    font-size: 0.85em;
    line-height: 1.35;
    color: #333;
    background-color: rgba(148, 232, 221, 0.12);
    padding: 5px 10px;
}

section.formula table.smtFormula td.data,
table.smtFormula td.data {
    text-align: center;
    white-space: nowrap;
}

section.fnote,
section.formula .note,
section.formula p.note {
    max-width: 800px;
    margin: 4px 0 10px;
}

section.fnote ol {
    margin: 4px 0 8px 1.2em;
    padding: 0;
}

section.fnote li,
section.fnote p,
section.formula p.note,
section.formula li.note {
    font-size: 0.72em;
    font-weight: normal;
    line-height: 1.4;
    color: #333;
    list-style: decimal;
}



#style-1.pdtIndex-pane {
    height: 600px;
    background: rgba(255, 255, 255, 0.12);
    overflow-x: hidden;
}
table.pdtIndex-brands td.pdtBox,
table.pdtIndex-smart td.pdtBox {
    border: 0.5px solid rgba(47, 79, 79, 0.18);
}

div#contents section#pdtCat section#box,
div#contents section#pdtCat section#boxE {
    border: 0.5px solid rgba(47, 79, 79, 0.18) !important;
    box-sizing: border-box;
    padding: 4px 4px 1px 4px !important;
    line-height: 1.1 !important;
    height: 3.6em !important;
    max-height: 3.6em !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 480px) {
    div#contents section#pdtCat section#box,
    div#contents section#pdtCat section#boxE {
        width: calc(25% - 8px) !important;
        max-width: none !important;
        height: 2.55em !important;
        max-height: 2.55em !important;
        margin: 0 6px 8px 0 !important;
        padding: 3px 3px 1px 3px !important;
        line-height: 1.1 !important;
        border: 0.5px solid rgba(47, 79, 79, 0.18) !important;
        float: left !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    /* phone search + menu align logo */
    .utility-nav,
    #s_nav {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 18px 0 8px !important;
        box-sizing: border-box !important;
        justify-content: flex-end !important;
        font-size: 11px !important;
        gap: 4px;
    }
    .utility-nav .lang-select,
    .utility-nav input.icon,
    .utility-nav .search-btn,
    .utility-nav .back-arrow {
        font-size: 11px !important;
        height: 22px !important;
        min-height: 22px !important;
        line-height: 22px !important;
    }
    .utility-nav input.icon {
        width: clamp(96px, 36vw, 150px) !important;
        line-height: 1.2 !important;
        padding: 0 6px 0 22px !important;
    }
    .mobile-header {
        padding: 4px 8px 0 !important;
        box-sizing: border-box;
    }
    #contents,
    .fp-2-col,
    .left-col,
    .right-col {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 480px) {
    #contents h5:first-child,
    div#contents section#pdtCat h5:first-child {
        margin-top: 2px !important;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
    }
    div#contents section#pdtCat h5:not(:first-child) {
        margin-top: calc(2.55em + 16px) !important;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        clear: both;
    }
    .utility-nav,
    #s_nav {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

div#contents section#pdtCat .cat-break {
    display: block;
    clear: both;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    float: none;
}
div#contents section#pdtCat h5:not(:first-of-type) {
    clear: both;
    margin-top: 8px;
    padding-top: 0;
}

@media (max-width: 480px) {
    div#contents section#pdtCat .cat-break {
        height: 28px !important;
    }
}

@media (max-width: 965px) {
    /* pdtCat 4-col gap under 966 */
    div#contents section#pdtCat section#box,
    div#contents section#pdtCat section#boxE {
        width: calc(25% - 10px) !important;
        margin: 0 8px 10px 0 !important;
        height: 3.6em !important;
        max-height: 3.6em !important;
        border: 0.5px solid rgba(47, 79, 79, 0.18) !important;
        float: left !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 965px) {
    /* search floor under 966 */
    .utility-nav,
    #s_nav {
        font-size: 12px !important;
    }
    .utility-nav .lang-select,
    .utility-nav input.icon,
    .utility-nav .search-btn,
    .utility-nav .back-arrow {
        font-size: 12px !important;
        height: 24px !important;
        min-height: 24px !important;
        line-height: 24px !important;
    }
}

/* product-categories: smaller cell type, captions unchanged */
div#contents section#pdtCat section#box,
div#contents section#pdtCat section#boxE,
div#contents section#pdtCat section#box a,
div#contents section#pdtCat section#boxE a {
    font-size: 12px !important;
}
div#contents section#pdtCat h5 {
    font-size: 16px !important;
}