header{top:0;left:0;right:0;position:fixed;z-index:10;background-color:var(--main-color);color:#fff;flex:0 0 auto;box-shadow:0 0 10px rgba(0,0,0,.3)}header>.container{display:grid;align-items:center;grid-template-columns:1fr minmax(100px, 300px) min-content;grid-template-areas:"logo search action";height:55px}@media(max-width: 700px){header>.container{grid-template-columns:1fr min-content;grid-template-areas:"logo action" "search search";padding-bottom:6px;height:105px}}header .logo{flex:1 1 auto;margin-right:15px}header .search{flex:0 1 300px;position:relative;grid-area:search}header .search input{width:100%;border-radius:22px;height:44px;border:2px solid hsla(0,0%,100%,.3);padding-right:50px;padding-left:18px;font-weight:bold;caret-color:var(--color-orange)}header .search input:focus{box-shadow:0 0 0 2px var(--color-orange)}header .search input::placeholder{color:gray;font-weight:normal !important}header .search button{position:absolute;background-color:var(--color-orange);color:#fff;min-width:40px;height:40px;top:2px;right:2px;overflow:hidden;border-radius:20px;border:0}header .search button::before{font-family:var(--icon-font);font-weight:600;color:#fff}header .search button span{opacity:0;position:absolute;transform:translateX(100%);transition:all .2s ease-in-out}header .search button:hover span{opacity:1;transform:translateX(0)}header .categories{background-color:hsla(0,0%,100%,.1);height:40px;display:flex}header .categories .container{display:flex}header .categories a{padding:0 15px;cursor:pointer;color:#fff;font-weight:bold;display:flex;align-items:center;text-decoration:underline}header .categories a:hover{text-decoration:none;background-color:hsla(0,0%,100%,.1)}@media(max-width: 700px){header .categories{display:none}}header .actions{margin-left:10px;white-space:nowrap;display:flex}header .actions a{color:inherit;text-decoration:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;position:relative;font-size:85%}@media(max-width: 600px){header .actions a{padding:8px 5px;font-size:80%}}header .actions a::before{font-family:var(--icon-font);font-weight:300;font-size:20px;height:25px}header .actions a>span{text-decoration:underline;text-decoration-color:hsla(0,0%,100%,0);transition:text-decoration-color .2s ease-in-out}header .actions a[data-count]::after{position:absolute;border-radius:16px;background-color:var(--color-orange);color:#fff;text-shadow:1px 1px 0px #000;font-weight:bold;font-size:9pt;top:5px;left:calc(50% + 8px);display:inline-flex;align-items:center;justify-content:center;padding:0 1px;min-width:16px;height:16px;content:attr(data-count)}header .actions a[data-count][data-count="0"]::after{transform:scale(0);opacity:0}header .actions a[data-count]:not([data-count="0"])::after{animation:scale-in 1.5s ease-in-out 1}@keyframes scale-in{0%{opacity:0;transform:scale(0)}30%,100%{opacity:1}40%,50%{transform:scale(1.3)}100%{transform:scale(1)}}header .actions a:hover::before{font-weight:900}header .actions a:hover>span{text-decoration-color:#fff}@media(max-width: 500px){header .actions a:nth-child(2){display:none}}@media(max-width: 450px){header .actions a:nth-child(1){display:none}}@media(max-width: 375px){header .actions a:nth-child(3){display:none}}header .actions label.menu{position:relative;cursor:pointer;padding:5px;margin-left:5px;width:45px;flex:0 0 45px;display:none;flex-direction:column;align-items:stretch;justify-content:center}@media(max-width: 600px){header .actions label.menu{display:flex}}header .actions label.menu i{height:4px;border-radius:2px;background-color:#fff;margin:4px 0}
