/* GANK · Header de escritorio (propuesta G, parte 2) · 2026-09-30 · hd4
   - Franja negra superior (.gank-topbar, marcado en desk-header-3.tpl): mensaje a la izquierda; Conocenos,
     Metodos de pago, Contactanos y telefono (blanco, con icono) a la derecha.
   - Buscador ancho: del logo hasta casi Mi cuenta, esquinas redondas, boton negro circular con lupa blanca.
   - Mi cuenta y carrito como iconos de linea, sin circulo gris; contador del carrito en amarillo.
   - El telefono de la barra del menu se oculta mientras la franja esta a la vista (sigue en el header pegado).
   Solo >= 992 px. Movil sin cambios. */
@media (min-width: 992px) {
  /* Franja superior */
  .gank-topbar { background: #141414; color: #e8e8e8; font-family: Montserrat, sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1; }
  .gank-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; padding-left: 15px; padding-right: 20px; }
  .gank-topbar__in::before, .gank-topbar__in::after { display: none; } /* clearfix del .container del tema: en flex ocupaba espacio */
  .gank-topbar__msg { margin: 0; color: #e8e8e8; font-size: 12.5px; }
  .gank-topbar__links { display: flex; align-items: center; gap: 26px; }
  .gank-topbar a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; color: #e8e8e8; text-decoration: none; font-weight: 500; }
  .gank-topbar a:hover { color: #ffc400; text-decoration: none; }
  .gank-topbar a:focus-visible { outline: 2px solid #ffc400; outline-offset: 2px; }
  .gank-topbar .gank-topbar__tel { color: #fff; font-weight: 600; }
  .gank-topbar__tel svg { flex: none; }

  /* Fila del logo: logo | buscador (todo el espacio) | iconos */
  #header .tvcmsdesktop-top-header-box { display: flex; flex-wrap: nowrap; align-items: center; }
  #header .tvcmsdesktop-top-header-box > .tvcms-header-logo-wrapper { flex: 0 0 auto; width: auto; max-width: none; }
  #header .tvcmsdesktop-top-header-box > .tvcmsheader-search { flex: 1 1 auto; width: auto; max-width: none; padding-left: 40px; padding-right: 20px; }
  #header .tvcmsdesktop-top-header-box > .tvcmsheader-nav-right { flex: 0 0 auto; width: auto; max-width: none; }

  /* Buscador (fuera del header pegado; el pegado conserva su acomodo de gank-staging-search / header-laptop) */
  #header #_desktop_search, #header #_desktop_search .search-widget, #header #_desktop_search .tvsearch-top-wrapper { width: 100%; }
  #header #_desktop_search .tvsearch-header-display-full form { display: flex; align-items: center; height: 48px; padding: 0 6px 0 22px; box-sizing: border-box;
    border: 1.5px solid #d9d9dc; border-radius: 24px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
  #header #_desktop_search .tvsearch-header-display-full form:focus-within { border-color: #a9c8f5; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); } /* hd2: azul muy suave; amarillo y negro solo como acentos */
  #header #_desktop_search .tvheader-top-search { flex: 1 1 auto; min-width: 0; }
  #header #_desktop_search .tvheader-top-search-wrapper-info-box { width: 100%; }
  #header #_desktop_search .tvcmssearch-words { width: 100%; height: 44px; padding: 0; border: 0; background: transparent; font-family: Montserrat, sans-serif; font-size: 14.5px; color: #1a1a1a; }
  #header #_desktop_search .tvcmssearch-words::placeholder { color: #8a8a90; opacity: 1; }
  #header #_desktop_search .tvcmssearch-words:focus { outline: none; }
  #header #_desktop_search .tvheader-top-search-wrapper { flex: 0 0 auto; width: auto; }
  #header #_desktop_search .tvheader-search-btn { width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #ffc400; color: #1a1a1a;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease; }
  #header #_desktop_search .tvheader-search-btn:hover { background: #f0b800; }
  #header #_desktop_search .tvheader-search-btn i.material-icons { width: auto; height: auto; font-size: 21px; line-height: 1; color: #1a1a1a; }

  /* Mi cuenta y carrito: iconos de linea */
  #header .tv-contact-account-cart-wrapper { display: flex; align-items: center; gap: 6px; }
  #header .tv-myaccount-btn-desktop i.material-icons.person,
  #header #_desktop_cart .tv-cart-icon i.material-icons { font-size: 0 !important; width: 24px; height: 24px; background: #1a1a1a; border-radius: 0;
    -webkit-mask: var(--gank-ico) center / 24px 24px no-repeat; mask: var(--gank-ico) center / 24px 24px no-repeat; }
  #header .tv-myaccount-btn-desktop i.material-icons.person {
    --gank-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
  #header #_desktop_cart .tv-cart-icon i.material-icons {
    --gank-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11h11L21 7H6.2'/%3E%3Ccircle cx='9' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E"); }
  #header .tv-myaccount-btn-desktop, #header #_desktop_cart .tv-cart-icon { background: transparent !important; }
  #header .tv-myaccount-btn-desktop i.material-icons.person { background-color: #1a1a1a; }
  #header #_desktop_cart .tv-cart-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  #header .tv-myaccount-btn-desktop { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  #header .tv-myaccount-btn-desktop:hover, #header #_desktop_cart .tvheader-cart-btn-wrapper a:hover .tv-cart-icon { background: #f4f4f5 !important; }
  #header #_desktop_cart .tvcart-icon-text-wrapper { position: relative; }
  #header #_desktop_cart .tv-cart-cart-inner { position: absolute; top: 2px; right: 0; }
  #header #_desktop_cart .cart-products-count { display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; background: #ffc400; color: #1a1a1a; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; }

  /* Telefono de la barra del menu: oculto mientras la franja esta a la vista; vuelve en el header pegado. */
  #header .tvcms-header-menu-offer-wrapper:not(.sticky) .tvcmsdesktop-contact { visibility: hidden; }

  /* hd3: header pegado. El tema mete el buscador en una caja blanca con borde izquierdo, relleno y sombra
     (gank-staging-search.css >= 1400 px y gank-header-laptop.css 992-1399 px) que se veia como un bloque incrustado.
     Aqui la caja queda transparente y solo se ve la pildora, centrada en la barra de 59 px. */
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper {
    background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 0 !important; }
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper form {
    width: 100% !important; height: 42px !important; }
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper .tvcmssearch-words {
    height: 40px !important; }

  /* hd4: menu de Mi cuenta con la misma forma que el panel del menu (esquinas inferiores redondas y sombra suave). */
  #header .tv-account-dropdown { min-width: 230px; padding: 8px; border: 0; border-radius: 0 0 14px 14px; background: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18); }
  #header .tv-account-dropdown > li { margin: 0; padding: 0; }
  #header .tv-account-dropdown > li a { display: flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px !important;
    border-radius: 10px; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 500; color: #1a1a1a; text-decoration: none; }
  #header .tv-account-dropdown > li a:hover { background: #f1f1f2; color: #1a1a1a; text-decoration: none; }
  #header .tv-account-dropdown > li a:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
}