/* Moso Foods - premium header, menu drawer and compact category cards (v1) */

/* ---------- Header ---------- */
.mx-header{background:rgba(255,255,255,.97)!important;-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #EEECEA!important;transition:box-shadow .25s ease}
.mx-header.is-scrolled{box-shadow:0 10px 28px -14px rgba(18,65,22,.28)!important}
.mx-header .mx-bar{min-height:74px;gap:18px}
@media(max-width:899px){.mx-header .mx-bar{min-height:60px;gap:8px}}

/* Search */
.mx-header .mx-search{background:#F5F5F4!important;border:1.5px solid transparent!important;border-radius:999px!important;overflow:hidden;transition:background .2s,border-color .2s,box-shadow .2s}
.mx-header .mx-search:focus-within{background:#fff!important;border-color:#1B5E20!important;box-shadow:0 0 0 4px rgba(27,94,32,.12)}
.mx-header .mx-search input{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;font-size:14.5px;color:#1C1917}
.mx-header .mx-search input::placeholder{color:#78716C}
.mx-header .mx-search button{background:#1B5E20!important;border-radius:999px!important;transition:background .2s}
.mx-header .mx-search button:hover{background:#124116!important}
.mx-header .mx-search button svg{stroke:#fff!important;fill:none}

/* Actions */
.mx-header .mx-iconbtn,.mx-header .mx-burger{border-radius:50%!important;transition:background .2s,color .2s}
.mx-header .mx-iconbtn:hover,.mx-header .mx-burger:hover{background:#E8F5E9!important;color:#1B5E20}
.mx-header .mx-bulk{background:#fff;border:1px solid #E7E5E4;border-radius:12px;padding:6px 14px;line-height:1.25;transition:border-color .2s,background .2s}
.mx-header .mx-bulk:hover{border-color:#1B5E20;background:#E8F5E9}
.mx-header .mx-bulk small{display:block;font-size:11px;letter-spacing:.04em;color:#57534E}
.mx-header .mx-bulk strong{display:block;font-size:15px;color:#1B5E20;letter-spacing:.01em}
.mx-header .cart-count{background:#FFB900!important;color:#1C1917!important;font-weight:700;box-shadow:0 0 0 2px #fff}

/* Category menu bar */
.mx-header .mx-cats{background:#fff!important;border-top:1px solid #F1EFED!important}
.mx-header .mx-cats .mx-wrap{justify-content:center;gap:2px}
.mx-header .mx-cats a{position:relative;padding:13px 16px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#292524;transition:color .2s;white-space:nowrap}
.mx-header .mx-cats a:after{content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px;background:#FFB900;transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.mx-header .mx-cats a:hover{color:#1B5E20}
.mx-header .mx-cats a:hover:after{transform:scaleX(1)}

/* ---------- Mobile drawer ---------- */
.mx-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mx-drawer{width:min(86vw,340px)!important;background:#fff!important;box-shadow:0 0 40px rgba(0,0,0,.18);padding:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mx-drawer .mx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #EEECEA;background:linear-gradient(180deg,#F4FAF4,#fff)}
.mx-drawer nav{padding:10px 12px 24px;display:flex;flex-direction:column}
.mx-drawer nav a{display:flex;align-items:center;padding:13px 14px;margin:1px 0;border-radius:12px;font-size:15px;font-weight:500;color:#1C1917;text-decoration:none;transition:background .15s,color .15s}
.mx-drawer nav a:hover,.mx-drawer nav a:active{background:#E8F5E9;color:#1B5E20}
.mx-drawer nav hr{border:0;border-top:1px solid #EEECEA;margin:10px 6px}
.mx-drawer .mx-user{margin:4px 2px 8px;padding:12px 14px;border-radius:12px;background:#E8F5E9;color:#124116;font-weight:700;font-size:14px}
.mx-drawer nav a:last-child{justify-content:center;margin-top:12px;background:#1B5E20;color:#fff;font-weight:600;box-shadow:0 8px 18px -10px rgba(27,94,32,.7)}
.mx-drawer nav a:last-child:hover{background:#124116;color:#fff}

/* ---------- Home: compact category cards ---------- */
.mx-cat-grid{gap:12px!important}
.mx-cat-grid .mx-cat{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:12px;padding:12px 14px!important;min-height:0!important;height:auto!important;border-radius:14px!important;box-shadow:none}
.mx-cat-grid .mx-cat i{width:42px!important;height:42px!important;font-size:17px!important;margin:0!important;flex:none}
.mx-cat-grid .mx-cat h3{margin:0!important;font-size:14.5px!important;line-height:1.3;font-weight:600}
.mx-cat-grid .mx-cat:hover{border-color:#1B5E20;box-shadow:0 10px 22px -14px rgba(27,94,32,.55)}
@media(min-width:768px){
  .mx-cat-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
  .mx-cat-grid .mx-cat h3{font-size:15.5px!important}
}
@media(max-width:767px){
  .mx-cat-grid .mx-cat{padding:10px 10px!important;gap:10px}
  .mx-cat-grid .mx-cat i{width:38px!important;height:38px!important;font-size:15px!important}
  .mx-cat-grid .mx-cat h3{font-size:13.5px!important}
  .mx-cat-grid .mx-cat:last-child:nth-child(odd){grid-column:1/-1!important;width:100%!important;justify-self:stretch!important}
}