/* ======================================================
   HEADER STYLE — AISLAMIENTO REAL Y SEARCH CORRECTO
   Llévatelo Store
   (Logo centrado + icono usuario simple + login icon + search estable)
====================================================== */

:root{
    --topbar-h: 75px;
    --searchbar-h: 56px;
    --drawer-w: 280px;

    --blue:#0d6efd;          /* azul tipo Bootstrap */
    --text:#111;
    --muted:#6b7280;
    --border:#e6e6e6;
    --bg:#fff;
    --hover:#f6f7f8;
    --shadow:0 10px 22px rgba(0,0,0,.06);
}

/* ======================================================
   HEADER BASE (NO DEPENDE DE index_style.css)
====================================================== */
#topbar{
    position: sticky;
    top: 0;
    z-index: 1100;

    height: var(--topbar-h);
    min-height: var(--topbar-h);

    margin:0 !important;
    padding:0 !important;

    background:var(--bg) !important;
    border-bottom:1px solid var(--border);

    /* clave para centrar con absolute sin cortes */
    display:flex;
    align-items:center;
    justify-content:space-between;

    /* para el logo centrado absoluto */
    position:sticky;
}

/* Limpieza: evita que reglas externas cambien el header */
#topbar *{
    box-sizing:border-box;
}

/* ======================================================
   ZONAS (izq / centro / der)
====================================================== */
#topbar .topbar-left,
#topbar .topbar-right{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    height:100%;
    padding:0 10px;
}

#topbar .topbar-right{
    margin-left:auto;
    gap:10px;
}

#topbar .topbar-center{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
}

/* ======================================================
   LOGO (CENTRADO REAL)
====================================================== */
#topbar .logo-link{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    margin:0 !important;
}

#topbar .logo-img{
    height:70%;
    max-height:70%;
    width:auto;
    object-fit:contain;
    display:block;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* ======================================================
   BOTÓN MENÚ (HAMBURGUESA)
====================================================== */
#topbar .menu-btn{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    background:transparent;
    cursor:pointer;

    color:var(--text);
    border-radius:10px;
}

#topbar .menu-btn:hover{
    background:var(--hover);
}

#topbar .menu-btn i{
    font-size:1.35rem;
    line-height:1;
}

/* ======================================================
   LOGIN / USUARIO — ICONO SIMPLE (CABECITA + TORSO)
   (Font Awesome: fa-circle-user / fa-user-circle)
====================================================== */

/* Estilo del enlace/icono */
#topbar .login-icon{
    display:inline-flex;
    align-items:center;
    gap:8px;

    height:44px;
    padding:0 10px;

    text-decoration:none;
    border-radius:10px;

    color:var(--blue);
    background:transparent;
}

#topbar .login-icon:hover{
    background:rgba(13,110,253,.08);
}

/* Icono */
#topbar .login-icon i{
    font-size:1.25rem;
    line-height:1;
}

/* Nombre (solo cuando estás logueado) */
#topbar .login-icon .user-name{
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    white-space:nowrap;
}

/* En móvil: ocultar nombre */
@media (max-width:576px){
    #topbar .login-icon .user-name{ display:none; }
}

/* ======================================================
   DRAWER MENU + OVERLAY
====================================================== */
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    z-index:1190;
    display:none;
}
.menu-overlay.open{ display:block; }

