.catalog-header{position:relative;background:var(--navy)}
.catalog-brand{color:#fff}
.catalog-nav{display:flex;align-items:center;gap:27px}
.catalog-nav>a:not(.button){color:#dce6f6;font-size:14px;text-decoration:none}
.catalog-nav>a.active{color:var(--teal)}
.catalog-hero{min-height:440px;padding:108px 0 72px;color:#fff;background:linear-gradient(90deg,#041634 0%,#061b43e8 43%,#061b4360 70%),url("assets/chemical-catalog-hero-optimized.jpg") center/cover}
.catalog-hero-content{max-width:1140px}
.catalog-hero h1{font-size:clamp(38px,4.5vw,60px)}
.catalog-hero h1 span{color:var(--teal)}
.catalog-hero p:not(.eyebrow){max-width:540px;margin:18px 0 27px;color:#d3e0f3}
.catalog-section{padding:88px 0 110px}
.catalog-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.catalog-heading>div>p:not(.eyebrow){margin:12px 0 0;color:var(--muted)}
.catalog-count{margin:0;white-space:nowrap;color:var(--muted)}
.catalog-count strong{color:var(--blue);font:700 38px var(--display)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filter{padding:10px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 13px var(--thai);cursor:pointer}
.filter:hover,.filter.active{border-color:var(--blue);background:var(--blue);color:#fff}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chemical-card{min-height:235px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.25s}
.chemical-card:hover{border-color:#95bdeb;box-shadow:0 14px 32px #14284a14;transform:translateY(-4px)}
.chemical-card.hidden{display:none}
.drum-visual{position:relative;display:grid;height:140px;place-items:center;overflow:hidden;background:linear-gradient(135deg,#e6edf6,#bdccdf)}
.drum-visual:before{content:"";width:64px;height:102px;border:3px solid #a9bbd0;border-radius:12px 12px 18px 18px;background:linear-gradient(90deg,#eff4fb,#bac9dc 50%,#f9fbfd);box-shadow:inset 0 8px #fff8,0 9px 13px #091a3330}
.drum-visual:after{content:"";position:absolute;top:25px;width:58px;height:12px;border:2px solid #94a9c3;border-bottom:0;border-radius:4px 4px 0 0}
.drum-visual span{position:absolute;z-index:1;top:67px;min-width:46px;padding:2px 4px;color:#173d71;background:#fff;font:700 8px var(--display);text-align:center}
.drum-visual.blue{background:linear-gradient(135deg,#d5e5fa,#9ebce8)}
.drum-visual.blue:before{border-color:#174b91;background:linear-gradient(90deg,#1e66bf,#103b7c 50%,#286fc3)}
.drum-visual.blue:after{border-color:#103b7c}
.drum-visual.teal{background:linear-gradient(135deg,#c9efef,#9fd5da)}
.drum-visual.teal:before{border-color:#137d8b;background:linear-gradient(90deg,#1aa4ae,#0b6575 50%,#22aebb)}
.drum-visual.amber{background:linear-gradient(135deg,#f8eed6,#e2c286)}
.drum-visual.amber:before{border-color:#956a1b;background:linear-gradient(90deg,#dfab38,#936416 50%,#edc152)}
.drum-visual.clear{background:linear-gradient(135deg,#e7f7fb,#b4dce9)}
.drum-visual.clear:before{border-color:#7fa4b7;background:linear-gradient(90deg,#d9f4fa,#9acbd9 50%,#eafafd)}
.drum-visual.paa{background:linear-gradient(135deg,#c6f1ee,#83d6d1)}
.drum-visual.paa:before{border-color:#138d8b;background:linear-gradient(90deg,#faffff,#cfeeee 50%,#fff)}
.drum-visual.bag:before{width:78px;height:94px;border-radius:4px;background:linear-gradient(90deg,#f5f1e5,#d8cfb8 50%,#fffdf5)}
.drum-visual.bag:after{display:none}
.chemical-info{padding:18px}
.chemical-info .tag{margin:0 0 7px;color:var(--blue);font:700 9px var(--display);letter-spacing:1px}
.chemical-info h3{min-height:48px;margin:0 0 7px;font-size:17px;line-height:1.35}
.chemical-info h3 small{font-size:13px;font-weight:500}
.chemical-info>p:last-child{margin:0;color:var(--muted);font:11px/1.55 var(--display)}
.featured{border-top:3px solid var(--teal)}
.catalog-cta{padding:85px 0;background:var(--navy);color:#fff;text-align:center}
.catalog-cta .eyebrow{justify-content:center}
.catalog-cta p:not(.eyebrow){margin:16px 0 26px;color:#c4d6ee}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){.catalog-nav>a:not(.button){display:none}
.catalog-heading{align-items:flex-start;flex-direction:column}
.catalog-grid{grid-template-columns:repeat(2,1fr)}
.catalog-hero{min-height:390px}
}
@media(max-width:480px){.catalog-grid{grid-template-columns:1fr}
.chemical-card{min-height:0;display:grid;grid-template-columns:120px 1fr}
.drum-visual{height:auto;min-height:155px}
.chemical-info{padding:16px}
.chemical-info h3{min-height:auto}
.catalog-hero{padding:78px 0 55px}
.catalog-nav .button{padding:10px 12px;font-size:12px}
}