header{position:absolute;width:100%;top:clamp(1.25rem,1.1337rem + 0.3876vw,1.5rem);z-index:900}header .inside{width:clamp(87.75rem,22.4656rem + 69.084vw,133rem);max-width:93vw;margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:clamp(1.5rem,1.2674rem + 0.7752vw,2rem);padding-block:1rem;padding-inline:2rem 1.125rem;background-color:rgba(252,251,246,.75);backdrop-filter:blur(0.75rem);-webkit-backdrop-filter:blur(0.75rem);border-radius:20px}header .header-logo{display:block;flex-shrink:0}header .header-logo .okal-logo{display:block}header .header-nav{flex:1;display:flex;justify-content:center}@media only screen and (max-width: 1079.98px){header .header-nav{display:none}}header .header-nav .nav-toplevel{display:flex;align-items:center;gap:clamp(1.5rem,1.0349rem + 1.5504vw,2.5rem);list-style:none;margin:0;padding:0}header .header-nav .nav-toplevel li{position:relative}header .header-nav .nav-toplevel li::after{content:"";position:absolute;bottom:-0.375rem;left:50%;right:50%;height:2px;background-color:#aca985;border-radius:1px;transition:left .25s cubic-bezier(0.22, 1, 0.36, 1),right .25s cubic-bezier(0.22, 1, 0.36, 1)}header .header-nav .nav-toplevel li:hover,header .header-nav .nav-toplevel li.is-current,header .header-nav .nav-toplevel li.active,header .header-nav .nav-toplevel li.trail{color:#36332c}header .header-nav .nav-toplevel li:hover::after,header .header-nav .nav-toplevel li.is-current::after,header .header-nav .nav-toplevel li.active::after,header .header-nav .nav-toplevel li.trail::after{left:0;right:0}header .header-nav .nav-toplevel button{font-family:"Inter",sans-serif;font-size:clamp(0.8125rem,0.7544rem + 0.1938vw,0.9375rem);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#564e46;padding:0;margin:0;border:0;background:rgba(0,0,0,0);text-decoration:none;transition:color .2s ease;cursor:pointer}header .header-right{display:flex;align-items:center;flex-shrink:0}@media only screen and (max-width: 1079.98px){header .header-right{display:none}}header .header-user{display:flex;align-items:center;justify-content:center;color:#69628c;margin-inline-end:clamp(1.5rem,1.2674rem + 0.7752vw,2rem)}header .header-user svg{width:1.25rem;height:1.25rem}header .header-favorites{position:relative;display:flex;align-items:center;justify-content:center;color:#69628c;margin-inline-end:clamp(1.5rem,1.2674rem + 0.7752vw,2rem)}header .header-favorites[hidden]{display:none}header .header-favorites [hidden]{display:none}header .header-favorites svg{width:1.25rem;height:1.25rem}header .header-favorites-badge{position:absolute;top:-0.5rem;right:-0.5rem;display:flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;border-radius:40px;background-color:#69628c;color:#fcfbf6;font-family:"Inter",sans-serif;font-size:.5625rem;font-weight:600;line-height:1}header .header-user:has(+.header-favorites:not([hidden])){margin-right:1.25rem}header .btn+.btn{margin-inline-start:.5rem}header .header-burger{flex-shrink:0;display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;background:rgba(0,0,0,0);border:none;cursor:pointer}header .header-burger span{display:block;width:24px;height:2px;background-color:#564e46;border-radius:2px;transform-origin:center;transition:transform .2s ease,opacity .2s ease}header .header-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}header .header-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}header .header-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media only screen and (max-width: 1079.98px){header .header-burger{display:flex}}header .header-back{position:absolute;top:50%;left:clamp(1.5rem,1.2674rem + 0.7752vw,2rem);display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0);width:2.5rem;height:2.5rem;padding:.625rem;border:none;color:#564e46;opacity:0;transform:translateY(-50%) translateX(30vw);transition:opacity .25s ease,transform .3s ease;z-index:2;pointer-events:none;cursor:pointer}header .header-back svg{display:block;width:100%;height:auto}@media only screen and (max-width: 1079.98px){header .inside{padding-inline:clamp(1.5rem,1.2674rem + 0.7752vw,2rem);gap:0}header .header-logo{margin-inline-end:auto;transition:opacity .25s ease,transform .3s ease}header .header-right{display:flex}header .header-right .btn{display:none}header .header-favorites,header .header-user-icon{margin-inline-end:0}header .header-back{display:flex}header .header-right+.header-burger{margin-left:clamp(1.25rem,1.1337rem + 0.3876vw,1.5rem)}}header .btn-ghost,.main-nav-container .btn-ghost{font-family:"Inter",sans-serif;font-size:clamp(0.875rem,0.8459rem + 0.0969vw,0.9375rem);font-weight:500;line-height:1.2;letter-spacing:1%;display:inline-flex;justify-content:center;align-items:center;gap:1.125rem;padding:1.1875rem 1.625rem;color:#fcfbf6;text-align:center;border:none;text-decoration:none;border-radius:8px;background-color:#69628c;cursor:pointer;transition:all .4s ease;gap:.875rem;min-width:7.5rem;padding:.75rem 1.25rem;background-color:#e8e7d7;color:#36332c}header .btn-ghost:after,.main-nav-container .btn-ghost:after{display:inline-block;width:.875rem;height:.8125rem;flex-shrink:0;background:url(/bundles/okal/icons/icon-arrow-right.svg) center/100% auto no-repeat}header .btn-ghost:hover,.main-nav-container .btn-ghost:hover{background-color:#5a5578}header .btn-ghost:hover,.main-nav-container .btn-ghost:hover{background-color:#d9d8c3}header .btn-ghost::after,.main-nav-container .btn-ghost::after{display:none}header .btn-primary,.main-nav-container .btn-primary{font-family:"Inter",sans-serif;font-size:clamp(0.875rem,0.8459rem + 0.0969vw,0.9375rem);font-weight:500;line-height:1.2;letter-spacing:1%;display:inline-flex;justify-content:center;align-items:center;gap:1.125rem;padding:1.1875rem 1.625rem;color:#fcfbf6;text-align:center;border:none;text-decoration:none;border-radius:8px;background-color:#69628c;cursor:pointer;transition:all .4s ease;gap:.875rem;min-width:7.5rem;padding:.75rem 1.25rem}header .btn-primary:after,.main-nav-container .btn-primary:after{display:inline-block;width:.875rem;height:.8125rem;flex-shrink:0;background:url(/bundles/okal/icons/icon-arrow-right.svg) center/100% auto no-repeat}header .btn-primary:hover,.main-nav-container .btn-primary:hover{background-color:#5a5578}@media only screen and (max-width: 1079.98px){body.nav-sub-active .header-logo{opacity:0;transform:translateX(-2.5rem);pointer-events:none}body.nav-sub-active .header-back{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}}