@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap');

/* ── Variables ── */
.qh-wrap {
    --bg:  #FFF0E2;
    --tc:  #3a2a1a;
    --h:   100px;
    --ld:  76px;
    --lm:  58px;
    --acc: #c0602a;
    --brd: rgba(160,110,60,.22);
    --fnt: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --rad: 7px;
    --z:   9999;

    /* Sobreescribir con inline vars del PHP */
    --qh-bg: var(--bg);
    --qh-tc: var(--tc);
    --qh-h:  var(--h);
    --qh-ld: var(--ld);
    --qh-lm: var(--lm);

    font-family: var(--fnt);
    width: 100%;
    box-sizing: border-box;
}

.qh-wrap *, .qh-wrap *::before, .qh-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Barra principal ── */
.qh-bar {
    display:       flex;
    align-items:   center;
    width:         100%;
    height:        var(--qh-h);
    background:    var(--qh-bg);
    color:         var(--qh-tc);
    padding:       0 32px;
    gap:           14px;
    border-bottom: 1px solid var(--brd);
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
}

/* ── Logo ── */
.qh-logo-link {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    text-decoration: none;
}
.qh-logo-img {
    height:     var(--qh-ld);
    width:      auto;
    display:    block;
    object-fit: contain;
}
.qh-logo-ph {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--qh-ld);
    height:          var(--qh-ld);
    background:      var(--acc);
    color:           #fff;
    font-weight:     700;
    font-size:       22px;
    border-radius:   50%;
}

/* ── Nombre ── */
.qh-name {
    flex-shrink:     0;
    font-weight:     600;
    font-size:       20px;
    color:           var(--qh-tc);
    text-decoration: none;
    white-space:     nowrap;
    letter-spacing:  -.02em;
}
.qh-name:hover { color: var(--acc); }

/* ── Zona derecha escritorio ── */
.qh-right {
    display:         flex;
    align-items:     center;
    flex:            1;
    gap:             10px;
    min-width:       0;
    justify-content: flex-end;
}

