/* Shared category panel: one source for home and detail pages. */
html body .yf-backdrop.yf-cat-top-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:20990!important;
  background:rgba(0,0,0,.16)!important;
}
html body .yf-sheet.yf-cat-top-panel{
  position:fixed!important;
  z-index:21000!important;
  width:max-content!important;
  min-width:0!important;
  max-width:calc(100vw - 8px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100vh - 56px)!important;
  max-height:calc(100dvh - 56px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(17,24,39,.10)!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 4px 20px rgba(0,0,0,.14)!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  box-sizing:border-box!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-sheet-body{
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:6px 7px var(--yf-popup-footer-bottom,12px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  box-sizing:border-box!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-wrap{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  direction:ltr!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col{
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-width:108px!important;
  width:max-content!important;
  max-width:168px!important;
  max-height:calc(100vh - 76px)!important;
  max-height:calc(100dvh - 76px)!important;
  margin:0!important;
  padding:0 5px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border:0!important;
  border-right:1px solid #eceff2!important;
  background:#fff!important;
  box-sizing:border-box!important;
  scrollbar-width:thin!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col:first-child{padding-left:0!important;}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col:last-child{
  padding-right:0!important;
  border-right:0!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l1{min-width:110px!important;}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l2{min-width:120px!important;}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l3{min-width:124px!important;}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button{
  appearance:none!important;
  -webkit-appearance:none!important;
  box-sizing:border-box!important;
  flex:0 0 30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0 9px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#111!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-align:left!important;
  text-decoration:none!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button:hover,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button:focus,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button:focus-visible,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button:active{
  color:#111!important;
  background:#f5f6f7!important;
  box-shadow:none!important;
  transform:none!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.sel,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.sel:hover,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.sel:focus,
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.sel:active{
  color:#111!important;
  background:#f1f3f5!important;
  font-weight:700!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button>.yf-cat-label{
  display:block!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child{
  overflow:visible!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow{
  display:block!important;
  flex:0 0 auto!important;
  width:0!important;
  height:0!important;
  margin:0 0 0 var(--yf-cat-arrow-gap,15px)!important;
  border-top:4px solid transparent!important;
  border-bottom:4px solid transparent!important;
  border-left:5px solid #ff6a00!important;
  border-right:0!important;
  align-self:center!important;
  overflow:visible!important;
  padding:0!important;
  line-height:0!important;
  transform:none!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-all-btn{
  color:#111!important;
  font-weight:600!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-wrap,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-wrap{
  direction:rtl!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col{
  border-right:0!important;
  border-left:1px solid #eceff2!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col:last-child,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col:last-child{
  border-left:0!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col>button,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col>button{
  justify-content:flex-end!important;
  text-align:right!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child{
  /* The RTL category wrapper reverses column order, but that direction must
     not leak into the button's flex axis.  Keep physical child layout LTR so
     order:-1 places the arrow on the visual left; the label itself uses
     dir=auto for correct Arabic/Latin text shaping. */
  direction:ltr!important;
  flex-direction:row!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col>button>.yf-cat-label,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col>button>.yf-cat-label{
  text-align:right!important;
  unicode-bidi:plaintext!important;
}
html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow,
body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow{
  order:-1!important;
  margin:0 var(--yf-cat-arrow-gap,15px) 0 0!important;
  border-left:0!important;
  border-right:5px solid #ff6a00!important;
}
@media(max-width:767px){
  html body .yf-sheet.yf-cat-top-panel{
    max-height:calc(100vh - 52px)!important;
    max-height:calc(100dvh - 52px)!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-sheet-body{padding:5px 4px var(--yf-popup-footer-bottom,14px)!important;}
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col{
    min-width:98px!important;
    max-width:142px!important;
    max-height:calc(100vh - 68px)!important;
    max-height:calc(100dvh - 68px)!important;
    padding:0 3px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l1{min-width:98px!important;}
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l2{min-width:108px!important;}
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col-l3{min-width:116px!important;}
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button{
    flex-basis:29px!important;
    height:29px!important;
    min-height:29px!important;
    max-height:29px!important;
    padding:0 5px!important;
    font-size:13px!important;
  }
  html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow{
    margin-left:var(--yf-cat-arrow-gap,12px)!important;
  }
  html.yf-lang-ar body .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow,
  body.yf-lang-ar .yf-sheet.yf-cat-top-panel .yf-cat-col>button.has-child .yf-cat-arrow{
    margin-right:var(--yf-cat-arrow-gap,12px)!important;
    margin-left:0!important;
  }
}

/* FRONT-053: category labels keep full Latin descenders (g, y, p, q)
   on both desktop and mobile. The former line-height:1 plus overflow:hidden
   clipped the glyph box. */
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button{
  line-height:1.25!important;
}
html body .yf-sheet.yf-cat-top-panel .yf-cat-col>button>.yf-cat-label{
  line-height:1.25!important;
  padding-top:1px!important;
  padding-bottom:1px!important;
}