/* Trendyfy catalog controls layout hotfix v0.5.24.4.2
   Fade lives on the scroll CONTENT, not over the buttons.
   The 1/2-columns switch lives alongside, never inside, the scroll area. */
#main .tf-catalog-controls-row{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  position:relative;
  margin-top:0;
  margin-bottom:0;
}
#main .tf-catalog-controls-row > .catalog-chips-shell{
  display:block!important;
  position:relative!important;
  flex:1 1 0%!important;
  width:0!important; /* flex basis determines visible width; never overflow the switch */
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  margin:0!important;
  isolation:isolate;
}
#main .tf-catalog-controls-row .catalog-chips-v2{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-top:2px;
  padding-bottom:2px;
  scrollbar-width:none!important;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
#main .tf-catalog-controls-row .catalog-chips-v2::-webkit-scrollbar{display:none}
#main .tf-catalog-controls-row .catalog-chips-v2 > .chip{
  flex:0 0 auto!important;
  white-space:nowrap;
}
/* Disable the previous absolute-positioned gradients altogether. */
#main .catalog-chips-shell [data-scroll-fade]{display:none!important}
/* These masks fade only the clipped scroll content. The switch is unaffected. */
#main .catalog-chips-v2.tf-fade-left{
  -webkit-mask-image:linear-gradient(to right, transparent 0px, #000 18px, #000 100%);
  mask-image:linear-gradient(to right, transparent 0px, #000 18px, #000 100%);
}
#main .catalog-chips-v2.tf-fade-right{
  -webkit-mask-image:linear-gradient(to right, #000 0px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(to right, #000 0px, #000 calc(100% - 18px), transparent 100%);
}
#main .catalog-chips-v2.tf-fade-left.tf-fade-right{
  -webkit-mask-image:linear-gradient(to right, transparent 0px, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0px, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
#main .tf-catalog-controls-row > #tfCatalogView{
  flex:0 0 auto!important;
  align-self:center!important;
  position:relative!important;
  display:flex!important;
  float:none!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  z-index:2;
}
#main .tf-catalog-controls-row > #tfCatalogView[hidden]{display:none!important}
#main .tf-catalog-controls-row > #tfCatalogView .tf-catalog-view__title{display:none!important}
#main .tf-catalog-controls-row > #tfCatalogView .tf-catalog-view__switch{
  flex:0 0 auto!important;
  display:flex;
  align-items:center;
  margin:0!important;
}
@media(max-width:375px){
  #main .tf-catalog-controls-row{gap:6px!important}
}