/* ==========================================================
   LyaiDeu — Mobile Categories experience
   Everything in this file is applied ONLY on phones/tablets
   (max-width: 960px). The desktop/PC Categories page is 100%
   untouched and keeps the original Font Awesome icon cards.
   ========================================================== */

/* ---- Base: the browse overlay must never appear on desktop ---- */
.mc-view{display:none;}
.cat-card-more{display:none;}

@media (max-width:960px){

  /* ===================== MAIN CATEGORIES SCREEN ===================== */
  .section{padding:1.6rem 1rem 2.2rem;}
  .section-head{margin-bottom:1.2rem;}
  .section-head .kicker{margin-bottom:.85rem;font-size:.72rem;padding:.32rem .8rem;}
  .section-head .display{font-size:1.55rem;line-height:1.15;}
  .section-head .section-sub{font-size:.84rem;line-height:1.5;}

  .cat-section+.cat-section{margin-top:2rem;}
  .cat-section-head{margin-bottom:.8rem;gap:.55rem;}
  .cat-section-head .see-all{display:none;}
  .cat-section-ico{width:36px;height:36px;border-radius:12px;font-size:1rem;}
  .cat-section-head h2{font-size:1.18rem;}
  .cat-section-desc{font-size:.8rem;margin:-.3rem 0 .95rem;}

  .cat-grid{grid-template-columns:repeat(4,1fr);gap:.55rem;}

  /* Floating cart button is replaced by the bottom-nav Cart tab */
  .cart-fab{display:none !important;}

  .cat-card{
    border-radius:18px;
    border:1px solid var(--orange-100);
    box-shadow:0 4px 16px rgba(90,40,10,.07);
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .cat-card:active{transform:scale(.97);}

  .cat-card-main{
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    padding:.5rem .3rem .55rem;
    text-align:center;
  }

  /* Real category image (from the Admin Panel) fills the card top */
  .cat-card-img-wrap{
    width:100%;
    aspect-ratio:1/1;
    border-radius:13px;
    overflow:hidden;
    background:var(--orange-50);
    position:relative;
    border:1px solid var(--orange-100);
  }
  .cat-card-img{width:100%;height:100%;object-fit:cover;display:block;}

  .cat-card-main strong{font-size:.7rem;font-weight:900;line-height:1.25;}
  .cat-card-arrow{display:none;}

  /* Child category pills are handled inside the browse overlay rail —
     keep the main grid clean on mobile */
  .cat-card-children{display:none;}

  /* ---- Mobile "More" card: 20th image faded, clean "More" below ---- */
  .cat-grid.has-more .cat-card.cat-extra{display:none;}
  .cat-grid.has-more.is-expanded .cat-card.cat-extra{display:block;}
  .cat-grid.has-more .cat-card-more{display:block;}
  .cat-card-more{
    border:1px solid var(--orange-100);
    background:#fff;
  }
  .cat-card-more .cat-more-btn{
    width:100%;height:100%;
    border:0;background:transparent;cursor:pointer;
  }
  .cat-card-more .cat-more-img-wrap{
    position:relative;
    overflow:hidden;
    background:var(--orange-50);
  }
  .cat-card-more .cat-more-img-wrap .cat-card-img{
    opacity:.42;
    filter:saturate(.88) brightness(1.06);
  }
  .cat-card-more .cat-more-fade{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 38%,rgba(255,255,255,.86) 100%),
               linear-gradient(180deg,rgba(255,140,40,.05),rgba(255,107,0,.07));
    pointer-events:none;
  }
  .cat-card-more .cat-more-fallback{
    width:100%;height:100%;
    display:grid;place-items:center;
    background:linear-gradient(145deg,var(--orange-100),var(--orange-50));
    color:var(--orange-600);font-size:1.15rem;
  }
  .cat-card-more .more-label{
    display:block;
    font-size:.78rem;font-weight:900;color:var(--orange-900);
    line-height:1.2;margin-top:.1rem;text-align:center;
  }
  .cat-card-more .more-count{
    background:transparent;color:var(--ink);
    padding:0;border-radius:0;
    font-size:.7rem;font-weight:900;line-height:1.25;
    box-shadow:none;
  }
  .cat-card-more:active{transform:scale(.97);}
  /* After tap, remove More btn and show all categories */
  .cat-grid.has-more.is-expanded .cat-card-more{display:none !important;}

  /* Very small phones: keep 4 columns, just tighten spacing */
  @media (max-width:360px){
    .cat-grid{grid-template-columns:repeat(4,1fr);gap:.4rem;}
    .cat-card-main{gap:.35rem;padding:.45rem .2rem .5rem;}
    .cat-card-main strong{font-size:.62rem;}
  }

  /* ===================== CATEGORY PRODUCT VIEW ===================== */

  /* Full-screen browse overlay: left category rail + right products */
  .mc-view{
    display:none;
    position:fixed;
    inset:0;
    z-index:90;
    background:var(--orange-50);
    flex-direction:column;
  }
  .mc-view.open{display:flex;}

  body.mc-open{overflow:hidden;}
  /* Hide the site bottom-nav while the category browse overlay is open */
  body.mc-open #bottomNav{display:none !important;visibility:hidden !important;pointer-events:none !important;}

  .mc-head{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.6rem .8rem;
    background:#fff;
    border-bottom:2px solid var(--orange-100);
    box-shadow:var(--shadow-sm);
    flex:0 0 auto;
  }
  .mc-back{
    width:40px;height:40px;
    flex:0 0 auto;
    border-radius:50%;
    border:2px solid var(--orange-200);
    background:#fff;
    color:var(--orange-700);
    font-size:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:border-color .2s ease,transform .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mc-back i{font-size:1.05rem;margin:0;line-height:1;}
  @media (hover:hover){
    .mc-back:hover{border-color:var(--orange-500);}
  }
  .mc-back:active{transform:scale(.92);background:var(--orange-100);}
  .mc-back:focus{outline:none;box-shadow:var(--shadow-sm);}
  .mc-back:focus:not(:focus-visible){outline:none;box-shadow:var(--shadow-sm);}
  .mc-back:focus-visible{outline:2px solid var(--orange-200);outline-offset:2px;}
  .mc-head-titles{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;}
  .mc-head-label{font-family:var(--font-display);font-weight:400;font-size:1.08rem;color:var(--orange-900);}
  .mc-head-sub{
    font-size:.74rem;
    font-weight:800;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mc-viewall{
    flex:0 0 auto;
    font-size:.76rem;
    font-weight:900;
    color:var(--orange-600);
    text-decoration:none !important;
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.42rem .6rem;
    border-radius:999px;
    background:var(--orange-100);
    border:1px solid var(--orange-200);
  }

  .mc-body{flex:1;display:flex;min-height:0;}

  /* ---- Left: vertically scrollable category rail ---- */
  .mc-rail{
    width:108px;
    flex:0 0 auto;
    background:#fff;
    border-right:1px solid var(--orange-100);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:.65rem .45rem 1rem;
    display:flex;
    flex-direction:column;
    gap:.15rem;
    scrollbar-width:thin;
    scrollbar-color:var(--orange-200) transparent;
  }
  .mc-rail::-webkit-scrollbar{width:4px;}
  .mc-rail::-webkit-scrollbar-thumb{background:var(--orange-200);border-radius:999px;}

  .mc-rail-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.3rem;
    padding:.45rem .25rem;
    border:0;
    border-radius:14px;
    background:transparent;
    font:inherit;
    cursor:pointer;
    text-align:center;
    color:var(--ink);
    -webkit-tap-highlight-color:transparent;
    transition:background .2s ease;
  }
  .mc-rail-item:hover{background:var(--orange-50);}
  .mc-rail-thumb{
    width:52px;height:52px;
    flex:0 0 auto;
    border-radius:15px;
    overflow:hidden;
    background:linear-gradient(145deg,var(--orange-100),var(--orange-50));
    display:grid;
    place-items:center;
    color:var(--orange-600);
    font-size:1.15rem;
    border:2px solid transparent;
    transition:border-color .2s ease,transform .15s ease;
  }
  .mc-rail-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .mc-rail-name{
    font-size:.66rem;
    font-weight:800;
    color:var(--ink);
    line-height:1.2;
    max-width:100%;
  }
  .mc-rail-item.active{background:var(--orange-50);}
  .mc-rail-item.is-scope .mc-rail-name{color:var(--orange-800);font-weight:900;}
  .mc-rail-item.active .mc-rail-thumb{border-color:var(--orange-600);transform:scale(1.03);}
  .mc-rail-item.active .mc-rail-name{color:var(--orange-700);}
  .mc-rail-item.child .mc-rail-thumb{width:44px;height:44px;font-size:.95rem;border-radius:13px;}
  .mc-rail-item.child .mc-rail-name{font-size:.62rem;}

  /* ---- Right: product grid for the selected category ---- */
  .mc-main{
    flex:1;
    min-width:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:1rem .8rem calc(env(safe-area-inset-bottom,0px) + 118px);
  }
  .mc-products{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.8rem;
  }

  .mc-products .dish-card{
    border-radius:16px;
    border:1px solid var(--orange-100);
    box-shadow:0 4px 16px rgba(90,40,10,.07);
    overflow:hidden;
  }
  .mc-products .dish-art{border-radius:0;}
  .mc-products .dish-art::after{display:none;}
  .mc-products .dish-body{padding:.2rem .6rem .24rem;}
  .mc-products .dish-top h3{font-size:.82rem;}
  .mc-products .price{font-size:.95rem;}
  .mc-products .btn-order{font-size:.68rem;padding:.38rem .5rem;}

  /* ---- Skeleton loading cards (while the product list fetches) ---- */
  .mc-products.is-loading{min-height:55vh;align-content:start;}
  .mc-skel-card{
    background:#fff;
    border:1px solid var(--orange-100);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(90,40,10,.07);
  }
  .mc-skel-art{
    aspect-ratio:1/1;
    background:var(--orange-100);
  }
  .mc-skel-body{
    padding:.55rem .6rem .65rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .mc-skel-line{
    display:block;
    height:.72rem;
    border-radius:999px;
    background:var(--orange-100);
  }
  .mc-skel-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.4rem;
    margin-top:.15rem;
  }
  .mc-skel-pill{
    flex:0 0 auto;
    width:62px;
    height:1.55rem;
    border-radius:999px;
    background:var(--orange-100);
  }
  .skel-shimmer{position:relative;overflow:hidden;}
  .skel-shimmer::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
    transform:translateX(-100%);
    animation:skelSweep 1.4s ease-in-out infinite;
  }
  @keyframes skelSweep{100%{transform:translateX(100%);}}
  @media (prefers-reduced-motion:reduce){
    .skel-shimmer::after{animation:none;}
  }

  /* Very small phones (320px baseline): keep 2 products per row —
     just compact spacing so both columns fit beside the rail */
  @media (max-width:360px){
    .mc-main{padding:.85rem .55rem calc(env(safe-area-inset-bottom,0px) + 118px);}
    .mc-products{gap:.5rem;}
    .mc-products .dish-body{padding:.16rem .4rem .2rem;}
    .mc-products .dish-top h3{font-size:.72rem;}
    .mc-products .price{font-size:.8rem;}
    .mc-products .dish-hotel{font-size:.58rem;}
    .mc-products .dish-hotel i{font-size:.52rem;}
    /* beats cards-mobile.css .dish-card scope (loads later) */
    .mc-products .dish-card .btn-order.add-cart{width:2.05rem;height:2.05rem;}
    .mc-products .dish-card .btn-order.add-cart::before{font-size:.8rem;}
  }

  .mc-empty{
    text-align:center;
    padding:2.5rem 1rem;
    color:var(--muted);
    font-weight:800;
    font-size:.9rem;
  }
  .mc-empty .mc-empty-ico{
    display:block;
    font-size:3rem;
    color:var(--orange-300);
    margin-bottom:.7rem;
  }
  .mc-empty a{color:var(--orange-600);text-decoration:underline;}

  /* Keep the toast above the overlay */
  .toast{z-index:210 !important;}
}