/* ── Buscador ── */
.qh-search-wrap {
    position:  relative;
    flex:      1;
    min-width: 80px;
    max-width: 480px;
}
.qh-s-input {
    width:         100%;
    height:        40px;
    padding:       0 14px;
    border:        1.5px solid var(--brd);
    border-radius: var(--rad);
    background:    rgba(255,255,255,.85);
    color:         var(--qh-tc);
    font-family:   var(--fnt);
    font-size:     14px;
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
}
.qh-s-input:focus {
    border-color: var(--acc);
    box-shadow:   0 0 0 3px rgba(192,96,42,.14);
}
.qh-s-input::placeholder { color: #b09070; }

/* Dropdown */
.qh-s-drop {
    position:      absolute;
    top:           calc(100% + 5px);
    left:          0;
    right:         0;
    background:    #fff;
    border:        1.5px solid var(--brd);
    border-radius: var(--rad);
    box-shadow:    0 8px 28px rgba(0,0,0,.11);
    z-index:       calc(var(--z) + 10);
    max-height:    380px;
    overflow-y:    auto;
}
.qh-s-drop[hidden] { display: none !important; }

.qh-s-item {
    display:         flex;
    align-items:     center;
    gap:             11px;
    padding:         9px 13px;
    text-decoration: none;
    color:           var(--qh-tc);
    border-bottom:   1px solid #f5ede3;
    transition:      background .13s;
}
.qh-s-item:last-child { border-bottom: none; }
.qh-s-item:hover, .qh-s-item:focus { background: #fff8f0; outline: none; }
.qh-s-thumb {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 4px; object-fit: cover; background: #f0e8df;
}
.qh-s-thumb-ph {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 4px; background: #f0e8df;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.qh-s-info { flex: 1; min-width: 0; }
.qh-s-title {
    font-size: 14px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qh-s-sku  { font-size: 12px; color: #8a6a50; margin-top: 2px; }
.qh-s-price{ font-size: 13px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.qh-s-empty, .qh-s-loading { padding: 14px; font-size: 14px; color: #8a6a50; text-align: center; }
.qh-s-all {
    display: block; padding: 9px 13px; font-size: 13px; font-weight: 500;
    color: var(--acc); text-align: center; border-top: 1px solid #f0e0d0; text-decoration: none;
}
.qh-s-all:hover { background: #fff8f0; }

/* ── Nav escritorio ── */
.qh-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.qh-nav-a {
    padding:         6px 13px;
    border-radius:   6px;
    font-size:       15px;
    font-weight:     500;
    color:           var(--qh-tc);
    text-decoration: none;
    white-space:     nowrap;
    transition:      background .13s, color .13s;
}
.qh-nav-a:hover  { background: rgba(192,96,42,.09); color: var(--acc); }
.qh-nav-a.is-active { color: var(--acc); font-weight: 600; }

/* ── Carrito ── */
.qh-cart {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           42px;
    height:          42px;
    border-radius:   50%;
    color:           var(--qh-tc);
    text-decoration: none;
    transition:      background .13s, color .13s;
}
.qh-cart:hover { background: rgba(192,96,42,.09); color: var(--acc); }
.qh-cart-ico { width: 22px; height: 22px; display: block; }
.qh-cart-n {
    position:    absolute;
    top: 2px; right: 2px;
    min-width:   17px; height: 17px;
    padding:     0 3px;
    background:  var(--acc);
    color:       #fff;
    font-size:   10px; font-weight: 700;
    border-radius: 999px;
    display:     flex; align-items: center; justify-content: center;
}

/* ── Zona móvil (oculta en escritorio) ── */
.qh-mob-right {
    display:     none;   /* OCULTO por defecto */
    align-items: center;
    gap:         4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Hamburguesa ── */
.qh-ham {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             5px;
    width:           40px;
    height:          40px;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    padding:         7px;
    border-radius:   6px;
    transition:      background .13s;
}
.qh-ham:hover { background: rgba(192,96,42,.09); }
.qh-ham span {
    display:       block;
    width:         20px; height: 2px;
    background:    var(--qh-tc);
    border-radius: 2px;
    transition:    transform .22s ease, opacity .18s ease;
}
.qh-ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qh-ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.qh-ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menú móvil: OCULTO por defecto ── */
.qh-mob-menu {
    display:        none;   /* NUNCA visible hasta que JS lo abra */
    flex-direction: column;
    gap:            10px;
    background:     var(--qh-bg);
    padding:        14px 20px 18px;
    border-bottom:  2px solid var(--brd);
    box-shadow:     0 6px 24px rgba(0,0,0,.10);
}
/* Solo visible cuando JS agrega la clase .is-open */
.qh-mob-menu.is-open {
    display: flex;
}

.qh-mob-search-wrap { position: relative; }
.qh-s-mob { width: 100%; height: 44px; }
.qh-s-drop-mob {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: calc(var(--z) + 20); max-height: 280px; overflow-y: auto;
}

.qh-mob-nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    align-items:    flex-end;   /* Links alineados a la derecha */
}
.qh-mob-nav-a {
    display:         block;
    padding:         11px 12px;
    border-radius:   7px;
    font-size:       16px;
    font-weight:     500;
    color:           var(--qh-tc);
    text-decoration: none;
    text-align:      right;
    width:           100%;
    transition:      background .13s;
}
.qh-mob-nav-a:hover  { background: rgba(192,96,42,.09); }
.qh-mob-nav-a.is-active { color: var(--acc); font-weight: 600; }

/* Overlay */
#qh-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.22);
    z-index:    calc(var(--z) - 1);
}
#qh-overlay.on { display: block; }

/* =====================================================
   RESPONSIVE
===================================================== */

/* Tablet + Móvil: ocultar zona escritorio, mostrar zona móvil */
@media (max-width: 768px) {
    .qh-right    { display: none !important; }
    .qh-mob-right{ display: flex !important; }
    .qh-name     { font-size: 17px; }
    .qh-logo-img, .qh-logo-ph { height: var(--qh-lm) !important; width: auto !important; }
    .qh-bar      { padding: 0 18px; gap: 10px; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
    .qh-name { display: none; }
    .qh-bar  { padding: 0 14px; gap: 8px; }
    .qh-mob-menu { padding: 12px 14px 16px; }
}

/* Tablet (769–1024px): comprimir buscador */
@media (min-width: 769px) and (max-width: 1024px) {
    .qh-name        { display: none; }
    .qh-bar         { padding: 0 22px; }
    .qh-search-wrap { max-width: 260px; }
}

/* Desktop grande */
@media (min-width: 1280px) {
    .qh-bar         { padding: 0 44px; }
    .qh-search-wrap { max-width: 520px; }
}