/* ChausX global content catalogue */
body.chxHubContentActive>.app{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:
    radial-gradient(circle at 12% 0,rgba(61,222,255,.13),transparent 29%),
    radial-gradient(circle at 91% 12%,rgba(157,92,255,.12),transparent 28%),
    linear-gradient(145deg,#07141f 0%,#030914 55%,#080716 100%)!important;
}
body.chxHubContentActive #content{min-height:100%;background:transparent!important}
.chxCatalogScreen{
  box-sizing:border-box;
  width:100%;
  min-height:100%;
  padding:clamp(24px,2.7vw,52px) clamp(18px,2.6vw,54px) 72px;
}
.chxCatalogHeader{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:30px;
  padding-bottom:clamp(22px,2.2vw,34px);
  border-bottom:1px solid rgba(103,221,248,.2);
}
.chxCatalogHeader::after{
  position:absolute;
  bottom:-1px;
  left:0;
  width:min(320px,42vw);
  height:2px;
  content:"";
  background:linear-gradient(90deg,#64e5ff,rgba(169,103,255,.78),transparent);
  box-shadow:0 0 20px rgba(92,224,253,.3);
}
.chxCatalogHeader>div>span{
  color:#69e5fd;
  font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.32em;
}
.chxCatalogHeader h2{
  margin:10px 0 8px;
  color:#f7fbff;
  font:1000 clamp(44px,5vw,82px)/.9 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.075em;
}
.chxCatalogHeader p{
  max-width:720px;
  margin:0;
  color:#8da8b7;
  font:650 clamp(11px,.82vw,14px)/1.5 Inter,"Segoe UI",Arial,sans-serif;
}
.chxCatalogHeader>aside{
  min-width:180px;
  display:grid;
  justify-items:end;
  gap:8px;
  padding:14px 0 8px 28px;
  border-left:1px solid rgba(102,226,251,.2);
}
.chxCatalogHeader>aside strong{
  color:#6ce7ff;
  font:1000 clamp(34px,3vw,54px)/.8 Inter,"Segoe UI",Arial,sans-serif;
  text-shadow:0 0 23px rgba(100,228,252,.24);
}
.chxCatalogHeader>aside span{
  color:#819eac;
  font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.15em;
}
.chxCatalogTabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:clamp(18px,2vw,28px);
}
.chxCatalogTabs button{
  min-width:0;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 17px;
  border:1px solid rgba(92,197,224,.2);
  color:#8ba7b5;
  background:rgba(4,17,29,.7);
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.chxCatalogTabs button:hover,.chxCatalogTabs button:focus-visible{
  outline:0;
  color:#f5fcff;
  border-color:rgba(103,226,251,.58);
  background:rgba(8,30,44,.88);
}
.chxCatalogTabs button.active{
  color:#06151d;
  border-color:#6ce8ff;
  background:linear-gradient(125deg,#66e4fd,#a0efff);
  box-shadow:0 0 25px rgba(102,228,253,.15);
}
.chxCatalogTabs span{overflow:hidden;font:1000 clamp(9px,.72vw,12px)/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em;text-overflow:ellipsis;white-space:nowrap}
.chxCatalogTabs strong{min-width:24px;font:1000 10px/1 Inter,"Segoe UI",Arial,sans-serif;text-align:right}
.chxCatalogToolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(200px,280px) auto auto;
  align-items:end;
  gap:10px;
  margin:16px 0 clamp(24px,2.8vw,42px);
}
.chxCatalogSearch{
  position:relative;
  min-width:0;
}
.chxCatalogSearch>span{
  position:absolute;
  z-index:1;
  top:50%;
  left:15px;
  width:11px;
  height:11px;
  border:2px solid #68dff7;
  border-radius:50%;
  transform:translateY(-58%);
  pointer-events:none;
}
.chxCatalogSearch>span::after{position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:#68dff7;content:"";transform:rotate(45deg)}
.chxCatalogSearch input,.chxCatalogSeries select{
  box-sizing:border-box;
  width:100%;
  height:48px;
  border:1px solid rgba(99,225,250,.28);
  border-radius:2px;
  outline:0;
  color:#ecfbff;
  background:rgba(5,20,31,.88);
  font:750 11px/1 Inter,"Segoe UI",Arial,sans-serif;
}
.chxCatalogSearch input{padding:0 16px 0 44px}
.chxCatalogSearch input::placeholder{color:#6f8b9a}
.chxCatalogSearch input:focus,.chxCatalogSeries select:focus{border-color:#6ce7ff;box-shadow:0 0 0 2px rgba(108,231,255,.08)}
.chxCatalogSeries{display:grid;gap:7px}
.chxCatalogSeries>span{color:#69dff7;font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.16em}
.chxCatalogSeries select{padding:0 36px 0 13px;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.chxCatalogUnlockedToggle{
  min-width:205px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px!important;
  border:1px solid rgba(99,225,250,.27)!important;
  border-radius:2px!important;
  color:#8da8b6!important;
  background:rgba(5,20,31,.88)!important;
  box-shadow:none!important;
  cursor:pointer;
}
.chxCatalogUnlockedToggle i{width:15px;height:15px;display:grid;place-items:center;border:1px solid rgba(108,226,250,.55);border-radius:2px}
.chxCatalogUnlockedToggle i::after{width:7px;height:4px;border-left:2px solid #07151c;border-bottom:2px solid #07151c;content:"";opacity:0;transform:rotate(-45deg) translateY(-1px)}
.chxCatalogUnlockedToggle span{font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.1em;white-space:nowrap}
.chxCatalogUnlockedToggle:hover,.chxCatalogUnlockedToggle:focus-visible{outline:0!important;color:#effcff!important;border-color:#6ce7ff!important}
.chxCatalogUnlockedToggle.active{color:#06151d!important;border-color:#6ce7ff!important;background:linear-gradient(125deg,#67e5fd,#9beeff)!important}
.chxCatalogUnlockedToggle.active i{border-color:#07151c;background:#78e9ff}
.chxCatalogUnlockedToggle.active i::after{opacity:1}
.chxCatalogResultCount{
  min-width:112px;
  height:48px;
  display:grid;
  align-content:center;
  justify-items:end;
  gap:4px;
}
.chxCatalogResultCount strong{color:#f4fcff;font:1000 18px/1 Inter,"Segoe UI",Arial,sans-serif}
.chxCatalogResultCount span{color:#718d9b;font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.11em;white-space:nowrap}
.chxCatalogGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:stretch;
  gap:clamp(13px,1.35vw,22px);
}
.chxCatalogItem{
  position:relative;
  min-width:0;
  display:flex!important;
  flex-direction:column;
  appearance:none;
  padding:0!important;
  overflow:hidden;
  border:1px solid rgba(91,190,221,.2)!important;
  border-radius:3px!important;
  color:#fff;
  background:linear-gradient(155deg,rgba(8,27,40,.94),rgba(4,10,18,.97))!important;
  box-shadow:0 14px 32px rgba(0,0,0,.23)!important;
  text-align:left;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease;
}
.chxCatalogItem:hover,.chxCatalogItem:focus-visible{
  outline:0;
  transform:translateY(-5px);
  border-color:rgba(104,229,253,.7)!important;
  box-shadow:0 21px 42px rgba(0,0,0,.34),0 0 26px rgba(76,214,245,.13)!important;
  filter:brightness(1.06);
}
.chxCatalogItemVisual{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    linear-gradient(rgba(71,202,233,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,202,233,.045) 1px,transparent 1px),#06111b;
  background-size:25px 25px;
}
.chxCatalogItemVisual::after{position:absolute;inset:0;border-bottom:1px solid rgba(98,220,249,.16);background:linear-gradient(180deg,transparent 68%,rgba(1,7,12,.3));content:"";pointer-events:none}
.chxCatalogItemVisual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .42s cubic-bezier(.2,.75,.2,1),filter .25s ease}
.chxCatalogItem:hover .chxCatalogItemVisual img{transform:scale(1.035)}
.chxCatalogItem-character .chxCatalogItemVisual img,.chxCatalogItem-outfit .chxCatalogItemVisual img{object-fit:contain;object-position:center top}
.chxCatalogItem-card .chxCatalogItemVisual img{object-fit:contain}
.chxCatalogItem-wardrobe .chxCatalogItemVisual img{object-position:center}
.chxCatalogItemVisual>i{color:rgba(102,227,252,.34);font:1000 clamp(52px,5vw,88px)/1 Inter,"Segoe UI",Arial,sans-serif;font-style:normal}
.chxCatalogAccess{
  position:absolute;
  z-index:3;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(102,225,250,.34);
  border-radius:2px;
  color:#9fb5c0;
  background:rgba(3,12,20,.76);
  backdrop-filter:blur(8px);
}
.chxCatalogAccess b{font:1000 7px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.13em}
.chxCatalogAccess svg{width:12px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.chxCatalogAccess.isUnlocked{color:#69e7ff;border-color:rgba(105,231,255,.42)}
.chxCatalogItem.isLocked .chxCatalogItemVisual img{filter:grayscale(.42) brightness(.54) saturate(.55)}
.chxCatalogItem.isUnlocking{pointer-events:none;filter:brightness(.72)}
.chxCatalogItemCopy{flex:1;min-height:104px;display:flex;flex-direction:column;padding:14px 16px 15px}
.chxCatalogItemCopy small{color:#65e1fa;font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.16em}
.chxCatalogItemCopy strong{overflow:hidden;margin-top:8px;color:#f6fbff;font:1000 clamp(14px,1vw,18px)/1.15 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}
.chxCatalogItemCopy em{overflow:hidden;margin-top:6px;color:#819dac;font:700 10px/1.2 Inter,"Segoe UI",Arial,sans-serif;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.chxCatalogItemCopy>span{margin-top:auto;padding-top:11px;color:#6ddff7;font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em}
.chxCatalogItem .chxContentNewBadge{top:9px;left:9px;right:auto}
.chxCatalogEmpty{grid-column:1/-1;min-height:260px;display:grid;place-content:center;justify-items:center;gap:10px;border:1px dashed rgba(100,222,249,.18);background:rgba(5,17,27,.34);text-align:center}
.chxCatalogEmpty strong{color:#dff8ff;font:1000 13px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.13em}
.chxCatalogEmpty span{max-width:480px;color:#738e9c;font:700 11px/1.45 Inter,"Segoe UI",Arial,sans-serif}

/* The first News tab is the cross-category All view. */
.chxNewsTabs{grid-template-columns:repeat(5,minmax(0,1fr))}

@media(max-width:1250px){
  .chxCatalogToolbar{grid-template-columns:minmax(240px,1fr) minmax(190px,250px) auto}
  .chxCatalogResultCount{grid-column:1/-1;height:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px}
}
@media(max-width:900px){
  .chxCatalogHeader{grid-template-columns:1fr}
  .chxCatalogHeader>aside{justify-items:start;padding:12px 0 0;border-top:1px solid rgba(102,226,251,.15);border-left:0}
  .chxCatalogTabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chxCatalogTabs button:last-child{grid-column:1/-1}
  .chxCatalogToolbar{grid-template-columns:1fr 1fr}
  .chxCatalogUnlockedToggle{min-width:0;width:100%}
  .chxNewsTabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .chxCatalogScreen{padding:19px 10px 50px}
  .chxCatalogToolbar{grid-template-columns:1fr}
  .chxCatalogResultCount{grid-column:auto;justify-content:flex-start}
  .chxCatalogGrid{grid-template-columns:1fr}
  .chxNewsTabs{grid-template-columns:1fr 1fr}
  .chxNewsTabs button:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .chxCatalogItem,.chxCatalogItemVisual img,.chxCatalogTabs button{transition:none}
}