/*
 * Cabecera: versión móvil y contadores de carrito/wishlist.
 * No pasa por webpack: se enlaza directamente en templates/_partials/head.tpl,
 * después de los CSS del tema.
 */

/* Contadores (móvil y escritorio): solo se ven si hay algo en el carrito o en la wishlist.
   El carrito vacío lleva la clase .inactive; .is-empty la pone el script de header.tpl. */
.header-nav .blockcart.inactive .cart-products-count,
.header-nav .wishlist_count.is-empty {
  display: none !important;
}

/* Cabecera mobile: menú + favoritos | logo | búsqueda + carrito */
@media (max-width: 767.98px) {
  /* El tema deja 70px de margen por lado: los iconos van casi al borde */
  .header-wrapper .header-top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-wrapper .header-top .container-header {
    padding-left: 0;
    padding-right: 0;
  }

  .header-wrapper .header-top .header-nav .wrap-iconsTop {
    position: relative;
  }

  /* Orden de la derecha: búsqueda y carrito */
  .header-wrapper .header-top .header-nav .mobile-header-right .search-modal-mobile { order: 1; }
  .header-wrapper .header-top .header-nav .mobile-header-right #_mobile_user_info { order: 2; }
  .header-wrapper .header-top .header-nav .mobile-header-right #_mobile_cart { order: 3; }

  .header-wrapper .header-top .header-nav .mobile {
    width: 100%;
    margin: 0;
    align-items: center;
  }

  .header-wrapper .header-top .header-nav .mobile-header-left,
  .header-wrapper .header-top .header-nav .mobile-header-right {
    align-items: center;
    position: relative;
    z-index: 2;
  }

  /*
   * Iconos: todos a 24px con trazo de 1.5px, en SVG para que se vean nítidos.
   * Cada icono ocupa una caja de 32px para que sea fácil de pulsar.
   */

  /* Hamburguesa: líneas de 1px (un valor entero evita el borroso) */
  .header-wrapper .header-top .header-nav .mobile .ham-mobile {
    background: transparent;
    border-radius: 0;
    width: 32px;
    height: 32px;
  }

  .header-wrapper .header-top .header-nav .mobile .ham-mobile span {
    background: #000;
    height: 1px;
    width: 22px;
    left: 5px;
  }

  .header-wrapper .header-top .header-nav .mobile .ham-mobile span:first-child { top: 9px; }
  .header-wrapper .header-top .header-nav .mobile .ham-mobile span:nth-child(2) { top: 16px; }
  .header-wrapper .header-top .header-nav .mobile .ham-mobile span:nth-child(3) { top: 23px; }

  /* Favoritos */
  .header-wrapper .header-top .header-nav .mobile-header-wishlist {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 10px;
    color: #000;
  }

  /* Contador de la wishlist: mismo círculo que el del carrito */
  .header-wrapper .header-top .header-nav .mobile-header-wishlist__count {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 16px;
    height: 16px;
    line-height: 13px;
    border-radius: 100%;
    background: #b96f66;
    color: #fff;
    font-size: 10px;
    text-align: center;
  }

  /* Búsqueda */
  .header-wrapper .header-top .header-nav .mobile .search-modal-mobile {
    width: 32px;
    height: 32px;
    top: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M15.5 15.5 20.5 20.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  }

  /* Carrito: el PNG original del tema (19x21) en negro y a su tamaño nativo, sin escalar para que no se emborrone */
  .header-wrapper .header-top #_mobile_cart {
    margin: 0 0 0 10px;
  }

  .header-wrapper .header-top #_mobile_cart .blockcart {
    background: transparent;
    border-radius: 0;
    width: 32px;
    height: 32px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-wrapper .header-top #_mobile_cart .blockcart .header {
    position: relative;
    top: 0;
    padding: 0;
  }

  .header-wrapper .header-top #_mobile_cart .blockcart .shopping-cart {
    display: block;
    line-height: 0;
  }

  .header-wrapper .header-top #_mobile_cart .blockcart .shopping-cart img {
    filter: none;
    position: static;
    width: 19px;
    height: 21px;
  }

  .header-wrapper .header-top #_mobile_cart .blockcart .cart-products-count {
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    line-height: 13px;
    font-size: 10px;
    background: #b96f66;
    color: #fff;
  }

  /* Cliente logueado: no mostrar su nombre en la cabecera móvil */
  .header-wrapper .header-top .header-nav .user-info .account {
    display: none;
  }

  /* Logo centrado en la misma línea que los iconos */
  .header-wrapper .header-top .header-nav #_mobile_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
    max-width: 170px;
    z-index: 1;
  }

  .header-wrapper .header-top .header-nav #_mobile_logo .header-top-logo,
  #index .header-wrapper .header-top .header-nav #_mobile_logo .header-top-logo {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .header-wrapper .header-top .header-nav #_mobile_logo h1,
  .header-wrapper .header-top .header-nav #_mobile_logo a > div {
    margin: 0;
  }

  .header-wrapper .header-top .header-nav #_mobile_logo img {
    max-width: 100%;
    padding-top: 0;
  }
}