/* Mobile header actions: keep account, wishlist and cart visible without clipping their badges. */
@media (max-width: 640px) {
  html body .fa-literal-header .fa-header-main {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: 42px 40px !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    padding: 4px 14px !important;
  }

  html body .fa-literal-header .fa-mobile-menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body .fa-literal-header .fa-header-main > a {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body .fa-literal-header .fa-header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body .fa-literal-header .fa-header-main > div:last-child {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    gap: 6px !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  html body .fa-literal-header .fa-header-main > div:last-child > a,
  html body .fa-literal-header .fa-header-main > div:last-child > a:first-child,
  html body .fa-literal-header .fa-header-main > div:last-child > a:nth-child(2),
  html body .fa-literal-header .fa-header-main > div:last-child > a:last-child {
    display: flex !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html body .fa-literal-header .fa-mobile-menu-trigger {
    width: 40px !important;
    min-width: 40px !important;
    height: 42px !important;
  }

  /* El panel solo necesita el ancho de sus enlaces; evita la franja blanca
     vacía que quedaba a la derecha en teléfonos estrechos. */
  html body .fa-literal-header .fa-mobile-menu-panel {
    width: 132px !important;
  }

  html body .fa-literal-header .fa-mobile-menu-trigger svg,
  html body .fa-literal-header .fa-header-main > div:last-child > a > svg,
  html body .fa-literal-header .fa-header-main > div:last-child > a > span:first-child,
  html body .fa-literal-header .fa-header-main > div:last-child > a > span:first-child > svg {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  html body .fa-literal-header .fa-header-main > div:last-child > a:first-child > svg {
    width: 32px !important;
    height: 32px !important;
  }
}