/* =========================================================
   BYSAA STORE – HEADER PREMIUM (2 PANTALLAS)
   - MOBILE = default
   - DESKTOP = min-width: 769px
   - Sin emojis en HTML (iconos por CSS)
   - Variables para editar fácil
========================================================= */

/* =========================
   VARIABLES (EDITABLES)
========================= */
:root {
    /* Colores */
    --bysaa-header-bg: #ffffff;
    --bysaa-header-border: #e5e5e5;
    --bysaa-primary: #2f4bff;
    --bysaa-text: #111111;
    --bysaa-badge-bg: #f4b400;
    --bysaa-badge-text: #000000;

    /* Medidas Desktop */
    --desk-header-h: 90px;
    --desk-logo-h: 60px;
    --desk-menu-size: 28px;
    --desk-cart-size: 38px;
    --desk-search-h: 52px;
    --desk-search-max: 900px;

    /* Medidas Mobile */
    --mob-pad-x: 14px;
    --mob-pad-y: 10px;
    --mob-logo-h: 76px;
    --mob-menu-size: 30px;
    --mob-cart-size: 32px;
    --mob-search-h: 46px;

    /* Bordes */
    --radius: 16px;
}

/* =========================
   AISLAMIENTO STORE (NO TOCA APP GLOBAL)
========================= */
body.bysaa-store .bysaa-header,
body.bysaa-store .bysaa-header * {
    box-sizing: border-box;
}

/* =========================
   HEADER BASE
========================= */
.bysaa-header {
    width: 100%;
    background: var(--bysaa-header-bg);
    border-bottom: 1px solid var(--bysaa-header-border);
}

.bysaa-header-inner {
    width: 100%;
    margin: 0 auto;
    padding: 14px var(--mob-pad-x);
}

/* =========================================================
   MOBILE (DEFAULT)
   Layout:
   [menu] [logo centrado] [cart]
   search abajo 100%
========================================================= */
.bysaa-header-inner {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    grid-template-areas:
        "menu logo cart"
        "search search search";
    align-items: center;
    column-gap: 8px;
    row-gap: 12px;

    padding: 4px var(--mob-pad-x);
    min-height: 110px;   /* 🔥 IMPORTANTE */
}

/* MENU */
.bysaa-menu-btn {
    grid-area: menu;
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.bysaa-menu-btn::before{
    content: "☰";
    font-size: var(--mob-menu-size);
    line-height: 1;
    color: var(--bysaa-text);
}

/* LOGO */
.bysaa-logo {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bysaa-logo img{
    height: 90px;
    max-height: none;
    min-height: 90px;
    width: auto;
    display: block;
}

/* CART */
.bysaa-cart{
    grid-area: cart;
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
}
.bysaa-cart::before{
    content: "";
    width: var(--mob-cart-size);
    height: var(--mob-cart-size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2.2 10.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L22 7H6'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.bysaa-cart-count{
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--bysaa-badge-bg);
    color: var(--bysaa-badge-text);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 999px;
    line-height: 1;
}

/* SEARCH */
/* SEARCH MOBILE AJUSTADO */
.bysaa-search{
    grid-area: search;
    width: 100%;
    position: relative;
    display: flex;
    align-items: stretch; /* 🔥 asegura misma altura */
}

.bysaa-search input{
    flex: 1;
    height: 50px;              /* 🔥 un poco más alto */
    border: 2px solid var(--bysaa-primary);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.bysaa-search-btn{
    height: 40px;              /* 🔥 misma altura exacta */
    width: 68px;
    border: 2px solid var(--bysaa-primary);
    background: var(--bysaa-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.bysaa-search-btn::before{
    content: "";
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20l-5.6-5.6a7 7 0 10-1 1L20 21zM4 10a6 6 0 1112 0A6 6 0 014 10z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml;utf8,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20l-5.6-5.6a7 7 0 10-1 1L20 21zM4 10a6 6 0 1112 0A6 6 0 014 10z'/%3E%3C/svg%3E") no-repeat center;
}

/* DROPDOWN RESULTADOS */
.bysaa-search-results{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    display: none;
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
}
.bysaa-search-item{
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: #111;
    border-bottom: 1px solid #eee;
}
.bysaa-search-item:hover{ background:#f6f6f6; }
.bysaa-search-name{ display:block; font-weight:800; }
.bysaa-search-meta{ font-size: 13px; opacity: .8; }
.bysaa-search-empty{ padding: 12px 14px; color:#666; }

/* =========================================================
   DESKTOP PREMIUM COMPACTO
========================================================= */
@media (min-width: 769px){

    .bysaa-header-inner{
        max-width: 1600px;          /* Más ancho útil */
        height: 78px;               /* Más compacto */
        padding: 0 1px;            /* Menos margen lateral */

        grid-template-columns: 80px 170px 1fr 80px;
        grid-template-areas: "menu logo search cart";

        column-gap: 5px;
        align-items: center;
    }

    /* MENU */
    .bysaa-menu-btn{
        width: 60px;
        height: 60px;
    }

    .bysaa-menu-btn::before{
        font-size: 26px;
    }

    /* LOGO MÁS GRANDE */
    .bysaa-logo{
        justify-content: flex-start;
    }

    .bysaa-logo img{
        height: 90px;    /* 🔥 AUMENTADO */
    }

    /* SEARCH MÁS CENTRADO Y PROPORCIONADO */
    .bysaa-search{
    width: 100%;
    max-width: 2500px;
    margin: 0 auto;
}

    .bysaa-search input{
        height: 46px;
        font-size: 15px;
    }

    .bysaa-search-btn{
        height: 46px;
        width: 70px;
    }

    /* CART MÁS PROPORCIONADO */
    .bysaa-cart{
        width: 60px;
        height: 60px;
        justify-self: end;
    }

    .bysaa-cart::before{
        width: 32px;
        height: 32px;
    }

    .bysaa-cart-count{
        top: 6px;
        right: 6px;
        font-size: 11px;
    }
}