/* Entrance animations. Only hidden when JS is on, so content is never lost without it. */
html.js [data-reveal] { opacity: 0.001; transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
html.js [data-reveal="up"] { transform: translateY(40px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

html.js .letter { opacity: 0.001; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.letter { display: inline-block; }
html.js .letter.is-in { opacity: 1; transform: none; }

/* Marquees: --ticker-distance and --ticker-duration are measured in site.js. */
@keyframes ticker { to { transform: translateX(calc(-1 * var(--ticker-distance))); } }
ul.is-ticking { animation: ticker var(--ticker-duration) linear infinite; will-change: transform; }

/* Products dropdown */
.el-1smc4hn-container { position: relative; }
.el-km76k-container { transition: transform .25s ease; }
.el-1smc4hn-container:hover .el-km76k-container,
.el-1smc4hn-container:focus-within .el-km76k-container { transform: rotate(-180deg) !important; }
.nav-dropdown { position: absolute; top: 100%; left: 50%; width: 212px; margin-left: -106px; padding-top: 10px; z-index: 20;
  visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.el-1smc4hn-container:hover .nav-dropdown,
.el-1smc4hn-container:focus-within .nav-dropdown { visibility: visible; opacity: 1; transform: none; }
:has(> header), :has(> .ssr-variant > header) { z-index: 100 !important; }
@media (min-width: 810px) { header, header .el-73wlpn { overflow: visible !important; } }
.nav-dropdown-panel { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 6px; background: #fafafa; border-radius: 10px; box-shadow: rgba(0,0,0,.05) 0 10px 20px; }
.nav-dropdown-panel a { display: flex; align-items: center; height: 38.2px; padding: 0 12px; border-radius: 5px; text-decoration: none; transition: background-color .2s ease; }
.nav-dropdown-panel a:hover { background: #e9ecf2; }
.nav-dropdown-panel p { margin: 0; --el-text-color: #2b3c8e; }

/* Phone slideshows: native swipe with snap points, dots wired up in site.js. */
.slider { position: relative; width: 100%; height: 100%; }
.slider-track { display: flex; gap: 20px; height: calc(100% - 50px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.slider-dots { display: none; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; }
html.js .slider-dots { display: flex; }
.slider-dots button { width: 20px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2b3c8e; opacity: .5; transition: opacity .2s ease; }
.slider-dots button.is-active::before { opacity: 1; }

/* Button hover: the circle grows to fill the pill and the label turns white. */
.el-FuT43, .el-KUErl, .el-P5gpr, .el-2Yf6V, .el-RYLAd, .el-yTMGK, .el-RSxnR, .el-29rWa, .el-I3ruD { overflow: hidden; }
.el-ecdes7, .el-1d7gmpj, .el-14bdkhh, .el-ymyksa, .el-26kibo, .el-1xd9i7x, .el-4dud69, .el-18bb8ix, .el-15hv2zz { transition: transform .4s ease; }
.el-FuT43 p, .el-KUErl p, .el-P5gpr p, .el-2Yf6V p, .el-RYLAd p, .el-yTMGK p, .el-RSxnR p, .el-29rWa p, .el-I3ruD p { transition: color .25s ease; position: relative; z-index: 2; }
.el-FuT43:hover p, .el-KUErl:hover p, .el-P5gpr:hover p, .el-2Yf6V:hover p, .el-RYLAd:hover p, .el-yTMGK:hover p, .el-RSxnR:hover p, .el-29rWa:hover p, .el-I3ruD:hover p { --el-text-color: #fefefe !important; color: #fefefe !important; }
.el-FuT43:hover .el-ecdes7 { transform: scale(10) !important; }
.el-KUErl:hover .el-1d7gmpj, .el-P5gpr:hover .el-14bdkhh, .el-2Yf6V:hover .el-ymyksa, .el-RYLAd:hover .el-26kibo, .el-yTMGK:hover .el-1xd9i7x, .el-RSxnR:hover .el-4dud69, .el-29rWa:hover .el-18bb8ix, .el-I3ruD:hover .el-15hv2zz { transform: scale(18) !important; }
.el-ghow83, .el-hle8w5, .el-st1ojv, .el-k4t04m, .el-fcfesa, .el-1ref7gg, .el-16yhp13, .el-uf7jv0, .el-14y2jr4 { z-index: 2; }
.el-ghow83 { transition: transform .4s ease; }
.el-FuT43:hover .el-ghow83 { transform: rotate(0deg) !important; color: #fff; }

/* Catalogue download badge on product images */
.el-du9pb1, .el-jmp54t { transition: background-color .25s ease, color .25s ease; }
.el-92l1i:hover .el-du9pb1 { background-color: #ebeef3 !important; }
.el-92l1i:hover .el-jmp54t { color: #2b3c8e !important; }

/* Mobile menu close icon is dark on every page, even where the closed header is white-on-blue */
.el-v-plh6ns .el-a7zrr8, .el-v-plh6ns .el-1rcw8my { background-color: #2b3c8e !important; }

[data-whatsapp]:hover { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .letter { opacity: 1; transform: none; transition: none; }
  ul.is-ticking { animation: none; }
}