:root{--catalog-header-height:76px}
body{padding-top:var(--catalog-header-height)}
#app{width:100%;min-width:0}
.header.catalog-header{position:fixed;inset:0 0 auto;height:var(--catalog-header-height);display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(190px,260px);gap:clamp(16px,2vw,30px);padding:0 clamp(16px,3vw,46px);background:#fbf9f4;border-bottom:1px solid var(--line);z-index:30}
.catalog-title{font-size:18px;font-weight:600;letter-spacing:.025em;white-space:nowrap}
.header .main-nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;align-self:stretch;gap:clamp(6px,1vw,15px);min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c9bdb1 transparent}
.header .space-nav-item{flex:0 0 auto;align-self:stretch;padding:0 9px;border:0;border-bottom:2px solid transparent;background:transparent;color:#766b61;font-size:13px;white-space:nowrap;opacity:1;cursor:default}
.space-nav-item:first-child{margin-left:auto}.space-nav-item:last-child{margin-right:auto}
.header .space-nav-item:not(:disabled){cursor:pointer}
.header .space-nav-item.is-active{color:#604735;font-weight:600;border-bottom-color:#9a6f4f}
.header .space-nav-item:focus-visible{outline:2px solid #9a6f4f;outline-offset:-4px}
.header .search-box{display:flex;align-items:center;min-width:0;width:100%;margin:0;border:0;border-bottom:1px solid #b9aea3}
.header .search-box:focus-within{border-color:#584a40}
.header .search-box input{display:block;width:100%;min-width:0;padding:10px 0;border:0;background:transparent;font-size:13px;color:var(--ink)}
.header .search-box input::placeholder{color:#95897d}
.search-icon{flex:0 0 auto;padding-left:7px;font-size:22px;color:#8b7c6f;line-height:1}
@media(max-width:700px){
  :root{--catalog-header-height:104px}
  .header.catalog-header{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:55px 49px;column-gap:18px;row-gap:0;padding:0 16px}
  .catalog-title{grid-column:1;grid-row:1;font-size:16px}
  .header .search-box{grid-column:2;grid-row:1}
  .header .search-box input{font-size:12px}
  .header .main-nav{grid-column:1/-1;grid-row:2;gap:9px}
  .header .space-nav-item{padding:0 11px}
}
@media(max-width:380px){
  .header.catalog-header{padding:0 12px;column-gap:12px}
  .catalog-title{font-size:14px}
  .header .main-nav{gap:6px}
}