/* ═══════════════════════════════════════════════════════════
   MAGNEX BARBER — TOPBAR PÚBLICO MÓVIL
   Afecta: /catalogo/:slug, /reservar/:slug, /catalogo/:slug/carrito
   Solo aplica en móvil (<640px). Desktop intacto.
   Se carga DESPUÉS de catalogo.css
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ══════════════════════════════════════════════════
     TOPBAR: una sola fila horizontal compacta
     ══════════════════════════════════════════════════ */
  .mx-public-topbar-inner {
    grid-template-columns: auto 1fr auto !important;
    height: 54px !important;
    padding: 0 14px !important;
    gap: 10px !important;
    align-items: center !important;
    flex-direction: row !important;
  }

  /* Brand: solo logo + MAGNEX (oculta "× BARBER") */
  .mx-public-brand {
    gap: 6px !important;
  }

  .mx-brand-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .mx-public-brand-main {
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }

  .mx-public-brand-divider,
  .mx-public-brand-accent {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════
     SEARCH COLAPSABLE: botón lupa que se expande
     ══════════════════════════════════════════════════ */
  .mx-public-topbar-center {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }

  .mx-search-shell {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: width .25s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s;
    overflow: hidden;
  }

  .mx-search-shell.is-expanded {
    width: 100%;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,193,7,.34);
    cursor: text;
  }

  .mx-search-icon {
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(243,244,246,.65) !important;
    pointer-events: none !important;
    z-index: 1;
  }

  .mx-shop-search {
    height: 36px !important;
    padding: 0 12px 0 34px !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    width: 100% !important;
    opacity: 0;
    transition: opacity .2s .08s;
    pointer-events: none;
  }

  .mx-search-shell.is-expanded .mx-shop-search {
    opacity: 1;
    pointer-events: auto;
  }

  .mx-shop-search:focus {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  .mx-search-kbd {
    display: none !important;
  }

  /* Right: compacto y en fila */
  .mx-public-topbar-right {
    gap: 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex-wrap: nowrap !important;
  }

  .mx-topbar-sep {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════
     FILTROS — barra separada fija debajo del topbar
     Solo se muestran en /catalogo (donde _showFilters=true)
     ══════════════════════════════════════════════════ */
  .mx-shop-filter-group {
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 70;
    display: flex !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: rgba(10,10,14,.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    width: auto !important;
  }

  .mx-shop-filter-group::-webkit-scrollbar {
    display: none;
  }

  .mx-shop-filter-btn {
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }

  .mx-shop-filter-btn.is-active {
    background: rgba(255,193,7,.13) !important;
    border-color: rgba(255,193,7,.34) !important;
    color: #ffc107 !important;
  }

  /* ══════════════════════════════════════════════════
     CARRITO + botones de acción: solo icono 38x38
     ══════════════════════════════════════════════════ */
  .mx-public-cart-link {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .mx-public-cart-count {
    top: -5px !important;
    right: -5px !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 9.5px !important;
  }

  .mx-public-action-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .mx-public-action-btn span {
    display: none !important;
  }

  .mx-public-action-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ══════════════════════════════════════════════════
     Padding del contenido para no quedar debajo del topbar
     ══════════════════════════════════════════════════ */

  /* Catálogo: topbar 54px + filtros 52px = 106px */
  body:has(.mx-shop-filter-group) .mx-shop-grid {
    margin-top: 66px !important;
  }

  /* Reservar y carrito: solo 54px del topbar */
  .rv-shell {
    padding-top: 16px !important;
  }

  .mx-cart-page,
  .mx-detail-page {
    padding-top: 12px !important;
  }

} /* end @media */