/* v2.6.0 - Mobile category carousel, inspirado en apps modernas de tienda */
@media (min-width: 992px){
  .mobile-category-carousel{display:none!important;}
}

@media (max-width: 991.98px){
  :root{--mobile-cat-sticky-top:0px;}

  /* Quitamos selector inferior de categorías: ahora las categorías viven arriba como carrusel */
  #bottomCategoryBtn{display:none!important;}
  .mobile-shop-actions{grid-template-columns:1fr 1fr!important;}

  /* Sidebar mobile queda sólo para buscador si se abre Buscar. Categorías ocultas ahí para no duplicar. */
  #shopSidebar.mobile-search-open .sidebar-title,
  #shopSidebar.mobile-search-open #mobileCategoryToggle,
  #shopSidebar.mobile-search-open .tabs-scroll{display:none!important;}
  #shopSidebar.mobile-category-open{display:none!important;}
  #shopSidebar .tabs-scroll{display:none!important;}

  .section-head{
    position:sticky!important;
    top:0!important;
    z-index:58!important;
    margin:0 -12px 0!important;
    padding:10px 12px 8px!important;
    background:linear-gradient(180deg, rgba(5,8,14,.98), rgba(5,8,14,.90))!important;
    border-bottom:1px solid rgba(148,163,184,.16)!important;
    backdrop-filter:blur(12px);
  }
  .section-head h2,
  #currentCategoryTitle{
    font-size:20px!important;
    line-height:1.15!important;
    margin:0!important;
    color:#f8fafc!important;
    letter-spacing:.2px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-category-carousel{
    position:sticky!important;
    top:47px!important;
    z-index:57!important;
    display:block!important;
    margin:0 -12px 14px!important;
    padding:9px 0 10px!important;
    background:linear-gradient(180deg, rgba(8,12,20,.96), rgba(8,12,20,.90))!important;
    border-bottom:1px solid rgba(56,189,248,.14)!important;
    backdrop-filter:blur(12px);
  }
  .mobile-category-carousel-track{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity;
    padding:0 12px!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mobile-category-carousel-track::-webkit-scrollbar{display:none;}
  .mobile-cat-link{
    flex:0 0 auto!important;
    scroll-snap-align:center;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    max-width:78vw!important;
    padding:0 17px!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:14px!important;
    background:rgba(15,23,42,.86)!important;
    color:#cbd5e1!important;
    font-size:14px!important;
    font-weight:800!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:0 8px 20px rgba(0,0,0,.16)!important;
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .mobile-cat-link.active,
  .mobile-cat-link:active{
    background:#ffffff!important;
    color:#0f172a!important;
    border-color:#ffffff!important;
    box-shadow:0 10px 26px rgba(56,189,248,.18)!important;
  }

  .tab-pane[id^="cat-"]{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    scroll-margin-top:104px!important;
    padding-top:4px!important;
  }
  .tab-pane[id^="cat-"] + .tab-pane[id^="cat-"]{
    margin-top:22px!important;
  }
  .mobile-category-section-title{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    margin:8px 0 14px!important;
    padding:12px 14px!important;
    border-left:4px solid #38bdf8!important;
    border-radius:0!important;
    background:linear-gradient(90deg, rgba(15,23,42,.98), rgba(15,23,42,.72))!important;
    border-top:1px solid rgba(148,163,184,.14)!important;
    border-bottom:1px solid rgba(148,163,184,.14)!important;
  }
  .mobile-category-section-title span{display:none!important;}
  .mobile-category-section-title strong{
    color:#f8fafc!important;
    font-size:19px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:.2px!important;
  }

  body.catalog-searching .mobile-category-carousel,
  body.catalog-searching .section-head{display:none!important;}
}