#sideMenu,
.side-menu{
    position:fixed;
    top:var(--topbar-h);
    left:calc(var(--drawer-w) * -1);

    width:var(--drawer-w);
    height:calc(100vh - var(--topbar-h));

    background:#fff;
    box-shadow:2px 0 18px rgba(0,0,0,.12);
    z-index:1200;

    transition:left .25s ease;
    overflow:auto;

    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

#sideMenu.open,
.side-menu.open{ left:0; }

#sideMenu .menu-title,
.side-menu .menu-title{
    padding:14px 16px;
    font-weight:800;
    font-size:16px;
    border-bottom:1px solid #eee;
}

#sideMenu ul,
.side-menu ul{
    list-style:none;
    margin:0;
    padding:12px;
}

#sideMenu li,
.side-menu li{ margin:0 0 6px 0; }

#sideMenu a,
#sideMenu button,
.side-menu a,
.side-menu button{
    display:flex;
    align-items:center;
    gap:10px;

    width:100%;
    padding:10px 12px;

    border:0;
    background:#fff;
    border-radius:10px;

    font-size:15px;
    font-weight:600;
    color:#111;
    text-decoration:none;

    cursor:pointer;
}

#sideMenu a:hover,
#sideMenu button:hover,
.side-menu a:hover,
.side-menu button:hover{
    background:#f6f7f8;
}

#sideMenu i,
.side-menu i{
    width:18px;
    text-align:center;
    font-size:15px;
}

/* ======================================================
   SEARCH BAR (CONTENEDOR REAL, X ADENTRO A LA DERECHA)
   IMPORTANTE: tu HTML debe ser:
   <div class="search-row">
     <div class="search-input-wrap"> ... input + button ... </div>
   </div>
====================================================== */
#search-bar-sticky{
    position: sticky;
    top: var(--topbar-h);
    z-index: 1090;

    background:#fff;
    border-bottom:1px solid #eee;

    padding:10px 12px;
    display:none;
}

#search-bar-sticky.open{ display:block; }

#search-bar-sticky .search-row{
    width:100%;
}

/* contenedor del input + X */
#search-bar-sticky .search-input-wrap{
    position:relative;
    max-width:980px;
    margin:0 auto;
}

/* input */
#search-bar-sticky #search{
    width:100%;
    height:40px;

    padding:0 44px 0 14px; /* espacio para X dentro */
    border-radius:12px;
    border:1px solid #ddd;

    font-size:15px;
}

#search-bar-sticky #search:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(13,110,253,.10);
}

/* botón cerrar dentro del input */
#search-bar-sticky .search-close,
#search-bar-sticky .search-clear-btn{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);

    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:999px;

    background:#f1f1f1;
    color:#333;

    cursor:pointer;
}

#search-bar-sticky .search-close:hover,
#search-bar-sticky .search-clear-btn:hover{
    background:#e6e6e6;
}

#search-bar-sticky .search-close i{
    font-size:1rem;
    line-height:1;
}

/* ======================================================
   SEARCH RESULTS (EVITA “GIGANTE” + NO SE METE BAJO INPUT)
   - Usamos sticky con top correcto
   - Limitamos ancho/alto
   - Estilamos tarjetas sin inline-styles
====================================================== */
#search-results{
    position: sticky;
    top: calc(var(--topbar-h) + var(--searchbar-h));
    z-index: 1085;

    width:min(980px, calc(100% - 16px));
    margin:0 auto;

    background:#fff;
    border:1px solid #e6e6e6;
    border-top:0;
    border-radius:0 0 14px 14px;

    box-shadow:var(--shadow);

    max-height:60vh;
    overflow:auto;

    padding:12px;

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:12px;
}

#search-results.hidden{
    display:none !important;
}

/* enlace */
#search-results .search-card-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

/* card */
#search-results .search-card{
    background:#fff;
    border:1px solid #f0f0f0;
    border-radius:12px;
    padding:10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

#search-results .search-card:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    border-color:#e8e8e8;
}

/* imagen wrap */
#search-results .search-img-wrap{
    width:100%;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fafafa;
    border-radius:10px;
    overflow:hidden;
}

#search-results img{
    max-width:72px;
    max-height:72px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

/* texto */
#search-results .search-name{
    margin-top:8px;
    font-size:.9rem;
    line-height:1.2;
    color:#111;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.4em;
}

#search-results .search-price{
    margin-top:6px;
    font-weight:800;
    color:#28a745;
    font-size:.95rem;
}

#search-results .search-price-muted{
    margin-top:6px;
    font-size:.9rem;
    color:#999;
}

/* “sin resultados” */
#search-results .no-results{
    grid-column:1 / -1;
    padding:18px 10px;
    text-align:center;
    color:#666;
    font-weight:600;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width:576px){
    :root{
        --topbar-h: 75px;
        --searchbar-h: 56px;
        --drawer-w: 280px;
    }

    #topbar .logo-img{
        height:68%;
        max-height:68%;
    }

    #search-results{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        padding:10px;
    }

    #search-results .search-img-wrap{
        height:74px;
    }
}