/* ===== Consistente Fashiontiek header op alle pagina's ===== */

.site-header,
.account-header{
  width:min(1180px, calc(100% - 32px)) !important;
  height:78px !important;
  min-height:78px !important;
  margin:18px auto 0 !important;
  padding:0 18px !important;
  border:1px solid rgba(17,17,17,.08) !important;
  border-radius:999px !important;
  background:rgba(255,253,250,.92) !important;
  backdrop-filter:blur(12px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-shadow:0 10px 30px rgba(0,0,0,.04) !important;
}

.brand,
.logo-link,
.account-logo{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}

.brand-logo,
.logo-link img,
.account-logo img{
  height:48px !important;
  width:auto !important;
  max-width:190px !important;
  object-fit:contain !important;
  display:block !important;
}

.nav,
.account-nav{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

.nav a:not(.nav-button),
.account-nav a:not(.nav-button),
.account-back{
  font-size:14px !important;
  line-height:1 !important;
  color:#5f5a53 !important;
  font-weight:600 !important;
}

.nav-button,
.top-button,
.account-back{
  height:42px !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  background:#111 !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

/* oude account button-styling neutraliseren */
.account-back{
  text-decoration:none !important;
}

@media (max-width:680px){
  .site-header,
  .account-header{
    width:calc(100% - 20px) !important;
    height:auto !important;
    min-height:78px !important;
    padding:14px !important;
    border-radius:24px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  .brand-logo,
  .logo-link img,
  .account-logo img{
    height:42px !important;
  }

  .nav,
  .account-nav{
    width:100% !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .nav a,
  .account-nav a{
    height:40px !important;
    border:1px solid rgba(17,17,17,.08) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.72) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .nav-button{
    grid-column:1 / -1 !important;
    background:#111 !important;
    color:#fff !important;
  }

  .top-button,
  .account-back{
    align-self:flex-end !important;
  }
}