/* ALTHA · V9: franja de especialidades y búsqueda modal, bajo la franja.
   Este archivo se carga ÚLTIMO para no modificar el resto del sitio. */
:root{--altha-promo-height:35px}
.altha-announce-bar{
  position:sticky;top:0;z-index:211;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--altha-promo-height);min-height:var(--altha-promo-height);
  padding:0 12px;background:#F48C54;color:#161B1F;
  border-bottom:1px solid rgba(22,27,31,.24);
  font:800 clamp(10px,1.15vw,12px)/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.095em;text-align:center;
  white-space:nowrap;
}
.altha-announce-bar .announce-dot{margin:0 .55em;font-weight:900}
.header,body.drawer-open .header{
  position:sticky!important;top:var(--altha-promo-height)!important;
}
html{scroll-padding-top:calc(var(--altha-promo-height) + var(--altha-nav-height,75px) + 12px)}
/* Se mantiene intacta la X móvil y la barra original, que ahora empieza más abajo. */
@media(max-width:900px){
  :root{--altha-promo-height:32px}
  .altha-announce-bar{font-size:10.5px;letter-spacing:.035em}
  .mobile-drawer,body.drawer-open .mobile-drawer{
    top:calc(var(--altha-promo-height) + var(--altha-nav-height,69px))!important;
    bottom:0!important;
    inset:calc(var(--altha-promo-height) + var(--altha-nav-height,69px)) 0 0 0!important;
    height:calc(100dvh - var(--altha-promo-height) - var(--altha-nav-height,69px))!important;
    max-height:calc(100dvh - var(--altha-promo-height) - var(--altha-nav-height,69px))!important;
    min-height:0!important;
  }
  /* Las categorías se animan por JS, con la misma tipografía y colores actuales. */
  .mobile-drawer .drawer-accordion #drawer-categories{will-change:height,opacity}
}
@media(max-width:360px){
  .altha-announce-bar{font-size:9.5px;letter-spacing:0}
  .altha-announce-bar .announce-dot{margin:0 .35em}
}
/* Al abrir, el buscador empieza exactamente DEBAJO de la franja naranja.
   Aparece inmediatamente; no desciende desde arriba. */
#search-dialog.search-overlay,
#search-dialog.search-overlay[open]{
  position:fixed!important;
  top:var(--altha-promo-height)!important;
  left:0!important;right:0!important;bottom:auto!important;
  inset:var(--altha-promo-height) 0 auto 0!important;
  width:100vw!important;max-width:100vw!important;
  height:auto!important;min-height:0!important;
  max-height:calc(100dvh - var(--altha-promo-height))!important;
  margin:0!important;border:0!important;border-radius:0!important;
  background:#080A0B!important;color:#F9F8F0!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
  animation:none!important;transition:none!important;transform:none!important;
}
#search-dialog[open]{display:flex!important;flex-direction:column!important}
#search-dialog::backdrop{
  background:linear-gradient(to bottom,
    transparent 0,transparent var(--altha-promo-height),
    rgba(244,140,84,.57) var(--altha-promo-height),rgba(244,140,84,.57) 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#search-dialog .shop-search-top{
  padding:15px clamp(12px,3.5vw,26px) 14px!important;
}
#search-dialog .shop-search-row{max-width:990px!important}
#search-dialog .shop-search-content{
  flex:0 1 auto!important;min-height:0!important;
  max-height:calc(100dvh - var(--altha-promo-height) - 115px)!important;
  overflow:auto!important;
  padding:8px clamp(12px,3.5vw,26px) 22px!important;
}
#search-dialog .shop-search-content .popular-searches{
  display:flex!important;flex-wrap:wrap!important;white-space:normal!important;
  overflow:visible!important;gap:8px!important;
  padding:0!important;margin:9px 0 5px!important;
}
#search-dialog .shop-search-content .popular-tag{
  flex-shrink:0!important;
}
#search-dialog .shop-search-bottom{display:none!important}
#search-dialog #quick-results:empty{display:none!important}
#search-dialog #quick-results:not(:empty){padding-top:8px}
#search-dialog #quick-results .shop-results-group{grid-template-columns:1fr!important}
@media(max-width:900px){
  #search-dialog .shop-search-top{padding:12px 10px 10px!important}
  #search-dialog .shop-search-content{padding:7px 13px 18px!important}
}
@media(prefers-reduced-motion:reduce){
  .mobile-drawer .drawer-accordion #drawer-categories{will-change:auto}
}

/* Apertura del buscador: fundido sobre el encabezado, como en el video.
   Se anima solo la entrada; no se modifican medidas, posición ni estilos. */
@keyframes altha-buscador-entrada {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#search-dialog.search-overlay[open] {
  animation: altha-buscador-entrada 260ms ease-out both !important;
}
#search-dialog[open]::backdrop {
  animation: altha-buscador-entrada 260ms ease-out both !important;
}
@media (prefers-reduced-motion: reduce) {
  #search-dialog.search-overlay[open],
  #search-dialog[open]::backdrop { animation: none !important; }
}