:root{
--ink:#0a0a0a; --ink-2:#565656; --line:#e4e4e4; --bg:#fff; --bg-2:#f5f5f5;
--muted:#8a8a8a;
--font:'Inter','Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif;
--display:'Archivo','Inter','Noto Sans SC',system-ui,sans-serif;
--hdr-h:74px; --ease:220ms cubic-bezier(.2,.7,.2,1);
} html{overflow-x:clip}
html{scroll-behavior:smooth} .site-header, .site-header *{box-sizing:border-box}
.site-header *{margin:0;padding:0} .site-header{position:sticky;top:0;z-index:1000;width:100%;background:var(--bg);
border-bottom:1px solid var(--line);transition:box-shadow var(--ease)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.07)} .site-header .hdr-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:var(--hdr-h);
display:flex;align-items:center;justify-content:space-between;gap:24px} .site-header .brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;transform:translateX(-14px)}
.site-header .brand-logo-img{height:40px;width:auto;display:block;filter:none} body.home .site-header:not(.scrolled):not(.nav-hover) .brand-logo-img{
filter:brightness(0) invert(1);
} .site-header .main-nav{display:flex;align-items:stretch;height:100%}
.site-header .main-nav ul{display:flex;align-items:stretch;list-style:none;height:100%}
.site-header .main-nav li{display:flex;align-items:stretch}
.site-header .main-nav li > a, .site-header .main-nav li > button.navlink{
display:flex;align-items:center;gap:6px;padding:0 18px;font:500 15px/1 var(--font);
color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
position:relative;white-space:nowrap;transition:color var(--ease)}
.site-header .main-nav li > a::after, .site-header .main-nav li > button.navlink::after{
content:"";position:absolute;left:18px;right:18px;bottom:22px;height:2px;
background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.site-header .main-nav li:hover > a::after, .site-header .main-nav li:hover > button.navlink::after,
.site-header .main-nav li.open > a::after, .site-header .main-nav li.open > button.navlink::after{transform:scaleX(1)}
.site-header .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(45deg);transition:transform var(--ease);margin-top:-3px;opacity:.7}
.site-header li.open .caret, .site-header li:hover .caret{transform:rotate(-135deg);margin-top:1px;opacity:1} .site-header .hdr-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
position:relative;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.site-header .icon-btn:hover{background:var(--bg-2);border-color:#cfcfcf}
.site-header .icon-btn svg{width:18px;height:18px}
.site-header .cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
background:var(--ink);color:#fff;border-radius:9px;font:700 11px/18px var(--display);
text-align:center;border:2px solid #fff}
.site-header .quote-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;
background:var(--ink);color:#fff;border:0;border-radius:6px;cursor:pointer;text-decoration:none;
font:600 14px/1 var(--display);letter-spacing:.02em;transition:opacity var(--ease)}
.site-header .quote-btn:hover{opacity:.85} .site-header .lang-switch{position:relative;display:flex;align-items:center}
.site-header .lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;
border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;
font:600 13px/1 var(--display);color:var(--ink);transition:border-color var(--ease),background var(--ease)}
.site-header .lang-btn:hover{border-color:#cfcfcf;background:var(--bg-2)}
.site-header .lang-btn svg{width:16px;height:16px}
.site-header .lang-btn .caret{width:6px;height:6px;margin-top:-2px}
.site-header .lang-switch.open .lang-btn .caret{transform:rotate(-135deg);margin-top:1px}
.site-header .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;background:#fff;
border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.12);
padding:6px;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity var(--ease),transform var(--ease),visibility 0s linear .2s;z-index:6}
.site-header .lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity var(--ease),transform var(--ease),visibility 0s}
.site-header .lang-menu li a{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 12px;border-radius:6px;font:500 14px/1 var(--font);color:var(--ink);
text-decoration:none;transition:background var(--ease)}
.site-header .lang-menu li a:hover{background:var(--bg-2)}
.site-header .lang-menu li a.active{font-weight:700}
.site-header .lang-menu li a .tick{width:15px;height:15px;opacity:0;flex-shrink:0}
.site-header .lang-menu li a.active .tick{opacity:1}
.site-header .burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:6px;
cursor:pointer;align-items:center;justify-content:center}
.site-header .burger svg{width:22px;height:22px} .site-header .mega{position:absolute;top:100%;left:0;width:100%;background:#fff;
border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(0,0,0,.10);
opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
transition:opacity var(--ease),transform var(--ease),visibility 0s linear .25s}
.site-header.nav-open .mega.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity var(--ease),transform var(--ease),visibility 0s}
.site-header .mega-inner{max-width:1200px;margin:0 auto;padding:40px 24px 0;
display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:0}
.site-header .mega-col{padding:0 28px;border-left:1px solid var(--line)}
.site-header .mega-col:first-child{padding-left:0;border-left:0}
.site-header .mega-col:last-child{padding-right:0}
.site-header .mega-h{font:600 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-bottom:18px}
.site-header .mega-col ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.site-header .mega-col li a{display:block;padding:9px 10px;margin:0 -10px;border-radius:6px;
font:500 14.5px/1.35 var(--font);color:var(--ink);text-decoration:none;
transition:background var(--ease),color var(--ease)}
.site-header .mega-col li a:hover{background:var(--bg-2);color:var(--ink)}
.site-header .mega-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 13px/1 var(--display);
color:var(--ink);text-decoration:none}
.site-header .mega-more:hover{gap:10px} .site-header .feat-card{background:var(--bg-2);border-radius:12px;overflow:hidden;display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px}
.site-header .feat-card img{width:auto;max-width:170px;max-height:128px;height:auto;object-fit:contain;display:block;border-radius:8px;flex:0 0 auto}
.site-header .feat-card .fc-body{padding:0}
.site-header .feat-card .fc-tag{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.12em;
text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 8px;border-radius:4px;margin-bottom:6px}
.site-header .feat-card .fc-t{font:600 15px/1.3 var(--display);color:var(--ink);margin-bottom:4px}
.site-header .feat-card .fc-d{display:none} .site-header .mega-bg{position:fixed;inset:var(--hdr-h) 0 0 0;background:transparent;opacity:0;visibility:hidden;z-index:-1;display:none}
.site-header.nav-open .mega-bg{opacity:1;visibility:visible;display:block} @media(max-width:980px){
.site-header .main-nav{display:none}
.site-header .quote-btn span{display:none}
.site-header .burger{display:flex}
.site-header .mega{display:none!important}
} html .search-overlay{
position:fixed; inset:0; z-index:9999;
background:rgba(10,10,10,.78);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
display:flex; align-items:flex-start; justify-content:center;
opacity:0; visibility:hidden;
transition:opacity .28s ease, visibility .28s ease;
}
html .search-overlay.open{ opacity:1; visibility:visible; }
html .search-overlay-inner{
position:relative; width:100%; max-width:680px;
margin-top:clamp(80px,16vh,180px); padding:0 24px;
}
html .search-overlay-inner form{
display:flex; align-items:center; gap:12px;
background:#fff; border:0; border-radius:999px;
padding:8px 8px 8px 22px;
box-shadow:0 24px 60px rgba(0,0,0,.30);
transform:translateY(-14px); opacity:0;
transition:transform .3s ease, opacity .3s ease;
}
html .search-overlay.open .search-overlay-inner form{
transform:translateY(0); opacity:1;
} html .search-input{
flex:1; min-width:0; border:0; outline:0; background:transparent;
color:#0a0a0a; font:400 18px/1.4 "Inter",'Noto Sans SC',sans-serif;
padding:10px 0 10px 38px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%239a9a9a%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2711%27%20cy=%2711%27%20r=%278%27/%3E%3Cpath%20d=%27M21%2021l-4.35-4.35%27/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:0 center; background-size:22px 22px;
}
html .search-input::placeholder{ color:#9a9a9a; }
html .search-input::-webkit-search-cancel-button{ display:none; } html .search-go{
flex:0 0 auto; width:46px; height:46px; border:0; cursor:pointer;
border-radius:50%; color:transparent; font-size:0; line-height:0;
background-color:#0a0a0a;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2711%27%20cy=%2711%27%20r=%278%27/%3E%3Cpath%20d=%27M21%2021l-4.35-4.35%27/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:20px 20px;
transition:background-color .2s ease;
}
html .search-go:hover{ background-color:#333; } html .search-close{
position:absolute; top:-52px; right:24px;
width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
color:transparent; font-size:0; line-height:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M6%206l12%2012M18%206L6%2018%27/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:20px 20px;
transition:background-color .2s ease;
}
html .search-close:hover{ background-color:rgba(255,255,255,.26); }
@media(max-width:600px){
.site-header .brand-logo-img{height:30px;width:auto;max-width:170px;object-fit:contain;}
html .search-overlay-inner{ margin-top:90px; padding:0 18px; }
} .site-header .lang-switch{display:none} .dfm-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.5);opacity:0;visibility:hidden;display:none;
transition:opacity .3s var(--ease),visibility 0s linear .3s;z-index:1100}
.dfm-drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,380px);background:#fff;z-index:1200;
transform:translateX(100%);transition:transform .34s var(--ease);display:flex;flex-direction:column;
box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.dfm-drawer__top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.dfm-drawer__top img{height:34px;width:auto;display:block}
.dfm-close{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--ink)}
.dfm-nav{list-style:none;margin:0;padding:8px 0;overflow-y:auto;flex:1}
.dfm-nav li{border-bottom:1px solid var(--line)}
.dfm-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 22px;
font:600 16px/1.2 var(--display);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.dfm-link .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform .25s var(--ease);flex-shrink:0;margin-top:-3px}
.dfm-link[aria-expanded="true"] .caret{transform:rotate(-135deg);margin-top:1px}
.dfm-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease);background:var(--bg-2)}
.dfm-sub.open{max-height:560px}
.dfm-sub a{display:block;padding:12px 22px 12px 38px;font:500 14.5px/1.35 var(--font);color:var(--ink-2);text-decoration:none}
.dfm-sub a:hover{color:var(--ink)}
.dfm-foot{padding:16px 20px;border-top:1px solid var(--line)}
.dfm-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;background:var(--ink);color:#fff;border-radius:8px;
font:600 15px/1 var(--display);text-decoration:none}
body.drawer-open{overflow:hidden}
body.drawer-open .dfm-backdrop{opacity:1;visibility:visible;display:flex;transition:opacity .3s var(--ease)}
body.drawer-open .dfm-drawer{transform:translateX(0)} @media(max-width:980px){
.dfm-drawer{display:flex}
}
@media(min-width:981px){
.dfm-backdrop,.dfm-drawer{display:none}
body.drawer-open{overflow:visible}
} body.home .site-header:not(.scrolled):hover:not(.nav-hover) {
position: absolute;
top: 0;
left: 0;
right: 0;
} .dfm-search{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line)}
.dfm-search__input{flex:1;min-width:0;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:8px;
font:500 14px/1 var(--font);color:var(--ink);background:#fff;outline:none}
.dfm-search__input:focus{border-color:var(--ink)}
.dfm-search__go{height:42px;padding:0 18px;border:0;border-radius:8px;background:var(--ink);color:#fff;
font:600 14px/1 var(--display);cursor:pointer}
.dfm-search__go:hover{opacity:.85} a.vp__cta, a.svc__btn, a.dfm-cta { cursor: pointer; } .site-header .mega,
.site-header .mega-col li{color:var(--ink)}