/* Cinta informativa / mantenimiento: reemplaza al topbar cuando esta activa.
   Degradado corporativo de botones con texto blanco (calidad de marca,
   contrasta con el navy comercial). */
.wsus__topbar.wsus__topbar--maintenance {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 55%, #0284c7 100%);
  border-bottom: 2px solid #0369a1;
}
/* sin el brillo inferior del navy: sobre celeste no aporta y ensucia */
.wsus__topbar.wsus__topbar--maintenance::after { display: none; }
.wsus__topbar_inner--center { justify-content: center; text-align: center; }
.wsus__announcement {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.wsus__announcement i {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  margin-right: 8px;
  vertical-align: -2px;
}
.wsus__announcement strong { font-weight: 800; }
.wsus__promo_m.wsus__promo_m--maintenance strong { font-weight: 800; }
.wsus__promo_m.wsus__promo_m--maintenance {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 55%, #0284c7 100%);
  color: #fff;
  border-bottom: 2px solid #0369a1;
}
.wsus__promo_m.wsus__promo_m--maintenance i { color: #fff; }
/* Boton WhatsApp compacto de la cinta: mismo numero que el boton fijo
   (storeWhatsappLink + contact_phone). Verde marca, pill pequeno. */
.wsus__announcement_wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: 10px;
}
.wsus__announcement_wa:hover { background: #1da851; color: #fff; }
/* pisa la pastilla del icono informativo para el icono WA dentro del boton */
.wsus__announcement .wsus__announcement_wa i,
.wsus__promo_m.wsus__promo_m--maintenance .wsus__announcement_wa i {
  width: auto;
  height: auto;
  background: none;
  color: #fff;
  font-size: 14px;
  margin-right: 0;
}
.wsus__promo_m.wsus__promo_m--maintenance .wsus__announcement_wa { margin-left: 0; padding: 4px 10px; }
@media (max-width: 991.98px) {
  /* la promo movil normal se oculta, pero la de mantenimiento si se muestra */
  .wsus__promo_m.wsus__promo_m--maintenance { display: flex !important; }
  /* Altura fija de la cinta en movil: el header es fixed y se desplaza
     exactamente esta medida (ver body.has-maintenance-bar). Una sola linea
     con ellipsis para que la altura no varie con el largo del texto. */
  .wsus__promo_m.wsus__promo_m--maintenance {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .wsus__promo_m.wsus__promo_m--maintenance span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: #fff;
  }
  /* el header fijo baja lo que mide la cinta; el contenido baja lo mismo
     para conservar el layout relativo intacto */
  body.has-maintenance-bar > header { top: 40px; }
  /* el header inteligente se sigue ocultando del todo al bajar (pisa el top:40px) */
  body.has-maintenance-bar > header.header_hidden { top: calc(0px - var(--hh, 72px)); }
  /* la cinta queda fija arriba al hacer scroll (por encima del header) */
  body.has-maintenance-bar .wsus__promo_m.wsus__promo_m--maintenance {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  body.has-maintenance-bar main.wsus__main { padding-top: 40px; }
  /* el buscador movil desplegable cuelga del header fijo */
  body.has-maintenance-bar .wsus__mobile_search_bar { top: 112px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  /* en tablet el header fijo mide 68px en vez de 72px */
  body.has-maintenance-bar .wsus__mobile_search_bar { top: 108px; }
}
.wsus__topbar {
  position: relative;
  background: linear-gradient(90deg, #001a3f 0%, #001f4a 50%, #00295f 100%);
  border-bottom: none;
  font-size: 12.5px;
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
/* linea base fina con contraste: brillo celeste al centro, se funde a los bordes */
.wsus__topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(56,189,248,0) 0%, rgba(56,189,248,.65) 50%, rgba(56,189,248,0) 100%);
  pointer-events: none;
}
.wsus__topbar_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.wsus__topbar_usp {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.wsus__topbar_usp span { color: rgba(255,255,255,.82); font-size: 12.5px; }
.wsus__topbar_usp i { color: #38bdf8; margin-right: 6px; font-size: 12px; }
.wsus__topbar_flash i { color: #fbbf24; }
.wsus__topbar_dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.25); flex: 0 0 auto; }
.wsus__topbar_links { display: flex; align-items: center; gap: 14px; }
.wsus__topbar_links a { color: rgba(255,255,255,.78); font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.wsus__topbar_links a i { font-size: 11px; color: #7dd3fc; }
.wsus__topbar_links a:hover { color: #fff; }
.wsus__topbar_sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
/* con el mini-carrito abierto la cinta se pliega como persiana OPACA
   (sin fundido: el fundido transparentaba y dejaba ver el fondo claro).
   Sincronizada con el sidebar (misma curva y 0.4s). */
body.mini_cart_open .wsus__topbar {
  max-height: 0 !important;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wsus__promo_m {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, #0284c7, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-align: center;
}
@media (max-width: 1199.98px) {
  .wsus__topbar_usp span:nth-child(5),
  .wsus__topbar_usp .wsus__topbar_dot:nth-child(4) { display: none; }
}
@media (max-width: 991.98px) {
  /* sin cinta en movil: recupera ~30px, evita ellipsis/saltos y el solape
     del buscador fijo (top:72px disenado sin promo encima) */
  .wsus__promo_m:not(.wsus__promo_m--maintenance) { display: none !important; }
  .wsus__promo_m--maintenance { display: flex !important; }
}
/* Drawer movil: los 3 botones (wishlist, cuenta, cierre visual) centrados verticalmente */
.wsus__mobile_menu_header_icon { display: inline-flex !important; align-items: center !important; }
/* boton rojo de cierre: es absolute contra todo el drawer (la barra no es relative),
   asi que se centra con top fijo: barra 72px - boton 30px = top 21px (19px en tablet 68px) */
.wsus__mobile_menu_close { top: 21px !important; transform: none !important; }
@media (min-width: 768px) and (max-width: 991.99px) {
  .wsus__mobile_menu_close { top: 19px !important; }
}
.wsus__mobile_menu_header_icon > li { display: inline-flex !important; align-items: center !important; }
.wsus__mobile_menu_header_icon > li > a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 31px !important; height: 31px !important; line-height: 1 !important; margin-right: 0 !important;
}
.wsus__mobile_menu_header_icon > li + li { margin-left: 12px; }
.wsus__mobile_menu_header_icon .wsus__mm_sep { margin-left: 14px !important; }
.wsus__mobile_menu_header_icon .wsus__mm_login a {
  background: linear-gradient(135deg, #0ea5e9, #0369a1) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 4px 14px rgba(14,165,233,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.wsus__mobile_menu_header_icon .wsus__mm_login a:active { transform: scale(.92); }
.wsus__mobile_menu_header_icon .wsus__mm_login_svg { font-size: 19px; }
.wsus__mobile_menu_header_icon .wsus__mm_account a,
.wsus__mobile_menu_header_icon .wsus__mm_login a { position: relative; display: inline-flex !important; align-items: center; justify-content: center; }
/* coherencia con el header: iconos del drawer en circulo (base era 3px) */
.wsus__mobile_menu_header_icon li a { border-radius: 50% !important; }
.wsus__mobile_menu_header_icon .wsus__mm_avatar {
  /* la foto llena todo el diametro del circulo (31px); el icono/svg conserva su padding */
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: none; padding: 0; display: block;
}
/* punto abajo-derecha del icono (esquina inferior derecha) */
.wsus__mobile_menu_header_icon .wsus__mm_dot {
  position: absolute; left: auto; top: auto; right: -3px; bottom: -3px;
  transform: none;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #001f4a; background: #22c55e;
  box-shadow: 0 0 0 2px rgba(0,31,74,.55);
}
.wsus__mobile_menu_header_icon .wsus__mm_dot.is-invite {
  background: #fbbf24;
  animation: mmPulse 1.8s ease-out infinite;
}
@keyframes mmPulse {
  0% { box-shadow: 0 0 0 2px rgba(0,31,74,.55), 0 0 0 0 rgba(251,191,36,.55); }
  70% { box-shadow: 0 0 0 2px rgba(0,31,74,.55), 0 0 0 7px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 2px rgba(0,31,74,.55), 0 0 0 0 rgba(251,191,36,0); }
}
/* badge de conteo en el drawer (rojo, numero pequeno; oculto si es 0) */
.wsus__mobile_menu_header_icon .wsus__mm_wish a { position: relative; }
.wsus__mobile_menu_header_icon .wsus__mm_count {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; text-align: center;
  box-shadow: 0 0 0 2px #001f4a, 0 2px 6px rgba(239,68,68,.5);
  pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
}
/* separador sutil entre iconos del drawer y boton de cierre rojo */
.wsus__mobile_menu_header_icon .wsus__mm_sep {
  width: 1px !important;
  height: 26px;
  align-self: center;
  margin-left: 4px;
  list-style: none !important;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(125,211,252,.7) 50%, rgba(255,255,255,0) 100%) !important;
}
/* ---- Estado vacio del buscador: icono caja + textos ---- */
.wsus__search_suggest_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px 20px;
  text-align: center;
}
.wsus__search_suggest_empty_icon {
  font-size: 46px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.wsus__search_suggest_empty p {
  font-size: 14px;
  font-weight: 600;
  color: #0b2c3d;
  line-height: 1.45;
}
.wsus__search_suggest_empty span {
  font-size: 12.5px;
  color: #8a99a6;
}
/* ---- Buscador movil: outline fino 1px ---- */
.wsus__mobile_search_bar form:focus-within {
  box-shadow: 0 0 0 1px #0284c7, 0 8px 24px rgba(2,60,110,.14);
}
/* iconos del footer del popover: color acento y tamano visibles (coherente menu) */
.wsus__search_suggest_link > i {
  color: #0284c7 !important;
  font-size: 15px !important;
  margin-right: 2px;
}
/* iconos del menu bajo el header: el menu desktop centra por line-height 50px
   (no usar flex aqui: rompe la linea base); en el drawer si va flex */
.wsus__menu_item > li > a > i {
  margin: 0 9px 0 0 !important;
  font-size: 15px;
  font-weight: 900;
  font-style: normal;
  color: inherit !important;
  vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
}
.wsus__mobile_menu_main_menu ul li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.wsus__mobile_menu_main_menu ul li a > i {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  color: inherit !important;
  -webkit-font-smoothing: antialiased;
}
/* separador vertical entre navegacion (Inicio..Contacto) y
   utilidades (Rastrear pedido): toda la altura */
.wsus__menu_item_right {
  border-left: 1px solid #e5e7eb !important;
  padding-left: 20px !important;
}
/* divisores entre cada item del menu (Inicio | Vendedores | Blog...),
   al 80% de alto y centrados */
.wsus__menu_item > li + li {
  position: relative;
}
.wsus__menu_item > li + li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: 1px;
  background: #eef1f5;
  pointer-events: none;
}
/* ---- Footer tags en PC: las 4 en una sola fila tipo grid ---- */
@media (min-width: 992px) {
  .wsus__search_suggest_links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .wsus__ssl_track { display: contents; }
  .wsus__ssl_dup { display: none !important; }
  .wsus__search_suggest_link {
    justify-content: center;
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ---- Popover inteligente: ocupa todo el alto disponible (100dvh menos la
   barra fija) y el scroll solo aparece si el contenido desborda ---- */
.wsus__mobile_search_bar .wsus__search_suggest.is-open {
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wsus__mobile_search_bar .wsus__search_suggest_links {
  position: sticky;
  bottom: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0;
}
/* ---- Footer tags en slider (solo barra movil) ---- */
.wsus__mobile_search_bar .wsus__ssl_track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sslSlide 12s linear infinite;
}
.wsus__mobile_search_bar .wsus__ssl_dup {
  display: flex;
  align-items: center;
}
.wsus__mobile_search_bar .wsus__search_suggest_link {
  flex: 0 0 auto;
  margin-right: 8px;
  white-space: nowrap;
}
.wsus__mobile_search_bar .wsus__search_suggest_links:hover .wsus__ssl_track,
.wsus__mobile_search_bar .wsus__search_suggest_links:active .wsus__ssl_track {
  animation-play-state: paused;
}
@keyframes sslSlide {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wsus__mobile_search_bar .wsus__ssl_track { animation: none; }
  .wsus__mobile_menu_header_icon .wsus__mm_dot.is-invite { animation: none; }
  .wsus__mobile_menu_header_icon .wsus__mm_login a:active { transform: none; }
}
@media (max-width: 575.98px) {
  .wsus__promo_m { font-size: 11.5px; }
  .wsus__promo_m span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Moneda con contexto: agrupa label + toggle, quita separador huerfano del contacto eliminado */
.wsus__currency_selector {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 2px !important;
  padding-left: 0 !important;
  border-left: none !important;
}
.ctoggle__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.ctoggle__label i { font-size: 12px; color: #7dd3fc; }
/* Login con presencia: pill blanco destaca sobre iconos glass */
.wsus__login_item { margin-left: 2px; }
.wsus__login_pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #001f4a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1px solid #fff !important;
  white-space: nowrap;
  text-decoration: none;
}
.wsus__login_pill .wsus__login_svg { color: #0369a1; font-size: 19px; flex: 0 0 auto; }
.wsus__login_pill:hover { box-shadow: 0 8px 20px rgba(0,0,0,.3); transform: translateY(-1px); }
/* avatar del logeado en header PC: la foto llena todo su circulo (40px);
   el icono conserva su tamano y aire como esta */
.wsus__avatar_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.12);
  display: block;
}
/* contadores del header (wishlist + bolso) unificados con el badge del drawer:
   rojo #ef4444, borde blanco, numero pequeno extrabold */
.wsus__icon_area li a span#wishlist_count,
.wsus__icon_area li a span#cart-count {
  background: #ef4444 !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  width: auto !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px #001f4a, 0 2px 6px rgba(239,68,68,.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* resetea el estilo de badge que .wsus__icon_area li a span impone al texto */
.wsus__login_pill span {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #001f4a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
@media (max-width: 991.98px) {
  /* en movil/tablet el login es solo icono circular (sin texto) */
  .wsus__login_pill { height: 44px !important; width: 44px !important; padding: 0 !important; justify-content: center; }
  .wsus__login_pill span { display: none !important; }
  .wsus__login_pill .wsus__login_svg { font-size: 21px; }
}
@media (max-width: 575.98px) {
  .wsus__login_pill { height: 38px !important; width: 38px !important; }
  .wsus__login_pill .wsus__login_svg { font-size: 19px; }
  .wsus__avatar_img { width: 24px; height: 24px; }
  /* hibrido en telefonos: wishlist y cuenta viven en el drawer;
     en el header quedan buscar + carrito */
  .wsus__act_wishlist,
  .wsus__login_item,
  .wsus__points_icon { display: none !important; }
}