header{ position:relative; }

/* Auto-hide al hacer scroll — el JS solo alterna esta clase */
.qp-header-autohide{
  position:sticky; top:0; z-index:900;
  transition:transform .25s ease;
  background:#fff;
}
.qp-header-autohide.qp-header-hidden{
  transform:translateY(-100%);
}

/* Cualquier buscador "sticky-search" en cualquier página sigue al
   header: pegado justo debajo cuando está visible, y sube a top:0
   (ocupando el lugar del header) cuando este se oculta al hacer
   scroll hacia abajo. --qp-header-h lo calcula header_autohide.js. */
.sticky-search{
  top: var(--qp-header-h, 80px);
  transition: top .25s ease;
}
body.qp-header-is-hidden .sticky-search{
  top: 0;
}
.menu-sliderbar{ position:relative; z-index:3; display:flex; align-items:center; }
.qp-menu-icon{ width:70px; height:70px; object-fit:contain; }

.header-search-btn,
.cart-button{ position:relative; z-index:3; }

/* ── Ubicación en el header — centrada de forma absoluta, independiente
   del ancho del menú/logo/carrito a los lados ── */
.qp-header-location{
  position:absolute;
  left:52%; top:50%;
  transform:translate(-50%,-50%);
  width:auto; max-width:56%;
  margin:0; z-index:2;
}
.qp-hloc-btn{
  display:flex; align-items:center; gap:6px; width:100%;
  background:none; border:none; padding:4px 0; cursor:pointer; text-align:left;
}
.qp-hloc-pin{ color:#ff7b00; font-size:15px; flex-shrink:0; }
.qp-hloc-text{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.qp-hloc-label{ font-size:10px; color:#999; font-weight:600; }
.qp-hloc-value{
  font-size:13.5px; font-weight:800; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
.qp-hloc-localidad{
  font-size:9.5px; color:#999; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
.qp-hloc-chevron{ font-size:10px; color:#999; margin-left:2px; flex-shrink:0; }

/* Dropdown */
.qp-hloc-dropdown{
  position:absolute; top:calc(100% + 8px); left:-25%; width:280px; max-width:88vw;
  background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:10px; z-index:10021; display:none;
}
.qp-hloc-dropdown.open{ display:block; }

.qp-hloc-search-wrap{
  display:flex; align-items:center; gap:8px; background:#f4f4f4; border-radius:10px;
  padding:8px 12px; margin-bottom:8px;
}
.qp-hloc-search-wrap i{ color:#999; font-size:13px; }
.qp-hloc-search-wrap input{
  border:none; background:none; outline:none; font-size:13.5px; flex:1;
}

.qp-hloc-list{ display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.qp-hloc-item{
  display:flex; align-items:center; gap:8px; background:none; border:none;
  text-align:left; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:600;
  color:#333; cursor:pointer;
}
.qp-hloc-item:hover{ background:#fff3e6; color:#ff7b00; }
.qp-hloc-item i{ color:#ff7b00; font-size:12px; }
.qp-hloc-empty{ font-size:12.5px; color:#999; padding:10px; text-align:center; }

.qp-hloc-other{
  width:100%; margin-top:8px; border:1px dashed #ddd; background:none; border-radius:9px;
  padding:9px 10px; font-size:12.5px; font-weight:700; color:#666; cursor:pointer;
}
.qp-hloc-other i{ margin-right:4px; }

/* ── Tutorial: cortina + flecha apuntando al selector ── */
.qp-hloc-tutorial-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:10015;
  display:flex; flex-direction:column; align-items:center;
  padding-top:64px; cursor:pointer;
}
.qp-hloc-tutorial-arrow{
  color:#fff; font-size:30px; line-height:1; animation:qpArrowBounce 1s ease-in-out infinite;
  margin-bottom:8px;
}
.qp-hloc-tutorial-text{
  color:#fff; font-size:15px; font-weight:700; text-align:center; max-width:280px; line-height:1.4;
}
@keyframes qpArrowBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}