/**
 * R10.36.6 — menu catalogue layout corrections.
 * Loaded after all storefront layers so filters, category rail and pagination
 * remain readable at every viewport without legacy rules collapsing together.
 */

/* Dynamic category rail — show only categories/families actually sold. */
body.sf-menu-reference-page.fazfood-public .menu-category-bar{
  display:block!important;
  height:auto!important;
  min-height:76px!important;
  background:#fff!important;
  border-top:1px solid #ece8e0!important;
  border-bottom:1px solid #e4dfd6!important;
  overflow:hidden!important;
}
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll{
  min-height:76px!important;
  height:auto!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
  scroll-snap-type:x proximity!important;
}
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a{
  flex:0 0 auto!important;
  min-height:58px!important;
  height:58px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid #e4dfd6!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#31304d!important;
  font-size:13px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  scroll-snap-align:start!important;
}
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a:first-child{border-left:1px solid #e4dfd6!important}
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a:hover,
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a.active{
  background:#f1f8f4!important;
  border-color:#0a9450!important;
  color:#087b43!important;
}
body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a img{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  object-fit:contain!important;
}

/* Main menu shell — reserve enough width for a readable one-column filter. */
body.sf-menu-reference-page.fazfood-public .ref-menu-shell{
  grid-template-columns:minmax(290px,310px) minmax(0,1fr)!important;
  gap:34px!important;
  align-items:start!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-panel{
  position:static!important;
  width:100%!important;
  min-width:0!important;
  padding:24px 22px 26px!important;
  overflow:visible!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:0 0 18px!important;
  border-bottom:1px solid #e7e2da!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-title strong{
  font-size:34px!important;
  line-height:1!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-title button{
  min-height:38px!important;
  padding:0 14px!important;
  border:1px solid #0a9450!important;
  border-radius:0!important;
  background:#0a9450!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-block{
  display:block!important;
  width:100%!important;
  padding:22px 0!important;
  border-bottom:1px solid #e7e2da!important;
  overflow:visible!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-block h3{
  margin:0 0 14px!important;
  font-size:21px!important;
  line-height:1.1!important;
  color:#282744!important;
}

/* Every filter option is its own row; no inline checkbox/text collisions. */
body.sf-menu-reference-page.fazfood-public .ref-filter-block>label{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:0!important;
  padding:8px 0!important;
  color:#777894!important;
  font-size:16px!important;
  line-height:1.35!important;
  cursor:pointer!important;
  white-space:normal!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-block>label+label{margin-top:2px!important}
body.sf-menu-reference-page.fazfood-public .ref-filter-block>label span{
  display:block!important;
  min-width:0!important;
  flex:1 1 auto!important;
  overflow-wrap:anywhere!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-block input[type="checkbox"],
body.sf-menu-reference-page.fazfood-public .ref-filter-block input[type="radio"]{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  flex:0 0 18px!important;
  margin:1px 0 0!important;
  accent-color:#c33130!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-block input:disabled+span{opacity:.74!important}

/* Price range stays legible and never collapses into GH₵0GH₵550. */
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range{
  display:block!important;
  width:100%!important;
  margin:2px 0 12px!important;
  accent-color:#1473e6!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-labels{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  margin:0!important;
  color:#777894!important;
  font-size:16px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-labels>span:first-child{text-align:left!important}
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-labels>span:last-child{text-align:right!important}
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-focus{
  display:block!important;
  margin-top:8px!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-focus strong{
  display:block!important;
  width:100%!important;
  color:#6d6e89!important;
  font-size:18px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}

/* Portion buttons are a tidy vertical group. */
body.sf-menu-reference-page.fazfood-public .ref-filter-pills{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-pills button{
  width:100%!important;
  min-height:48px!important;
  height:auto!important;
  padding:10px 14px!important;
  margin:0!important;
  text-align:left!important;
  font-size:16px!important;
  font-weight:800!important;
  border:1px solid #d8d2ca!important;
  background:#fff!important;
}
body.sf-menu-reference-page.fazfood-public .ref-filter-pills button.active{
  background:#eaf7ef!important;
  border-color:#0a9450!important;
  color:#087b43!important;
}

body.sf-menu-reference-page.fazfood-public .ref-branch-select{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  padding:20px 0!important;
}
body.sf-menu-reference-page.fazfood-public .ref-branch-select label{
  font-size:16px!important;
  font-weight:700!important;
  color:#777894!important;
  white-space:normal!important;
}
body.sf-menu-reference-page.fazfood-public .ref-branch-select select{
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  padding:0 14px!important;
  border:1px solid #d8d4e5!important;
  border-radius:10px!important;
  background:#fff!important;
  font-size:16px!important;
}
body.sf-menu-reference-page.fazfood-public .ref-apply-btn{
  display:block!important;
  width:100%!important;
  min-height:52px!important;
  margin:4px 0 0!important;
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

/* Pagination buttons must remain visually separate, never one merged green bar. */
body.sf-menu-reference-page.fazfood-public .ref-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  width:100%!important;
  padding:36px 0 18px!important;
}
body.sf-menu-reference-page.fazfood-public .ref-pagination button,
body.sf-menu-reference-page.fazfood-public .ref-pagination span{
  flex:0 0 auto!important;
  min-width:44px!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #0a9450!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#087b43!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:none!important;
}
body.sf-menu-reference-page.fazfood-public .ref-pagination button:hover:not(:disabled){background:#eef8f2!important}
body.sf-menu-reference-page.fazfood-public .ref-pagination button.active{
  background:#0a9450!important;
  border-color:#0a9450!important;
  color:#fff!important;
}
body.sf-menu-reference-page.fazfood-public .ref-pagination button:disabled{
  opacity:.45!important;
  background:#edf6f1!important;
  cursor:not-allowed!important;
}
body.sf-menu-reference-page.fazfood-public .ref-pagination span{
  border-color:transparent!important;
  background:transparent!important;
  color:#777894!important;
}

@media(max-width:1180px){
  body.sf-menu-reference-page.fazfood-public .ref-menu-shell{
    grid-template-columns:minmax(270px,290px) minmax(0,1fr)!important;
    gap:24px!important;
  }
}

@media(max-width:900px){
  body.sf-menu-reference-page.fazfood-public .ref-menu-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:calc(100% - 28px)!important;
    padding:24px 0 44px!important;
  }
  body.sf-menu-reference-page.fazfood-public .ref-filter-panel{
    max-width:520px!important;
    margin:0 auto 8px!important;
    padding:22px!important;
  }
}

@media(max-width:780px){
  /* Re-enable the actual category rail on menu pages; it scrolls horizontally. */
  body.sf-menu-reference-page.fazfood-public .menu-category-bar{display:block!important;min-height:66px!important}
  body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll{min-height:66px!important;padding:7px 12px!important}
  body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a{height:52px!important;min-height:52px!important;padding:0 14px!important;font-size:12px!important}
  body.sf-menu-reference-page.fazfood-public .menu-category-bar .faz-category-scroll>a img{width:24px!important;height:24px!important;flex-basis:24px!important}

  /* Override the old mobile category-pill shortcut: the complete filter remains readable. */
  body.sf-menu-reference-page.fazfood-public .ref-filter-title{display:flex!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-block,
  body.sf-menu-reference-page.fazfood-public .ref-filter-block:first-of-type{
    display:block!important;
    overflow:visible!important;
    padding:20px 0!important;
    border-bottom:1px solid #e7e2da!important;
  }
  body.sf-menu-reference-page.fazfood-public .ref-filter-block:first-of-type h3{display:block!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-block:first-of-type label{
    display:flex!important;
    width:100%!important;
    margin:0!important;
    padding:8px 0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#777894!important;
    font-size:15px!important;
    font-weight:500!important;
  }
  body.sf-menu-reference-page.fazfood-public .ref-filter-block:first-of-type label:has(input:checked){background:transparent!important;color:#353550!important;font-weight:700!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-block:first-of-type input{display:block!important}
  body.sf-menu-reference-page.fazfood-public .ref-branch-select{display:grid!important;padding:18px 0!important}
  body.sf-menu-reference-page.fazfood-public .ref-branch-select label{font-size:15px!important;white-space:normal!important}
  body.sf-menu-reference-page.fazfood-public .ref-branch-select select{height:48px!important;font-size:15px!important}
  body.sf-menu-reference-page.fazfood-public .ref-apply-btn{display:block!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-panel{padding:20px 18px!important;max-width:100%!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-title strong{font-size:30px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-title button{min-height:36px!important;padding:0 11px!important;font-size:11px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-block h3{font-size:19px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-block>label{font-size:15px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-labels{font-size:15px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-focus strong{font-size:17px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-pills button{min-height:46px!important;font-size:15px!important}
  body.sf-menu-reference-page.fazfood-public .ref-pagination{gap:8px!important;padding-top:28px!important}
  body.sf-menu-reference-page.fazfood-public .ref-pagination button,
  body.sf-menu-reference-page.fazfood-public .ref-pagination span{width:40px!important;min-width:40px!important;height:40px!important}
}

@media(max-width:420px){
  body.sf-menu-reference-page.fazfood-public .ref-menu-shell{width:calc(100% - 20px)!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-panel{padding:18px 16px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-title{align-items:center!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-title strong{font-size:28px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-labels{font-size:14px!important;gap:10px!important}
  body.sf-menu-reference-page.fazfood-public .ref-filter-price-block .ref-range-focus strong{font-size:16px!important}
}